/*
  ══ YAZI TIPI ════════════════════════════════════════════════════
  Onceki surumde `--yazi-baslik: 'Segoe UI Black', 'Arial Black'...`
  yaziyordu: sistem yazi tipi.  Oyun her makinede BASKA bir yuzle
  aciliyordu ve hicbirinde "oyun" gibi gorunmuyordu
  ([[ai-gibi-duruyor-teshisi]]).

  Rubik degisken (400-900) ve UC altkumesi birlikte oyunun uc dilini
  de kapsiyor:
      latin       -> Ingilizce
      latin-ext   -> Turkce (ı ğ ş ç ö ü İ)
      cyrillic    -> Rusca (А-я)
  Tarayici `unicode-range` sayesinde yalnizca ekrandaki harflerin
  bulundugu dosyayi indiriyor; Ingilizce oynayan 35 KB aliyor.

  Dosyalar projede — CDN YOK.  Portal zip'i cevrimdisi aciliyor ve
  disaridan gelen yazi tipi istegi orada sessizce dusuyor.
*/
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/rubik-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/*
  stil.css — HUD.

  ── OLCU BIRIMI
  Butun sayilar `--u` cinsinden.  `--u` referans ekran YUKSEKLIGININ
  %1'i: her CSS sayisi 1919x1079'luk ekran goruntusunden okunup
  10.79'a bolundu ([[tirmanma-kulesi-projesi]]'nde ayni yontem).

  Duz `1vh` kullanilmadi: 390 piksel yuksekliginde yatay bir telefonda
  1vh = 3.9px ve seviye cubugu 20 piksel kaliyordu.  `clamp` alt ve
  ust sinir koyuyor.

  ── HUD TIKLAMAYI YUTMASIN
  Kapsayicilar `pointer-events:none`, yalniz dugmeler `auto`.  Bu
  kural olmadan tuvale hicbir tiklama ulasmiyor ve oyun oynanmiyor
  ([[canvas-girdi-yutan-katman]]).

  ── KONTURSUZ BEYAZ METIN YOK
  Referanstaki her yazi kalin siyah konturlu.  `-webkit-text-stroke`
  tek basina harfleri iceri dogru yiyor; `paint-order: stroke fill`
  sart.
*/

:root {
  /*
    ── OLCU BIRIMI: NEDEN SADECE `1vh` DEGIL
    Duz `clamp(7px, 1vh, 14px)` kucuk ekranda TABANA yapisiyordu ve
    HUD orantisal olarak BUYUYORDU: 667x375'te seviye cubugu ekran
    genisliginin %65'ini kapliyordu (1920x1080'de %35).  Yani ekran
    kuculdukce arayuz buyuyor — sahibinin "her cihazda ayni buyuklukte
    olsun" istedigi seyin tam tersi.

    Yeni bicim yuksekligi TABAN alir (16:9'da yerlesim birebir ayni
    kalir) ama genislikle de sinirlar: cok dar / dikey ekranda `1vh`
    arayuzu tasiriyordu.
      1920x1080 -> min(10.8, 11.1) = 10.8   (referans olcumu korunuyor)
      1280x720  -> min(7.2, 7.4)   = 7.2
      844x390   -> 3.9/4.9 -> taban 5.6
      390x844   -> min(8.4, 2.3)   = 2.3 -> taban 5.6
    Ayrica genis ogeler ayrica `vw` ile de sinirli (asagida), boylece
    taban devreye girdiginde bile hicbir sey ekrandan tasmiyor.
  */
  --u: clamp(5.6px, min(1vh, 0.58vw), 13px);

  --yazi-baslik: 'Rubik', 'Segoe UI Black', 'Arial Black', sans-serif;
  --yazi-govde: 'Rubik', 'Segoe UI', Tahoma, sans-serif;

  --kontur: #0d0f14;
  --panel: rgba(22, 24, 32, .80);
  --panel-kenar: #0d0f14;

  --para: #4dff4d;
  --cevher: #ff5c9a;
  --altin: #ffd23a;
  --guc: #ffb020;

  /*
    ── PLAKA DOKUSU
    Referanstaki her kart ve dugmenin uzerinde Roblox'un "stud plate"
    deseni var: kucuk L bicimli koseler, biri acik biri koyu.  Duz
    renkli yuzeyler yaninda bu doku, arayuzu "cizilmis" degil
    "uretilmis" gosteren tek en buyuk fark (referans r11 buyutuldu).
    Dis dosya degil, satir ici SVG: ek istek yok, her olcekte net.
  */
  --plaka: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path d='M4 4h10v10' fill='none' stroke='%23ffffff' stroke-opacity='.17' stroke-width='1.7'/><path d='M4 4v10h10' fill='none' stroke='%23000000' stroke-opacity='.15' stroke-width='1.7'/></svg>");
  --plaka-boy: calc(var(--u) * 1.9);

  /*
    ── PAH (bevel)
    Ustte ic acik cizgi + altta ic koyu cizgi + disa dusen govde
    golgesi.  Ucu birlikte olmadan dugme "duz renkli dikdortgen"
    kaliyor; referansta hepsi var.
  */
  --pah: inset 0 calc(var(--u) * .30) 0 rgba(255, 255, 255, .45),
         inset 0 calc(var(--u) * -.55) 0 rgba(0, 0, 0, .30),
         0 calc(var(--u) * .34) 0 rgba(0, 0, 0, .42);
  --pah-basili: inset 0 calc(var(--u) * .30) 0 rgba(255, 255, 255, .30),
                inset 0 calc(var(--u) * -.20) 0 rgba(0, 0, 0, .26);

  --nadir-siradan: #8ea6cf;
  --nadir-siradanOlmayan: #57c257;
  --nadir-nadir: #4aa8e8;
  --nadir-epik: #a05ce0;
  --nadir-efsanevi: #f08a2c;
}

/* Dokunmatikte parmak icin biraz daha buyuk taban; ayri ayri
   dokunma hedeflerinin px tabani asagida (min-height/min-width). */
body.dokunmatik { --u: clamp(6.4px, min(1.06vh, 0.62vw), 13px); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0b1016;
  font-family: var(--yazi-govde); font-weight: 600;
  color: #fff;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

canvas#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/*
  Konturlu yazi — referanstaki butun HUD metni boyle.  Onceden
  yalniz `.kt` sinifi tasiyordu ve o sinif SADECE index.html'deki
  duragan HUD'a yaziliyordu: panellerin icini `arayuz.js` uretiyor
  ve orada hicbir yazinin konturu yoktu.  Kural artik iki katmana
  birden veriliyor, tek tek sinif yazmaya gerek kalmiyor.
*/
.kt,
#hud b, #hud span, #hud em, #hud i, #hud button, #hud div,
#panel-katman .satir, #panel-katman .hucre,
#panel-katman .al, #panel-katman .kutu > header,
#panel-katman .bos-yazi, #panel-katman .secim button {
  -webkit-text-stroke: calc(var(--u) * .28) var(--kontur);
  paint-order: stroke fill;
}
/* Kontur kucuk puntoda harfleri kapatiyor — ince yazilarda inceltilir. */
.satir .nadir, .menu-dugme, .paket .ust, .fiyat-ust, #oto-tikla .ust,
.takviye, #bedava, .hucre {
  -webkit-text-stroke-width: calc(var(--u) * .20);
}

/* ══ Katmanlar ═════════════════════════════════════════════════════ */

#hud, #dunya-katman, #panel-katman {
  position: fixed; inset: 0; pointer-events: none; z-index: 10;
}
#panel-katman { z-index: 30; }
#dunya-katman { z-index: 12; overflow: hidden; }

#hud button, #hud .tiklanir, #panel-katman .kutu { pointer-events: auto; }

/* ══ Ust orta: seviye cubugu ═══════════════════════════════════════
   Olculer: cubuk 665x55 px @1080p -> 61.6u x 5.1u, ust 2.3u.
   Ikon kutusu 55px kare, yazi 38px (3.5u).                          */

#ust-orta {
  position: absolute; top: calc(var(--u) * 2.3); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .5);
}

/* Yatak SEFFAF: referansta cubugun bos kismindan dunya goruluyor
   (r00 buyutuldu).  Dolu koyu bir seride ciziyorduk ve cubuk hep
   "dolu" gibi duruyordu. */
#seviye-kutu {
  display: flex; align-items: stretch;
  width: min(calc(var(--u) * 61.6), 62vw); height: calc(var(--u) * 5.6);
  background: rgba(16, 18, 24, .34);
  border: calc(var(--u) * .52) solid var(--kontur);
  border-radius: calc(var(--u) * .9);
  position: relative; overflow: hidden;
  box-shadow: 0 calc(var(--u) * .40) 0 rgba(0, 0, 0, .45),
              inset 0 calc(var(--u) * .26) 0 rgba(255, 255, 255, .16);
}

