/* ==================================================================
   Brookhaven RP -- oyun ici telefon.

   Bu dosyada YALNIZCA #telefon (ve kardesi #telefon-perde) ile alt
   secicileri var. Oyunun HUD-u, magaza paneli ve yukleme ekrani baska
   dosyalarda: telefonu tamamen kaldirmak istedigimizde tek bir <link>
   silmek yetsin.

   MANTIK BOYUT
     cerceve ic ekrani 320 x 568 (ana ekran)
                       320 x 602 (uygulama acikken, ust serit ekleniyor)
     ekranin tamami #telefon uzerindeki scale(--tel-olcek) ile
     pencereye uyduruluyor; olcegi telefon.js hesapliyor.

   Ekran satirlari:  durum 26 + [serit 34] + icerik 520 + home 22
   Icerik yuksekligi 520 SABIT -- mini oyun tuvalinin mantik boyutu.
   ================================================================== */

/* Projede genel bir reset olmayabilir. Cerceve 344 = 320 ekran + 2 x 12
   kenar hesabi content-box ile 368 px'e cikiyor ve telefon pencerenin
   sagindan tasiyordu -- bu satir o hesabi kilitliyor. */
#telefon,
#telefon *,
#telefon *::before,
#telefon *::after {
  box-sizing: border-box;
}

#telefon {
  --tel-olcek: 1;
  --tel-mavi: #4a90e2;
  --tel-mor: #7b5cf0;
  --tel-yesil: #3fbf72;
  --tel-sari: #ffcc33;
  --tel-kirmizi: #e2574a;
  --tel-kagit: #ffffff;
  --tel-metin: #1b2130;
  --tel-solgun: #7a8698;
  --tel-cerceve: #1a1e27;

  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;

  width: 344px;                 /* cerceve 320 + 2 x 12 kenar */
  transform: scale(var(--tel-olcek));
  transform-origin: 100% 100%;

  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  color: var(--tel-metin);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Kapaliyken tiklamayi yutmasin; gorunurlugun gecikmesi kapanis
     animasyonunun bitmesini bekliyor. */
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.28s;
}

#telefon.tel--acik {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ------------------------------------------------------------------ */
/* Cerceve                                                             */
/* ------------------------------------------------------------------ */

.tel-cerceve {
  width: 344px;
  padding: 12px;
  border-radius: 44px;
  background:
    linear-gradient(160deg, #39414f 0%, #232935 42%, #12151c 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.18) inset,
    0 -2px 0 rgba(0, 0, 0, 0.5) inset,
    0 22px 46px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.35);

  /* Acilis: asagidan yukari kayip olceklenerek. Hafif asma
     (cubic-bezier son degeri > 1) telefona oyuncak hissi veriyor. */
  transform: translateY(52px) scale(0.84);
  opacity: 0;
  transform-origin: 50% 100%;
  transition:
    transform 0.28s cubic-bezier(0.18, 0.9, 0.28, 1.18),
    opacity 0.18s ease;
}

#telefon.tel--acik .tel-cerceve {
  transform: none;
  opacity: 1;
}

.tel-ekran {
  position: relative;
  width: 320px;
  height: 568px;
  border-radius: 32px;
  overflow: hidden;
  background: #0f1218;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
  transition: height 0.22s cubic-bezier(0.3, 0.9, 0.3, 1);
}

/* Uygulama acilinca ust serit icin ekran uzuyor. Icerigi kisaltmak
   yerine ekranin uzamasi tercih edildi: tuval 520 px kalmali. */
#telefon.tel--uygulama .tel-ekran { height: 602px; }

/* ------------------------------------------------------------------ */
/* Buyuk kirmizi kapatma dugmesi                                       */
/* ------------------------------------------------------------------ */

/* NEDEN UST ORTADA duruyor:
   58 px'lik bir daire kosenin yakinina konursa durum cubugunun pilini
   ve uygulama acikken ust seridin skor rozetini ortuyor -- eskiden bu
   yuzden kosegen boyunca 49 px disari itilmisti ve dar ekranda telefonu
   kucultuyordu. Oysa cercevenin tepesinde HICBIR SEY TASIMAYAN bir
   serit var: centik (x 114..230). Saat solda, pil sagda kaliyor.

   Bu yerlesimde disk cerceve merkezine (x 172) oturuyor:
     - govdenin 28 px'i cerceveye biniyor -> "telefonun tepesine
       oturmus" okunuyor, havada durmuyor;
     - govde x 143..201 (merkez 172, genislik 58), halka 4 px yayilimla
       x 139..205: tamamen centigin icinde. Ayni iki sayi telefon.js
       icindeki GEREK_GEN notunda da yazili;
     - pil (x >= 294) ve skor rozeti (y 44..66; halkanin alti y 32)
       el degmeden kaliyor;
     - yatay tasma SIFIR.

   Yukari tasma (30 disk + 4 halka) telefon.js icindeki GEREK_YUK ile
   hesaba katilmis; birini degistiren otekini de degistirmeli, yoksa
   dugme ekranin disinda kaliyor.

   Yan fayda: kapaliyken ayni noktada .tel-tutamak-tab duruyor. Cocuk
   icin tek bir fiziksel nokta: kapaliyken "yukari cek", acikken
   "kapat". */
.tel-kapat {
  position: absolute;
  top: -30px;
  left: 50%;
  z-index: 6;

  /* 58 px, cunku telefon kucuk ekranda kuculuyor: en dar telefonda
     (320 px genislik) bile gorsel cap 46 px'in altina inmesin --
     kucuk bir parmagin rahat basabildigi en kucuk hedef o. */
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(58% 58% at 34% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    linear-gradient(#ff7365, #d8412f);

  /* Beyaz halka: dugme hem koyu cerceve hem de acik renkli 3B ev
     uzerinde ayni netlikte gorunsun. */
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(6, 10, 20, 0.45);

  /* Cerceve ile birlikte belirsin; kapaliyken de kucuk dursun ki
     acilirken cerceveye "yapisip" gelsin.

     UC KURAL: `transform` bu dosyada UC yerde yaziliyor ve UCUNDE DE
     `translateX(-50%)` bulunmak ZORUNDA -- birinde unutulursa dugme
     kendi yaricapi kadar degil, cercevenin yarisi kadar (172 px)
     saga firlar. */
  opacity: 0;
  transform: translateX(-50%) scale(0.5);
  transition:
    opacity 0.16s ease,
    transform 0.28s cubic-bezier(0.18, 0.9, 0.28, 1.35);
}

#telefon.tel--acik .tel-kapat {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Dokunma hedefini buyuten saydam katman: gorsel disk 58 px kalirken
   tiklanabilir kutu 80 px oluyor. `.tel-geri`deki ::before idiomu
   burada kullanilamiyor, cunku iki sozde eleman zaten carpinin
   cubuklari. 88 px denendi ve birakildi: kutunun alti ust seridin
   icine giriyordu. */
.tel-kapat-alan {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
}

/* Carpi metin degil, iki cubuk: bir glif yazi tipine gore incelip
   kalinlasir, cocugun gordugu isaret her cihazda ayni olmali. */
.tel-kapat::before,
.tel-kapat::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 6px;
  margin: -3px 0 0 -14px;
  border-radius: 999px;
  background: #ffffff;
}

.tel-kapat::before { transform: rotate(45deg); }
.tel-kapat::after  { transform: rotate(-45deg); }

/* Basinca kucul. Secici acik durumdaki transform'u ezmek zorunda
   oldugu icin en az onun kadar ozgul yazildi. */
#telefon.tel--acik .tel-kapat:hover  { filter: brightness(1.07); }
#telefon.tel--acik .tel-kapat:active { transform: translateX(-50%) scale(0.86); }

/* ------------------------------------------------------------------ */
/* Perde: telefonun disina tiklayinca kapansin                         */
/* ------------------------------------------------------------------ */

/* Telefon acilinca govdeye ekleniyor, kapaninca kaldiriliyor
   (telefon.js). z-index 59 -> HUD (20), paneller (40) ve gorsel ayar
   (50) ustunde ama telefonun (60) ALTINDA: telefonun kendisi
   tiklanabilir kalmali. */
#telefon-perde {
  position: fixed;
  inset: 0;
  z-index: 59;

  /* Neredeyse saydam: cocuk telefonun one geldigini gorsun ama evi de
     gormeye devam etsin. */
  background: rgba(10, 16, 30, 0.16);
  cursor: pointer;
  touch-action: none;                 /* parmak kaydirinca sayfa oynamasin */
  -webkit-tap-highlight-color: transparent;
  animation: telPerdeGel 0.18s ease-out;
}

