/*
 * Brookhaven RP -- oyun arayuzu.
 *
 * Hedef Roblox arayuz hissi: kalin beyaz kenarlik, yuvarlak kose,
 * doygun renk, belirgin golge. Ince/soluk arayuz 3B sahnenin canli
 * renklerinin yaninda kayboluyor.
 *
 * Telefonun kendi dosyasi var (css/telefon.css) -- buraya karistirma.
 */

:root {
  --altin: #ffcc33;
  --yesil: #37d867;
  --mavi:  #2fa8ff;
  --kirmizi: #ff5a52;
  --mor:   #a56bff;
  --koyu:  #1b2230;
  --koyu2: #29344a;
  --panel: rgba(20, 27, 40, 0.94);
  --kenar: rgba(255, 255, 255, 0.16);
  --golge: 0 8px 24px rgba(0, 0, 0, 0.45);
  --yuvarlak: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #8fd0f5;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#sahne {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;      /* dokunmatikte sayfa kaydirmasin */
}

.gizli { display: none !important; }

/* ------------------------------------------------------------------ */
/* Yukleme                                                             */
/* ------------------------------------------------------------------ */

#yukleniyor {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: linear-gradient(180deg, #4fb3f0 0%, #8fd0f5 45%, #7bd06a 100%);
}
#yukleniyor .ev-simge {
  font-size: 84px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3));
  animation: zipla 1.2s ease-in-out infinite;
}
@keyframes zipla {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-14px) scale(1.04); }
}
#yukleniyor p {
  margin: 0; font-size: 20px; font-weight: 700;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
}
#yukleniyor .cubuk {
  width: 240px; max-width: 60vw; height: 12px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 99px; overflow: hidden;
}
#yukleniyor .cubuk i {
  display: block; height: 100%; width: 35%;
  background: linear-gradient(90deg, var(--altin), #fff6c9);
  border-radius: 99px;
  animation: kay 1.1s ease-in-out infinite;
}
@keyframes kay {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* ------------------------------------------------------------------ */
/* HUD                                                                 */
/* ------------------------------------------------------------------ */

#hud {
  position: fixed; inset: 0; z-index: 20;
  pointer-events: none;                 /* sahne dondurulebilsin */
  padding: max(12px, env(safe-area-inset-top)) 14px 14px;
}
#hud button, #hud .tikla { pointer-events: auto; }

#hud-sol {
  position: absolute; top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 8px;
}

/*
 * CUZDAN: krem hap gorseli + altin para gorseli.
 *
 * Hap 9 DILIM gibi kullaniliyor -- `border-image` ile uclari sabit,
 * ortasi geriliyor. Boylece "1.240" ile "18" ayni cerceveye oturuyor
 * ve rakam buyudukce hap uzuyor, deseni bozulmadan.
 */
/*
 * ORTA DILIM GERILIYOR (`stretch`), TEKRARLAMIYOR (`round`).
 *
 * Cizimlerin ustunde tek bir uzun parlama var. `round` orta dilimi
 * tekrarladigi icin o parlama barin boyunca defalarca basiliyordu --
 * isik seridinde ekranda IKI lamba goruluyordu. `stretch` parlamayi
 * ogenin boyuna yayiyor, yani cizimdeki gibi tek kaliyor.
 *
 * DILIMLER YALNIZCA YATAY: `0 sag 0 sol`.
 *
 * Dort kenardan dilimleyen ilk surumde ust/alt kenarlik 22'ser piksel
 * yer kapiyordu ve hap 94 piksel yuksekliginde cikti -- iki kati.
 * Hap yalnizca YATAYDA uzuyor; ust/alt dilimi sifir birakinca gorselin
 * tam yuksekligi ogenin yuksekligine oturuyor ve uclar korunuyor.
 */
#cuzdan {
  display: inline-flex; align-items: center; gap: 4px;
  /* Sutun onu GERMESIN: hap rakamini sarsin. Esnek sutunda `stretch`
     varsayilan ve hap 210 piksele uzayip sagi bombos kaliyordu. */
  align-self: flex-start;
  height: 54px;
  padding: 0 4px 0 0;
  border: 0 solid transparent;
  /* Sol dilim 142: OLCULEN yuva 35..140 arasinda, 142 onu tamamen
     kapsiyor. Genislik 48 = 142 x (54/160), yani cizimin kendi orani. */
  border-image: url('../arayuz/hap-cuzdan.png') 0 72 0 142 fill;
  border-width: 0 24px 0 48px;
  font-size: 22px; font-weight: 800;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}
/* Emoji para yerine cizim para. */
/*
 * Para hapin YUVASINA oturuyor.
 *
 * Yuva OLCULDU: kaynakta merkez (88, 80), ic cap ~92. Ekranda hap 54
 * yuksek, yani olcek 0.3375 -> merkez 30 piksel iceride, cap 31.
 * Negatif kenar boslugu parayi sol kenarligin uzerine tasiyor;
 * 48 - 33 = 15, arti yari cap 15.5 = merkez 30.5. Ilk surumde para
 * yuvanin sagina tasip cizimdeki yuvayi ACIKTA birakiyordu.
 */
#cuzdan i {
  font-size: 0;
  flex: none;
  width: 31px; height: 31px;
  margin-left: -33px; margin-right: 5px;
  background: url('../arayuz/para.png') center/contain no-repeat;
}
#cuzdan b { color: #7A4A12; letter-spacing: 0.5px; }
#cuzdan.artis { animation: puls 0.45s ease-out; }
@keyframes puls {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/*
 * SEVIYE KUTUSU: krem panel gorseli, 9 dilim gerilen.
 *
 * `border-image ... fill round` uclari sabit tutup ortayi tekrarliyor;
 * dikey ekranda kutu 158 pikselse de yatayda 210 pikselse de kose
 * yuvarlaklari ayni kaliyor. Duz bir arka plan resmi olsaydi koseler
 * ezilirdi.
 */
#seviye-kutu {
  width: 210px;
  padding: 9px 16px 12px;
  /*
   * Bu kart CIZIM DEGIL CSS.
   *
   * Panel gorseli 512x512; 210x50'lik bir kutuya 9 dilimle oturtunca
   * koseler 6 kat eziliyor ve cerceve deforme oluyor. Ayni paletle
   * elle cizilen kart hem her olcude temiz hem de bir istek daha az.
   */
  background: linear-gradient(180deg, #FFFDF8, #FFF3E2);
  border: 3px solid #B98CFF;
  border-radius: 14px;
  box-shadow: 0 4px 0 #8F5EE0, 0 9px 16px rgba(0, 0, 0, 0.3);
  color: #4A2E6B;
}
#seviye-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 700; margin-bottom: 5px;
}
#seviye-sayi { opacity: 0.7; font-size: 11px; font-weight: 700; color: #7A628F; }
/*
 * BAR: yatak ve dolgu iki ayri gorsel, ikisi de 9 dilim.
 *
 * Dolgu SOLA sabitlenip genisligi degisiyor; gorselin ortasi duz
 * cizildigi icin uzarken hicbir desen gerilmiyor. Gradyani da yatay
 * degil DIKEY -- yatay gradyanli bir bar %20 doluyken bambaska bir
 * renge donerdi.
 */
/*
 * YATAK ::before'A TASINDI.
 *
 * Ilk surumde yatak `#seviye-bar`in KENDI kenarligiydi ve dolgu onun
 * IC kutusuna konumlaniyordu: dolgu 7 piksel iceriden basliyor,
 * barin sol ucunda koyu bir dilim aciktan goruluyordu. Ikisi de artik
 * `inset: 0` ile AYNI kutuyu paylasiyor, hizalama tam.
 *
 * Yukseklik 15 -> 22: cizimin ucundaki yuvarlak kap 15 pikselde
 * eziliyordu.
 */