#seviye-ikon {
  flex: 0 0 calc(var(--u) * 6.1);
  border-right: calc(var(--u) * .42) solid var(--kontur);
  background-image: var(--sim-guc), var(--plaka), linear-gradient(#ffe37a, #f2960f);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: center, 0 0, center;
  background-size: 80% 80%, var(--plaka-boy), 100% 100%;
}

/* Sol kenar IKONUN GENISLIGI kadar: ikon 6.1u olunca dolgu onun
   altina 7 px giriyordu (olculdu). */
#seviye-dolgu {
  position: absolute; left: calc(var(--u) * 6.1); top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(180deg, #ffe98a 0%, #ffc93a 46%, #f2960f 100%);
  transition: width .22s ease-out;
}
/* Sol kenardan sonen yumusak parilti — duz dolan cubuk "AI" duruyor */
#seviye-dolgu::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%);
}

#seviye-yazi {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--u) * 1.1);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 3.7);
  line-height: 1;
  text-shadow: 0 calc(var(--u) * .22) calc(var(--u) * .3) rgba(0, 0, 0, .55);
}

#guc-yazi {
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 3.0);
  text-shadow: 0 calc(var(--u) * .22) calc(var(--u) * .3) rgba(0, 0, 0, .55);
}

/* Tarladayken cubugun yerini alan bolge etiketi (referans: "Temel") */
#bolge-kutu {
  display: none;
  align-items: center; justify-content: center;
  min-width: calc(var(--u) * 24);
  height: calc(var(--u) * 5.6);
  padding: 0 calc(var(--u) * 2.4);
  background: var(--plaka), linear-gradient(180deg, #b6dcf8, #3f86d4);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .50) solid var(--kontur);
  border-radius: calc(var(--u) * .8);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 3.4);
  box-shadow: var(--pah);
}

/*
  ── MENUDEYKEN HUD YOK
  Ana menu canli sahnenin ustunde duruyor; arkada seviye cubugu,
  magaza dugmeleri ve sayaclar kalirsa menu "duraklatilmis oyun"
  gibi okunuyor ve duvar kagidi kompozisyonu bozuluyor.
*/
body.menude #hud,
body.menude #dok-kontrol,
body.menude #dunya-katman,
body.menude #panel-katman,
body.menude #olay-yazi { display: none !important; }

body.tarlada #seviye-kutu, body.tarlada #guc-yazi { display: none; }
body.tarlada #bolge-kutu { display: flex; }

/* ══ Otomatik tikla ════════════════════════════════════════════════ */

#oto-tikla {
  position: absolute;
  top: calc(var(--u) * 2.2);
  right: calc(var(--u) * 1.2);
  /*
    ── SABIT GENISLIK ICERIGI KIRPIYORDU
    17.1u = 123 px'ti; yazi buyutulunce "OP Auto Click" 123 pikselin
    disina tasti ve kose kirpik goruldu.  Genislik artik ICERIKTEN
    turuyor, ust sinir ekranin %26'si.
  */
  min-width: calc(var(--u) * 17.1); max-width: 26vw;
  height: calc(var(--u) * 5.8);
  padding: 0 calc(var(--u) * .9);
  white-space: nowrap;
  background: var(--plaka), linear-gradient(180deg, #ffe796, #f0a52a);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .46) solid var(--kontur);
  border-radius: calc(var(--u) * .7);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * .1);
  font-family: var(--yazi-baslik); font-weight: 900;
  cursor: pointer;
  box-shadow: var(--pah);
}
#oto-tikla:active { transform: translateY(calc(var(--u) * .18)); box-shadow: none; }
#oto-tikla .ust { font-size: max(12.5px, calc(var(--u) * 1.75)); letter-spacing: 0; }
#oto-tikla .ust b { color: #a855f7; }
#oto-tikla .ust i { color: #22c55e; font-style: normal; }
#oto-tikla .ust em { color: #ec4899; font-style: normal; }
#oto-tikla .alt {
  display: flex; align-items: center; gap: calc(var(--u) * .35);
  font-size: max(12.5px, calc(var(--u) * 1.9));
  color: #e02020;
}
#oto-tikla.acik .alt { color: #16a34a; }
#oto-tikla .alt::before {
  content: ''; width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7);
  background: var(--sim-fare) center/contain no-repeat;
}

/* ══ Sol alt: sayaclar ═════════════════════════════════════════════
   Referans: 3 satir, satir 48px (4.4u), adim 57px (5.3u), sol 1.5u.  */

/* Sira referanstaki gibi USTTEN ALTA: yaprak, sirt cantasi, cevher,
   para.  `column-reverse` ile DOM sirasi tersine donuyordu ve para
   en uste cikiyordu. */
#sayaclar {
  position: absolute; left: calc(var(--u) * 1.5); bottom: calc(var(--u) * 3.2);
  display: flex; flex-direction: column; gap: calc(var(--u) * .85);
}

/* Referansta bu uc cip ekranin SOL KENARINDAN tasiyor: sol kose
   duz, kenarlik yalniz ust/sag/alt.  Ikon satir yuksekliginin
   neredeyse tamami, sayi kalin ve konturlu. */
.sayac {
  display: flex; align-items: center; gap: calc(var(--u) * .75);
  height: calc(var(--u) * 5.0);
  padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * .8);
  margin-left: calc(var(--u) * -1.5);
  background: rgba(30, 32, 42, .50);
  border: calc(var(--u) * .38) solid var(--kontur);
  border-left: none;
  border-radius: 0 calc(var(--u) * .7) calc(var(--u) * .7) 0;
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 3.2);
  min-width: calc(var(--u) * 14);
  box-shadow: 0 calc(var(--u) * .28) 0 rgba(0, 0, 0, .35);
}
.sayac i {
  width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6);
  background: center/contain no-repeat;
  flex: 0 0 auto;
  filter: drop-shadow(0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .5));
}
.sayac.para b { color: var(--para); }
.sayac.canta i { background-image: var(--sim-canta); }
.sayac.cevher i { background-image: var(--sim-cevher); }
.sayac.para i { background-image: var(--sim-para); }
.sayac.yaprak i { background-image: var(--sim-yaprak); }
.sayac.yaprak { display: none; }
body.kalinti-acik .sayac.yaprak { display: flex; }

/* ══ Sol sutun: menu ═══════════════════════════════════════════════ */

#sol-sutun {
  position: absolute; left: calc(var(--u) * 1.5); top: calc(var(--u) * 24.8);
  display: flex; flex-direction: column; gap: calc(var(--u) * .8);
  width: min(calc(var(--u) * 21), 27vw);
}

#hedef-kutu {
  height: calc(var(--u) * 7.6);
  background: var(--plaka), linear-gradient(180deg, rgba(58, 63, 78, .82), rgba(12, 14, 20, .84));
  background-size: var(--plaka-boy), 100% 100%;
  box-shadow: var(--pah);
  border: calc(var(--u) * .40) solid var(--kontur);
  border-radius: calc(var(--u) * .8);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--yazi-baslik); font-weight: 900;
  /* Olculdu: 1.9u = 13.7 px.  Yazi birimlerinin PX TABANI var
     (bkz. --yb) — kisa ekranda etiket 6 piksele dusuyordu. */
  font-size: max(13px, calc(var(--u) * 2.15));
  line-height: 1.05;
  padding: 0 calc(var(--u) * .5);
}

#menu-izgara {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .75);
}

.menu-dugme {
  position: relative;
  height: calc(var(--u) * 11.4);
  background: var(--plaka), linear-gradient(180deg, rgba(96, 104, 126, .72), rgba(26, 29, 38, .78));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .44) solid var(--kontur);
  border-radius: calc(var(--u) * 1.0);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: calc(var(--u) * .7);
  cursor: pointer;
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(13px, calc(var(--u) * 2.0));
  line-height: 1.02;
  color: #fff;
  text-align: center;
  letter-spacing: -.01em;
  box-shadow: var(--pah);
}
.menu-dugme:active { transform: translateY(calc(var(--u) * .3)); box-shadow: var(--pah-basili); }
.menu-dugme .sim {
  position: absolute; top: calc(var(--u) * .45); left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u) * 7.0); height: calc(var(--u) * 7.0);
  background: center/contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .55));
}
.menu-dugme .rozet {
  position: absolute; top: calc(var(--u) * -.5); right: calc(var(--u) * .2);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(12.5px, calc(var(--u) * 2.0));
  color: #fff;
  text-shadow: 0 0 calc(var(--u) * .5) #000, 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .8);
}
.menu-dugme.sari { color: var(--altin); }
.menu-dugme.sari .rozet { color: var(--altin); }
.menu-dugme.parlak { box-shadow: 0 0 calc(var(--u) * 1.6) rgba(255, 220, 90, .55); }