/* Mini oyun oynanirken perde tiklamayi yutuyor ama telefonu
   KAPATMIYOR; imlec de bunu soylesin. */
#telefon-perde.tel-perde--kilitli { cursor: default; }

@keyframes telPerdeGel {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Durum cubugu                                                        */
/* ------------------------------------------------------------------ */

.tel-durum {
  position: relative;
  z-index: 3;
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: #0f1218;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.tel-saat {
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;   /* dakika degisince genislik oynamasin */
}

.tel-centik {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  height: 20px;
  background: #0b0d12;
  border-radius: 0 0 14px 14px;
}

.tel-durum-sag {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tel-sinyal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}

.tel-sinyal i {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: #ffffff;
}

.tel-sinyal i:nth-child(1) { height: 4px; }
.tel-sinyal i:nth-child(2) { height: 6px; }
.tel-sinyal i:nth-child(3) { height: 8px; }
.tel-sinyal i:nth-child(4) { height: 10px; opacity: 0.45; }

.tel-pil {
  position: relative;
  width: 22px;
  height: 11px;
  border: 1.5px solid #ffffff;
  border-radius: 3px;
  padding: 1px;
}

.tel-pil::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 3px;
  width: 2px;
  height: 5px;
  border-radius: 0 2px 2px 0;
  background: #ffffff;
}

.tel-pil-dolu {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: 1px;
  background: #ffffff;
  transition: width 0.3s ease;
}

#telefon.tel--sarj .tel-pil-dolu { background: var(--tel-yesil); }

/* ------------------------------------------------------------------ */
/* Uygulama ust seridi                                                 */
/* ------------------------------------------------------------------ */