#seviye-bar {
  position: relative;
  height: 22px;
  overflow: visible;
}
#seviye-bar::before {
  content: '';
  position: absolute; inset: 0;
  border: 0 solid transparent;
  /* Bar 512x96, uc 37. Ekranda 22 yuksek -> olcek 0.229 -> uc 9. */
  border-image: url('../arayuz/bar-yatak.png') 0 37 fill;
  border-width: 0 9px;
}
#seviye-dolgu {
  position: absolute; inset: 0 auto 0 0;
  display: block; width: 0%;
  min-width: 18px;
  border: 0 solid transparent;
  border-image: url('../arayuz/bar-dolgu.png') 0 36 fill;
  border-width: 0 9px;
  transition: width 0.35s ease;
}

/*
 * SIGORTA: dugme seridi cuzdanin ustune ASLA binmesin.
 *
 * Alti dugme yan yana 352px istiyor, #hud-sol ise 224px'te bitiyor;
 * yani 590px'ten dar HER YATAY pencerede serit sol sutunun uzerine
 * ciziliyordu (DOM'da sonra geldigi icin ustte kaliyor ve cuzdani
 * tamamen kapatiyor). Dikey sutuna gecis yalnizca dikey kipte oldugu
 * icin bu, dikey/mobil tartismasindan bagimsiz bir hataydi.
 *
 * Sarma acikken serit kendiliginden ikinci satira dokuluyor; genis
 * ekranda hicbir sey yapmiyor cunku max-width hicbir zaman dolmuyor.
 * 250 = #hud-sol sag kenari (224) + 12 nefes payi + 14 sag pay.
 */
#hud-sag {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100vw - 250px);
}
/*
 * YAN BUTONLAR ARTIK CIZIM, EMOJI DEGIL.
 *
 * Eski surum koyu lacivert bir panelin icine emoji koyuyordu: emoji her
 * telefonda baska bir fontla ciziliyor, rengi cihaza gore degisiyor ve
 * oyunun kendi diliyle hicbir ilgisi yok. Sahibi "asiri derece yapay
 * duruyor" dedi -- haklıydı.
 *
 * Simdi her buton kendi PNG'si. Panel, kenarlik ve golge KALKTI:
 * gorselin kendi konturu ve golgesi var, ustune bir de CSS cercevesi
 * konunca cift kenar cikiyordu.
 */
/*
 * OLCU: 78 piksel (eskiden 52).
 *
 * Sahibi "cocuklar icin asiri kucukler" dedi. %50 buyudu. Dokunma
 * hedefi olarak da dogrusu bu: 3-13 yas parmak icin onerilen alt sinir
 * ~44 piksel ve 52 onun hemen ustundeydi; 78 rahat bir hedef.
 */
.kdugme {
  position: relative;
  width: 78px; height: 78px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: transparent center/contain no-repeat;
  border: 0;
  border-radius: 22px;
  color: #fff; cursor: pointer;
  transition: transform 0.1s ease;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.32));
}
/* Emoji tasiyan <i> gizleniyor; isaretleme bozulmadan kalsin diye
   silinmiyor -- yardim paneli ve ipuclari ayni simgeleri okuyor. */
.kdugme i { display: none; }
/*
 * TUS HARFI ROZETIN USTUNDE DEGIL, KOSESINDE.
 *
 * Ilk denemede harf rozetin alt ortasina biniyordu ve cizimin uzerine
 * oturuyordu -- alti buton birden kirli gorunuyordu. Simdi sag alt
 * kosede kucuk bir yuvarlak: dokunmatikte zaten gizli.
 */
/*
 * TUS HARFI ROZETIN ICINDE, DISINDA DEGIL.
 *
 * Disariya tasan surumde (-3px) harf yandaki butonun uzerine biniyordu:
 * sutun boslugu 8, rozet 16 genisliginde ve ikisi cakisiyordu. Simdi
 * rozetin sag alt KOSESININ ICINDE duruyor, hicbir seye degmiyor.
 */
.kdugme small {
  position: absolute;
  right: 4px; bottom: 3px;
  min-width: 18px; height: 18px;
  display: grid; place-items: center;
  padding: 0 4px;
  border-radius: 99px;
  background: rgba(74, 46, 107, 0.9);
  border: 2px solid rgba(255, 243, 226, 0.95);
  font-size: 10px; font-weight: 800; letter-spacing: 0;
  color: #FFF3E2;
}
body.mobil .kdugme small { display: none; }
.kdugme:active { transform: translateY(3px) scale(0.97); }
.kdugme:focus-visible { outline: 3px solid var(--mavi); outline-offset: 3px; }

#btn-dans    { background-image: url('../arayuz/btn-dans.png'); }
#btn-spor    { background-image: url('../arayuz/btn-spor.png'); }
#btn-telefon { background-image: url('../arayuz/btn-telefon.png'); }
#btn-magaza  { background-image: url('../arayuz/btn-magaza.png'); }
#btn-gorsel  { background-image: url('../arayuz/btn-gorsel.png'); }
#btn-yardim  { background-image: url('../arayuz/btn-yardim.png'); }

/* --- etkilesim ipucu --- */
#ipucu {
  position: absolute; left: 50%; bottom: 96px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 0;
  /*
   * BU HAP CIZIM DEGIL CSS.
   *
   * Once cuzdan hapinin gorseli kullaniliyordu; ama o gorselin sol
   * ucunde PARA YUVASI var ve ipucunda para yok -- ekranda ipucu
   * yazisinin solunda bos, oyulmus bir daire duruyordu. Ayni paletle
   * elle cizilen hap hem o yuvayi tasimiyor hem her genislikte temiz.
   */
  min-height: 50px;
  padding: 0 20px;
  background: linear-gradient(180deg, #FFFDF8, #FFF3E2);
  border: 3px solid #B98CFF;
  border-radius: 99px;
  box-shadow: 0 4px 0 #8F5EE0, 0 10px 18px rgba(0, 0, 0, 0.32);
  color: #4A2E6B;
  font-size: 17px; font-weight: 800;
  white-space: nowrap;
  animation: yukselGel 0.18s ease-out;
}
@keyframes yukselGel {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
#ipucu.pahali { border-color: rgba(255, 90, 82, 0.6); }
#ipucu .fiyat { color: var(--altin); }
#ipucu .kilit { color: #ff9d9d; }

/*
 * TUS ROZETI: kabartmali krem tus gorseli.
 *
 * 9 dilim: dar bir "E" ile genis bir "SHIFT" ayni cerceveyi
 * paylasiyor, koseler ikisinde de ayni yuvarlaklikta kaliyor.
 */
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 4px 2px;
  /*
   * DORT KENARDAN dilim, yalnizca yatay degil.
   *
   * Yatay dilimde gorselin tam yuksekligi 30 piksellik ogeye
   * siginca kabartmali kare tus YASSI bir badem sekline donuyordu.
   * Kaynak 192x192 ve ucu 41; 9 piksellik kenarlik oranini koruyor.
   */
  border: 0 solid transparent;
  border-image: url('../arayuz/tus-rozeti.png') 41 fill;
  border-width: 9px;
  color: #4A2E6B;
  font: 800 13px/1 'Segoe UI', system-ui, sans-serif;
}
kbd.genis { min-width: 58px; }
kbd.fare { filter: hue-rotate(-18deg); }