/* ══ Sag sutun: cevher magazasi ════════════════════════════════════ */

#sag-sutun {
  position: absolute; right: calc(var(--u) * 1.2); top: calc(var(--u) * 21.5);
  width: min(calc(var(--u) * 20.1), 26vw);
  max-height: 72vh; overflow: visible;
  display: flex; flex-direction: column; align-items: stretch;
  gap: calc(var(--u) * .35);
}

.fiyat-ust {
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(12.5px, calc(var(--u) * 2.05));
  color: #67ff8a;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .4);
}
.fiyat-ust i {
  width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9);
  background: var(--sim-cevher) center/contain no-repeat;
}

/* Blok: fiyat + ana dugme + reklam dugmesi bir arada, bloklar
   arasinda nefes payi.  Sutun boyle okunuyor. */
.sag-oge {
  display: flex; flex-direction: column; align-items: stretch;
  gap: calc(var(--u) * .2);
  margin-bottom: calc(var(--u) * 1.5);
}

/* Ikon ARTIK ORTADA DEGIL: 42% boyunda ortalanmis pazi resmi
   yazinin arkasina biniyor ve "x2 Guc" okunmuyordu (r19'da
   referansta da dugmede yalniz yazi var).  Ikon sola alindi. */
.sag-dugme {
  height: calc(var(--u) * 7.2);
  border: calc(var(--u) * .46) solid var(--kontur);
  border-radius: calc(var(--u) * .8);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 3.0);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * .5);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: calc(var(--u) * .7) center, 0 0, center;
  background-size: calc(var(--u) * 4.2) auto, var(--plaka-boy), 100% 100%;
  padding-left: calc(var(--u) * 4.4);
  box-shadow: var(--pah);
  text-shadow: 0 calc(var(--u) * .2) calc(var(--u) * .3) rgba(0, 0, 0, .5);
}
.sag-dugme:active { transform: translateY(calc(var(--u) * .3)); box-shadow: var(--pah-basili); }
.sag-dugme.guc { background-image: var(--sim-guc), var(--plaka), linear-gradient(180deg, #ffe79a, #ee9d18); }
.sag-dugme.paraD { background-image: var(--sim-para), var(--plaka), linear-gradient(180deg, #aef58c, #33a51c); }

.paket {
  display: flex; flex-direction: column; align-items: flex-end;
  cursor: pointer;
  margin-top: calc(var(--u) * .5);
}
.paket .ust {
  display: flex; align-items: center; gap: calc(var(--u) * .3);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(12.5px, calc(var(--u) * 2.0));
  color: #67ff8a;
}
.paket .ust i {
  width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7);
  background: var(--sim-cevher) center/contain no-repeat;
}
/* Referansta paketlerin cercevesi YOK: buyuk altin pazi ikonu ve
   altinda kalin konturlu yazi.  Dugme kabugu koyunca sag sutun on
   ayri kutuya bolunup kalabaliklasiyordu. */
.paket .govde {
  display: flex; align-items: center; gap: calc(var(--u) * .25);
  font-family: var(--yazi-baslik); font-weight: 900; font-size: calc(var(--u) * 3.4);
  text-shadow: 0 calc(var(--u) * .22) calc(var(--u) * .32) rgba(0, 0, 0, .6);
}
.paket .govde i {
  width: calc(var(--u) * 6.0); height: calc(var(--u) * 6.0);
  background: var(--sim-guc) center/contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * .22) 0 rgba(0, 0, 0, .5));
}
.paket:active { transform: translateY(calc(var(--u) * .25)); }
.paket:hover .govde i { filter: drop-shadow(0 0 calc(var(--u) * .9) rgba(255, 220, 120, .85)); }

#bedava {
  align-self: flex-end;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; margin-top: calc(var(--u) * .8);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(12.5px, calc(var(--u) * 1.85));
  color: var(--altin);
}
#bedava i {
  width: calc(var(--u) * 5.8); height: calc(var(--u) * 5.8);
  background: var(--sim-hediye) center/contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * .22) 0 rgba(0, 0, 0, .5));
}
#bedava:not(.bekliyor) i { animation: hediye-sallan 2.4s ease-in-out infinite; }
@keyframes hediye-sallan {
  0%, 72%, 100% { transform: rotate(0); }
  78% { transform: rotate(-9deg); }
  86% { transform: rotate(9deg); }
  92% { transform: rotate(-5deg); }
}
#bedava.bekliyor { filter: grayscale(.7) brightness(.75); }

/* ══ Sag alt: takviye sayaclari ════════════════════════════════════ */

#takviyeler {
  position: absolute; right: calc(var(--u) * 1.2); bottom: calc(var(--u) * 1.6);
  display: flex; gap: calc(var(--u) * 1.4); align-items: flex-end;
}
.takviye {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(12.5px, calc(var(--u) * 1.8));
}
.takviye .sim {
  width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8);
  background: center/contain no-repeat; position: relative;
  filter: drop-shadow(0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .55));
}
.takviye .carpan {
  position: absolute; top: calc(var(--u) * -.9); right: calc(var(--u) * -1.1);
  font-size: calc(var(--u) * 1.5);
}
.takviye.guc .sim { background-image: var(--sim-guc); }
.takviye.paraT .sim { background-image: var(--sim-para); }
.takviye.kurbaga .sim { background-image: var(--sim-kurbaga); }

/* ══ Ortadaki ipucu ════════════════════════════════════════════════ */

/* ══ Ogretici ══════════════════════════════════════════════════════
   Tek kart, buyuk ikon, kisa cumle.  Oyunu DURDURMUYOR — cocuk
   okumadan oynamaya baslarsa da oyun akiyor. */
/*
  Kart EKRANIN ALTINDA.  `top: 30u`'da duruyordu ve 375x812'de
  (--u tabanda, 5.6px) tam sol menunun uzerine oturuyordu: "Yeniden
  dogus" ve "Magaza" dugmeleri kartin altinda kaliyordu (olculdu).
  Alt orta hem bos hem de oyuncunun zaten baktigi yer; dokunmatikte
  dugmelerin ustunde kaliyor.
*/
#ogretici {
  position: absolute; left: 50%; bottom: calc(var(--u) * 11);
  transform: translateX(-50%) scale(.9);
  display: none; align-items: center; gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4);
  max-width: min(calc(var(--u) * 62), 80vw);
  background: var(--plaka), linear-gradient(180deg, rgba(46, 50, 66, .92), rgba(14, 16, 24, .92));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .52) solid var(--kontur);
  border-radius: calc(var(--u) * 1.4);
  box-shadow: var(--pah);
  opacity: 0; transition: opacity .3s, transform .3s;
}
body.dokunmatik #ogretici { bottom: calc(var(--u) * 21); }
#ogretici.gorunur { display: flex; opacity: 1; transform: translateX(-50%) scale(1); }
#ogretici i {
  width: calc(var(--u) * 7.5); height: calc(var(--u) * 7.5);
  background: center/contain no-repeat;
  flex: 0 0 auto;
  animation: ogr-zipla 1.1s ease-in-out infinite;
}
@keyframes ogr-zipla { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -.7)); } }
#ogretici b {
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(15px, calc(var(--u) * 3.0));
  line-height: 1.1;
}

#ipucu {
  position: absolute; top: calc(var(--u) * 21); left: 50%;
  transform: translateX(-50%);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 2.9);
  text-align: center; white-space: nowrap;
  opacity: 0; transition: opacity .3s;
}
#ipucu.gorunur { opacity: 1; }

/* HUD'in disinda ve panelin ustunde duran tek oge. */
#olay-yazi {
  z-index: 40; pointer-events: none;
  position: fixed; top: calc(var(--u) * 16); left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--yazi-baslik); font-weight: 900;
  color: #5dff5d;
  opacity: 0; transition: opacity .35s;
}
#olay-yazi.gorunur { opacity: 1; }
#olay-yazi b {
  display: block; font-size: calc(var(--u) * 4.6);
  text-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .5) rgba(0, 0, 0, .6);
}
#olay-yazi span { display: block; font-size: calc(var(--u) * 2.6); }

/* ══ Dunya katmani: ucan yazilar ve bas ustu ═══════════════════════ */