.tel-serit {
  display: none;
  flex: 0 0 34px;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 4px;
  background: linear-gradient(#232b3a, #1a2029);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

#telefon.tel--uygulama .tel-serit { display: flex; }

.tel-geri {
  flex: 0 0 auto;
  width: 30px;
  height: 26px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, background 0.15s ease;
}

/* Gorsel kutu 30x26 kaliyor (ust serit dar), ama dokunma hedefi
   gorunmez bir katmanla 48x48'e cikiyor. Serit uzerinde tiklanabilir
   baska bir sey olmadigi icin tasma kimsenin onune gecmiyor. */
.tel-geri { position: relative; }

.tel-geri::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.tel-geri:hover { background: rgba(255, 255, 255, 0.22); }
.tel-geri:active { transform: scale(0.9); }

.tel-geri-ok {
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  margin-top: -4px;
}

.tel-serit-ad {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tel-skor {
  display: none;
  flex: 0 0 auto;
  min-width: 42px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tel-sari);
  color: #4a3400;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

#telefon.tel--oyun .tel-skor { display: block; }

/* ------------------------------------------------------------------ */
/* Icerik katmanlari                                                   */
/* ------------------------------------------------------------------ */

.tel-icerik {
  position: relative;
  flex: 0 0 520px;
  width: 320px;
  height: 520px;
  overflow: hidden;
}

.tel-ana,
.tel-uyg {
  position: absolute;
  inset: 0;
}

.tel-uyg { display: none; background: #eef2f7; }
#telefon.tel--uygulama .tel-ana { display: none; }
#telefon.tel--uygulama .tel-uyg { display: block; }

/* ------------------------------------------------------------------ */
/* Ana ekran                                                           */
/* ------------------------------------------------------------------ */

/* ANA EKRAN BUTCESI -- dikey toplam TAM 520 px.

   Eski duzen (cuzdan + 3 sutunlu simge izgarasi) 520'nin yalnizca
   354'unu kullaniyordu: izgara ekranin YUKSEKLIGINE gore degil YAZI
   OLCULERINE gore aktigi icin altta 166 px olu alan kaliyordu, ustelik
   yedi simge uce bolunmedigi icin son satirda tek basina bir "Ayarlar"
   duruyordu.

   Artik dort blok var ve HER BIRININ YUKSEKLIGI SABIT
   (`flex: 0 0 <h>px`) -- hicbiri yaziya gore buyumuyor, cunku 166
   px'lik hata tam olarak oradan cikmisti:

     padding-top    14
     A .tel-widget 104   cuzdan + profil
     gap            14
     B .tel-oyunlar 184   oyun rafi -- TEK ESNEK blok
     gap            14
     C .tel-konum    70   konum cipi
     gap            14
     D .tel-dock     96   dort arac
     padding-bottom 10
     ------------------
     toplam        520

   Kalan tek olu alan alttaki 10 px'lik padding. */
.tel-ana {
  padding: 14px 12px 10px;
  background:
    radial-gradient(120px 120px at 18% 12%, rgba(255, 255, 255, 0.28), transparent 70%),
    radial-gradient(160px 160px at 86% 30%, rgba(255, 210, 90, 0.30), transparent 70%),
    radial-gradient(200px 200px at 30% 96%, rgba(63, 191, 114, 0.35), transparent 72%),
    linear-gradient(165deg, #6ec8ff 0%, #5a8cf0 45%, #7b5cf0 100%);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- A: cuzdan + profil karti (296 x 104) -------------------------- */

/* Gomulu telefonda (kapaliyken) ekranda kalan sey TAM OLARAK bu kart:
   --tel-gomulu yuzdesi bu 104 px'e gore secildi (bkz. dosya sonu). */
.tel-widget {
  position: relative;              /* avatar mutlak konumlu */
  flex: 0 0 104px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 14px rgba(10, 20, 50, 0.25);
}

/* Avatar ile cuzdan IC ICE DEGIL, kardes iki dugme (bkz. cuzdanKur,
   js/telefon.js). Avatar mutlak konumlu, cuzdan ise kartin ic kutusunun
   TAMAMINI (268 x 76) kapliyor -- XP bari boylece avatarin altindan
   gecip tam genislikte kaliyor. Cakisan tek yer avatarin hedef kutusu
   (asagida 64 px) ve orada avatar ustte duruyor. */
.tel-avatar {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%),
    #f1f5fa;
  box-shadow: 0 2px 6px rgba(20, 35, 60, 0.16) inset;
  transition: transform 0.12s cubic-bezier(0.3, 0.9, 0.3, 1.2);
}

.tel-avatar:active { transform: scale(0.92); }

/* Gorsel disk 52 px kaliyor, dokunma hedefi 64 px oluyor.
   NEDEN: avatarin alt ve sag komsusu BOSLUK DEGIL, cuzdan dugmesi --
   4 px'lik bir iska "karakterimi degistir" yerine Banka'yi aciyordu ve
   okuma bilmeyen bir cocuk icin bu anlamadigi bir para ekrani demek.
   Ustelik telefon kucuk ekranda olcekleniyor: 375 x 553'luk bir
   tarayicida olcek 0.815, yani 52 px yalnizca 42 gorsel px.

   64 px kart koordinatlarinda x 8..72, y 8..72 kapliyor: ikinci izgara
   sutunu 78'de, XP bari 76'da basliyor, yani hicbir icerigin onune
   gecmiyor -- yalnizca cuzdanin avatarin altinda kalan BOS sutununu
   yiyor. Ayni idiom .tel-geri ve .tel-anahtar icinde de var. */
.tel-avatar::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
}

/* Ilk sutun avatarin yeri: 58 + 6 sutun araligi = avatar 52 + 12
   bosluk. Bar `grid-column: 1 / -1` ile o sutunu da yiyor, cunku
   avatarin ALTI bos. */
.tel-widget-cuzdan {
  display: grid;
  grid-template-columns: 58px auto 1fr auto;
  grid-template-rows: 52px 14px;
  column-gap: 6px;
  row-gap: 10px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tel-widget-simge {
  grid-column: 2;
  font-size: 20px;
  line-height: 1;
}

/* Cocugun ana ekranda arayacagi TEK sayi bu; punto 26. `tabular-nums`
   sart: para her kazancta degisiyor, rakam genisligi oynarsa satirin
   tamami titrer. */
.tel-widget-para {
  justify-self: start;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

/* Yedi haneyi gecen para 26 px'te orta sutunu tasiriyor (olculdu:
   "1.234.567" ~112 px + simge 20 + bosluk 6 = 138 = sinirin kendisi).
   Kirpma YOK, punto kuculuyor: cocuk kirpilmis parayi anlamaz. */
.tel-widget-para--uzun { font-size: 21px; }

.tel-widget-seviye {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--tel-mor);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.tel-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(20, 30, 60, 0.16);
  overflow: hidden;
}

/* Ana ekranda bar iki katina cikiyor: 7 px'lik bir cizgi 0.53 olcekte
   (yatay telefon) 4 gorsel px'e iniyor ve gorunmez oluyor. */
.tel-widget .tel-bar {
  grid-column: 1 / -1;
  height: 14px;
}

.tel-bar--kalin { height: 11px; margin-top: 8px; }

.tel-bar-dolu {
  display: block;                  /* ana ekranda <span>, panelde <div> */
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tel-sari), #ff9f43);
  transition: width 0.35s cubic-bezier(0.3, 0.9, 0.3, 1);
}

/* --- B: oyun rafi (296 x 184) -------------------------------------- */

/* Ana ekranin TEK esneyen blogu: butcedeki artik piksel buraya
   yaziliyor, uc oyunda satir 56 px oluyor.

   BUYUME KURALI: 1-3 oyun dikey liste olarak kalir (satir yuksekligi
   (184 - (n-1) * 8) / n). DORT ve ustunde liste iki sutunlu karo
   izgarasina cevrilmeli (karo 144 x 88): dorduncu oyunu listede tutmak
   satiri 40 px'e dusururdu, o da kucuk bir parmagin isabet
   ettiremeyecegi bir hedef. */
.tel-oyunlar {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;

  /*
   * RAF KAYIYOR.
   *
   * Uc oyuna gore olculmustu (3 x 52 + 2 x 8 = 172, kutu 184). Atari
   * salonuyla birlikte oyun sayisi altiya cikinca son uc satir kutunun
   * DISINA tasti ve konum cipiyle dock'un uzerine bindi -- olculdu,
   * satirlar 632'de bitiyordu, rafin dibi 464'te.
   *
   * Sabit yukseklik korunuyor (ana ekranin 520 px'lik butcesi ona
   * bagli); fazlasi kayarak geliyor. `flex: 0 0 auto` cocuklarda sart:
   * varsayilan kucultme satirlari eziyor ve kaydirma hic olusmuyor.
   */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tel-oyunlar > * { flex: 0 0 auto; }

/* Ince kaydirma cubugu -- varsayilani telefonda kocaman duruyor. */
.tel-oyunlar::-webkit-scrollbar { width: 4px; }
.tel-oyunlar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

/* Dar eksende 56 px ama 296 px genisliginde: ana ekranin en kolay
   hedefi. Rekor rakami satirin ICINDE duruyor -- ayri bir rekor seridi
   ayni sayiyi ikinci kez cizmek olurdu. */
.tel-oyun {
  flex: 1 1 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 10px rgba(10, 20, 50, 0.20);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.3, 0.9, 0.3, 1.2);
}

.tel-oyun:active { transform: scale(0.97); }

.tel-oyun-ikon {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%),
    var(--ikon-renk, #4a90e2);
  box-shadow:
    0 3px 8px rgba(8, 16, 40, 0.30),
    0 -2px 0 rgba(0, 0, 0, 0.14) inset;
}

.tel-oyun-ad {
  flex: 1 1 auto;
  min-width: 0;                    /* uzun ad flex kutuyu tasirmasin */
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tel-oyun-rekor {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tel-mor);
}

/* Yildiz METIN DEGIL susleme ve BILEREK sozde elemanda: rekor rakami
   textContent ile yazildigi icin isaret elemanin icinde duramaz,
   yoksa her guncellemede silinirdi. */
.tel-oyun-rekor::before {
  content: '\2B50';
  font-size: 14px;
}

/* Rekoru olmayan oyun "0" gosteriyor, tire degil: sifirdan buyuyen bir
   rakam cocugu oynamaya cagiriyor, tire onun icin anlamsiz. */
.tel-oyun-rekor--yok { color: #9aa6b6; }

.tel-oyun-oyna {
  position: relative;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ikon-renk, #4a90e2);
  box-shadow: 0 2px 6px rgba(8, 16, 40, 0.30);
}

/* Ucgen glif degil, kenarlikla ciziliyor (bkz. .tel-kapat carpisi):
   bir glif yazi tipine gore incelip kalinlasiyor. Sol kenar bosluguna
   verilen -5 px ucgeni optik merkeze cekiyor. */
.tel-oyun-oyna::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -5px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #ffffff;
}

/* Modulu yuklenemeyen oyun raftan SILINMIYOR, solguna donuyor:
   kaybolsaydi kalan satirlar yer degistirir ve cocugun kas hafizasi
   bozulurdu. */
.tel-oyun--yok {
  filter: grayscale(0.8);
  opacity: 0.55;
  cursor: default;
}

.tel-oyun--yok:active { transform: none; }

/* --- C: "buradasin" cipi (296 x 70) -------------------------------- */

/* NEDEN ana ekranda bir harita blogu var: sehirdeki portal binalari
   (dondurmaci -> parkur, hastane -> klavye) kaldirildi, yani parkur ve
   klavye dunyalarina TEK giris telefondaki harita uygulamasi. Tek
   kapisi olan bir uygulama ana ekranda durum penceresini hak ediyor.

   Simge ve harita dugmesi MUTLAK konumlu, ortadaki yazi sutunu ise
   dikeyde ortalanan bir flex kutu: bilinmeyen bolgede ust satir
   tamamen kalkiyor ve tek kalan ad kendiliginden ortada duruyor
   (bkz. konumGuncelle). */
.tel-konum {
  position: relative;
  flex: 0 0 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 9px 66px 9px 74px;      /* 12 + 44 + 10 sagda, 12 + 52 + 10 solda */
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 2px var(--harita-renk, var(--tel-mavi)),
    0 4px 10px rgba(10, 20, 50, 0.20);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.3, 0.9, 0.3, 1.2);
}

.tel-konum:active { transform: scale(0.97); }

.tel-konum-ikon {
  position: absolute;
  left: 12px;
  top: 9px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%),
    var(--ikon-renk, #4a90e2);
  box-shadow:
    0 3px 8px rgba(8, 16, 40, 0.28),
    0 -2px 0 rgba(0, 0, 0, 0.12) inset;
}

.tel-konum-etiket {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--tel-solgun);
}

.tel-konum-ad {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tel-konum-git {
  position: absolute;
  right: 12px;
  top: 13px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: #eef2f7;
  box-shadow: 0 2px 6px rgba(20, 35, 60, 0.18) inset;
}

/* --- D: alt dock (296 x 96) ---------------------------------------- */

/* Dock'un icerigi HIC DEGISMIYOR: hep ayni dort arac, hep ayni sirada.
   Okuma bilmeyen bir cocugun tek kaldiraci kas hafizasi; yer degistiren
   bir dugme onun icin yeni bir dugmedir.

   `backdrop-filter` BILEREK yok: telefon 3B tuvalin ustunde duruyor ve
   her karede yeniden bulaniklastirilan KALICI bir serit bedava degil.
   Sonuc ekranindaki blur (.tel-sonuc) gecici oldugu icin ayri durum.

   Dock en fazla BES slot alir (ikon 60 -> 50, sutun 52, yan padding
   8 -> 4). Altinci arac sigmaz; o gun ana ekran yeniden tasarlanir. */
.tel-dock {
  flex: 0 0 96px;
  display: grid;
  /*
   * Sutun sayisi SABIT DEGIL.
   *
   * Dock 4 uygulamaya gore olculmustu (4 x 64 + 3 x 8 = 280). Cop ve
   * Balik eklenince 6 x 64 = 384 oldu ve serit tasti. `auto-fit` +
   * `minmax(0, 1fr)` sutunlari kalan yere esit boluyor; yeni bir arac
   * eklendiginde bu satira donmek gerekmiyor.
   *
   * minmax'in ALT siniri 0 olmak ZORUNDA: varsayilan `auto` icerigin
   * en dar halini taban alir ve izgara yine tasar.
   */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 6px;
  padding: 12px 8px 8px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.40);
}

.tel-uyg-dugme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.3, 0.9, 0.3, 1.2);
}