/* --- bildirimler --- */
#bildirimler {
  position: absolute; left: 50%; top: 84px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(92vw, 460px);
}
.bildirim {
  padding: 10px 18px;
  background: var(--panel);
  border: 2px solid var(--kenar);
  border-left: 6px solid var(--mavi);
  border-radius: 12px;
  box-shadow: var(--golge);
  font-size: 15px; font-weight: 700;
  animation: bildirimGel 0.22s ease-out;
}
.bildirim.basari { border-left-color: var(--yesil); }
.bildirim.hata   { border-left-color: var(--kirmizi); }
.bildirim.odul   { border-left-color: var(--altin); }
.bildirim.solar  { opacity: 0; transform: translateY(-8px); transition: all 0.35s ease; }
@keyframes bildirimGel {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Paneller (magaza / yardim)                                          */
/* ------------------------------------------------------------------ */

.perde {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(8, 12, 20, 0.62);
  backdrop-filter: blur(4px);
  animation: perdeGel 0.16s ease-out;
}
@keyframes perdeGel { from { opacity: 0; } to { opacity: 1; } }

.panel {
  width: min(94vw, 900px);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #212c40, #172032);
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: panelGel 0.2s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.panel.dar { width: min(94vw, 560px); }
@keyframes panelGel {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.panel header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}
.panel header h2 { margin: 0; font-size: 20px; flex: 1; }
.panel-cuzdan {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 99px;
  font-weight: 800;
}
.panel-cuzdan i { font-style: normal; }
.panel-cuzdan b { color: var(--altin); }
/* 36px hicbir cihazda yeterli degil; 44 taban, dokunmatikte 48
   (bkz. dosya sonundaki `pointer: coarse` blogu). */
/* Kapat: pembe daire cizimi. Icindeki "X" metni gizleniyor -- carpi
   zaten gorselin kendisinde. */
.kapat {
  width: 44px; height: 44px;
  background: url('../arayuz/btn-kapat.png') center/contain no-repeat;
  border: none;
  color: transparent; font-size: 0; cursor: pointer;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  transition: transform 0.1s ease;
}
.kapat:active { transform: translateY(3px) scale(0.96); }

#magaza-sekmeler {
  display: flex; gap: 8px; padding: 12px 18px 0;
  flex-wrap: wrap;
}
#magaza-sekmeler button {
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid transparent;
  border-radius: 99px;
  color: #cdd6e6; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
/* Kontrast: beyaz yazi --mavi (#2fa8ff) uzerinde 2.57 idi (olculdu).
   Sekme rengi koyulastirildi, oran 4.3'e cikti. */
#magaza-sekmeler button.etkin {
  background: #1B79C9; border-color: #9ad6ff; color: #fff;
}