.ucan {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: calc(var(--u) * .25);
  font-family: var(--yazi-baslik); font-weight: 900;
  white-space: nowrap;
  -webkit-text-stroke: calc(var(--u) * .34) var(--kontur);
  paint-order: stroke fill;
  will-change: transform, opacity;
}
.ucan i {
  width: 1.15em; height: 1.15em;
  background: center/contain no-repeat;
  -webkit-text-stroke: 0;
}

#bas-etiket {
  position: absolute; left: 0; top: 0;
  display: none; align-items: center; gap: calc(var(--u) * .3);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 3.0);
  white-space: nowrap;
  -webkit-text-stroke: calc(var(--u) * .34) var(--kontur);
  paint-order: stroke fill;
}
#bas-etiket i {
  width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4);
  background: var(--sim-guc) center/contain no-repeat;
  -webkit-text-stroke: 0;
}

#etkilesim {
  position: absolute; left: 0; top: 0;
  display: none; align-items: center; gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .35) calc(var(--u) * 1.0);
  background: rgba(16, 18, 24, .8);
  border: calc(var(--u) * .22) solid var(--kontur);
  border-radius: calc(var(--u) * .5);
  font-family: var(--yazi-baslik); font-weight: 900; font-size: calc(var(--u) * 1.8);
}
#etkilesim b {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4);
  background: #e8edf5; color: #10131a;
  border-radius: calc(var(--u) * .3);
}

/* ══ Paneller ══════════════════════════════════════════════════════ */

#panel-katman { display: none; }
/* Perde KOYU: %35'te arkadaki oyun panelin uzerinden okunuyor ve
   goz neye bakacagini bilemiyordu (referansta arka plan hem
   karartilmis hem bulaniklastirilmis). */
#panel-katman.acik {
  display: block; pointer-events: auto;
  background: rgba(6, 8, 12, .52);
  backdrop-filter: blur(calc(var(--u) * .5));
  animation: perde-gir .14s ease-out;
}
@keyframes perde-gir { from { opacity: 0; } to { opacity: 1; } }