.tel-uyg-dugme:active { transform: scale(0.9); }

.tel-ikon {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%),
    var(--ikon-renk, #4a90e2);
  box-shadow:
    0 5px 12px rgba(8, 16, 40, 0.35),
    0 -2px 0 rgba(0, 0, 0, 0.14) inset;
}

/* 64 px'lik sutunda "Haritalar" 11 px/800 ile ~52 px: tek satirda
   sigiyor. Etiket zaten ikincil -- kucuk ekranda cocuk simgeden ve
   renkten gidiyor. */
.tel-etiket {
  max-width: 64px;
  font-size: 11px;
  line-height: 12px;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 20, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- ana ekranda klavye odagi -------------------------------------- */

/* Sari halka: ana ekranin zemini mavi-mor, beyaz bir anahat orada
   kayboluyor. `outline-offset` sart, yoksa halka kartin kendi
   golgesinin altinda kaliyor. */
.tel-avatar:focus-visible,
.tel-widget-cuzdan:focus-visible,
.tel-oyun:focus-visible,
.tel-konum:focus-visible,
.tel-uyg-dugme:focus-visible {
  outline: 3px solid var(--tel-sari);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Mini oyun tuvali                                                    */
/* ------------------------------------------------------------------ */

.tel-tuval {
  display: none;
  width: 320px;
  height: 520px;
  background: #101722;
  /* Parmakla oynanan oyunda sayfa kaymasin. */
  touch-action: none;
}

#telefon.tel--oyun .tel-tuval { display: block; }

/* ------------------------------------------------------------------ */
/* Panel (Banka / Ayarlar)                                             */
/* ------------------------------------------------------------------ */

.tel-panel {
  position: absolute;
  inset: 0;
  display: none;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #eef2f7;
}

#telefon.tel--uygulama:not(.tel--oyun) .tel-panel { display: block; }

.tel-panel::-webkit-scrollbar { width: 6px; }
.tel-panel::-webkit-scrollbar-thumb {
  background: rgba(30, 40, 60, 0.25);
  border-radius: 999px;
}

.tel-kart {
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--tel-kagit);
  box-shadow: 0 3px 8px rgba(20, 35, 60, 0.12);
}

.tel-kart--cuzdan {
  background: linear-gradient(150deg, #3fbf72, #2a9d8f);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(24, 110, 70, 0.35);
}

.tel-kart--uyari {
  background: #fff6d8;
  box-shadow: 0 3px 8px rgba(120, 90, 10, 0.18);
}

.tel-kart--tehlike { background: #ffeceb; }

.tel-kart-etiket {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--tel-solgun);
}

.tel-kart--cuzdan .tel-kart-etiket { color: rgba(255, 255, 255, 0.8); }

.tel-tutar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tel-tutar-simge { font-size: 22px; }

.tel-tutar-sayi {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.tel-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
}

.tel-satir-ad {
  font-size: 14px;
  font-weight: 700;
}

.tel-satir-deger {
  font-size: 14px;
  font-weight: 800;
  color: var(--tel-mavi);
}

.tel-not {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tel-solgun);
}

.tel-rekor {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-top: 1px solid rgba(20, 35, 60, 0.08);
}

/* Basliktan hemen sonraki ilk satirda ayirici cizgi istemiyoruz.
   `:first-of-type` ise yaramaz: baslik da bir <div>, yani ilk div O. */
.tel-kart-etiket + .tel-rekor { border-top: 0; }

.tel-rekor-ikon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--ikon-renk, #4a90e2);
}

.tel-rekor-ad {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
}

.tel-rekor-skor {
  font-size: 15px;
  font-weight: 800;
  color: var(--tel-mor);
}

/* ------------------------------------------------------------------ */
/* Ayarlar: anahtar ve sifirlama                                       */
/* ------------------------------------------------------------------ */

.tel-anahtar {
  position: relative;
  width: 50px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c6cedb;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.1s ease;
}

/* Anahtarin gorsel kutusu 50x28; dokunma hedefi gorunmez bir katmanla
   48 px yuksekligine cikiyor, yoksa ses dugmesine isabet ettirmek kucuk
   bir parmak icin cok zor. */
.tel-anahtar::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.tel-anahtar:active { transform: scale(0.94); }
.tel-anahtar--acik { background: var(--tel-yesil); }

.tel-anahtar-top {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s cubic-bezier(0.3, 0.9, 0.3, 1.3);
}

.tel-anahtar--acik .tel-anahtar-top { transform: translateX(22px); }

.tel-sifirla {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tel-onay-soru {
  flex: 1 0 100%;
  font-size: 14px;
  font-weight: 800;
  color: var(--tel-kirmizi);
}

/* ------------------------------------------------------------------ */
/* Giysi: karakter kartlari                                            */
/* ------------------------------------------------------------------ */

/* Kart dizilimi bilerek banka/rekor kartlariyla ayni dilde: ayni
   kose yaricapi, ayni golge, ayni 10 px alt bosluk. */

.tel-giysi-bilgi {
  margin: 2px 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--tel-solgun);
}

/* Giyili olan kart mor bir halkayla isaretleniyor. Halka `box-shadow`
   ile: `border` kutu olcusunu buyutup kartlarin genisligini
   oynatirdi. */
.tel-kart--giyili {
  box-shadow:
    0 0 0 2px var(--tel-mor),
    0 3px 8px rgba(20, 35, 60, 0.12);
}

.tel-giysi-ust {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tel-giysi-ikon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%),
    #f1f5fa;
  box-shadow: 0 2px 6px rgba(20, 35, 60, 0.16) inset;
}

.tel-giysi-ikon--kilitli { filter: grayscale(0.85); opacity: 0.55; }

.tel-giysi-yazi {
  flex: 1 1 auto;
  min-width: 0;              /* uzun ad flex kutuyu tasirmasin */
}

.tel-giysi-ad {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tel-giysi-aciklama {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--tel-solgun);
}

.tel-giysi-alt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
}

.tel-giysi-rozet {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  background: #e8edf4;
  color: var(--tel-solgun);
}