#magaza-liste {
  flex: 1; overflow-y: auto;
  padding: 14px 18px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.esya-kart {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.esya-kart .ust { display: flex; align-items: center; gap: 9px; }
.esya-kart .simge { font-size: 26px; }
.esya-kart .ad { font-size: 14px; font-weight: 700; line-height: 1.25; }
.esya-kart .alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.esya-kart .fiyat { color: var(--altin); font-weight: 800; font-size: 15px; }
/* Satin alma kapsulu -- yalnizca yatay dilim, yazi ustune yaziliyor. */
.esya-kart button {
  min-height: 34px;
  padding: 0 6px;
  border: 0 solid transparent;
  border-image: url('../arayuz/btn-satinal.png') 0 70 fill;
  border-width: 0 19px;
  color: #0C3B26; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  font-size: 13px; font-weight: 800; cursor: pointer;
  transition: transform 0.1s ease;
}
.esya-kart button:active { transform: translateY(2px); }
/* Alinamayan urun: ayni kapsul, rengi kacirilmis. */
.esya-kart button:disabled {
  filter: grayscale(0.85) brightness(0.85);
  color: #3D4A44; cursor: not-allowed;
}
.esya-kart.sahip { border-color: rgba(55, 216, 103, 0.5); }
/* "Senin" rozeti: yesil tik cizimi + yazi. */
.esya-kart.sahip .rozet {
  display: inline-flex; align-items: center; gap: 5px;
  color: #2FBF8F; font-weight: 800; font-size: 13px;
}
.esya-kart.sahip .rozet::before {
  content: '';
  width: 20px; height: 20px;
  background: url('../arayuz/rozet-sahip.png') center/contain no-repeat;
}
.esya-kart.kilitli { opacity: 0.72; }
.esya-kart .kilit { color: #ff9d9d; font-size: 12px; font-weight: 700; }

.panel footer {
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 12.5px; color: #a9b5cb; text-align: center;
}

.yardim-ic { padding: 16px 18px 20px; overflow-y: auto; }
.tus-listesi { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.tus-listesi li { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.tus-listesi li span { margin-left: 6px; color: #cdd6e6; }
.not { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: #b9c4d8; }
.not b { color: #fff; }
.not .yesil { color: var(--yesil); }

/* ------------------------------------------------------------------ */
/* Tehlike vinyeti -- klavye zindanindaki dev bekci                    */
/* ------------------------------------------------------------------ */

/*
 * Dev yaklastikca ekranin kenari kizariyor. Ses yok, HUD-da sayac yok;
 * 3-13 yas oyuncunun "arkamda bir sey var" bilgisini alabilecegi tek
 * kanal bu. Siddet CSS degiskeniyle (--tehlike 0..1) veriliyor ve
 * yalnizca gozle gorulur bir degisimde yaziliyor (bkz. oyun.js
 * tehlikeYaz) -- her karede stil yazmak pahali.
 *
 * Renk BILEREK yumusak: kirmizi-turuncu, kan degil. Korkutmak degil
 * "acele et" demek istiyoruz.
 */
#tehlike {
  position: fixed; inset: 0; z-index: 18;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 90, 60, 0) 42%,
    rgba(255, 90, 60, 0.30) 78%,
    rgba(210, 40, 30, 0.55) 100%
  );
}
body.tehlikede #tehlike {
  opacity: var(--tehlike, 0);
  animation: tehlikeNabiz 0.9s ease-in-out infinite;
}
@keyframes tehlikeNabiz {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

/* ------------------------------------------------------------------ */
/* Portal doldurma halkasi                                             */
/* ------------------------------------------------------------------ */

/*
 * Yesil halkada beklerken dolan cember. 3B halkanin kendisi de nabiz
 * atiyor ama "ne kadar kaldi" bilgisini vermiyor; 3-13 yas oyuncunun
 * BEKLEMESI gerektigini anlamasi icin somut bir dolum sart.
 * Dolum conic-gradient ile: tek CSS degiskeni (--oran) yaziliyor,
 * her karede DOM olusturulmuyor.
 */
#halka-dolum {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
  animation: bildirimGel 0.15s ease-out;
}
/*
 * DOLUM CEMBERI: krem halka gorseli zemin, uzerine dolan halka.
 *
 * Dolum hala `conic-gradient` ile olculuyor -- oran her karede
 * degisiyor ve bir PNG bunu yapamaz. Gradyan MASKE olarak
 * kullaniliyor: altta dolgu gorseli duruyor, gradyan onun ne kadarinin
 * gorunecegine karar veriyor. Boylece hem cizim hem canli dolum.
 */
#halka-dolum .halka-cember {
  position: relative;
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  background: url('../arayuz/cember-yatak.png') center/contain no-repeat;
  filter: drop-shadow(0 0 22px rgba(95, 227, 180, 0.5));
}
#halka-dolum .halka-cember::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../arayuz/cember-dolgu.png') center/contain no-repeat;
  -webkit-mask-image: conic-gradient(#000 var(--oran, 0%), transparent 0);
  mask-image: conic-gradient(#000 var(--oran, 0%), transparent 0);
}
#halka-dolum .halka-cember span {
  position: relative;
  font-size: 46px;
  animation: zipla 1s ease-in-out infinite;
}
#halka-dolum p {
  margin: 0;
  padding: 8px 20px;
  background: linear-gradient(180deg, #FFFDF8, #FFF3E2);
  border: 3px solid #B98CFF;
  border-radius: 99px;
  box-shadow: 0 4px 0 #8F5EE0, 0 8px 16px rgba(0, 0, 0, 0.3);
  color: #4A2E6B;
  font-size: 15px; font-weight: 800;
}

/* ------------------------------------------------------------------ */
/* Odullu video (js/reklam.js)                                         */
/* ------------------------------------------------------------------ */

#reklam-onay, #reklam-perde {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(6, 10, 18, 0.78);
  backdrop-filter: blur(5px);
  animation: perdeGel 0.16s ease-out;
}
#reklam-perde { z-index: 80; background: rgba(4, 7, 12, 0.94); }

.reklam-onay-kutu {
  width: min(92vw, 400px);
  padding: 24px 22px 20px;
  text-align: center;
  background: linear-gradient(180deg, #26324a, #182134);
  border: 3px solid rgba(255, 204, 51, 0.5);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  animation: panelGel 0.2s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.reklam-onay-simge { font-size: 60px; line-height: 1; margin-bottom: 6px; }
.reklam-onay-kutu h3 { margin: 0 0 6px; font-size: 21px; }
.reklam-onay-kutu p { margin: 0 0 14px; font-size: 14px; color: #b9c4d8; line-height: 1.5; }
.reklam-onay-odul {
  display: inline-block; margin-bottom: 18px; padding: 8px 16px;
  background: rgba(255, 204, 51, 0.14);
  border: 2px solid rgba(255, 204, 51, 0.45);
  border-radius: 99px;
  color: var(--altin); font-weight: 800; font-size: 14px;
}
.reklam-onay-dugmeler { display: flex; gap: 10px; }
.reklam-onay-dugmeler button {
  flex: 1; padding: 13px 10px;
  border: none; border-radius: 13px;
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.reklam-onay-izle { background: linear-gradient(180deg, #ffd85c, #f0a91e); color: #3a2600; }
.reklam-onay-vazgec { background: rgba(255, 255, 255, 0.1); color: #cdd6e6; }
.reklam-onay-dugmeler button:active { transform: scale(0.96); }

/* Reklam hazirlanirken -- SDK yuva ararken ekran bos kalmasin.
   z-index onay ekraninin ustunde ama SDK'nin kendi kabinin (99999)
   altinda: gercek reklam gelince zaten kaldiriliyor. */
#reklam-bekle {
  position: fixed; inset: 0; z-index: 75;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 18, 0.82);
  backdrop-filter: blur(5px);
  animation: perdeGel 0.16s ease-out;
}
.reklam-bekle-kutu {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 30px;
  background: linear-gradient(180deg, #26324a, #182134);
  border: 3px solid rgba(255, 204, 51, 0.45);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}
.reklam-bekle-donen {
  width: 46px; height: 46px;
  border: 5px solid rgba(255, 204, 51, 0.22);
  border-top-color: var(--altin);
  border-radius: 50%;
  animation: reklamDon 0.9s linear infinite;
}
.reklam-bekle-yazi { font-size: 15px; font-weight: 800; color: #e7edf8; }
@keyframes reklamDon { to { transform: rotate(360deg); } }

.reklam-kutu {
  width: min(94vw, 520px);
  background: #0b1018;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7);
}
.reklam-ekran {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #1d2b45, #35204a 60%, #4a2036);
}
.reklam-logo { font-size: 64px; animation: zipla 1.4s ease-in-out infinite; }
.reklam-yazi { font-size: 15px; color: #cdd6e6; letter-spacing: 0.5px; }
.reklam-cubuk { height: 5px; background: rgba(255, 255, 255, 0.12); }
.reklam-cubuk i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--altin), #fff0b0);
  transition: width 0.9s linear;
}
.reklam-alt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #121a26;
}
.reklam-sayac { font-size: 13px; color: #97a3b8; font-weight: 700; }
.reklam-atla {
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.reklam-atla:disabled { opacity: 0.35; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* Mobil kontroller                                                    */
/* ------------------------------------------------------------------ */

#mobil { position: fixed; inset: 0; z-index: 25; pointer-events: none; }

/*
 * KUMANDA da cizim. Yari saydam koyu daireler yerine krem taban,
 * pembe topuz ve nane/sari butonlar.
 *
 * Butonlarin ICINDEKI emoji SILINIYOR (`font-size: 0`): ok ve el
 * simgeleri artik gorselin kendisinde. Isaretlemedeki metin erisim
 * icin duruyor, ekranda gorunmuyor.
 */
#cubuk {
  position: absolute; left: 26px; bottom: 26px;
  width: 132px; height: 132px;
  background: url('../arayuz/cubuk-taban.png') center/contain no-repeat;
  border: 0;
  pointer-events: auto;
  touch-action: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
#cubuk-topu {
  position: absolute; left: 50%; top: 50%;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  background: url('../arayuz/cubuk-topu.png') center/contain no-repeat;
  border-radius: 50%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

#btn-zipla, #btn-etkilesim {
  position: absolute; right: 28px;
  width: 92px; height: 92px;
  border: 0;
  background: transparent center/contain no-repeat;
  color: transparent; font-size: 0;
  pointer-events: auto; cursor: pointer;
  touch-action: none;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35));
  transition: transform 0.1s ease;
}
#btn-zipla { bottom: 30px; background-image: url('../arayuz/btn-zipla.png'); }
#btn-etkilesim { bottom: 138px; background-image: url('../arayuz/btn-etkilesim.png'); }
#btn-zipla:active, #btn-etkilesim:active { transform: translateY(4px) scale(0.96); }

/* ------------------------------------------------------------------ */
/* DIKEY EKRAN / MOBIL -- birinci sinif duzen                          */
/* ------------------------------------------------------------------ */

/*
 * Oyuncularin neredeyse tamami telefonda ve DIKEY tutuyor.
 * `body.dikey` en/boy < 0.88 oldugunda, `body.mobil` dokunmatik
 * cihazlarda ekleniyor (bkz. oyun.js).
 *
 * ---------------------------------------------------------------------
 * BICIM MI, DOKUNMA MI
 *
 * Iki ayri soru, iki ayri kapi -- karistirilirsa ikisi de yanlis yere
 * dusuyor:
 *
 *   `dikey`  = EKRAN BICIMI. Sutuna gecmek, yaziyi kucultmek, paneli
 *              alt sayfaya almak. Dokunmatik olmayan dar bir masaustu
 *              penceresinde de gecerli.
 *   `mobil`  = DOKUNMA. Sanal cubuk, zipla/etkilesim dugmeleri ve
 *              onlarin isgal ettigi ALT SERIT. Klavyeli cihazda o
 *              serit YOK; ipucunu 210px yukari asmak orada ekranin
 *              ortasinda asili duran bir balon demekti.
 *
 * ---------------------------------------------------------------------
 * NEDEN HER KURALIN BIR DE MEDYA ESI VAR (bkz. dosyanin devami)
 *
 * `dikey`/`yatay` siniflarini oyun.js yaziyor: modul yuklenisinde,
 * `resize`de ve `orientationchange` + 120ms sonra. Yani sinif GEC
 * gelebiliyor (telefon her donduruldugunde) veya hic gelmiyor (modul
 * yuklenemezse). O aralikta dugme seridi satir kalip cuzdanin ustune
 * biniyordu. Bicim karari CSS'in olmali; asagidaki `body.dikey`
 * kurallarinin tamami `@media (max-aspect-ratio: 88/100)` altinda
 * AYNEN tekrarlaniyor. Ikisi TEK BIR BUTUN -- birine dokunan otekine
 * de dokunmali. Esik uc yerde yazili ve ayni olmak zorunda:
 * oyun.js DIKEY_ESIK, emoji.js DIKEY_ESIK, buradaki 88/100.
 *
 * Uc temel karar:
 *
 * 1. HUD dugmeleri DIKEY SUTUNA gecti. Dikey ekranin genisligi
 *    (~390 px) bes dugmeyi yan yana almiyor; alsa bile ust serit
 *    cuzdanla carpisiyordu.
 * 2. Dokunma hedefleri EN AZ 52 px. 3-13 yas parmagi yetiskin
 *    parmagindan kucuk ama isabeti cok daha dusuk; kucuk dugme bu
 *    yasta dogrudan "oyun bozuk" demek.
 * 3. Paneller ALT SAYFA (bottom sheet). Dikey ekranda ortada duran
 *    kutu hem basparmagin uzagina dusuyor hem de ekranin yarisini
 *    bosa harciyor.
 */

body.dikey #hud-sol {
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  gap: 6px;
}
body.dikey #cuzdan {
  font-size: 19px;
  padding: 7px 15px 7px 10px;
}
body.dikey #seviye-kutu {
  width: 186px;
  padding: 7px 12px 9px;
}
body.dikey #seviye-ust { font-size: 12px; margin-bottom: 5px; }
body.dikey #seviye-sayi { font-size: 10px; }
body.dikey #seviye-bar { height: 18px; }

/* --- dugmeler: sag kenarda dikey sutun --- */
/*
 * Sutunda `max-width` sigortasi KAPATILIYOR: o sigorta satir kipinin
 * derdi (bkz. #hud-sag). Sutunda ayni deger dar bir dikey ekranda
 * kutuyu 54px'lik dugmelerin altina dusurup onlari disari tasirirdi.
 */
body.dikey #hud-sag {
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  max-width: none;
}
body.dikey .kdugme {
  width: 81px; height: 81px;
  border-radius: 17px;
}
body.dikey .kdugme i { font-size: 26px; }
body.dikey .kdugme small { display: none; }   /* klavye kisayolu telefonda anlamsiz */

/* --- etkilesim ipucu: buyuk ve sarabilir --- */
body.dikey #ipucu {
  max-width: 92vw;
  padding: 12px 20px;
  font-size: 16px;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
/*
 * Ipucunu 210px yukari asan sey CUBUK, ekran bicimi degil. Klavyeli
 * dikey bir pencerede #mobil gizli, alt serit bos ve balon oraya
 * asilinca ekranin ortasinda duruyordu; oradaki dogru deger tabandaki
 * 96px.
 */
body.dikey.mobil #ipucu { bottom: 210px; }
body.mobil #ipucu kbd { display: none; }      /* dokunmatikte E tusu yok */
body.mobil #ipucu::before {
  content: '👆';
  font-size: 20px;
}

/*
 * Bildirim seridi dugme SUTUNUNUN soluna sigmali.
 *
 * Olculdu: 390px'lik ekranda min(94vw,400) = 366px genislik x
 * 12...378 bandini kapliyor, dugme sutunu ise 326'da basliyor ve
 * y 96...135'te 52px ust uste biniyordu. 88 = sag sutun (54) +
 * sag pay (10) + iki yanda nefes payi. Ust sinir olarak 400px
 * DURUYOR: genis bir tablette serit bosuna gerilmesin.
 *
 * DIKEY sinir ayni baslangica BAGLI olmali. #hud-sol ustten
 * `max(10px, env(safe-area-inset-top))` kadar iniyor, serit ise sabit
 * 96'da duruyordu: centikli bir telefonda (iPhone dikey, inset 47)
 * sol sutun 37px asagi kayip seridin altina giriyor ve serit --
 * DOM'da sonra geldigi icin -- tam da yeni dolan XP cubugunun ustune
 * biniyor. Cocuk seviye atliyor, odulun gorsel karsiligini
 * goremiyor. 86 = eski 96 eksi eski 10: centiksiz ekranda gorunum
 * bit bit ayni kaliyor.
 */
body.dikey #bildirimler {
  top: calc(max(10px, env(safe-area-inset-top)) + 86px);
  left: calc(50% - 32px);
  width: min(400px, calc(100vw - 88px));
}
body.dikey .bildirim { font-size: 14px; padding: 9px 14px; }