/*
  Panel acikken DUNYA YAZILARI SUSAR.  Ipucu, ogretici ve etkilesim
  balonu `#hud` katmaninda ve panelin ARKASINDA kaliyor; panel
  gecirgen oldugu icin yazilar satirlarin uzerinden okunuyordu
  (800x450'de olculdu, "Guc kazanin ve degerli hazineler bulun"
  kesici listesinin ustune biniyordu).
*/
body:has(#panel-katman.acik) #ipucu,
body:has(#panel-katman.acik) #ogretici,
body:has(#panel-katman.acik) #etkilesim,
body:has(#panel-katman.acik) #bas-etiket,
body:has(#panel-katman.acik) #dunya-katman { display: none !important; }
/* `#olay-yazi` BU LISTEDE YOK: uyarilarin cogu panel acikken cikiyor
   ("Emin misin?", "Yetersiz cevher").  Kendi katmaninda, z 40. */

.kutu {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(var(--u) * 78), 94vw);
  max-height: 84vh;
  display: flex; flex-direction: column;
  /* SAYDAM DEGIL: %94'te arkadaki oyun satirlarin arasindan
     goruluyordu ve panel "yari bitmis" duruyordu. */
  background: linear-gradient(180deg, #3a3e52, #22252f);
  border: calc(var(--u) * .55) solid var(--kontur);
  border-radius: calc(var(--u) * 1.2);
  box-shadow: 0 calc(var(--u) * 1.3) 0 rgba(0, 0, 0, .45),
              0 calc(var(--u) * 2.2) calc(var(--u) * 3) rgba(0, 0, 0, .45),
              inset 0 0 0 calc(var(--u) * .22) rgba(255, 255, 255, .16);
  overflow: hidden;
  animation: kutu-gir .16s ease-out;
}
/* Panel yerine OTURSUN: aniden beliren kutu ucuz duruyor. */
@keyframes kutu-gir {
  from { transform: translate(-50%, -50%) scale(.93); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.kutu > header {
  display: flex; align-items: center; gap: calc(var(--u) * .9);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.0);
  background: var(--plaka), linear-gradient(180deg, #b9c8ec, #7286bb);
  background-size: var(--plaka-boy), 100% 100%;
  border-bottom: calc(var(--u) * .46) solid var(--kontur);
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 3.4);
  text-shadow: 0 calc(var(--u) * .22) calc(var(--u) * .3) rgba(0, 0, 0, .45);
  box-shadow: inset 0 calc(var(--u) * .28) 0 rgba(255, 255, 255, .35);
}
.kutu > header .sim {
  width: calc(var(--u) * 5.0); height: calc(var(--u) * 5.0);
  background: center/contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .45));
}
.kutu > header .bosluk { flex: 1; }
.kutu > header button {
  width: max(36px, calc(var(--u) * 5.0)); height: max(32px, calc(var(--u) * 4.4));
  background: linear-gradient(180deg, #b5495e, #7d2233);
  border: calc(var(--u) * .40) solid var(--kontur);
  border-radius: calc(var(--u) * .5);
  color: #fff; font-family: var(--yazi-baslik); font-weight: 900;
  font-size: calc(var(--u) * 2.4); cursor: pointer;
  box-shadow: var(--pah);
}
.kutu > header button:active {
  transform: translateY(calc(var(--u) * .25)); box-shadow: var(--pah-basili);
}

/*
  ── `min-height: 0` OLMADAN LISTE KAYDIRILMIYOR
  Olculdu (Oduller paneli, 1280x720): satirlarin alt kenari y = 782,
  ekran 720.  `.kutu`nun `max-height: 84vh`i ve `overflow: hidden`i
  onlari KIRPIYOR ama kimse kaydiramiyordu — son iki odule hicbir
  sekilde erisilemiyordu.

  Sebep flex varsayilani: bir flex ogesinin `min-height`i `auto` ve
  bu, ogenin ICERIGININ altina kuculmesini engelliyor.  `overflow-y:
  auto` yaziliydi ama kutu hicbir zaman icerikten kisa olmadigi icin
  kaydirma cubugu hic dogmuyordu.
*/
.kutu > .liste {
  flex: 1 1 auto; min-height: 0;
  padding: calc(var(--u) * .8);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: calc(var(--u) * .7);
  scrollbar-width: thin;
}
.kutu > .liste::-webkit-scrollbar { width: calc(var(--u) * .9); }
.kutu > .liste::-webkit-scrollbar-thumb {
  background: rgba(12, 14, 20, .5); border-radius: calc(var(--u) * .5);
}

/*
  Satir — referansta kartlar bitisik ve nadirlik rengine boyali.
  `arayuz.js` yalniz TEK bir renk veriyor (`--satir-renk`); dikey
  gecis ondan `color-mix` ile turuyor, boylece 12 ayri cagri
  yerinde hicbir sey degistirmeden butun satirlar gecisli oluyor.
  Ustune plaka dokusu ve sagdan gecen egik bir parlama serit
  (referans r11 buyutuldu).
*/
.satir {
  position: relative; overflow: hidden;
  /* Liste bir flex sutun: satirlar KUCULMESIN.  Buyuyen icerikle
     birlikte flex hepsini eziyor ve adlar kirpiliyordu. */
  flex: 0 0 auto;
  display: flex; align-items: center; gap: calc(var(--u) * 1.0);
  padding: calc(var(--u) * .7);
  border: calc(var(--u) * .42) solid var(--kontur);
  border-radius: calc(var(--u) * .8);
  background-color: var(--satir-renk, #8ea6cf);
  background-image: var(--plaka),
    linear-gradient(180deg,
      color-mix(in srgb, var(--satir-renk, #8ea6cf) 74%, #ffffff 26%) 0%,
      var(--satir-renk, #8ea6cf) 55%,
      color-mix(in srgb, var(--satir-renk, #8ea6cf) 72%, #000000 28%) 100%);
  background-size: var(--plaka-boy), 100% 100%;
  box-shadow: var(--pah);
}
.satir::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  right: calc(var(--u) * 3); width: calc(var(--u) * 5);
  transform: skewX(-16deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16));
  pointer-events: none;
}
.satir > * { position: relative; z-index: 1; }
.satir.secili {
  outline: calc(var(--u) * .34) solid #fff;
  box-shadow: var(--pah), 0 0 calc(var(--u) * 1.8) rgba(255, 255, 255, .5);
}
.satir .kart {
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  flex: 0 0 auto;
  background: #fff center/contain no-repeat;
  border: calc(var(--u) * .40) solid var(--kontur);
  border-radius: calc(var(--u) * .6);
  box-shadow: inset 0 0 0 calc(var(--u) * .2) rgba(0, 0, 0, .12),
              0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .3);
}
.satir .bilgi { flex: 1; min-width: 0; }
.satir .ad {
  font-family: var(--yazi-baslik); font-weight: 900; font-size: calc(var(--u) * 2.8);
  line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 calc(var(--u) * .2) calc(var(--u) * .28) rgba(0, 0, 0, .45);
}
.satir .nadir {
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(12.5px, calc(var(--u) * 1.95));
  opacity: .96;
}
.satir .etki {
  display: flex; align-items: center; gap: calc(var(--u) * .35);
  font-family: var(--yazi-baslik); font-weight: 900; font-size: calc(var(--u) * 2.5);
  margin-top: calc(var(--u) * .25);
  text-shadow: 0 calc(var(--u) * .2) calc(var(--u) * .28) rgba(0, 0, 0, .45);
}
.satir .etki i {
  width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4);
  background: var(--sim-guc) center/contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * .16) 0 rgba(0, 0, 0, .45));
}
.satir .dugmeler {
  display: flex; flex-direction: column; gap: calc(var(--u) * .4);
  width: calc(var(--u) * 14.5); flex: 0 0 auto;
}

/*
  Dugmeler referansta blok gibi: kalin siyah cerceve, ustte ic acik
  cizgi, altta ic koyu cizgi, disa dusen govde golgesi.  Ucu birden
  olmadan "duz renkli dikdortgen" kaliyor.  Renk gecisi de daha
  genis: ust ucu belirgin acik.
*/
.al {
  height: max(32px, calc(var(--u) * 3.9));
  border: calc(var(--u) * .40) solid var(--kontur);
  border-radius: calc(var(--u) * .55);
  font-family: var(--yazi-baslik); font-weight: 900; font-size: calc(var(--u) * 2.2);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * .35);
  background: linear-gradient(180deg, #8bf56a 0%, #4ad13a 48%, #1f9426 100%);
  box-shadow: var(--pah);
  text-shadow: 0 calc(var(--u) * .18) calc(var(--u) * .26) rgba(0, 0, 0, .5);
}
.al:active { transform: translateY(calc(var(--u) * .3)); box-shadow: var(--pah-basili); }
.al.cevher { background: linear-gradient(180deg, #ffe95c 0%, #fcc21e 48%, #ef8f18 100%); }
.al.cevher i {
  width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9);
  background: var(--sim-cevher) center/contain no-repeat;
}
.al.pasif {
  background: linear-gradient(180deg, #b6bdc9 0%, #8b93a1 48%, #5f6774 100%);
  cursor: default;
}

/* ── Odullu reklam dugmesi
   Her yerde AYNI mor + oynat rozeti; oyuncu "buna basarsam reklam
   gelir"i bir kez ogreniyor.  Satin alma dugmelerinden RENKLE
   ayriliyor ki yanlislikla basilmasin. */
.al.reklam {
  background: linear-gradient(180deg, #e6a6ff 0%, #b355ec 48%, #7a25b8 100%);
  gap: calc(var(--u) * .45);
}
.al.reklam i {
  width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8);
  background: var(--sim-reklamSim) center/contain no-repeat;
  flex: 0 0 auto;
}
.al.reklam:disabled { filter: grayscale(.5) brightness(.8); cursor: wait; }
/* Reklam dugmesi ana dugmenin ALTINA YAPISIK: iki ayri kutu gibi
   degil, ayni teklifin ikinci yolu gibi okunsun. */
.al.reklam.mini {
  height: max(30px, calc(var(--u) * 3.8));
  font-size: max(12.5px, calc(var(--u) * 2.0));
  width: 100%;
  margin-top: calc(var(--u) * -.42);
  border-top-left-radius: 0; border-top-right-radius: 0;
}
/* `takili` PASIFTEN SONRA: ikisi birlikte yazildiginda referanstaki
   gibi YESIL kalmali, gri degil. */
.al.takili {
  background: linear-gradient(180deg, #8fe98f 0%, #4cbf4c 48%, #268226 100%);
  cursor: default;
}

.bos-yazi {
  padding: calc(var(--u) * 2) 0; text-align: center;
  font-family: var(--yazi-baslik); font-weight: 900; font-size: calc(var(--u) * 2.2);
}

.kutu > footer {
  padding: calc(var(--u) * .9);
  border-top: calc(var(--u) * .42) solid var(--kontur);
  display: flex; gap: calc(var(--u) * .8); align-items: center;
  background: var(--plaka), linear-gradient(180deg, rgba(52, 57, 74, .6), rgba(18, 20, 28, .6));
  background-size: var(--plaka-boy), 100% 100%;
}
.kutu > footer .al { flex: 1; height: calc(var(--u) * 4.6); font-size: calc(var(--u) * 2.4); }

/* Dizin izgarasi */
.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 12), 1fr));
  gap: calc(var(--u) * .6);
}
.hucre {
  flex: 0 0 auto;
  border: calc(var(--u) * .40) solid var(--kontur);
  border-radius: calc(var(--u) * .7);
  background-color: var(--satir-renk, #8ea6cf);
  background-image: var(--plaka),
    linear-gradient(180deg,
      color-mix(in srgb, var(--satir-renk, #8ea6cf) 74%, #ffffff 26%) 0%,
      var(--satir-renk, #8ea6cf) 55%,
      color-mix(in srgb, var(--satir-renk, #8ea6cf) 72%, #000000 28%) 100%);
  background-size: var(--plaka-boy), 100% 100%;
  padding: calc(var(--u) * .45);
  text-align: center;
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(12.5px, calc(var(--u) * 1.8));
  box-shadow: var(--pah);
}
.hucre .kart {
  width: 100%; aspect-ratio: 1;
  background: #fff center/contain no-repeat;
  border: calc(var(--u) * .34) solid var(--kontur);
  border-radius: calc(var(--u) * .45);
  margin-bottom: calc(var(--u) * .35);
  box-shadow: 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .3);
}
.hucre.kilitli { filter: grayscale(1) brightness(.55); }
.hucre .fiyat { color: var(--para); }

/* Ayarlar */
.ayar-satir {
  display: flex; align-items: center; gap: calc(var(--u) * .8);
  font-family: var(--yazi-baslik); font-weight: 900; font-size: calc(var(--u) * 2.2);
}
.ayar-satir .bosluk { flex: 1; }
.secim { display: flex; gap: calc(var(--u) * .4); }
.secim button {
  /* Olculdu: 21 px yukseklik.  Dil dugmeleri parmakla isabet
     etmiyordu; 32 px WCAG alt siniri. */
  min-height: max(32px, calc(var(--u) * 4.0));
  padding: calc(var(--u) * .4) calc(var(--u) * 1.2);
  border: calc(var(--u) * .26) solid var(--kontur);
  border-radius: calc(var(--u) * .5);
  background: rgba(20, 24, 34, .5); color: #fff;
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(12.5px, calc(var(--u) * 1.8));
  cursor: pointer;
}
.secim button.secili {
  background: linear-gradient(180deg, #8bf56a 0%, #4ad13a 48%, #1f9426 100%);
  box-shadow: var(--pah);
}

/* ══ Ekran dugmeleri (mobil) ═══════════════════════════════════════
   Dokunmatikte oyun oynanamiyordu: ziplama, etkilesim ve savurma icin
   hicbir dugme yoktu.  Dugmeler DOM ogesi — dokunus tuvale hic
   ulasmiyor, yani kamera suruklemesiyle CAKISMIYORLAR.
   Olculer parmak icin: savurma 17u (~120 px), otekiler 11u.        */

#dok-kontrol {
  position: fixed;
  right: calc(var(--u) * 2 + env(safe-area-inset-right, 0px));
  bottom: calc(var(--u) * 3 + env(safe-area-inset-bottom, 0px));
  z-index: 16;
  display: none;
  align-items: flex-end; gap: calc(var(--u) * 1.2);
  pointer-events: none;
}
body.dokunmatik #dok-kontrol { display: flex; }

#dok-kontrol button {
  pointer-events: auto;
  border: calc(var(--u) * .38) solid var(--kontur);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--yazi-baslik); font-weight: 900;
  box-shadow: inset 0 calc(var(--u) * -.7) 0 rgba(0, 0, 0, .26);
  touch-action: none;
  padding: 0;
}
#dok-kontrol button.basili { transform: translateY(calc(var(--u) * .3)); box-shadow: none; filter: brightness(1.15); }
/* `background` KISALTMASI kullanilamaz: bu secici (#id + iki oge)
   `#dok-zipla i`den daha ozgul ve kisaltma background-image'i
   `none`a cekiyordu — dugmeler bos daire olarak cikiyordu. */
#dok-kontrol button i {
  width: 58%; height: 58%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#dok-savur {
  width: calc(var(--u) * 17); height: calc(var(--u) * 17);
  background: linear-gradient(180deg, #7fd0ff, #2a7fd0);
}
#dok-savur i { background-image: var(--sim-savurSim); }

#dok-zipla {
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  background: linear-gradient(180deg, #9cf07a, #43b52a);
  margin-bottom: calc(var(--u) * 1.6);
}
#dok-zipla i { background-image: var(--sim-ziplaSim); }

/* Etkilesim dugmesi yalniz menzilde bir sey varken goruluyor —
   surekli duran bir "E" ekranda gurultu. */
#dok-e {
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  background: linear-gradient(180deg, #ffdd7a, #f0a52a);
  margin-bottom: calc(var(--u) * 4.2);
  font-size: calc(var(--u) * 4.4);
  display: none;
}
body.dokunmatik.etkilesim-var #dok-e { display: flex; }
#dok-e .harf {
  -webkit-text-stroke: calc(var(--u) * .3) var(--kontur);
  paint-order: stroke fill;
}

/* Dokunmatikte klavye ipucu kutusu anlamsiz — yerine dugme var. */
body.dokunmatik #etkilesim { display: none !important; }

/* Sag sutun (cevher magazasi) savurma dugmesinin altinda kalmasin */
body.dokunmatik #takviyeler { bottom: calc(var(--u) * 22); }
body.dokunmatik #sag-sutun { top: calc(var(--u) * 12); width: calc(var(--u) * 17); }
body.dokunmatik #sag-sutun .sag-dugme { height: calc(var(--u) * 5.6); font-size: calc(var(--u) * 2.3); }
body.dokunmatik #bedava { display: none; }

/* ══ Dokunma hedefi tabanlari ══════════════════════════════════════
   `--u` kucuk ekranda 6.4 px'e kadar iniyor; oransal olcu tek basina
   birakilirsa menu dugmesi 40 px'in altina dusuyor ve parmakla
   isabet etmiyor.  Yalniz DOKUNMATIKTE px tabani konuyor — masaustunde
   fare zaten hassas ve arayuzu buyutmenin anlami yok.               */

body.dokunmatik .menu-dugme { min-height: max(calc(var(--u) * 7.9), 46px); }
body.dokunmatik .al { min-height: max(calc(var(--u) * 3.4), 34px); }
body.dokunmatik .kutu > header button { min-width: 40px; min-height: 34px; }
body.dokunmatik .secim button { min-height: 36px; }
body.dokunmatik #oto-tikla { min-height: 40px; }
body.dokunmatik #dok-savur { width: max(calc(var(--u) * 17), 96px); height: max(calc(var(--u) * 17), 96px); }
body.dokunmatik #dok-zipla,
body.dokunmatik #dok-e { width: max(calc(var(--u) * 11), 62px); height: max(calc(var(--u) * 11), 62px); }



/* ── Dokunmatikte sag sutun SADECE odullu kisayollar ───────────────
   Olculdu: yatay telefonda cevher magazasi sutunu savurma
   dugmelerinin UZERINE biniyordu.  Cevherli satirlar, paketler ve
   hediye "Oduller" paneline tasindi (hepsi orada, hicbiri
   kaybolmadi); HUD'da yalniz iki reklam kisayolu kaliyor. */
body.dokunmatik #sag-sutun {
  top: calc(var(--u) * 10);
  width: min(calc(var(--u) * 19), 30vw);
}
body.dokunmatik #sag-sutun .fiyat-ust,
body.dokunmatik #sag-sutun .sag-dugme,
body.dokunmatik #sag-sutun .paket,
body.dokunmatik #bedava { display: none; }
body.dokunmatik #sag-sutun .al.reklam.mini {
  height: max(calc(var(--u) * 4.4), 40px);
  font-size: max(12.5px, calc(var(--u) * 1.9));
}

/* ══ Dokunmatik cubuk ══════════════════════════════════════════════ */

#cubuk {
  position: fixed; display: none; z-index: 15;
  width: calc(var(--u) * 22); height: calc(var(--u) * 22);
  margin-left: calc(var(--u) * -11); margin-top: calc(var(--u) * -11);
  border-radius: 50%;
  border: calc(var(--u) * .35) solid rgba(255, 255, 255, .35);
  background: rgba(10, 14, 20, .22);
  pointer-events: none;
}
#cubuk-top {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 9); height: calc(var(--u) * 9);
  margin-left: calc(var(--u) * -4.5); margin-top: calc(var(--u) * -4.5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: calc(var(--u) * .3) solid rgba(10, 14, 20, .5);
}

/* ══ Acilis ekrani ═════════════════════════════════════════════════
   Arka plan gercek oyun goruntusu; ustune asagidan yukari koyulasan
   bir perde konuyor ki yazi her gorselde okunsun.  Olculer `--u`
   degil `min(vw, vh)` tabanli: acilis ekraninda HUD yerlesimi yok,
   tek is metnin her ekranda ayni ORANDA durmasi.                  */

#yukleme {
  position: fixed; inset: 0; z-index: 60;
  overflow: hidden;
  font-family: var(--yazi-baslik); font-weight: 900;
  opacity: 1; transition: opacity .45s ease;
}
#yukleme.bitti { opacity: 0; pointer-events: none; }
#yukleme.yok { display: none; }

#yukleme .arka {
  position: absolute; inset: 0;
  background: #1b3a17 url('../gorsel/acilis.webp') center/cover no-repeat;
  /* Cok genis ekranda gorsel kenarlardan kirpilmasin diye hafif
     buyutulup bulaniklastirilmis bir taban da var. */
  transform: scale(1.04);
}
#yukleme .perde {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 50% 18%, rgba(0,0,0,0) 40%, rgba(4,10,6,.55) 100%),
    linear-gradient(180deg, rgba(4,10,6,.35) 0%, rgba(4,10,6,0) 28%, rgba(4,10,6,.82) 82%, rgba(4,10,6,.95) 100%);
}

#yukleme .ic {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 0 4vw calc(4vh + env(safe-area-inset-bottom, 0px));
  gap: min(2.2vh, 18px);
  text-align: center;
}

/* ── Oyun adi ─────────────────────────────────────────────────── */
/* Ad IKI SATIR: "+1 Cut Grass" yan yana, altinda "Adventure".
   Uc satir yapilinca "+1" rozeti karakterin yuzunu kapatiyordu. */
#yukleme .ad {
  margin: 0 0 min(1vh, 10px);
  line-height: .96;
  display: flex; flex-direction: column; align-items: center;
  gap: min(.4vh, 4px);
}
#yukleme .ad .satir {
  display: flex; align-items: center; justify-content: center;
  gap: min(1.6vw, 14px);
}
#yukleme .ad .arti {
  font-size: min(7.2vw, 10vh, 76px);
  color: #ffd83a;
  -webkit-text-stroke: min(.9vw, 1.3vh, 10px) #16220f;
  paint-order: stroke fill;
  text-shadow: 0 min(.6vh, 6px) 0 rgba(0,0,0,.45);
  transform: rotate(-5deg);
}
#yukleme .ad .govde {
  font-size: min(8.4vw, 11.6vh, 88px);
  color: #ffffff;
  -webkit-text-stroke: min(.9vw, 1.3vh, 10px) #16220f;
  paint-order: stroke fill;
  text-shadow: 0 min(.7vh, 7px) 0 rgba(0,0,0,.45);
}
#yukleme .ad .alt {
  font-size: min(5.4vw, 7.6vh, 56px);
  color: #8bf06a;
  letter-spacing: .06em;
  -webkit-text-stroke: min(.62vw, .9vh, 7px) #16220f;
  paint-order: stroke fill;
  text-shadow: 0 min(.5vh, 5px) 0 rgba(0,0,0,.45);
}