.tel-giysi-rozet--kilitli { background: #ffeceb; color: #b23a2f; }
.tel-giysi-rozet--giyili  { background: var(--tel-mor); color: #ffffff; }
.tel-giysi-rozet--acik    { background: #e3f6ea; color: #1f7a4a; }

/* ------------------------------------------------------------------ */
/* Haritalar: isinlanma kartlari                                       */
/* ------------------------------------------------------------------ */

/* Kartlar `.tel-panel` icinde, yani ZATEN tek sutun: panel blok akisi
   ve 320 px genislikte. Grid/flex kurmuyoruz -- dikey tutulan bir
   telefonda iki sutun demek 150 px'lik kart demek, o genislikte
   "Gokkusagi Parkuru" iki satira bolunuyor.

   Karti okuyan cocuk yaziyi degil SIMGEYI ve RENGI okuyor: her harita
   kendi renginde, simge kutusu 56 px. */

/* Panel basligi. Giysi panelindekiyle ayni dil ama AYRI sinif: iki
   ekranin baslik olcusu ileride ayrilabilir, ortak siniftan cekmek o
   gun ikisini birden bozar. */
.tel-harita-bilgi {
  margin: 2px 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--tel-solgun);
}

.tel-kart--harita {
  /* Ust kenarda haritanin rengi: liste boyunca kaydirirken hangi kartin
     nerede oldugu tek bakista anlasiliyor. */
  border-top: 4px solid var(--harita-renk, var(--tel-mavi));
}

/* Bulunulan harita yesil halkayla isaretli. `box-shadow` ile, cunku
   `border` kutu olcusunu buyutup kartlarin genisligini oynatirdi. */
.tel-kart--burada {
  background: #f2fbf5;
  box-shadow:
    0 0 0 2px var(--tel-yesil),
    0 3px 8px rgba(20, 35, 60, 0.12);
}

.tel-harita-ust {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tel-harita-ikon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%),
    var(--ikon-renk, #4a90e2);
  box-shadow:
    0 4px 10px rgba(8, 16, 40, 0.28),
    0 -2px 0 rgba(0, 0, 0, 0.12) inset;
}

.tel-harita-yazi {
  flex: 1 1 auto;
  min-width: 0;              /* uzun ad flex kutuyu tasirmasin */
}

/* Ad SARMALANIYOR (giysi kartindaki ellipsis'in aksine): harita adi
   oyuncunun verecegi kararin kendisi, yarisi kesilmis bir ad ise
   yaramaz. Iki satira sigacak kadar buyuk. */
.tel-harita-ad {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.tel-harita-aciklama {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--tel-solgun);
}

.tel-harita-alt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
}

/* Dokunma hedefi: 48 px, kucuk bir parmagin isabet ettirebildigi en
   kucuk yukseklik. Telefon kucuk ekranda olceklendigi icin daha da
   kucuk gorunecek -- pay burada birakiliyor. */
.tel-harita-alt .tel-dugme {
  min-height: 48px;
  font-size: 15px;
}

.tel-harita-rozet {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  background: #e3f6ea;
  color: #1f7a4a;
}

/* ------------------------------------------------------------------ */
/* Butonlar                                                            */
/* ------------------------------------------------------------------ */

/* Dokunma hedefi tabani 48 px: kucuk bir parmagin isabet ettirebildigi
   en kucuk yukseklik. Telefon dar ekranda ayrica olceklendigi icin
   bunun altina inilmiyor. */
.tel-dugme {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  background: #dde3ec;
  color: var(--tel-metin);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(20, 35, 60, 0.18);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}

.tel-dugme:hover { filter: brightness(1.05); }

/* Basinca kucul + govde golgesini yut: fiziksel tus hissi. */
.tel-dugme:active {
  transform: translateY(3px) scale(0.98);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.tel-dugme--ana {
  background: linear-gradient(#5aa9ff, var(--tel-mavi));
  color: #ffffff;
  box-shadow: 0 3px 0 #2f6cb5;
}

.tel-dugme--tehlike {
  background: linear-gradient(#ff7c6f, var(--tel-kirmizi));
  color: #ffffff;
  box-shadow: 0 3px 0 #a83a30;
}

/* Pasif buton (ornek: zaten giyili olan karakter). Govde golgesi de
   kalkiyor: basilabilir gorunen bir tus basilamiyorsa arayuz bozuk
   sanilir. */
.tel-dugme:disabled {
  background: #e6ebf2;
  color: var(--tel-solgun);
  box-shadow: none;
  cursor: default;
}

.tel-dugme:disabled:hover { filter: none; }
.tel-dugme:disabled:active { transform: none; }

/* ------------------------------------------------------------------ */
/* Sonuc ekrani                                                        */
/* ------------------------------------------------------------------ */

.tel-sonuc {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(12, 18, 30, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.tel-sonuc--acik { display: flex; }

.tel-sonuc-kart {
  width: 100%;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: var(--tel-kagit);
  text-align: center;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  animation: tel-firla 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}

@keyframes tel-firla {
  from { transform: scale(0.8) translateY(18px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.tel-sonuc-baslik {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--tel-solgun);
}

.tel-sonuc-kart--rekor .tel-sonuc-baslik {
  color: #d98b00;
  animation: tel-nabiz 1.1s ease-in-out infinite;
}

@keyframes tel-nabiz {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

.tel-sonuc-skor {
  margin: 4px 0 -2px;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--tel-metin);
}

.tel-sonuc-alt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--tel-solgun);
}

.tel-oduller {
  display: flex;
  gap: 8px;
  margin: 14px 0 10px;
}

.tel-odul {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: 14px;
  background: #f1f5fa;
}

.tel-odul-simge { font-size: 15px; }

.tel-odul-deger {
  font-size: 14px;
  font-weight: 800;
  color: var(--tel-yesil);
}

.tel-sonuc-rekor {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tel-solgun);
}

.tel-sonuc-dugmeler {
  display: flex;
  gap: 8px;
}

/* ------------------------------------------------------------------ */
/* Home cubugu                                                         */
/* ------------------------------------------------------------------ */

.tel-alt {
  position: relative;
  flex: 0 0 22px;
  background: transparent;
}

.tel-alt::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 116px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

/* Panelli ekranlarda zemin acik: cubuk koyu olmali. */
#telefon.tel--uygulama:not(.tel--oyun) .tel-alt::after {
  background: rgba(20, 35, 60, 0.35);
}

/* ------------------------------------------------------------------ */
/* Genis ama ALCAK ekran: yatay tutulan telefon                        */
/* ------------------------------------------------------------------ */

/* 844 x 390 gibi bir ekranda tavan 390 px: telefon zaten yarim
   boyutuna iniyor, alttaki 18 px'lik rahat pay orada luks. 6 px'e
   cekmek telefonu %7 buyutuyor.

   Esik telefon.js icindeki ALCAK_TAVAN (560) ile ayni olmak zorunda:
   olcegi oradaki hesap, konumu buradaki kural belirliyor.

   Asagidaki dar ekran sorgusuyla KESISMIYOR (biri min-width: 640, oteki
   max-width: 639), yani ikisi ayni anda hic eslesmiyor ve siralamanin
   bir onemi yok. Araliklardan biri gunun birinde genisletilirse o gun
   hangisinin sonra geldigi onem kazanir. */
@media (min-width: 640px) and (max-height: 559px) {
  #telefon { bottom: 6px; }
}

/* ------------------------------------------------------------------ */
/* Dar ekran: telefon ortalanir ve buyur                               */
/* ------------------------------------------------------------------ */

/* Esik telefon.js icindeki DAR_ESIK ile ayni olmak zorunda. */
@media (max-width: 639px) {
  #telefon {
    right: auto;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scale(var(--tel-olcek));
    transform-origin: 50% 100%;
  }
}

/* Hareket azaltma tercihi: animasyonlar kapanir, telefon aninda gelir. */
@media (prefers-reduced-motion: reduce) {
  #telefon,
  .tel-cerceve,
  .tel-ekran,
  .tel-bar-dolu,
  .tel-anahtar-top,
  .tel-dugme,
  .tel-uyg-dugme,
  .tel-avatar,
  .tel-oyun,
  .tel-konum {
    transition-duration: 0.01ms;
  }
  .tel-sonuc-kart,
  .tel-sonuc-kart--rekor .tel-sonuc-baslik { animation: none; }
}

/* Kapatma dugmesi ile perde de ayni tercihe uysun. Dugme gorunurlugu
   opacity'ye bagli oldugu icin gecis tamamen kaldirilmiyor,
   kisaltiliyor: aksi halde acilan telefonda dugme hic gorunmezdi. */
@media (prefers-reduced-motion: reduce) {
  .tel-kapat { transition-duration: 0.01ms; }
  #telefon-perde { animation: none; }
}

/* ==================================================================
   GOMULU TELEFON -- kapaliyken de ekranda duran hali
   ==================================================================

   SORUN
     Telefon oyunun can damari: para, giysi, harita, banka ve butun
     mini oyunlar orada. Ama kapaliyken ekranda hicbir izi yoktu
     (`visibility: hidden`), yani 3-13 yas oyuncu telefonun VAR
     oldugunu ancak HUD'daki kucuk telefon dugmesine sansa tiklayarak
     ogreniyordu. Okuma bilmeyen bir cocuk icin bu hic ogrenmemek
     demek.

   COZUM
     Kapali telefon yok olmuyor, sag alt kosede GOMULU duruyor:
     govdesi kendi yuksekliginin %70'i kadar asagi kaydiriliyor, yani
     ~%30'u ekranda kaliyor. Gorunen bantta cocuk kendi durum cubugunu,
     KARAKTERINI, parasini ve seviye barini okuyor -- "burada bir
     telefon var" mesaji yaziyla degil GOSTEREREK veriliyor.

     Kapali durum ile gomulu durum AYNI CSS durumu
     (`#telefon:not(.tel--acik)`). Ayri bir sinif eklenmedi, cunku o
     zaman kapanis animasyonunun hedefi iki yerde tanimlanmis olurdu;
     boyle telefon her kapanista kendiliginden ayni yere oturuyor.

   TIKLAMA
     Kok hala `pointer-events: none`; yalnizca gorunen bandi kaplayan
     `.tel-tutamak` dugmesi `auto` aliyor. Yani gomulu telefon 3B
     sahneyi dondurmeyi ENGELLEMIYOR: kokun geri kalani -- ekranin
     altinda kalan govde ve gorunmez kapatma dugmesi dahil -- tiklamayi
     oyuna geciriyor.

   Bu bolum dosyanin SONUNDA: yukaridaki kurallarin hicbirini
   degistirmiyor, uzerlerine yaziyor.
   ================================================================== */

#telefon {
  /*
   * Kapali cercevenin KENDI yuksekliginin ne kadari asagi kayacagi.
   * 592 px'lik cercevede %70 = 414 px, yani govdenin ~%30'u (178 px)
   * ekranda kaliyor. Olcu cuzdan kartina bagli: cerceve kenari 12 +
   * durum cubugu 26 + ana ekranin ust boslugu 14 + kart 104 = 156, yani
   * kart TAM siginca oyun rafinin ust seridi de belli belirsiz
   * gorunuyor. Kart 104 px'e cikinca (eskiden 56) bu deger %78'den
   * %70'e indi -- ikisi birlikte degisir.
   *
   * Gorunen bantta cocuk karakterini, parasini ve seviyesini telefonu
   * ACMADAN okuyor.
   *
   * DIKKAT: `.tel-tutamak` ayni degeri `top` olarak kullaniyor ve bu
   * ancak KOKUN YUKSEKLIGI CERCEVEYLE AYNI oldugu surece dogru --
   * tutamak da kapatma dugmesi de mutlak konumlu, yani kokun
   * yuksekligini tek basina `.tel-cerceve` belirliyor. Koke akista
   * ikinci bir cocuk eklenirse iki yuzde ayrisir ve tutamak
   * telefondan kayar.
   */
  /*
   * 800x600 KURALI (GameMonetize incelemesi): eskiden `70%` idi ve
   * 592 px'lik cercevede 178 px gosteriyordu -- cuzdan kartinin alti
   * (156) + oyun listesinin YARIM bir satiri. Ustelik govde ekranin
   * altindan tasiyordu; "butun arayuz tam gorunmeli" sartina takildi.
   *
   * Simdi GORUNEN BANT sabit: kartin alt kenari 156 + ust kenarla ayni
   * 12 px cerceve = 168 px. Kalan govde kirpiliyor (asagida clip-path),
   * yani ekranda kesik bir telefon degil, kendi icinde tam bir kart
   * duruyor. Iki deger (buradaki 168 ve clip-path'teki) BIRLIKTE degisir.
   */
  --tel-gomulu: calc(100% - 168px);

  /* Uzerine gelince ne kadar yukari kalkiyor. Cerceve ve tutamak
     etiketi AYNI degeri kullanmak ZORUNDA: etiket telefonla birlikte
     kalkmazsa cuzdan penceresinin uzerine biner. */
  --tel-kalk: 30px;

  /* Kapali telefon artik gorunur, dolayisiyla gorunurlugu geciktiren
     zamanlayiciya da gerek yok. Mobilde asagida geri aciliyor. */
  visibility: visible;
  transition: none;
}

/* --- gomulu cerceve ------------------------------------------------ */

#telefon:not(.tel--acik) .tel-cerceve {
  opacity: 1;
  transform: translateY(var(--tel-gomulu));

  /* Gorunen bandin altini kirp: ekranda kesik govde yerine alt
     koseleri yuvarlak, tam bir kart kalsin (bkz. --tel-gomulu). */
  clip-path: inset(0 0 calc(100% - 168px) 0 round 44px 44px 30px 30px);

  /* Kirpma kutunun golgesini de kesiyor; golge bu yuzden KOKE
     drop-shadow olarak tasindi (asagida) ve kirpilmis sekli izliyor. */
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.18) inset,
    0 -2px 0 rgba(0, 0, 0, 0.5) inset;
}