body.dikey #halka-dolum { top: 42%; }
body.dikey #halka-dolum .halka-cember { width: 146px; height: 146px; }
body.dikey #halka-dolum .halka-cember::before { width: 120px; height: 120px; }

/* --- mobil kontroller: buyuk ve basparmak menzilinde --- */
/*
 * Kapi `.dikey.mobil`: bu olculer sanal cubugu ve dokunma dugmelerini
 * boyutluyor, yani DOKUNMA karari. #mobil klavyeli cihazda zaten
 * gizli, ama olcuyu ekran bicimine baglamak yanlis yerde duran bir
 * kural birakiyordu (emoji.css onlari degisken uzerinden okuyor).
 */
body.dikey.mobil #cubuk {
  left: 18px;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 154px; height: 154px;
}
body.dikey.mobil #cubuk-topu { width: 70px; height: 70px; margin: -35px 0 0 -35px; }

body.dikey.mobil #btn-zipla,
body.dikey.mobil #btn-etkilesim {
  right: 20px;
  width: 96px; height: 96px;
  font-size: 38px;
}
body.dikey.mobil #btn-zipla { bottom: max(26px, env(safe-area-inset-bottom)); }
body.dikey.mobil #btn-etkilesim { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 112px); }

/* --- paneller: alt sayfa --- */
body.dikey .perde {
  align-items: flex-end;
  padding: 0;
}
body.dikey .panel,
body.dikey .panel.dar {
  width: 100%;
  max-height: 88vh;
  border-radius: 24px 24px 0 0;
  border-bottom: none;
  animation: sayfaGel 0.22s cubic-bezier(0.2, 1.1, 0.4, 1);
}
@keyframes sayfaGel {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
body.dikey .panel header { padding: 14px 16px; }
body.dikey .panel header h2 { font-size: 18px; }
/* 48: dikey kural ozgullukce dosya sonundaki `pointer: coarse`
   blogunu ezdigi icin deger burada da yukseltildi. */
body.dikey .kapat { width: 48px; height: 48px; font-size: 20px; }
body.dikey #magaza-liste {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px 14px calc(18px + env(safe-area-inset-bottom));
}
body.dikey .esya-kart { padding: 10px; }
body.dikey .esya-kart .ad { font-size: 13px; }
body.dikey .esya-kart button { padding: 9px 12px; font-size: 13px; }
body.dikey #magaza-sekmeler { padding: 10px 14px 0; }
body.dikey #magaza-sekmeler button { padding: 9px 15px; font-size: 13px; }
body.dikey .panel footer { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); font-size: 11.5px; }
body.dikey .yardim-ic { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }

/* --- ogretici katmani: dikeyde daha buyuk ve ortada --- */
/*
 * Calan telefon 3-13 yas oyuncunun oyundaki en onemli kesfi. Dikey
 * telefonda kenarda duran 100 pikselik bir simge fark edilmiyordu;
 * ekranin ortasina alinip buyutuldu.
 *
 * Buyutme OLCU DEGISKENIYLE yapiliyor, elle width/height ile DEGIL.
 *
 * Once simge (.ogr-tel-simge) 132px'e sabitlenmisti ama kilifi
 * (.ogr-tel-yuva) `--ogr-tel`e bagli ve dikeyde 86px kaliyordu. Kilifa
 * gore konumlanan her sey yanlis yere dusuyordu: kapatma rozeti
 * (right/top -8) yesil dairenin ICINE, ses dalgalari (yuvanin %100'u)
 * 23px sol-yukari kacik, dairenin tasan 46px'i de altindaki "Telefonun
 * caliyor!" yazisinin uzerine. Cocuk rozeti simge sanip basiyor,
 * telefon susuyor ve gorev zinciri o oturumda hic ilerlemiyor.
 *
 * Degiskeni yazmak yuvayi, dalgalari, rozet konumunu ve ortalamayi
 * kendiliginden dogru yapiyor. Emojinin yazi boyu (varsayilan oran
 * 0.52 = 69px) elle 96'da BIRAKILIYOR: bugunku goruntu birebir korunsun.
 */
body.dikey #ogr-telefon {
  left: 50% !important;
  right: auto !important;
  top: 46% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  --ogr-tel: 132px;
}
body.dikey #ogr-telefon .ogr-tel-emoji {
  font-size: 96px;
}
/* 46 -> 48: dokunma hedefi alt siniri (bkz. ipucu.css `pointer: coarse`
   blogu; oradaki kural bu secicinin ozgullugunu asamiyor). */
body.dikey #ogr-telefon .ogr-tel-kapat {
  width: 48px; height: 48px;
  font-size: 22px;
}
body.dikey #ogr-telefon .ogr-tel-yazi {
  font-size: 19px;
  padding: 9px 20px;
}
body.dikey #ogr-parmak { font-size: 62px; }
/*
 * Balon da dugme SUTUNUNUN soluna sigmali (bkz. #bildirimler).
 * Olculdu: 92vw = 359px, x 15...374 -> sutunla (326'dan itibaren)
 * cakisiyordu. 96 = sutun (54) + sag pay (10) + iki yanda nefes payi.
 *
 * `top` da HUD ile ayni baslangica bagli (bkz. #bildirimler): balonun
 * tabandaki 132'si #hud-sol'un 10'una gore olculmustu, centikli
 * telefonda sol sutun asagi kayinca balon seviye kutusunun ustune
 * biniyordu. 122 = 132 eksi 10; centiksiz ekranda deger degismiyor.
 */
body.dikey #ogr-balon {
  font-size: 17px;
  top: calc(max(10px, env(safe-area-inset-top)) + 122px);
  left: calc(50% - 34px);
  max-width: min(92vw, calc(100vw - 96px));
  padding: 14px 20px;
}
/*
 * Hayalet W/A/S/D kutusu dikeyde SAGA kayiyor.
 *
 * Sol alt kose dikeyde bos DEGIL: emoji dugmesi orada (emoji.css
 * #emoji-dugme, sol 18 / alt 18, 62px). Kutu buradaki 1.25 olcekle
 * 146px'ten 182px'e cikiyor ve sol kenari 5.75'e sarkiyordu; olculdu:
 * dugmenin %76'si A ve S tuslarinin altinda kaliyordu. Ogretici katman
 * `pointer-events: none` oldugu icin cocugun nabiz atan A tusuna
 * dokunusu ALTTAKI emoji dugmesine dusuyor -- karakter yurumuyor,
 * ekranin soluna alti balon aciliyor ve okuma bilmeyen cocuk icin
 * ogretici kilitlenmis gibi gorunuyor.
 *
 * 108 = dugmenin sag kenari (80) + olcekten gelen 18.25 sol tasma +
 * nefes payi. Dokunmatik kapisi AYNI degeri ipucu.css'te yaziyor
 * (o secici daha ozgul); ikisi birlikte degismeli.
 */
body.dikey #ogr-tuslar {
  left: 108px;
  transform: scale(1.25);
  transform-origin: bottom center;
}

/*
 * Telefonun kapatma dugmesi KIRMIZI olmali.
 *
 * telefon.css icinde dugmenin `background-image` parlamasi taban
 * rengini eziyor ve dugme seffaf kaliyor (olculdu: backgroundColor
 * rgba(0,0,0,0)). Cocugun gorecegi en onemli dugme bu -- kirmizi
 * burada garanti altina aliniyor.
 */
#telefon .tel-kapat {
  background-color: #ff4136;
}
body.dikey #telefon .tel-kapat {
  width: 60px; height: 60px;
}

/* ------------------------------------------------------------------ */
/* DIKEY EKRAN -- MEDYA ESI                                            */
/* ------------------------------------------------------------------ */

/*
 * YUKARIDAKI `body.dikey` TAKIMININ BIREBIR AYNISI.
 *
 * NEDEN: sinifi js yaziyor ve gec gelebiliyor (her ekran donusunde en
 * az 120 ms) ya da hic gelmiyor (modul yuklenemezse). Bicim karari
 * tarayicinin; sinif yalnizca js davranisi ve geri uyum icin duruyor.
 * `max-aspect-ratio` "<=" demektir, oyun.js'teki karsilastirma ise
 * "<" -- sinir degerde ayrismamalari icin js tarafi da "<=" olmali.
 *
 * Secicilerden yalnizca `body.dikey` oneki dusuyor, `body` kaliyor:
 * ozgulluk boylece tabandaki kurallarin (#hud-sol, .kdugme ...) bir
 * tik ustunde, `body.dikey`in ise bir tik altinda kaliyor. Ayni
 * degerleri yazdiklari icin hangisinin kazandigi onemsiz.
 *
 * BURAYA DOKUNAN YUKARIYA DA DOKUNSUN.
 */
@media (max-aspect-ratio: 88/100) {
  body #hud-sol {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    gap: 6px;
  }
  body #cuzdan {
    font-size: 19px;
    padding: 7px 15px 7px 10px;
  }
  body #seviye-kutu {
    width: 158px;
    padding: 5px 10px 7px;
  }
  body #seviye-ust { font-size: 11px; margin-bottom: 4px; }
  body #seviye-sayi { font-size: 10px; }
  body #seviye-bar { height: 7px; }

  body #hud-sag {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    max-width: none;
  }
  body .kdugme {
    width: 81px; height: 81px;
    border-radius: 17px;
  }
  body .kdugme i { font-size: 26px; }
  body .kdugme small { display: none; }

  body #ipucu {
    max-width: 92vw;
    padding: 12px 20px;
    font-size: 16px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
  body.mobil #ipucu { bottom: 210px; }

  body #bildirimler {
    top: calc(max(10px, env(safe-area-inset-top)) + 86px);
    left: calc(50% - 32px);
    width: min(400px, calc(100vw - 88px));
  }
  body .bildirim { font-size: 14px; padding: 9px 14px; }

  body #halka-dolum { top: 42%; }
  body #halka-dolum .halka-cember { width: 146px; height: 146px; }
  body #halka-dolum .halka-cember::before { width: 120px; height: 120px; }

  body.mobil #cubuk {
    left: 18px;
    bottom: max(22px, env(safe-area-inset-bottom));
    width: 154px; height: 154px;
  }
  body.mobil #cubuk-topu { width: 66px; height: 66px; margin: -33px 0 0 -33px; }

  body.mobil #btn-zipla,
  body.mobil #btn-etkilesim {
    right: 20px;
    width: 96px; height: 96px;
    font-size: 38px;
  }
  body.mobil #btn-zipla { bottom: max(26px, env(safe-area-inset-bottom)); }
  body.mobil #btn-etkilesim { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 112px); }

  body .perde {
    align-items: flex-end;
    padding: 0;
  }
  body .panel,
  body .panel.dar {
    width: 100%;
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    animation: sayfaGel 0.22s cubic-bezier(0.2, 1.1, 0.4, 1);
  }
  body .panel header { padding: 14px 16px; }
  body .panel header h2 { font-size: 18px; }
  body .kapat { width: 48px; height: 48px; font-size: 20px; }
  body #magaza-liste {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom));
  }
  body .esya-kart { padding: 10px; }
  body .esya-kart .ad { font-size: 13px; }
  body .esya-kart button { padding: 9px 12px; font-size: 13px; }
  body #magaza-sekmeler { padding: 10px 14px 0; }
  body #magaza-sekmeler button { padding: 9px 15px; font-size: 13px; }
  body .panel footer { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); font-size: 11.5px; }
  body .yardim-ic { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }

  body #ogr-telefon {
    left: 50% !important;
    right: auto !important;
    top: 46% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    --ogr-tel: 132px;
  }
  body #ogr-telefon .ogr-tel-emoji {
    font-size: 96px;
  }
  body #ogr-telefon .ogr-tel-kapat {
    width: 48px; height: 48px;
    font-size: 22px;
  }
  body #ogr-telefon .ogr-tel-yazi {
    font-size: 19px;
    padding: 9px 20px;
  }
  body #ogr-parmak { font-size: 62px; }
  body #ogr-balon {
    font-size: 17px;
    top: calc(max(10px, env(safe-area-inset-top)) + 122px);
    left: calc(50% - 34px);
    max-width: min(92vw, calc(100vw - 96px));
    padding: 14px 20px;
  }
  body #ogr-tuslar {
    left: 108px;
    transform: scale(1.25);
    transform-origin: bottom center;
  }

  body #telefon .tel-kapat {
    width: 60px; height: 60px;
  }
}