/* ── Dil secimi (ana menude de ayni gorunum) ──────────────────── */
#yukleme .diller,
#anamenu .diller { display: flex; gap: min(1.6vw, 12px); flex-wrap: wrap; justify-content: center; }
#yukleme .diller button,
#anamenu .diller button {
  font-family: var(--yazi-baslik); font-weight: 900;
  /* Olculdu (375x812): 2.4vw = 9 px, dil adlari okunmuyordu.
     Yazinin PX TABANI var, kutu vw/vh ile buyuyor. */
  font-size: max(12.5px, min(2.4vw, 2.6vh, 20px));
  padding: min(1.1vh, 10px) min(2.6vw, 20px);
  min-height: 42px;
  color: #fff;
  background: rgba(12, 22, 14, .62);
  border: min(.34vh, 3px) solid rgba(255,255,255,.34);
  border-radius: min(1.4vh, 12px);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform .12s, background .12s, border-color .12s;
}
#yukleme .diller button:hover,
#anamenu .diller button:hover { transform: translateY(-2px); }
#yukleme .diller button.secili,
#anamenu .diller button.secili {
  background: linear-gradient(180deg, #8bf06a, #3aa32a);
  border-color: #16220f;
  color: #12240c;
}

/* ── Ilerleme ─────────────────────────────────────────────────── */
#yukleme .cubuk {
  width: min(56vw, 420px); height: min(2.4vh, 20px);
  background: rgba(8, 14, 10, .62);
  border: min(.34vh, 3px) solid #16220f;
  border-radius: 99px;
  overflow: hidden;
}
#yukleme .cubuk i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(180deg, #d8ff8a, #4ec22a);
  border-radius: 99px;
  transition: width .25s ease-out;
}
#yukleme .durum {
  font-size: min(2.4vw, 2.4vh, 18px);
  color: #dff0d4;
  letter-spacing: .04em;
  -webkit-text-stroke: min(.2vh, 2px) rgba(10,18,10,.8);
  paint-order: stroke fill;
}