#telefon:not(.tel--acik) {
  filter: drop-shadow(0 -6px 16px rgba(0, 0, 0, 0.38));
}

/* --- tutamak: gomulu telefonun tiklama alani ----------------------- */

/*
 * Kutusu tam olarak GORUNEN bandi kapliyor (`top: var(--tel-gomulu)`
 * ... `bottom: 0`). Kokun tamamini tiklanabilir yapmak, ekranin
 * ALTINDA kalan gorunmez govdeyi de tiklanabilir yapmak olurdu.
 *
 * Kendisi tamamen saydam: cocugun gordugu sey telefonun kendi ekrani.
 * Uzerinde yalnizca `.tel-tutamak-tab` duruyor.
 */
.tel-tutamak {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--tel-gomulu);

  /*
   * Asagi 18 px TASIYOR, cunku kok ekranin dibinden 18 px yukarida
   * duruyor (`#telefon { bottom: 18px }`): kutu `bottom: 0` olsaydi
   * telefonun en alt 18 pikseli gorunur ama tiklanamaz kalirdi --
   * gorulen her yer tiklanabilir olmali.
   *
   * Olcege BOLUNUYOR: kokun `bottom: 18px` degeri layout pikseli, yani
   * stage olceginden etkilenmiyor; buradaki deger ise kokun ICINDE,
   * yani `scale(--tel-olcek)` ile carpiliyor. Bolmeden 900x506 gibi
   * kucuk bir pencerede (olcek 0.685) altta ~6 px'lik tiklanamaz bir
   * serit kaliyordu. `--tel-olcek` olcekGuncelle() icinde 0.4..1.4
   * arasina kelepceli, yani sifira bolme yok.
   *
   * Dar ekranda kok zaten dibe yapisik (bottom: 0); orada tasan kisim
   * gorunumun altinda kalir, zarari yok.
   */
  bottom: calc(-18px / var(--tel-olcek));
  z-index: 5;                 /* cercevenin ustunde, .tel-kapat'in (6) altinda */

  padding: 0;
  border: 0;
  border-radius: 40px 40px 0 0;   /* cercevenin kose yaricapina yakin */
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* Varsayilan KAPALI: telefon acikken bu dugme ekranin ustunde
     tiklama yutmamali. Yalnizca gomuluyken aciliyor. */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
}

#telefon:not(.tel--acik) .tel-tutamak {
  pointer-events: auto;
  opacity: 1;
}

.tel-tutamak:focus { outline: none; }
.tel-tutamak:focus-visible { outline: none; }   /* halka tab'in golgesinde */

/*
 * "Yukari kaydir" etiketi. Telefonun centiginin uzerine oturuyor:
 * orasi zaten bos siyah bir alan, saat ve pil iki yanda gorunmeye
 * devam ediyor.
 */
.tel-tutamak-tab {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 98px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(#6fb6ff, var(--tel-mavi));

  /* Beyaz halka: etiket hem koyu centigin hem de acik renkli 3B evin
     uzerinde ayni netlikte gorunsun (bkz. .tel-kapat ayni sebep). */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 4px 10px rgba(6, 10, 20, 0.45);

  transform: translateX(-50%);
  transition:
    transform 0.18s cubic-bezier(0.3, 0.9, 0.3, 1.2),
    box-shadow 0.18s ease;

  /* Hafif zipla: hareket eden sey cocugun gozunu ceker. */
  animation: telTutamakZipla 2.4s ease-in-out infinite;
}

/* Yukari bakan ok METIN DEGIL, iki cubuk (bkz. .tel-kapat): bir ok
   glifi yazi tipine gore incelip kalinlasiyor, cocugun gordugu isaret
   her cihazda ayni olmali.

   Iki cubuk da etiketin ortasinda bulusuyor; `transform-origin`
   bulusma noktasina konuldugu icin uzunluk degistirmek acilari
   bozmuyor. */
.tel-tutamak-tab::before,
.tel-tutamak-tab::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 5px;
  margin-top: -6px;
  border-radius: 999px;
  background: #ffffff;
}

.tel-tutamak-tab::before {
  transform-origin: 100% 50%;
  transform: translateX(-100%) rotate(-30deg);
}

.tel-tutamak-tab::after {
  transform-origin: 0 50%;
  transform: rotate(30deg);
}

@keyframes telTutamakZipla {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -5px); }
}

/* --- uzerine gelince: telefon kalkiyor, golge buyuyor -------------- */

/*
 * Kardes secici (`~`) kullaniliyor ve bu yuzden `.tel-tutamak`
 * DOM'da `.tel-cerceve`den ONCE eklenmek zorunda (bkz. cerceveKur()
 * icindeki not, js/telefon.js).
 *
 * Kalkan sey CERCEVE, tutamagin kendisi degil: tutamak da kalksaydi
 * imlec kutunun altindan cikip hover duserdi, telefon geri inerdi,
 * hover geri gelirdi -- klasik titreme dongusu.
 */
#telefon:not(.tel--acik) .tel-tutamak:hover ~ .tel-cerceve,
#telefon:not(.tel--acik) .tel-tutamak:focus-visible ~ .tel-cerceve {
  transform: translateY(calc(var(--tel-gomulu) - var(--tel-kalk)));
}

/* Etiket cerceveyle AYNI kadar kalkiyor, yoksa telefonun tepesinden
   kayip cuzdan penceresinin ustune biner. */
#telefon:not(.tel--acik) .tel-tutamak:hover .tel-tutamak-tab,
#telefon:not(.tel--acik) .tel-tutamak:focus-visible .tel-tutamak-tab {
  animation: none;            /* animasyon transform'u ezerdi */
  transform: translate(-50%, calc(-1 * var(--tel-kalk))) scale(1.06);
}

/* Klavyeyle gezen oyuncu da nerede oldugunu gorsun. */
#telefon:not(.tel--acik) .tel-tutamak:focus-visible .tel-tutamak-tab {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 7px var(--tel-sari),
    0 4px 10px rgba(6, 10, 20, 0.45);
}

/* Basili tutarken geri iniyor: fiziksel tus hissi. */
#telefon:not(.tel--acik) .tel-tutamak:active ~ .tel-cerceve {
  transform: translateY(calc(var(--tel-gomulu) - 10px));
}

#telefon:not(.tel--acik) .tel-tutamak:active .tel-tutamak-tab {
  animation: none;
  transform: translate(-50%, -10px) scale(0.96);
}

/* ------------------------------------------------------------------ */
/* DIKEY / DOKUNMATIK: gomulu telefon YOK                              */
/* ------------------------------------------------------------------ */

/*
 * KARAR: dikey ve dokunmatik cihazda gomulu telefon tamamen kapali,
 * giris yolu yalnizca HUD'daki telefon dugmesi (#btn-telefon).
 *
 * Sag kenarda kucuk bir sekme secenegi de vardi; secilmedi, cunku
 * dikey duzende sag kenarin her santimi zaten dolu (bkz. oyun.css):
 *
 *   - sag ALT       -> #btn-zipla (96 px) ve #btn-etkilesim (96 px);
 *                      gomulu telefon tam ziplama dugmesinin ustune
 *                      oturuyordu ve oyun kontrol edilemez hale
 *                      geliyordu.
 *   - sag ORTA      -> ogreticinin calan telefonu (#ogr-telefon);
 *                      sekme oraya konsa ogretici kendi hedefini
 *                      ortmus olurdu.
 *   - sag UST       -> #hud-sag dugme sutunu, icinde ZATEN #btn-telefon
 *                      var.
 *   - 640 px altinda telefon ORTALANIYOR (asagidaki medya sorgusu),
 *     yani gomulu hal ekranin alt ortasina, yon cubugu ile ziplama
 *     dugmesinin arasina duserdi.
 *
 * Ikinci bir sebep: dokunmatikte "uzerine gelme" diye bir sey yok,
 * yani gomulu telefonun anlatim gucunun yarisi zaten kayboluyor.
 * Buna karsilik ogretici akisi (js/ipucu.js) dikeyde calan telefonu
 * ekranin TAM ORTASINDA buyutup #btn-telefon'a isaret ediyor -- yani
 * kesif sorunu orada zaten cozulmus durumda.
 *
 * Sonuc: dikey/dokunmatikte kapali telefon eskisi gibi tamamen
 * gizleniyor ve gomulu hal ekranin hicbir yerini kapatmiyor.
 */

body.dikey .tel-tutamak,
body.mobil .tel-tutamak {
  display: none;              /* odaklanamaz, hover alamaz, yer kaplamaz */
}

body.dikey #telefon:not(.tel--acik),
body.mobil #telefon:not(.tel--acik) {
  visibility: hidden;
  transition: visibility 0s linear 0.28s;
}

body.dikey #telefon:not(.tel--acik) .tel-cerceve,
body.mobil #telefon:not(.tel--acik) .tel-cerceve {
  opacity: 0;
  transform: translateY(52px) scale(0.84);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.18) inset,
    0 -2px 0 rgba(0, 0, 0, 0.5) inset,
    0 22px 46px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Hareket azaltma tercihi: dikkat cekme ziplamasi susuyor, etiket
   yerinde duruyor. Kalkma/inme gecisleri yukaridaki genel kural
   tarafindan zaten kisaltilmis durumda. */