/* Dokunmatikte klavye listesi yerine dokunma listesi */
#dokunma-listesi { display: none; }
body.mobil #tus-listesi { display: none; }
body.mobil #dokunma-listesi { display: grid; }
.tus-listesi kbd.dokun {
  min-width: 34px; height: 30px;
  background: linear-gradient(180deg, #eef3ff, #c9d4ea);
  font-size: 15px;
}

/* --- cok kucuk telefonlar --- */
@media (max-width: 380px) {
  body.dikey #cuzdan { font-size: 17px; }
  body.dikey #seviye-kutu { width: 138px; }
  body.dikey .kdugme { width: 72px; height: 72px; border-radius: 20px; }
  body.dikey .kdugme i { font-size: 23px; }
  body.dikey.mobil #cubuk { width: 134px; height: 134px; }
  body.dikey.mobil #btn-zipla,
  body.dikey.mobil #btn-etkilesim { width: 84px; height: 84px; font-size: 34px; }
  body.dikey #ipucu { font-size: 15px; }
  body.dikey.mobil #ipucu { bottom: 190px; }
}
/* Medya esi -- bkz. "DIKEY EKRAN -- MEDYA ESI". */
@media (max-width: 380px) and (max-aspect-ratio: 88/100) {
  body #cuzdan { font-size: 17px; }
  body #seviye-kutu { width: 138px; }
  body .kdugme { width: 72px; height: 72px; border-radius: 20px; }
  body .kdugme i { font-size: 23px; }
  body.mobil #cubuk { width: 134px; height: 134px; }
  body.mobil #btn-zipla,
  body.mobil #btn-etkilesim { width: 84px; height: 84px; font-size: 34px; }
  body #ipucu { font-size: 15px; }
  body.mobil #ipucu { bottom: 190px; }
}

/* --- alcak yatay ekran (telefon yan cevrildiginde) --- */
/*
 * Esik BILEREK 480, ipucu.css'teki 520 degil: burasi HUD'u ve dokunma
 * kontrollerini yeniden bicimlendiriyor ve 900x506 gibi siradan bir
 * dar masaustu penceresinin masaustu HUD'unu kaybetmesi istenmiyor.
 * ipucu.css'teki 520'lik kirilma yalnizca olcu kucultuyor, orada
 * zararsiz.
 *
 * SUTUN YOK, SATIR VAR -- olculdu: 390px yuksekliginde alti dugmelik
 * sutun (369px) sag alttaki zipla/etkilesim dugmeleriyle x 792...816
 * bandinda iki kez cakisiyor. Bu ekranda bol olan tek yon yatay.
 */
@media (orientation: landscape) and (max-height: 480px) {
  #hud-sol { top: 8px; left: 8px; gap: 6px; }
  /*
   * Sol sutun masaustu olcusunde 108px, yani 390px'lik bir ekranin
   * dortte biri; ustelik #bildirimler ile 26px cakisiyordu. Dikey
   * kipteki derli olculer burada da gecerli (166px'te bitiyor).
   */
  #cuzdan { font-size: 19px; padding: 7px 15px 7px 10px; }
  #seviye-kutu { width: 158px; padding: 5px 10px 7px; }
  #seviye-ust { font-size: 11px; margin-bottom: 4px; }
  #seviye-sayi { font-size: 10px; }
  #seviye-bar { height: 7px; }
  /* Sol sutun 166px'te bittigi icin sigorta payi da daraliyor. */
  #hud-sag { top: 8px; right: 8px; max-width: calc(100vw - 190px); }
  /* 44px dokunma hedefi bu yasta kucuk; 48 alt sinir. */
  .kdugme { width: 48px; height: 48px; }
  /*
   * Uzun bir Turkce ipucu tek satirda 560px'i asinca soldaki cubugun
   * ve sagdaki dugmelerin altina giriyordu. 300 = cubuk (14 + 118) +
   * dugme (28 + 74) + nefes payi.
   */
  #ipucu {
    bottom: 118px;
    max-width: min(560px, calc(100vw - 300px));
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  #cubuk { width: 118px; height: 118px; bottom: 14px; left: 14px; }
  #btn-zipla { width: 74px; height: 74px; bottom: 16px; }
  #btn-etkilesim { width: 74px; height: 74px; bottom: 100px; }
  .panel { max-height: 94vh; }
}

/* ------------------------------------------------------------------ */
/* Kucuk ekran (dar masaustu penceresi)                                */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
  #magaza-liste { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Dokunma hedefleri                                                   */
/* ------------------------------------------------------------------ */

/*
 * Panel icindeki dugmeler HUD dugmelerinden kucuk kaliyordu: magaza
 * sekmeleri ~30px, satin al dugmesi ~31px, kapatma 44px. 3-13 yas
 * parmagi yetiskin parmagindan kucuk ama isabeti cok daha dusuk --
 * bu olculer dogrudan "dugmeye basamiyorum" demek.
 *
 * Kapi `pointer: coarse`, `body.mobil` DEGIL: panel CSS'i body
 * sinifina hic bakmiyor ve bakmaya da baslamamali. Ayrica buyume
 * yalnizca parmakla kullanilan cihazlarda oluyor, fareyle acilan
 * 1280x720 gorunumu oldugu gibi kaliyor.
 */
@media (pointer: coarse) {
  .kapat { width: 48px; height: 48px; }
  #magaza-sekmeler button { min-height: 48px; }
  .esya-kart button { min-height: 48px; }
}

/* ------------------------------------------------------------------ */
/* Olta uyarisi — balik vurunca ekranin ORTASINDA                      */
/* ------------------------------------------------------------------ */

/*
 * NEDEN #ipucu DEGIL: ipucu ekranin ALT kenarinda ve "yaklas, E'ye bas"
 * gibi sabirli bir mesaj icin. Balik vurusu 1.9 saniyelik ANLIK bir
 * tepki istiyor; uyarinin cocugun gozunun zaten oldugu yerde, yani
 * karakterin hemen ustunde olmasi gerekiyor.
 *
 * Alttaki ince cubuk kalan sureyi gosteriyor (--oran). Sayi degil
 * cubuk: okuma bilmeyen cocuk da "azaliyor" gordugu icin aceleci
 * davraniyor.
 */
#olta-uyari {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 18px;
  border-radius: 20px;
  background: rgba(12, 18, 30, 0.82);
  border: 3px solid #ffd93d;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 217, 61, 0.45);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  animation: oltaNabiz 0.5s ease-in-out infinite alternate;
}