/* Yukleme bitince cubuk ve durum yazisi kayboluyor; perde zaten
   kendiliginden soluyor ve altindan ANA MENU cikiyor. */
#yukleme.hazir .cubuk,
#yukleme.hazir .durum { display: none; }

@media (max-height: 420px) {
  #yukleme .ic { gap: min(1.4vh, 10px); padding-bottom: 3vh; }
  #yukleme .ad { margin-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════
   ANA MENU
   Arka plan YOK: altta canli 3B sahne duruyor.  Burada yalnizca
   okunabilirligi saglayan vinyet, ad ve dugmeler var.

   Yerlesim bilerek UC BOLGE: ad ustte, karakter ortada (bos
   birakiliyor), dugmeler altta.  Ortayi doldurmak duvar kagidinin
   konusunu — karakteri ve elindeki kesiciyi — kapatiyordu.
══════════════════════════════════════════════════════════════ */
#anamenu {
  position: fixed; inset: 0; z-index: 55;
  font-family: var(--yazi-baslik); font-weight: 900;
  opacity: 1; transition: opacity .38s ease;
}
#anamenu.bitti { opacity: 0; pointer-events: none; }
#anamenu.yok { display: none; }

/* Vinyet: ust ve alt koyu, orta acik.  Oyun ekrani ortada
   gorunuyor, yazilar kenarda okunuyor. */
#anamenu .vinyet {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,10,6,.86) 0%, rgba(4,10,6,.55) 14%,
                    rgba(4,10,6,.12) 30%, rgba(4,10,6,0) 44%,
                    rgba(4,10,6,.22) 60%, rgba(4,10,6,.82) 86%,
                    rgba(4,10,6,.94) 100%),
    radial-gradient(130% 92% at 50% 50%, rgba(0,0,0,0) 44%, rgba(4,10,6,.5) 100%);
}

#anamenu .ic {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: calc(3.4vh + env(safe-area-inset-top, 0px)) 4vw
           calc(3.6vh + env(safe-area-inset-bottom, 0px));
  text-align: center;
  /* Kapsayici tiklamalari GECIRIYOR (altta oyun tuvali var),
     dugmeler kendileri yakaliyor ([[canvas-girdi-yutan-katman]]). */
  pointer-events: none;
}
#anamenu .ic > * { pointer-events: auto; }

#anamenu .ad {
  margin: 0;
  line-height: .96;
  display: flex; flex-direction: column; align-items: center;
  gap: min(.4vh, 4px);
  animation: menu-ad-gir .5s cubic-bezier(.2, 1.3, .5, 1) both;
}
@keyframes menu-ad-gir {
  from { transform: translateY(-14%) scale(.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#anamenu .ad .satir { display: flex; align-items: center; justify-content: center; gap: min(1.6vw, 14px); }
#anamenu .ad .arti {
  font-size: min(6.4vw, 9vh, 68px);
  color: #ffd83a;
  -webkit-text-stroke: min(.9vw, 1.3vh, 10px) #16220f;
  paint-order: stroke fill;
  text-shadow: 0 min(.6vh, 6px) 0 rgba(0,0,0,.5);
  transform: rotate(-5deg);
}
#anamenu .ad .govde {
  font-size: min(7.6vw, 10.4vh, 80px);
  color: #ffffff;
  -webkit-text-stroke: min(.9vw, 1.3vh, 10px) #16220f;
  paint-order: stroke fill;
  text-shadow: 0 min(.7vh, 7px) 0 rgba(0,0,0,.5);
}
#anamenu .ad .alt {
  font-size: min(4.8vw, 6.8vh, 50px);
  color: #8bf06a;
  letter-spacing: .06em;
  -webkit-text-stroke: min(.62vw, .9vh, 7px) #16220f;
  paint-order: stroke fill;
  text-shadow: 0 min(.5vh, 5px) 0 rgba(0,0,0,.5);
}

/* Alt yigin ekranin dibine yapissin, ad tepede kalsin. */
#anamenu #menu-oyna { margin-top: auto; }
#anamenu #menu-nasil, #anamenu .diller { margin-top: min(1.6vh, 14px); }

/* ── OYNA: DIKKAT CEKEN DUGME ───────────────────────────────────
   Uc katman birlikte calisiyor ve uc ayri seye sesleniyor:
     1. `menu-nabiz`   boyut solugu — cevre gorusu HAREKETI yakaliyor
     2. `menu-hale`    disari acilan halka — "buraya bas" isareti
     3. `menu-parilti` yuzeyde gecen isik — dugmeyi CANLI yapiyor
   Yanip sonen OPAKLIK denenmedi: yazi okunmaz oluyor ve kucuk
   ekranda rahatsiz ediyor.  "Yanip sonmek"ten kasit dikkat
   cekmek; bunu boyut ve isikla yapmak daha guclu ve yormuyor.
──────────────────────────────────────────────────────────────── */
#anamenu #menu-oyna {
  position: relative;
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: min(6vw, 6.4vh, 50px);
  letter-spacing: .06em;
  color: #12240c;
  padding: min(2vh, 18px) min(11vw, 92px);
  min-height: 60px;
  background: linear-gradient(180deg, #d4ff9e 0%, #8bf06a 38%, #43b52a 100%);
  border: min(.55vh, 5px) solid #16220f;
  border-radius: min(2.4vh, 20px);
  box-shadow: 0 min(1vh, 9px) 0 #1f6b17,
              0 min(2vh, 18px) min(2.6vh, 24px) rgba(0,0,0,.5);
  cursor: pointer;
  overflow: hidden;
  animation: menu-nabiz 1.5s ease-in-out infinite;
}
#anamenu #menu-oyna::before {
  content: '';
  position: absolute; inset: min(-1.2vh, -10px);
  border-radius: inherit;
  border: min(.42vh, 4px) solid rgba(180, 255, 130, .9);
  pointer-events: none;
  animation: menu-hale 1.5s ease-out infinite;
}
/* Parilti: govdenin ustunden gecen egik isik seridi */
#anamenu #menu-oyna > span {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-120%);
  animation: menu-parilti 2.6s ease-in-out infinite;
}
#anamenu #menu-oyna:active {
  transform: translateY(min(.7vh, 6px)) scale(.99);
  box-shadow: 0 min(.3vh, 3px) 0 #1f6b17;
  animation-play-state: paused;
}
@keyframes menu-nabiz {
  0%, 100% { transform: scale(1); }
  46%      { transform: scale(1.055); }
}
@keyframes menu-hale {
  0%        { transform: scale(1); opacity: .85; }
  70%, 100% { transform: scale(1.16); opacity: 0; }
}
@keyframes menu-parilti {
  0%, 62%   { transform: translateX(-120%); }
  86%, 100% { transform: translateX(120%); }
}

/* ── Ikincil dugme ────────────────────────────────────────────── */
#anamenu #menu-nasil {
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(14px, min(2.8vw, 3vh, 22px));
  color: #fff;
  padding: min(1.2vh, 11px) min(4.4vw, 34px);
  min-height: 44px;
  background: rgba(12, 22, 14, .66);
  border: min(.34vh, 3px) solid rgba(255,255,255,.4);
  border-radius: min(1.6vh, 14px);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform .12s, background .12s;
}
#anamenu #menu-nasil:hover { transform: translateY(-2px); background: rgba(22, 42, 24, .78); }
#anamenu #menu-nasil:active { transform: translateY(1px); }

/* Cok kisa ekranda (yatay telefon): ad kuculur, OYNA kalir. */
@media (max-height: 430px) {
  #anamenu .ic { padding-top: 2vh; padding-bottom: 2.4vh; }
  #anamenu #menu-oyna { min-height: 48px; padding: 8px min(8vw, 60px); font-size: max(20px, min(5vw, 7vh, 34px)); }
  #anamenu #menu-nasil { min-height: 38px; padding: 5px 16px; }
  #anamenu .diller button { min-height: 36px; padding: 6px 14px; }
  #anamenu #menu-nasil, #anamenu .diller { margin-top: min(.9vh, 8px); }
}

/* ══════════════════════════════════════════════════════════════
   OGRETICI KARTLARI
   Dort kart, her birinde TEK cumle ve dev bir ikon.  Perde yari
   saydam: cocuk anlatilan seyi arkada gercekten goruyor.
══════════════════════════════════════════════════════════════ */
#ogretici-perde {
  position: fixed; inset: 0; z-index: 58;
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 4vw;
  background: rgba(6, 12, 8, .62);
  backdrop-filter: blur(3px);
  opacity: 1; transition: opacity .28s ease;
}
#ogretici-perde.bitti { opacity: 0; pointer-events: none; }
#ogretici-perde.yok { display: none; }

#ogretici-perde .kart {
  width: min(560px, 92vw);
  max-height: 92vh;
  padding: min(3.2vh, 26px) min(5vw, 30px) min(2.6vh, 22px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: min(1.4vh, 12px);
  background: linear-gradient(180deg, #3a3e52, #22252f);
  border: min(.62vh, 6px) solid var(--kontur);
  border-radius: min(2.4vh, 22px);
  box-shadow: 0 min(1.4vh, 13px) 0 rgba(0,0,0,.45),
              0 min(2.4vh, 22px) min(3.2vh, 30px) rgba(0,0,0,.5);
  animation: ogr-gir .22s cubic-bezier(.2, 1.25, .5, 1) both;
}
@keyframes ogr-gir {
  from { transform: translateY(6%) scale(.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Kart degisince ikon ve yazi yeniden girsin — yoksa dort kart
   tek bir kart gibi duruyor ve "sayfa cevirdim" hissi olmuyor. */
#ogretici-perde .kart.tazele .sim,
#ogretici-perde .kart.tazele h2,
#ogretici-perde .kart.tazele p { animation: ogr-icerik .26s ease-out both; }
@keyframes ogr-icerik {
  from { transform: translateX(14%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

#ogretici-perde .sim {
  width: min(22vh, 132px); height: min(22vh, 132px);
  background: center/contain no-repeat;
  filter: drop-shadow(0 min(.5vh, 5px) 0 rgba(0,0,0,.55));
}
#ogretici-perde h2 {
  margin: 0;
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(20px, min(5.4vw, 4.4vh, 34px));
  color: #ffd83a;
  line-height: 1.05;
}
#ogretici-perde p {
  margin: 0;
  font-family: var(--yazi-govde); font-weight: 600;
  font-size: max(14px, min(3.6vw, 2.9vh, 20px));
  line-height: 1.34;
  color: #eaf1ff;
  max-width: 44ch;
}

#ogretici-perde .noktalar { display: flex; gap: min(1.2vh, 10px); margin-top: min(.6vh, 5px); }
#ogretici-perde .noktalar i {
  width: min(1.5vh, 13px); height: min(1.5vh, 13px);
  border-radius: 50%;
  background: rgba(255,255,255,.26);
  border: 2px solid rgba(0,0,0,.45);
  transition: background .18s, transform .18s;
}
#ogretici-perde .noktalar i.acik { background: #8bf06a; transform: scale(1.22); }

#ogretici-perde .dugmeler {
  display: flex; gap: min(2.4vw, 16px); align-items: center;
  margin-top: min(1.2vh, 10px);
}
#ogretici-perde .dugmeler button {
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: max(14px, min(3.4vw, 2.8vh, 21px));
  min-height: 46px;
  padding: min(1.3vh, 12px) min(5vw, 34px);
  border: min(.42vh, 4px) solid var(--kontur);
  border-radius: min(1.6vh, 14px);
  cursor: pointer;
  box-shadow: var(--pah);
}
#ogretici-perde #ogr-atla { background: rgba(20, 24, 34, .72); color: #cfd8ea; }
#ogretici-perde #ogr-ileri { background: linear-gradient(180deg, #b7ff7a, #43b52a); color: #12240c; }
#ogretici-perde .dugmeler button:active {
  transform: translateY(min(.4vh, 3px)); box-shadow: var(--pah-basili);
}

/* Kisa ekranda ikon kuculsun, YAZI kalsin. */
@media (max-height: 460px) {
  #ogretici-perde .kart { gap: min(.9vh, 8px); padding: 12px 18px 12px; }
  #ogretici-perde .sim { width: min(16vh, 84px); height: min(16vh, 84px); }
  #ogretici-perde .dugmeler button { min-height: 40px; padding: 7px 20px; }
}

/* ══ Kucuk ekran ═══════════════════════════════════════════════════
   Telefonun yatay halinde sol sutun sayaclarla cakisiyordu; menu
   izgarasi tek sutuna iniyor ve sag sutundaki paketler gizleniyor.  */

/*
  ── KISA EKRAN (telefon yatay, ~390 px)
  `--u` 7 px'e sabitlendiginde sol sutun 372 px'e kadar iniyor ve
  sol alttaki sayaclarin USTUNE biniyordu.  Olculdu: sutun
  98 -> 280 px, sayaclar 299 -> 383 px araliginda; ikisi de sigiyor.
*/
@media (max-height: 520px) {
  #sol-sutun { top: calc(var(--u) * 14); width: min(calc(var(--u) * 19), 28vw); }
  #hedef-kutu { height: calc(var(--u) * 6.0); font-size: max(12.5px, calc(var(--u) * 1.8)); }
  /* Yazi boyu DUSMUYOR — kisalan sey ikon.  Onceki surumde
     1.15u = 6.4 px etiket ciziliyordu ve hicbir sey okunmuyordu. */
  .menu-dugme { height: calc(var(--u) * 8.2); font-size: max(12.5px, calc(var(--u) * 1.8)); }
  .menu-dugme .sim { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }

  #sayaclar { bottom: calc(var(--u) * 1); gap: calc(var(--u) * .5); }
  .sayac {
    height: calc(var(--u) * 3.4); font-size: calc(var(--u) * 2.2);
    min-width: calc(var(--u) * 10.5);
  }
  .sayac i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }

  .paket { display: none; }
  #sag-sutun { top: calc(var(--u) * 16); }
  #ipucu { top: calc(var(--u) * 16); font-size: calc(var(--u) * 2.4); }
}

/*
  ── PORTRE EN SONDA
  `body.dokunmatik #sag-sutun` ile AYNI ozgullukte; medya sorgusu
  ozgullik eklemedigi icin kazanan taraf SIRA. Blok yukaridayken
  dokunmatik kurali onu eziyordu ve portrede "Otomatik Tikla"
  reklam sutununun ALTINDA kaliyordu (olculdu).
*/
/* Dikey (portre) tutus: oyun yatay tasarlandi, ama HUD tasmasin.
   Olculdu: portrede seviye cubugu ile "Otomatik Tikla" cakisiyordu —
   dugme cubugun ALTINA aliniyor. */
@media (orientation: portrait) {
  #seviye-kutu { width: min(calc(var(--u) * 61.6), 74vw); }
  /*
    Olculdu (375x812): `#ust-orta` alt kenari 11.9u; dugme 9.4u'da
    acilinca uzerine 69x16 piksel biniyordu.  Yazilar buyudukce ust
    blok da uzadi — sayi yeniden olculdu, tahmin edilmedi.
  */
  #oto-tikla { top: calc(var(--u) * 13.2); right: calc(var(--u) * 1.2); }
  #sag-sutun { top: calc(var(--u) * 21); width: min(calc(var(--u) * 20.1), 34vw); }
  #sol-sutun { width: min(calc(var(--u) * 21), 36vw); }
  .paket { display: none; }
  /* `body.dokunmatik #sag-sutun` bu seciciden DAHA OZGUL; medya
     sorgusu ozgullik eklemiyor.  Portrede de dokunmatik surumu
     ezmek icin ayni ozgullukte yazilmali. */
  body.dokunmatik #sag-sutun { top: calc(var(--u) * 21.5); }
  body.dokunmatik #ogretici { bottom: calc(var(--u) * 24); }

  /* Dar ekranda ad tek satira sigmiyor ve "..." ile kesiliyordu
     (olculdu: 159 px ad, 147 px yer).  Iki satira izin veriliyor. */
  .satir .ad {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.08;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow-y: hidden;
  }
}