@media (prefers-reduced-motion: reduce) {
  .tel-tutamak-tab { animation: none; }
}

/* ================================================================== */
/* CIZILMIS SIMGELER                                                   */
/*                                                                     */
/* Telefondaki emoji simgeler cizimlerle degistiriliyor. JS'e HIC       */
/* dokunulmuyor: hem uygulama dugmeleri hem oyun satirlari zaten        */
/* `data-id` tasiyor, secim oradan yapiliyor. Boylece telefon           */
/* mantigi (uygulama listesi, kilit durumu, rekorlar) oldugu gibi       */
/* kaliyor ve degisen tek sey gorunum oluyor.                          */
/*                                                                     */
/* `font-size: 0` emojiyi gizliyor, `background-image` cizimi koyuyor;  */
/* kutunun kendi gradyani ve golgesi de KALKIYOR -- cizimin zaten       */
/* konturu ve golgesi var, ikisi ust uste gelince kirli duruyordu.      */
/* ================================================================== */

.tel-uyg-dugme[data-id] .tel-ikon,
.tel-oyun[data-id] .tel-oyun-ikon {
  font-size: 0;
  color: transparent;
  background: transparent center/contain no-repeat;
  box-shadow: none;
  border: 0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
}
.tel-uyg-dugme[data-id] .tel-ikon::before,
.tel-uyg-dugme[data-id] .tel-ikon::after,
.tel-oyun[data-id] .tel-oyun-ikon::before,
.tel-oyun[data-id] .tel-oyun-ikon::after { display: none; }

/* --- dock: sistem uygulamalari --- */
.tel-uyg-dugme[data-id="giysi"]     .tel-ikon { background-image: url('../arayuz/uyg-giysi.png'); }
.tel-uyg-dugme[data-id="haritalar"] .tel-ikon { background-image: url('../arayuz/uyg-harita.png'); }
.tel-uyg-dugme[data-id="banka"]     .tel-ikon { background-image: url('../arayuz/uyg-banka.png'); }
.tel-uyg-dugme[data-id="cop"]       .tel-ikon { background-image: url('../arayuz/uyg-cop.png'); }
.tel-uyg-dugme[data-id="balik"]     .tel-ikon { background-image: url('../arayuz/uyg-balik.png'); }
.tel-uyg-dugme[data-id="ayarlar"]   .tel-ikon { background-image: url('../arayuz/uyg-ayarlar.png'); }

/* --- oyun rafi --- */
/* Kapaklar YATAY kart (320x240): kare kutuya `contain` ile oturuyor,
   yani kirpilmiyor, yanlarda pay biraktiyor. */
.tel-oyun[data-id="balon"]  .tel-oyun-ikon { background-image: url('../arayuz/oyun-balon.png'); }
.tel-oyun[data-id="blok"]   .tel-oyun-ikon { background-image: url('../arayuz/oyun-blok.png'); }
.tel-oyun[data-id="hafiza"] .tel-oyun-ikon { background-image: url('../arayuz/oyun-hafiza.png'); }
.tel-oyun[data-id="sepet"]  .tel-oyun-ikon { background-image: url('../arayuz/oyun-sepet.png'); }
.tel-oyun[data-id="yilan"]  .tel-oyun-ikon { background-image: url('../arayuz/oyun-yilan.png'); }
.tel-oyun[data-id="zipzip"] .tel-oyun-ikon { background-image: url('../arayuz/oyun-zipzip.png'); }

/* ------------------------------------------------------------------ */
/* DOCK OLCU DUZELTMESI                                                */
/*                                                                     */
/* OLCULDU: dock 6 sutunlu bir izgara ve her sutun 296 - 16 dolgu -    */
/* 5 x 6 bosluk = 41.7 piksel. `.tel-ikon` ise SABIT 60 piksel:        */
/* her ikon kendi dugmesinden 9'ar piksel tasiyor ve komsusuyla 12     */
/* piksel ust uste biniyordu. Emoji doneminde ikonun kendi zemini      */
/* vardi ve tasma gozden kaciyordu; cizime gecince apacik goruldu.     */
/*                                                                     */
/* Cozum: ikon SUTUN GENISLIGINE uyuyor, ust sinir 56. Etiket de       */
/* sutunu asmiyor.                                                     */
/* ------------------------------------------------------------------ */
.tel-dock { gap: 4px; padding: 10px 6px 8px; }
.tel-uyg-dugme { min-width: 0; }
.tel-uyg-dugme .tel-ikon {
  width: 100%;
  max-width: 56px;
  height: auto;
  aspect-ratio: 1;
}
.tel-uyg-dugme .tel-etiket { max-width: 100%; }

/* Kontrast: rekor rakami beyaz zeminde 2.47 idi (olculdu), 4.5'e cikti.
   Kucuk gri rakam cocuk ekraninda okunmuyordu. */
.tel-oyun-rekor { color: #5A6B80; }

/* ------------------------------------------------------------------ */
/* KALAN EMOJILER                                                      */
/*                                                                     */
/* Para ve rekor yildizi hala emojiydi ve cizilmis ikonlarin yaninda    */
/* uyumsuz duruyordu: emoji her cihazda baska bir fontla, baska bir     */
/* renkte ciziliyor. Metin `font-size: 0` ile gizlenip yerine ayni      */
/* aileden cizim konuyor.                                              */
/* ------------------------------------------------------------------ */
.tel-widget-simge,
.tel-odul-simge,
.tel-tutar-simge {
  font-size: 0 !important;
  color: transparent;
  display: inline-block;
  width: 1.35em; height: 1.35em;
  vertical-align: -0.28em;
  background: url('../arayuz/para.png') center/contain no-repeat;
}
/* Yazi boyutu sifirlandigi icin em olcusu kaybolur: kap yaziyi verir. */
.tel-widget-simge { width: 26px; height: 26px; }
.tel-odul-simge, .tel-tutar-simge { width: 20px; height: 20px; }

/* Rekor yildizi: ::before emojisi yerine cizim. */
.tel-oyun-rekor::before,
.tel-rekor-ikon {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 3px;
  vertical-align: -3px;
  background: url('../arayuz/ek-yildiz.png') center/contain no-repeat;
  font-size: 0;
  color: transparent;
}

/* Dock etiketi: "Haritalar" 44 piksellik sutuna sigsin. */
.tel-uyg-dugme .tel-etiket {
  font-size: 9.5px;
  letter-spacing: -0.2px;
}

/* ------------------------------------------------------------------ */
/* GUNLUK GOREVLER                                                     */
/* ------------------------------------------------------------------ */
.tel-zincir {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 8px 0 6px;
}
.tel-zincir-gun {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(120, 100, 160, 0.16);
  color: #7A628F;
  font-size: 11px; font-weight: 800;
}
.tel-zincir--gecti { background: #5FE3B4; color: #0C3B26; }
/* Bugun VURGULU: cocuk zincirde nerede oldugunu tek bakista gormeli. */
.tel-zincir--bugun {
  background: #FFD24A; color: #4A2E6B;
  box-shadow: 0 0 0 2px #B98CFF;
}
.tel-gorev--bitti { opacity: 0.62; }

/* --- dil secici --- */
.tel-dil { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tel-dil-dugme {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 2px solid rgba(120, 100, 160, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  font: inherit; font-size: 14px; font-weight: 700;
  color: #3A2450;
  cursor: pointer;
}
.tel-dil-bayrak { font-size: 20px; line-height: 1; }
/* Secili dil DOLU: cocuk hangisinde oldugunu tek bakista gormeli. */
.tel-dil--secili {
  background: #B98CFF; border-color: #8F5EE0; color: #fff;
  box-shadow: 0 3px 0 #8F5EE0;
}