#olta-uyari.gizli { display: none; }

#olta-uyari kbd {
  min-width: 46px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #ffd93d;
  color: #20262f;
  font-size: 26px;
  font-weight: 900;
  text-align: center;
}

/* Kalan sure cubugu: kutunun alt kenarinda. */
#olta-uyari i {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
#olta-uyari i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--oran, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd93d, #ff9a3c);
}

@keyframes oltaNabiz {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.06); }
}

body.dikey #olta-uyari { font-size: 18px; padding: 12px 16px 16px; }
body.dikey #olta-uyari kbd { min-width: 40px; font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  #olta-uyari { animation: none; }
}

/* ------------------------------------------------------------------ */
/* YARIS TABELASI                                                      */
/*                                                                     */
/* Ekranin UST ORTASINDA: sol ust cuzdan, sag ust dugme sutunu ve alt  */
/* kenar mobil kumanda tarafindan zaten dolu. Tur sayaci olmadan cocuk */
/* kacinci turda oldugunu bilemiyor.                                   */
/* ------------------------------------------------------------------ */
#yaris-hud {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 16px;
  background: rgba(12, 16, 28, 0.74);
  border: 2px solid rgba(120, 240, 170, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  z-index: 6;
}
#yaris-hud.gizli { display: none; }

.yh-kutu, .ih-kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 3px 10px 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFDF8, #FFF3E2);
  border: 2px solid #B98CFF;
  box-shadow: 0 3px 0 #8F5EE0;
}
.yh-kutu small, .ih-kutu small {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #8F72A8;
  font-weight: 800;
}
.yh-kutu b, .ih-kutu b {
  font-size: 19px;
  font-weight: 900;
  color: #4A2E6B;
  font-variant-numeric: tabular-nums;   /* rakam degisince genislik oynamasin */
}
.yh-hiz b { color: #7ef0aa; }

/* Cikis kapsulu -- yaris ve isik modlarinda ayni cizim. */
#yh-cik, #ih-cik {
  background: transparent;
  min-height: 36px;
  border: 0 solid transparent;
  border-image: url('../arayuz/btn-cik.png') 0 101 fill;
  border-width: 0 26px;
  padding: 0 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #5A2A0E; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
#yh-cik:active, #ih-cik:active { transform: translateY(2px); }

/* Dikey telefonda kumanda ve dugmeler daralinca tabela da kuculuyor. */
body.dikey #yaris-hud { gap: 5px; padding: 5px 6px; }
body.dikey .yh-kutu { min-width: 48px; padding: 2px 5px; }
body.dikey .yh-kutu b { font-size: 16px; }
body.dikey #yh-cik { padding: 0 9px; font-size: 12px; }

/* ------------------------------------------------------------------ */
/* KIRMIZI ISIK YESIL ISIK TABELASI                                    */
/*                                                                     */
/* Durum seridi EKRANIN ORTASINDA VE KOCAMAN. Bu modda tek bir bilgi   */
/* var -- kos ya da dur -- ve okuma bilmeyen bir cocugun onu gormesi   */
/* icin kucuk bir kose rozeti yetmiyor. Renk de bilgiyi tek basina     */
/* tasiyor: yesil/kirmizi zemin, ustunde emoji.                        */
/* ------------------------------------------------------------------ */
#isik-hud {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 6;
}
#isik-hud.gizli { display: none; }

/*
 * DURUM SERIDI: uc ayri cizim, yalnizca YATAY dilimli.
 *
 * Solundaki trafik lambasi merceği gorselin sol ucunda; bu yuzden sol
 * kenarlik genis (46px). Yazi mercegin sagindan basliyor.
 */
#isik-durum {
  min-height: 54px;
  display: flex; align-items: center;
  padding: 0 10px 0 0;
  border: 0 solid transparent;
  /*
   * Sol dilim 200.
   *
   * Cizimde mercekten SONRA barin kendi yuvarlak ucu ve parlamasi var
   * (kaynak x 105-195). 152'de kesince o uc ikiye boluniyor: yarisi
   * sabit kenarlikta, yarisi gerilen ortada kaliyor ve ekranda yazinin
   * solunda havada duran bir pembe leke gibi goruluyordu. 200 hem
   * mercegi hem ucu tamamen kapsiyor; orta dilim artik DUZ bar.
   *
   * Kenarlik genisligi 84 = 200 x (54/128), yani cizimin kendi orani.
   */
  border-image: url('../arayuz/serit-kos.png') 0 43 0 200 fill;
  border-width: 0 16px 0 84px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  transition: none;
}
#isik-durum b {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* Kirmizida serit ayrica NABIZ atiyor: renk korlugu olan ya da ekrana
   yandan bakan cocuk icin ikinci bir kanal. */
#isik-hud.kirmizi #isik-durum {
  border-image-source: url('../arayuz/serit-dur.png');
  animation: isik-nabiz 620ms ease-in-out infinite;
}
#isik-hud.donuyor #isik-durum { border-image-source: url('../arayuz/serit-donuyor.png'); }
@keyframes isik-nabiz {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.ih-alt {
  display: flex;
  align-items: stretch;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 15px;
  background: rgba(12, 16, 28, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}
/* .ih-kutu tanimi .yh-kutu ile ORTAK -- yukariya bakiniz. */
/* Son on saniye: sayac kirmizi. */
#isik-hud.acele #ih-sure { color: #ff8a7a; }



body.dikey #isik-durum { padding: 4px 16px; }
body.dikey #isik-durum b { font-size: 21px; }
body.dikey .ih-alt { gap: 5px; padding: 4px 6px; }
body.dikey .ih-kutu { min-width: 48px; padding: 2px 5px; }
body.dikey .ih-kutu b { font-size: 15px; }
body.dikey #ih-cik { padding: 0 9px; font-size: 12px; }

/* ------------------------------------------------------------------ */
/* DIKEY TELEFONDA UST ORTA TABELALAR                                  */
/*                                                                     */
/* Olculdu (375x812): #hud-sol (cuzdan + seviye) x 10..148 / y 10..106,
/* #hud-sag dugme sutunu x 317..365. Ust ortaya konan tabelalar 71..304
/* araligina dusuyor, yani SOL KUTUYLA UST USTE biniyor -- para sayisi
/* "DUR!" yazisinin altinda kayboluyordu. Dikeyde ikisini de sol
/* kutunun ALTINA aliyoruz; oradan asagisi bos (mobil kumanda ekranin
/* dibinde).                                                           */
/* ------------------------------------------------------------------ */
body.dikey #isik-hud,
body.dikey #yaris-hud { top: 112px; }

/* Geri sayim: sari-turuncu, nabizsiz. Kirmizi nabzi "dur" demek --
   baslamamis bir turda o yanlis sinyal olurdu. */
#isik-hud.geri #isik-durum { border-image-source: url('../arayuz/serit-donuyor.png'); filter: grayscale(0.55) drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }