/* Top Atış — prototip
   🔑 Dünya SABİT 720×1280 birim. Tuval sığdırılır (contain), artan yer SİYAH kalır.
      Akvaryumdaki kural burada da geçerli: boşluk DOLDURULMAZ, ikinci arkaplan YOK.
      Fizik bulmacası her cihazda birebir aynı olsun diye dünya oranı değişmez. */

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

:root {
  --lacivert: #0e1a2b;
  --altin:    #ffc53d;
  --mavi:     #2f7de1;
  --mavi-koyu:#1c5bb0;
  --kirmizi:  #e0524b;
  --yesil:    #38b05f;
  --metin:    #ffffff;
  --sa-ust: 0px;
  --sa-alt: 0px;
}

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--metin);
  touch-action: none;
  user-select: none;
}

#sahne { position: fixed; inset: 0; }

#tuval {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #7fccf2;
  touch-action: none;
}

/* 🔑 BOYALI ARKA PLAN (10 Ağu) — yalnız `arka` alanı taşıyan bölümde açılır.
   ⚠️ `background-size`/`position` JS'ten yazılıyor: resmin UFUK çizgisi sahnenin
   ufkuna (ölçülen %30,2-32,5) oturmalı, `center` yeterli değil.
   🔴 `.gizli` ile gizlenirken `display:none !important` gerekiyor — kimlik seçici
   sınıfı ezip perdeyi görünmez ama tıklanabilir bırakma tuzağı bu dosyada iki kez
   yaşandı (`#yukleniyor`, `.gizliBtn`). */
#oyunArka {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-color: #7fccf2;
  pointer-events: none;
  z-index: 0;
}
#oyunArka.gizli { display: none !important; }
/* 🔴🔴 TUVALE `z-index` VERME (10 Ağu — kullanıcı: "çark butonuna basıyorum bir şey
   olmuyor"). Boyalı arka planı eklerken tuvale `z-index: 1` koymuştum; konumlanmış
   ve z-index'i `auto` olan HUD/perde katmanları DOM'da SONRA gelse bile tuvalin
   ALTINDA kalıyor. Tuval saydam olduğu için arayüz GÖRÜNMEYE devam ediyor ama
   bütün dokunuşları tuval yiyor — "görünüyor ama basılmıyor" tuzağının aynısı
   (`#yukleniyor` perdesinde de yaşanmıştı → [[pattern_invisible_overlay_eats_taps]]).
   ✅ `#oyunArka` z-index 0, tuval `auto`: ikisi de konumlanmış olduğu için sıra DOM'a
   göre belirleniyor → arka plan, tuval, sonra arayüz. Ölçüm: çarkın merkezindeki
   eleman artık `ayarBtn`. */
#tuval { position: absolute; }

/* 3D: HUD tam ekranın üstünde, oyun sütunu kavramı yok */
#hud { left: 0; top: 0; width: 100%;
  padding: calc(max(12px, env(safe-area-inset-top)) + 8px) 16px; }

#ipucu {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 10px);
  text-align: center;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  pointer-events: none;
  transition: opacity .5s;
}
#ipucu b { color: var(--altin); }
#ipucu.sonuk { opacity: 0; }

/* (Eski "Yükleniyor…" yazısı kaldırıldı — açılış ekranı artık packshot; dosyanın
   sonundaki `#yukleniyor` bloğuna bak.) */

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  pointer-events: none;         /* sadece butonlar tıklanabilir */
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* ⚠️ Dar telefonda 3 rozet + ayar butonu 390px'e sığmıyordu — küçült.
   🔴 4. rozet (coin) gelince 360px'te YİNE taştı (364/360). Ölçüldü.
      Bu yüzden aşağıda ayrıca ≤380px kademesi var.
   🔴🔴 9 Ağu — EŞİK 430 ÇOK DÜŞÜKMÜŞ: iPhone Plus/Pro Max sınıfı telefonlar
      **440 px** ve bu kademenin DIŞINDA kalıyordu. Tam boy rozetler 440'a sığmayınca
      satır taşıyor, esneyebilen tek öğe olan coin rozeti EZİLİYOR (96→62 px) ve
      "30" kapsülün dışına, ayar düğmesinin altına taşıyordu. Kullanıcının telefon
      ekran görüntüsü yakaladı; 440×956'da birebir tekrarlandı.
      🔑 Taşma HATA VERMEZ — flex öğesi sessizce büzülür ve büzülme en esnek öğeye
      (coin) yığılır. Çare `flex: none` DEĞİL: denendi, o zaman satır 390'da da
      taşıp ayar düğmesini ekran dışına itti (404/390 ölçüldü). Doğru çare eşiği
      telefon genişliklerini KAPSAYACAK şekilde yükseltmek. */
@media (max-width: 500px) {
  #hud { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .rozet { min-width: 0; padding: 5px 9px 7px; border-width: 2px; }
  .rozetBaslik { font-size: 10px; letter-spacing: .06em; }
  .rozetSayi { font-size: 21px; }
  .rozetSayi small { font-size: 16px; }
  .yuvarlakBtn { width: 46px; height: 46px; border-width: 2px; }
  .yuvarlakBtn svg { width: 24px; height: 24px; }
}
@media (max-width: 380px) {
  #hud { gap: 4px; padding-left: 6px; padding-right: 6px; }
  .rozet { padding: 4px 6px 6px; border-radius: 14px; }
  .rozetBaslik { font-size: 9px; letter-spacing: 0; }
  .rozetSayi { font-size: 18px; margin-top: 3px; }
  .rozetSayi small { font-size: 14px; }
  .yuvarlakBtn { width: 40px; height: 40px; }
  .yuvarlakBtn svg { width: 21px; height: 21px; }
  .coinRozet { padding: 4px 7px; gap: 4px; }
  .coinRozet::before { width: 14px; height: 14px; }
  .coinRozet .rozetSayi { font-size: 16px; }
}

.rozet {
  pointer-events: none;
  min-width: 96px;
  padding: 6px 14px 8px;
  border-radius: 18px;
  background: linear-gradient(#3d8ff0, #1d5fb4);
  border: 3px solid var(--altin);
  box-shadow: 0 4px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.35);
  text-align: center;
  line-height: 1;
}
.rozetBaslik {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  opacity: .92;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.rozetSayi {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  font-weight: 900;
  text-shadow: 0 2px 3px rgba(0,0,0,.45);
  font-variant-numeric: tabular-nums;
}
.rozetSayi i  { font-style: normal; opacity: .55; margin: 0 1px; }
.rozetSayi small { font-size: 19px; opacity: .75; }
.hedefRozet { background: linear-gradient(#f0a53d, #c2701a); }
.bolumRozet { min-width: 78px; background: linear-gradient(#5b6b86, #33415a); }

/* ---------- COIN ----------
   ⚠️ 4. rozet dar telefona sığmıyor (3'ü zaten zor sığıyordu) — coin rozeti
   BAŞLIKSIZ ve dar: madeni para ikonu + sayı tek satırda. */
.coinRozet {
  min-width: 0;
  margin-left: auto;                /* ayar butonundan önce sağa yasla */
  padding: 8px 12px;
  background: linear-gradient(#f7d24a, #d19a12);
  border-color: #fff3c4;
  display: flex; align-items: center; gap: 6px;
}
.coinRozet::before {
  content: "";
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffbe6, #f2c53a 55%, #a97708);
  box-shadow: inset 0 0 0 2px rgba(122,84,8,.55);
  flex: none;
}
.coinRozet .rozetBaslik { display: none; }
.coinRozet .rozetSayi { margin-top: 0; font-size: 22px; color: #4a3200;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.coinRozet.artti { animation: coinZipla .45s ease-out; }
@keyframes coinZipla { 40% { transform: scale(1.22) rotate(-4deg); } }

/* ---------- BOMBA (oyun içi satın alma) ---------- */
#bombaBtn {
  position: absolute; right: 14px; bottom: 22px;
  width: 68px; height: 68px; border-radius: 50%;
  border: 3px solid var(--altin);
  background: linear-gradient(#5b6b86, #2b3648);
  box-shadow: 0 4px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.22);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; cursor: pointer; color: #fff; font: inherit;
  padding-bottom: 2px;
}
#bombaBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
#bombaBtn .bombaIkon { font-size: 26px; line-height: 1; }
#bombaBtn .bombaFiyat { font-size: 12px; font-weight: 800; color: #ffe58a; line-height: 1; }
#bombaBtn.yetersiz { filter: grayscale(.75) brightness(.72); }
#bombaBtn.hazir {
  background: linear-gradient(#f0663d, #b8321a);
  animation: nabiz .7s ease-in-out infinite;
}
#bombaBtn.hazir .bombaFiyat { color: #fff; }
#bombaBtn.gizliBtn { display: none; }
/* eşik yukarıdaki HUD kademesiyle AYNI olmalı (440 px telefon tuzağı) */
@media (max-width: 500px) {
  #bombaBtn { width: 58px; height: 58px; right: 10px; bottom: 16px; }
  #bombaBtn .bombaIkon { font-size: 22px; }
  .coinRozet { padding: 6px 9px; }
  .coinRozet .rozetSayi { font-size: 19px; }
  .coinRozet::before { width: 16px; height: 16px; }
}

/* 🔴 `!important` ŞART. `.gizliBtn` ile `.lobiSonuc` / `.btn.ektop` aynı
   özgüllükte ve bunlar dosyada SONRA geldiği için `display:flex` kazanıyordu:
   kazanma şeridi lobide ilk açılışta "+0" ile görünüyordu. Sınıf ekleniyordu,
   eleman yine de ekrandaydı — testin sınıfa değil HESAPLANMIŞ STİLE bakması lazım. */
.gizliBtn { display: none !important; }

/* top biterken uyarı */
.rozet.azaldi { animation: nabiz .7s ease-in-out infinite; }
@keyframes nabiz { 50% { transform: scale(1.08); filter: brightness(1.18); } }

.yuvarlakBtn {
  pointer-events: auto;
  width: 56px; height: 56px;
  margin-left: auto;
  border-radius: 50%;
  border: 3px solid var(--altin);
  background: linear-gradient(#3d8ff0, #1d5fb4);
  box-shadow: 0 4px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.35);
  cursor: pointer;
  display: grid; place-items: center;
}
.yuvarlakBtn svg { width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.yuvarlakBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }

/* ---------- Perdeler (harita / sonuç / ayarlar) ---------- */
.perde {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 14, 26, .82);
  backdrop-filter: blur(6px);
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  z-index: 5;
  overflow-y: auto;
}
.perde.gizli { display: none; }

.haritaIc { width: 100%; max-width: 460px; text-align: center; }
.haritaIc h1 {
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--altin);
  text-shadow: 0 4px 0 #8a5d00, 0 6px 14px rgba(0,0,0,.5);
}
.altBaslik { margin-top: 4px; opacity: .78; font-size: 15px; }
.not { margin-top: 18px; font-size: 12px; opacity: .45; }

#haritaIzgara {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 380px) { #haritaIzgara { grid-template-columns: repeat(3, 1fr); } }

.bolumBtn {
  position: relative;
  aspect-ratio: 1;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,.25);
  background: linear-gradient(#3d8ff0, #1d5fb4);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
  display: grid;
  place-items: center;
  padding-bottom: 12px;
}
.bolumBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.bolumBtn.acik   { border-color: var(--altin); }
.bolumBtn.kilit  { background: linear-gradient(#3d4655, #262d38); color: rgba(255,255,255,.35); cursor: not-allowed; }
.bolumBtn .yild  { position: absolute; bottom: 7px; left: 0; right: 0; font-size: 12px; letter-spacing: 1px; color: var(--altin); }
.bolumBtn.kilit .yild { color: rgba(255,255,255,.22); }

.kart {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(#1b2b44, #101c2e);
  border: 3px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 26px 22px 20px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.kart h2 { font-size: 24px; font-weight: 900; letter-spacing: .05em; color: var(--altin); }
.kart p  { margin-top: 10px; font-size: 15px; opacity: .8; line-height: 1.45; }

.yildizlar { margin-top: 16px; display: flex; justify-content: center; gap: 10px; }
.yildizlar span {
  width: 46px; height: 46px;
  background: rgba(255,255,255,.12);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transition: transform .25s cubic-bezier(.3,1.7,.5,1), background .25s;
}
.yildizlar span.dolu { background: var(--altin); transform: scale(1.12); }

.dugmeler { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn {
  flex: 1 1 0;
  min-width: 92px;
  padding: 13px 14px;
  border-radius: 15px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn.birincil { background: linear-gradient(#4ec46f, #2c9149); }
.btn.ikincil  { background: linear-gradient(#4a5a72, #33415a); }
.btn.buyuk    { flex: 2 1 0; font-size: 18px; padding: 15px 16px; letter-spacing: .04em; }

/* ---------- Tilki ---------- */
.tilki {
  display: block; width: 190px; height: 190px;
  margin: -14px auto 0;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.tilki.kucuk { width: 118px; height: 118px; margin: -46px auto 2px; }

/* ================================ LOBİ ================================
   🔒 Bölüm geçişi oyun üstünde popup DEĞİL, burada olur (kullanıcı kararı).
   Perde OPAK — arkada 3D sahne görünmemeli, yoksa yine "popup" gibi okunur. */
.perde.tam {
  /* oyunun kendi göğü + kumu — lobi aynı dünyada geçiyor gibi dursun */
  background: linear-gradient(180deg, #5cbfe8 0%, #93dcf3 36%, #ecd097 36%, #d8ab63 100%);
  backdrop-filter: none;
  align-items: stretch;
}
.lobiIc {
  width: 100%; max-width: 420px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}
.lobiUst { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lobiUst h1 {
  font-size: 30px; font-weight: 900; letter-spacing: .06em;
  color: #fff; text-shadow: 0 3px 0 #1d5fb4, 0 5px 10px rgba(0,0,0,.32);
}
.lobiCoin { pointer-events: none; }

/* Kazanma özeti şeridi (lobide) */
.lobiSonuc {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 14px;
  background: linear-gradient(#f7d24a, #e0a91c);
  border: 2px solid #fff3c4;
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
  animation: seritGel .4s cubic-bezier(.3,1.6,.5,1);
}
@keyframes seritGel { from { transform: translateY(-14px) scale(.92); opacity: 0; } }
.lsBaslik { font-size: 13px; font-weight: 900; letter-spacing: .06em; color: #4a3200; }
.lsCoin { font-size: 17px; font-weight: 900; color: #4a3200;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.lobiSonuc .yildizlar { margin-top: 0; }
.lobiSonuc .yildizlar span { background: rgba(74,50,0,.22); }
.lobiSonuc .yildizlar span.dolu { background: #fff8dc; }

/* Tilki + konuşma balonu */
.lobiSahne { position: relative; display: flex; flex-direction: column; align-items: center; }
.tilki.buyuk { width: min(58vw, 230px); height: min(58vw, 230px); margin: 0; }
.balon {
  position: relative;
  max-width: 300px; margin: 0 auto 4px;
  padding: 11px 15px;
  background: #fff; color: #16283f;
  border-radius: 16px;
  font-size: 14px; font-weight: 650; line-height: 1.35; text-align: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.balon::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; translate: -50% 0;
  border: 10px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.balon:empty { display: none; }

/* Sıradaki bölüm kartı */
.lobiKart {
  background: rgba(10, 30, 52, .58);
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 18px;
  padding: 14px 16px 16px;
  text-align: center;
}
.lobiKart .girisRozet {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  color: rgba(255,255,255,.7);
}
.lobiKart .girisRozet i { font-style: normal; color: var(--altin); }
.lobiKart h2 { margin-top: 3px; font-size: 22px; font-weight: 900;
  letter-spacing: .04em; color: var(--altin); }
.lobiKart p { margin-top: 8px; font-size: 14px; line-height: 1.4;
  color: rgba(255,255,255,.86); min-height: 20px; }
.yildizlar.mini { margin-top: 9px; gap: 6px; }
.yildizlar.mini span { width: 22px; height: 22px; }
.lobiAlt { margin-top: 2px; }
.lobiSag { display: flex; flex-direction: column; gap: 12px; }

/* ══════════════ LOBİ YERLEŞİMİ — ÜÇ BOYUT ══════════════
   1) MOBİL DİKEY   → tek sütun (yukarıdaki varsayılan)
   2) DİKEY TABLET  → aynı tek sütun, büyütülmüş
   3) YATAY         → İKİ SÜTUN: solda tilki, sağda kart + butonlar
   🔑 Ayrım `orientation`, cihaz adı değil — yatay tablet ile masaüstü aynı
      sorunu yaşıyor (geniş ve kısa), aynı çözümü alıyorlar.
   🔴 Ölçüldü (2 Ağu, düzeltmeden önce): 360×640'ta lobi 651px (11px taştı),
      844×390 yatay telefonda 655px (265px taştı). Tek sütun yatayda ÇALIŞMIYOR. */

/* --- 2) DİKEY TABLET --- */
@media (orientation: portrait) and (min-width: 700px) {
  .lobiIc { max-width: 580px; gap: 20px; }
  .lobiUst h1 { font-size: 42px; }
  .tilki.buyuk { width: 300px; height: 300px; }
  .balon { max-width: 440px; font-size: 17px; padding: 14px 20px; }
  .lobiKart { padding: 20px 22px 22px; border-radius: 22px; }
  .lobiKart h2 { font-size: 30px; }
  .lobiKart p { font-size: 16px; }
  .yildizlar.mini span { width: 28px; height: 28px; }
  .btn { font-size: 17px; padding: 16px 18px; }
  .btn.buyuk { font-size: 22px; padding: 19px 20px; }
  .lsBaslik { font-size: 15px; }
  .lsCoin { font-size: 20px; }
}

/* --- 3) YATAY (yatay tablet · yatay telefon · masaüstü) --- */
@media (orientation: landscape) {
  .lobiIc {
    max-width: 1000px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "ust ust" "ozet ozet" "sahne sag";
    align-items: center;
    /* ⚠️ `align-content` olmadan satırlar dikeyde dağılıyor: başlık en tepede,
       içerik en altta, ortada koca boşluk kalıyordu (1180×820'de ölçüldü). */
    align-content: center;
    column-gap: clamp(20px, 4vw, 48px);
    row-gap: clamp(12px, 3vh, 28px);
  }
  .lobiUst   { grid-area: ust; }
  .lobiSonuc { grid-area: ozet; }
  .lobiSahne { grid-area: sahne; }
  .lobiSag   { grid-area: sag; }
  /* Balon tilkinin üstünde kalsın ama sütunu taşırmasın */
  .balon { max-width: 100%; }
  .tilki.buyuk { width: min(30vh, 260px); height: min(30vh, 260px); }
}

/* Yatayda ekran KISA (yatay telefon, küçük tablet): her şeyi sıkıştır */
@media (orientation: landscape) and (max-height: 520px) {
  .lobiIc { row-gap: 6px; column-gap: 20px; }
  .lobiUst h1 { font-size: 22px; }
  .tilki.buyuk { width: min(42vh, 180px); height: min(42vh, 180px); }
  .balon { font-size: 12.5px; padding: 8px 11px; border-radius: 12px; }
  .lobiKart { padding: 9px 12px 10px; border-radius: 14px; }
  .lobiKart h2 { font-size: 17px; }
  .lobiKart p { font-size: 12px; margin-top: 5px; }
  .yildizlar.mini { margin-top: 5px; }
  .yildizlar.mini span { width: 16px; height: 16px; }
  .lobiSag { gap: 7px; }
  .btn { padding: 9px 12px; font-size: 13px; }
  .btn.buyuk { font-size: 16px; padding: 11px 14px; }
  .lobiSonuc { padding: 5px 12px; gap: 9px; }
  .lsBaslik { font-size: 11px; }
  .lsCoin { font-size: 14px; }
}

/* Dikey ama KISA ekran (360×640 gibi) — taşmayı burası çözüyor */
@media (orientation: portrait) and (max-height: 700px) {
  .lobiIc { gap: 8px; }
  .lobiUst h1 { font-size: 24px; }
  .tilki.buyuk { width: min(38vw, 150px); height: min(38vw, 150px); }
  .balon { font-size: 13px; padding: 9px 12px; }
  .lobiKart { padding: 10px 14px 12px; }
  .lobiKart h2 { font-size: 19px; }
  .lobiKart p { font-size: 13px; margin-top: 6px; }
  .yildizlar.mini span { width: 18px; height: 18px; }
  .lobiSag { gap: 8px; }
  .btn { padding: 11px 12px; font-size: 14px; }
  .btn.buyuk { font-size: 16px; padding: 12px 14px; }
}

/* ---------- Ek top satın alma ---------- */
.coinOdul {
  margin-top: 10px !important; font-size: 20px !important; font-weight: 900;
  color: #ffd84a; opacity: 1 !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.45);
}
.btn.ektop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 16px; flex: none;
  background: linear-gradient(#f7d24a, #d19a12);
  color: #4a3200; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  font-size: 17px;
}
.btn.ektop .fiyat {
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 800;
  padding: 4px 9px; border-radius: 9px;
  background: rgba(74,50,0,.22);
}
.btn.ektop .fiyat::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffbe6, #f2c53a 55%, #a97708);
}
.btn.ektop.yetersiz { filter: grayscale(.7) brightness(.8); cursor: not-allowed; }

.satir {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px;
}
.satir input { width: 22px; height: 22px; accent-color: var(--yesil); }

@media (prefers-reduced-motion: reduce) {
  .rozet.azaldi { animation: none; }
  .yildizlar span { transition: none; }
}

/* ═══════════════ DİYAR HARİTASI (lobi arka planı + bölüm seçici) ═══════════════
   🔑 MOBİL ÖNCELİKLİ. Perspektif kamerada FOV DİKEY olduğu için 16:9 harita dikey
   telefonda yüksekliğiyle oturur ve genişliğin ancak ~%26'sı görünür. Bu bir tercih
   değil geometri; o yüzden lobi "haritayı sığdırma" değil "haritanın İÇİNDE durma"
   olarak kuruldu: harita tam ekran, üstte ince başlık, altta kompakt panel, ortası açık.
   ⚠️ `.haritaVar` gövdeye SADECE harita başarıyla yüklenince ekleniyor — yüklenmezse
   lobi eski opak gradyanıyla aynen çalışır. */
#haritaKat { position: absolute; inset: 0; z-index: 0; touch-action: none; cursor: grab; }
#haritaKat.gizli { display: none; }
#haritaKat:active { cursor: grabbing; }

.haritaVar .perde.tam { background: none; }
/* Alt panelin okunması için harita alttan koyulaşsın (yazı boyanın üstünde kayboluyordu). */
.haritaVar #lobi::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 0;
  background: linear-gradient(180deg, rgba(6,14,26,0) 0%, rgba(6,14,26,.55) 55%, rgba(6,14,26,.82) 100%);
  pointer-events: none;
}
.haritaVar #lobi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 18%; z-index: 0;
  background: linear-gradient(180deg, rgba(6,14,26,.55), rgba(6,14,26,0));
  pointer-events: none;
}
/* 🔴 Panel kutuları dokunuşu YEMEMELİ, yoksa haritada gezinilemiyor.
   Sadece gerçekten tıklanan öğeler olayları alır. */
.haritaVar .lobiIc { position: relative; z-index: 1; justify-content: space-between;
                     pointer-events: none; max-width: 460px; }
.haritaVar .lobiIc > * { pointer-events: none; }
.haritaVar .lobiIc .btn,
.haritaVar .lobiIc .lobiKart,
.haritaVar .lobiIc .balon,
.haritaVar .lobiIc .lobiSonuc { pointer-events: auto; }

.haritaVar .lobiUst h1 { font-size: 22px; }
.haritaVar .lobiSahne { margin-top: auto; flex-direction: row; align-items: flex-end;
                        justify-content: center; gap: 6px; }
.haritaVar .tilki.buyuk { width: min(32vw, 132px); height: min(32vw, 132px); }
.haritaVar .balon { margin: 0 0 6px; max-width: 54vw; font-size: 13px; padding: 9px 12px; }
.haritaVar .lobiKart { background: rgba(10, 22, 40, .66); backdrop-filter: blur(4px);
                       border-color: rgba(255,255,255,.22); }
.haritaVar .lobiKart p { display: none; }        /* ipucu alta sığmıyor, kart daralsın */

/* ---- harita düğümleri (3D'den her karede projekte ediliyor) ---- */
.hDugum {
  position: absolute; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; gap: 0;
  border: 3px solid #fff; background: linear-gradient(#ffe08a, #f5b21f);
  box-shadow: 0 3px 7px rgba(0,0,0,.42);
  color: #4a3208; font: inherit; cursor: pointer; padding: 0;
  will-change: transform;
}
.hDugum b { font-size: 15px; font-weight: 900; line-height: 1; }
.hDugum .hYild { position: absolute; top: 100%; margin-top: 2px; font-style: normal;
                 font-size: 10px; letter-spacing: -1px; color: #ffd45e;
                 text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }
.hDugum.bitti { background: linear-gradient(#cdeff0, #7fd0d8); color: #10424a; }
.hDugum.secili { background: linear-gradient(#8ef0a8, #2bc768); color: #0d3a1c;
                 animation: hZipla 1.6s ease-in-out infinite; }
@keyframes hZipla {
  0%,100% { transform: translate(-50%,-50%) }
  50%     { transform: translate(-50%,-62%) }
}
/* Henüz TASARLANMAMIŞ bölümler (11-16). Kilit değil "yakında" — oyuncu kilit sanıp
   açmaya çalışmasın diye soluk ve tıklanamaz. */
.hDugum.yakinda { background: rgba(210, 222, 236, .5); color: #33445c;
                  border-color: rgba(255,255,255,.55); box-shadow: none; cursor: default; }
.hDugum.yakinda b { opacity: .75; }

/* Dalış sırasında lobi arayüzü çekilsin — dev kartlar kameraya çarpmasın. */
#lobi.dalis .lobiIc, #lobi.dalis .hDugum { opacity: 0; transition: opacity .22s ease-out; }
#lobi.dalis { pointer-events: none; }

/* ---- yatay (yatay tablet + masaüstü): panel sağa toplanır, harita solda açık kalır ---- */
@media (orientation: landscape) {
  .haritaVar .lobiSahne { margin-top: 0; }
  .haritaVar .tilki.buyuk { width: min(16vw, 120px); height: min(16vw, 120px); }
  .haritaVar .balon { max-width: 26vw; }
}

/* 🔴 Lobi açıkken oyun HUD'ı GİZLENİR. Perde opakken gerekmiyordu; harita gelince
   perde saydamlaştı ve BÖLÜM/TOP/KUTU rozetleri + ikinci coin + bomba butonu
   lobinin üstünde görünür oldu (390×844 ve 844×390'da ölçüldü). */
body.lobide #hud,
body.lobide #bombaBtn,
body.lobide #ipucu { display: none; }

/* Alt panel MOBİLDE KOMPAKT olmalı — yoksa ekranın yarısını kaplıyor ve oynanacak
   bölümün düğümü panelin arkasında kalıyor. */
.haritaVar .lobiIc { gap: 8px; }
.haritaVar .lobiUst h1 { font-size: 20px; }
.haritaVar .tilki.buyuk { width: min(26vw, 104px); height: min(26vw, 104px); }
.haritaVar .balon { max-width: 58vw; font-size: 12.5px; padding: 8px 11px; line-height: 1.3; }
.haritaVar .lobiKart { padding: 10px 12px; }
.haritaVar .lobiKart h2 { font-size: 18px; margin-top: 1px; }
.haritaVar .lobiKart .girisRozet { font-size: 11px; }
.haritaVar .btn.buyuk { padding: 13px 18px; font-size: 18px; }
.haritaVar .lobiAlt .btn { padding: 9px 14px; font-size: 14px; }

/* ═════════════ LOBİ SAHNESİ — şato + yolda yürüyen tilki + bölüm tabelası ═════════════
   6 Ağu 2026. Diyar haritasının YERİNİ aldı (harita `?harita=1` ile yedekte).
   🔑 Yerleşim JS'te (lobisahne.js): arka planın ölçeği ve kaydırması "cover"ı elle
   hesaplar, çünkü `object-fit: cover` geniş ekranda kadrajı ORTALAR ve yol (resmin
   %73-79,5'i) ekrandan çıkar. Buradaki CSS sadece görünüş + animasyon.
   ⚠️ `.sahneVar` gövdeye SADECE sahne yüklenince eklenir; yüklenmezse lobi eski
   opak gradyanıyla aynen çalışır (haritadaki `.haritaVar` mantığının aynısı). */
#lobiSahneKat { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#lobiSahneKat.gizli { display: none; }

.lsDunya { position: absolute; inset: 0; transform-origin: 50% 79.5%;
           transition: transform 380ms cubic-bezier(.4, 0, .9, .5); }
/* OYNA'da "içeri gir" hissi: dünya tilkinin durduğu noktadan hafifçe yakınlaşır. */
.lsDunya.dalis { transform: scale(1.22); }

.lsZemin { position: absolute; user-select: none; -webkit-user-drag: none; }

/* Sıfır boyutlu NOKTA: x'i JS taşır, y'si yolun alt kenarı. Çocuklar kendini ortalar. */
.lsOyuncu { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lsTilki {
  position: absolute; left: 0; bottom: 0;
  height: var(--boy, 120px); width: auto;
  transform: translateX(-50%) scaleX(var(--yon, 1));
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .3));
  user-select: none; -webkit-user-drag: none;
}
.lsOyuncu.ters { --yon: -1; }
.lsOyuncu.yuruyor .lsTilki { animation: lsZipla .3s ease-in-out infinite; }
@keyframes lsZipla {
  0%, 100% { transform: translateX(-50%) scaleX(var(--yon, 1)) translateY(0) rotate(0deg); }
  50%      { transform: translateX(-50%) scaleX(var(--yon, 1)) translateY(-7%) rotate(-2deg); }
}

/* Tabela — yolun HEMEN ALTINDA, tilkinin ayağının dibinde, onunla birlikte gider. */
.lsTabela {
  position: absolute; left: 0; top: 9px; transform: translateX(-50%);
  min-width: 104px; padding: 5px 12px 6px; text-align: center;
  background: linear-gradient(#d29556, #a9682e);
  border: 3px solid #7c4a1d; border-radius: 11px;
  box-shadow: 0 4px 0 rgba(60, 32, 8, .45), inset 0 2px 0 rgba(255, 240, 210, .3);
  color: #fff6e4; text-shadow: 0 2px 2px rgba(60, 30, 5, .55); line-height: 1;
}
/* Direği: tabelanın altından çimene iner. */
.lsTabela::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px;
  width: 8px; height: 13px; background: linear-gradient(#8a5423, #6d3f18);
  border-radius: 0 0 3px 3px; box-shadow: 0 2px 0 rgba(60, 32, 8, .35);
}
.lsTabela b { display: block; font-size: 15px; font-weight: 900; letter-spacing: .4px; }
.lsTabela span { display: block; margin-top: 3px; font-size: 10px; font-weight: 700;
                 letter-spacing: .6px; opacity: .95; }
.lsTabela .lsYild { display: block; margin-top: 3px; font-style: normal; font-size: 11px;
                    letter-spacing: 2px; color: #ffd45e; }
.lsTabela .lsYild.bos { color: rgba(255, 246, 228, .5); }

/* ---- sahne açıkken lobi arayüzü ---- */
.sahneVar .perde.tam { background: none; }
/* Üstte başlık, altta butonlar okunsun diye iki uçtan hafif koyulaşma. */
.sahneVar #lobi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 16%; z-index: 0;
  background: linear-gradient(180deg, rgba(8, 20, 34, .45), rgba(8, 20, 34, 0));
  pointer-events: none;
}
.sahneVar #lobi::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 24%; z-index: 0;
  background: linear-gradient(180deg, rgba(8, 20, 34, 0), rgba(8, 20, 34, .62));
  pointer-events: none;
}
/* 🔴 Panel kutuları dokunuşu YEMEMELİ. Sadece gerçekten tıklananlar olay alır. */
.sahneVar .lobiIc { position: relative; z-index: 1; justify-content: space-between;
                    pointer-events: none; max-width: 460px; }
.sahneVar .lobiIc > * { pointer-events: none; }
.sahneVar .lobiIc .btn,
.sahneVar .lobiIc .balon,
.sahneVar .lobiIc .lobiSonuc { pointer-events: auto; }
.sahneVar .lobiUst h1 { font-size: 22px; }
/* Duran büyük tilki ve bölüm kartı GEREKSİZ: yürüyen tilki + tabela onların işini yapıyor.
   ⚠️ DOM'da duruyorlar (metinleri hâlâ güncelleniyor, testler onlara bakıyor). */
.sahneVar #lobiTilki { display: none; }
.sahneVar .lobiKart { display: none; }
.sahneVar .lobiSahne { margin: 8px 0 auto; }
.sahneVar .balon { margin: 0 auto; max-width: 72vw; font-size: 13px; padding: 9px 12px; }
.sahneVar .balon::after { display: none; }   /* konuşma oku tilkiye değmiyor artık */

/* Kısa ekranda (yatay telefon / küçük telefon) tabela ve balon küçülür — yoksa
   yolun altındaki 178 px'lik paya sığmıyor. */
@media (max-height: 700px) {
  .lsTabela { min-width: 90px; padding: 4px 9px 5px; border-radius: 9px; border-width: 2px; }
  .lsTabela b { font-size: 13px; }
  .lsTabela span { font-size: 9px; margin-top: 2px; }
  .lsTabela .lsYild { font-size: 10px; margin-top: 2px; }
  .lsTabela::after { height: 9px; }
  .sahneVar .balon { font-size: 12px; padding: 7px 10px; }
}

/* 🔴 YOLUN ALTINDAKİ YER SABİT VE DAR — ölçüldü, tercih değil geometri:
   arka plan 9:16 ve dikey telefon 9:16'dan UZUN olduğu için resim yüksekliğe
   oturuyor, kaydırma payı SIFIR kalıyor; yolun altında her zaman resmin son
   %20,5'i var (844 px'lik ekranda 173 px). Oraya tabela + OYNA + iki yardımcı
   düğme sığmıyordu (360×640 ve 844×390'da tabela OYNA'nın üstüne biniyordu).
   ✅ Çözüm: yardımcı düğmeler (Bölümler / Ayarlar) sağ üst köşeye taşındı,
   altta SADECE OYNA kaldı. Oyun HUD'ındaki ayar düğmesiyle de aynı hizada. */
.sahneVar .lobiAlt {
  position: absolute; top: 54px; right: 10px; z-index: 2;
  flex-direction: column; align-items: flex-end; gap: 6px; width: auto;
}
.sahneVar .lobiAlt .btn { padding: 7px 12px; font-size: 13px; border-radius: 999px;
                          background: rgba(12, 26, 44, .62); backdrop-filter: blur(3px);
                          border-color: rgba(255, 255, 255, .26); }
.sahneVar .lobiSag { position: static; }
.sahneVar .lobiSag .dugmeler:not(.lobiAlt) { margin-bottom: 4px; }
/* 360×640'ta tabelanın alt kenarı OYNA'nın 5 px içine giriyordu (ölçüldü) —
   kısa ekranda lobi iç boşluğu daralıyor, düğme aşağı iniyor. */
@media (max-height: 700px) {
  .sahneVar .lobiIc { padding-bottom: 6px; }
  .sahneVar .lobiSag .dugmeler:not(.lobiAlt) { margin-bottom: 0; }
  .sahneVar .btn.buyuk { padding: 11px 16px; font-size: 17px; }
}
/* 🔴 Alt boşluğun kaynağı `.lobiIc` değil `.perde`nin 18 px'lik alt payıydı (ölçüldü:
   `.lobiIc` alt kenarı 622/640). Kısa ekranda o pay daralıyor ve tabela ile OYNA
   arasındaki 5 px'lik binme kapanıyor. */
@media (max-height: 700px) {
  .sahneVar #lobi.perde { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .lsTabela { min-width: 84px; padding: 3px 8px 4px; }
  .lsTabela span { font-size: 8px; }
  .lsTabela .lsYild { font-size: 9px; }
}
/* Ölçüldü (390×844 ekran görüntüsü): kazanma şeridi sağ üstteki Bölümler/Ayarlar
   düğmelerinin ALTINA giriyordu; tabeladaki "BÖLÜM 2" ise iki satıra kırılıyordu. */
.sahneVar .lobiSonuc { max-width: calc(100% - 104px); margin-right: auto; }
.lsTabela b { white-space: nowrap; }
.lsTabela { min-width: 112px; }
@media (max-height: 700px) { .lsTabela { min-width: 96px; } }

/* ── YATAY EKRAN ─────────────────────────────────────────────────────────────
   🔴 ÖLÇÜLDÜ (844×390): başlık tilkinin üstüne biniyor, coin rozeti sağ üstteki
   düğmelerin altına giriyordu. Ayrıca 9:16 arka planda KALE yatayda hiç görünmüyor
   (görünen bant resmin %65-91'i) — bu bir hata değil geometri; yatay için ayrı
   16:9 arka plan üretmek gerekir. Şimdilik arayüz çakışmaları temizlendi. */
@media (orientation: landscape) {
  .sahneVar .lobiUst { position: absolute; top: 8px; left: 12px; right: auto;
                       width: auto; gap: 10px; z-index: 2; }
  .sahneVar .lobiUst h1 { font-size: 17px; }
  .sahneVar .lobiSonuc { position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
                         max-width: 60vw; margin: 0; z-index: 2; }
  .sahneVar .lobiAlt { top: 8px; }
}
/* 🔴 Mutlak konumlu köşe düğmeleri `.lobiIc`ye göre yerleşiyor (position: relative onda).
   `.lobiIc` ortalanmış 460 px'lik bir kutu olduğu için "sağ üst köşe" ekranın köşesi
   DEĞİL kutunun köşesi oluyordu (844×390 ve 1440×900'de ölçüldü: coin ortada kaldı).
   ✅ Sahne açıkken `.lobiIc` ekranı tam kaplar; genişlik sınırı iç bloklara taşındı. */
.sahneVar .lobiIc { width: 100%; max-width: none; height: 100%; }
.sahneVar .lobiSag { max-width: 460px; margin-left: auto; margin-right: auto; width: 100%; }
@media (orientation: landscape) {
  .sahneVar .lobiSag { max-width: 320px; margin-right: 24px; }
  .sahneVar .lobiUst { position: static; }
  .sahneVar .lobiIc { align-content: space-between; }
}
/* Coin rozeti sağ uçta duruyor ve köşedeki Bölümler/Ayarlar'ın ALTINA kayıyordu. */
.sahneVar .lobiUst { padding-right: 104px; }
@media (max-width: 420px) { .sahneVar .lobiUst { padding-right: 96px; } }
/* Canlıda ölçüldü (390×844): konuşma balonu sağ üstteki Bölümler/Ayarlar'ın ALTINA
   giriyor, metnin sağı okunmuyordu. Balon o iki düğmenin altından başlasın. */
@media (orientation: portrait) {
  .sahneVar .lobiSahne { margin-top: 84px; }
}
@media (orientation: portrait) and (max-height: 700px) {
  .sahneVar .lobiSahne { margin-top: 74px; }
}

/* ═══════════ REFERANS ARAYÜZ — rakip lobisinden ÖLÇÜLEN renklerle ═══════════
   6 Ağu 2026, kullanıcı: *"oyna butonunu, üstteki can ekranını vs aynı bu attığım
   ekrandaki gibi yap, butonları benzet, renkleri birebir aynı yapabilirsin."*
   🔑 Renkler TAHMİN DEĞİL, `konsept/IMG_8295 2.PNG` üzerinden piksel örneklendi:
     OYNA yeşili #69f50e → #57e209 · altın çerçeve #c29102 · hap zemini #fbedde
     kalp kırmızısı #e80010 · ayar düğmesi #a00438 · altın halka #ffbe17
     alt bar bordosu #9c0436 · coin altını #ffe112
   ⚠️ CAN/KALP SİSTEMİ YOK — 2 Ağu'da kullanıcı elemişti ("sınırsız tekrar dene").
      Üst şerit referansın BİÇİMİNİ alıyor, kalpleri değil. */
:root {
  --r-krem:      #fbedde;   /* hap zemini */
  --r-krem-koyu: #f0dcc4;
  --r-kahve:     #7a4419;   /* hap üstündeki yazı */
  --r-altin:     #ffbe17;   /* çerçeve/halka */
  --r-altin-koyu:#c29102;
  --r-bordo:     #a00438;   /* yuvarlak düğme + alt bar */
  --r-bordo-koyu:#6d0125;
  --r-yesil:     #69f50e;   /* OYNA gövde üstü */
  --r-yesil-orta:#57e209;
  --r-yesil-koyu:#2f8a06;   /* 3D alt gölge */
  --r-coin:      #ffe112;
}

/* ---------- üst rozetler: krem hap + altın çerçeve + kahve yazı ---------- */
.rozet {
  background: linear-gradient(var(--r-krem), var(--r-krem-koyu));
  border: 3px solid var(--r-altin);
  border-radius: 999px;
  color: var(--r-kahve);
  box-shadow: 0 3px 0 var(--r-altin-koyu), 0 5px 8px rgba(60,26,4,.28),
              inset 0 2px 0 rgba(255,255,255,.75);
  padding: 5px 13px 6px;
}
.rozetBaslik { opacity: .78; text-shadow: none; }
.rozetSayi   { text-shadow: none; }
.rozetSayi i { opacity: .45; }
.rozetSayi small { opacity: .6; }
.hedefRozet, .bolumRozet { background: linear-gradient(var(--r-krem), var(--r-krem-koyu)); }
.coinRozet   { background: linear-gradient(var(--r-krem), var(--r-krem-koyu)); }
.coinRozet .rozetSayi { color: var(--r-kahve); text-shadow: none; }
.coinRozet::before { background: radial-gradient(circle at 34% 28%, #fff6b8, var(--r-coin) 55%, #d19a00); }

/* ---------- yuvarlak düğme (ayar): bordo gövde + altın halka ---------- */
.yuvarlakBtn {
  background: radial-gradient(circle at 40% 30%, #c4144f, var(--r-bordo) 60%, var(--r-bordo-koyu));
  border: 3px solid var(--r-altin);
  box-shadow: 0 3px 0 var(--r-altin-koyu), 0 5px 8px rgba(60,4,20,.35),
              inset 0 2px 0 rgba(255,255,255,.22);
}
.yuvarlakBtn svg { fill: #fff; }

/* ---------- OYNA: altın çerçeve + parlak yeşil gövde + kalın beyaz yazı ----------
   Çerçeve `border` DEĞİL ayrı bir katman: referansta altın halka gövdeden bağımsız
   ve gövdenin iç kenarında açık yeşil bir ışık var. */
.btn.birincil {
  position: relative;
  background: linear-gradient(180deg, var(--r-yesil) 0%, var(--r-yesil-orta) 55%, #46bd07 100%);
  border: 4px solid var(--r-altin);
  border-radius: 20px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(31,92,3,.85), 0 -1px 0 rgba(31,92,3,.6),
               2px 0 0 rgba(31,92,3,.5), -2px 0 0 rgba(31,92,3,.5);
  box-shadow: 0 6px 0 var(--r-yesil-koyu), 0 9px 12px rgba(20,60,4,.35),
              inset 0 3px 0 rgba(255,255,255,.45), inset 0 -6px 10px rgba(20,80,0,.3);
  letter-spacing: .03em;
}
.btn.birincil::after {              /* iç kenardaki açık yeşil ışık halkası */
  content: ''; position: absolute; inset: 3px; border-radius: 14px;
  border: 2px solid rgba(190,255,140,.55); pointer-events: none;
}
.btn.birincil:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--r-yesil-koyu); }

/* ---------- ikincil düğmeler: bordo + altın (alt barın rengi) ---------- */
.btn.ikincil {
  background: linear-gradient(#b80a44, var(--r-bordo-koyu));
  border: 3px solid var(--r-altin);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--r-altin-koyu), 0 6px 9px rgba(60,4,20,.3),
              inset 0 2px 0 rgba(255,255,255,.2);
  text-shadow: 0 2px 0 rgba(70,2,26,.7);
}
.btn.ikincil:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--r-altin-koyu); }

/* Lobideki köşe düğmeleri de aynı dili konuşsun (saydam koyu yerine bordo+altın). */
.sahneVar .lobiAlt .btn { background: linear-gradient(#b80a44, var(--r-bordo-koyu));
                          border: 3px solid var(--r-altin); backdrop-filter: none; }

/* Kazanma şeridi: krem hap + altın çerçeve */
.lobiSonuc { background: linear-gradient(var(--r-krem), var(--r-krem-koyu));
             border: 3px solid var(--r-altin); border-radius: 999px; color: var(--r-kahve); }
.lobiSonuc .lsBaslik, .lobiSonuc .lsCoin { color: var(--r-kahve); text-shadow: none; }

/* Tabela da aynı altın çerçeveyi alsın (sahnenin parçası ama arayüzün dili) */
.lsTabela { border-color: var(--r-altin-koyu); }
/* Krem şeridin üstünde boş yıldızlar (beyaz %12) görünmüyordu — koyu zemine göre
   ayarlanmışlardı. Dolu yıldız referansın altını, boş yıldız soluk kahve. */
.lobiSonuc .yildizlar span { background: rgba(122,68,25,.22); }
.lobiSonuc .yildizlar span.dolu { background: linear-gradient(#ffd84d, var(--r-altin)); }

/* OYNA'nın 3D alt gölgesi ekranın alt kenarında kırpılıyordu (390×844'te ölçüldü). */
.sahneVar .lobiSag .dugmeler:not(.lobiAlt) { margin-bottom: 10px; }
@media (max-height: 700px) { .sahneVar .lobiSag .dugmeler:not(.lobiAlt) { margin-bottom: 6px; } }
/* Hap biçimi (999px) rozetleri genişletti; 390 px'te coin rozeti ayar düğmesinin
   ALTINA kayıyordu (oyun içi ekran görüntüsünde yakalandı). Dar ekranda sıkıştır. */
@media (max-width: 430px) {
  .rozet { padding: 4px 9px 5px; min-width: 78px; }
  .bolumRozet { min-width: 66px; }
  .coinRozet { padding: 4px 8px; }
}

/* Tabela kabı: tilkiyle aynı x'te ama AYRI — OYNA'da tilki koşup çıkarken tabela
   yerinde kalır (direk çakılı), sadece solar. */
.lsTabelaKap { position: absolute; left: 0; top: 0; width: 0; height: 0;
               transition: opacity 200ms ease; }
.lsTabelaKap.solgun { opacity: 0; }
/* Koşarak çıkış: zıplama hızlanır, gövde öne eğilir. */
.lsOyuncu.kacis .lsTilki { animation-duration: .18s; }
.lsOyuncu.kacis { will-change: transform; }

/* ═══════ 6 Ağu — 2. ARAYÜZ TURU (kullanıcı: "butonlar eğlenceli değil, tabela çok kötü,
   play çok büyük ve yeterince 3D değil, sol üstteki TOP ATIŞ yazısını kaldır") ═══════
   🔑 Tabelanın yeni dili yine REFERANSTAN ÖRNEKLENDİ (uçağın üstündeki "Level 39" plakası):
      gövde #fc2c4f→#fe5d81, altın hat #fce768, dış hat beyaz, yazı beyaz + koyu kırmızı kontur.
      Ahşap kahverengi tabela ELENDİ. */

/* 1) Sol üstteki başlık kalksın — referansta da yok, sahne zaten kendini anlatıyor. */
.sahneVar .lobiUst h1 { display: none; }
.sahneVar .lobiUst { padding-right: 0; justify-content: flex-start; }

/* 2) Yuvarlak simge düğmeler (Bölümler / Ayarlar) — referanstaki çark düğmesinin dili */
.btn.ikincil.simge {
  flex: none; width: 50px; height: 50px; min-width: 0; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 28%, #c4144f, #a20439 62%, #6d0125);
  border: 3px solid var(--r-altin);
  box-shadow: 0 4px 0 var(--r-altin-koyu), 0 6px 9px rgba(60,4,20,.34),
              inset 0 3px 0 rgba(255,255,255,.24);
}
.btn.ikincil.simge svg { width: 26px; height: 26px; fill: #fff;
                         filter: drop-shadow(0 1px 1px rgba(70,2,26,.6)); }
.btn.ikincil.simge:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--r-altin-koyu); }
.sahneVar .lobiAlt { gap: 9px; }

/* 3) PLAKA — eski ahşap tabelanın yerine kırmızı kapsül + altın hat + beyaz dış hat */
.lsTabela {
  min-width: 0; padding: 6px 18px 7px; border-radius: 999px;
  background: linear-gradient(180deg, #ff5f80 0%, #fc2c4f 52%, #d4143a 100%);
  border: 3px solid #fce768;
  box-shadow: 0 0 0 3px #fff, 0 5px 0 rgba(120,10,32,.55), 0 8px 12px rgba(90,8,26,.4),
              inset 0 3px 0 rgba(255,255,255,.4);
  color: #fff;
  text-shadow: 0 2px 0 rgba(150,10,38,.9), 0 -1px 0 rgba(150,10,38,.55),
               1px 0 0 rgba(150,10,38,.5), -1px 0 0 rgba(150,10,38,.5);
}
.lsTabela::after { display: none; }                 /* ahşap direk gitti */
.lsTabela b { font-size: 17px; letter-spacing: .5px; }
/* Bölüm adı + yıldızlar plakanın ALTINDA, çimenin üstünde tek satır */
.lsTabela span, .lsTabela .lsYild {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  text-shadow: 0 2px 3px rgba(20,50,10,.75);
}
.lsTabela span { top: calc(100% + 9px); font-size: 11px; color: #fff; opacity: 1; }
.lsTabela .lsYild { top: calc(100% + 25px); font-size: 12px; letter-spacing: 3px;
                    color: #ffd84d; }
.lsTabela .lsYild.bos { color: rgba(255,255,255,.55); }
@media (max-height: 700px) {
  .lsTabela { padding: 4px 14px 5px; }
  .lsTabela b { font-size: 15px; }
  .lsTabela span { top: calc(100% + 6px); font-size: 10px; }
  .lsTabela .lsYild { top: calc(100% + 20px); font-size: 11px; }
}

/* 4) OYNA: DAHA KÜÇÜK ve DAHA 3D
   📐 Referansta düğme ekran genişliğinin %48'i (440 CSS px'te 211 px). Bizimki %91'di.
   3D'yi taşıyan şey: kalın altın çerçeve + dış koyu altın hat + üst yarıda parlama
   kesmesi (glossy split) + 8 px'lik gövde derinliği. */
.sahneVar .btn.birincil.buyuk {
  flex: none; width: min(56%, 236px); margin: 0 auto;
  padding: 14px 10px; font-size: 21px; border-radius: 999px;
  border: 4px solid #ffd44a;
  background: linear-gradient(180deg, #9bff4d 0%, #74f316 46%, #55d20a 47%, #3fa806 100%);
  box-shadow: 0 0 0 3px #b98505, 0 9px 0 #2a7a05, 0 14px 16px rgba(20,60,4,.4),
              inset 0 4px 0 rgba(255,255,255,.5), inset 0 -8px 12px rgba(20,80,0,.35);
  text-shadow: 0 3px 0 rgba(26,86,2,.95), 0 -1px 0 rgba(26,86,2,.6),
               2px 0 0 rgba(26,86,2,.55), -2px 0 0 rgba(26,86,2,.55);
}
.sahneVar .btn.birincil.buyuk::after { inset: 4px; border-radius: 999px;
  border: 2px solid rgba(215,255,170,.5); }
.sahneVar .btn.birincil.buyuk:active { transform: translateY(6px);
  box-shadow: 0 0 0 3px #b98505, 0 3px 0 #2a7a05, inset 0 4px 0 rgba(255,255,255,.5); }
/* Bölüm adı çimenin üstünde soluk kalıyordu — kalınlaştır ve konturu güçlendir. */
.lsTabela span { font-weight: 900; letter-spacing: .8px;
  text-shadow: 0 2px 0 rgba(24,60,10,.9), 0 -1px 0 rgba(24,60,10,.7),
               1px 0 0 rgba(24,60,10,.7), -1px 0 0 rgba(24,60,10,.7), 0 4px 8px rgba(0,0,0,.35); }
.lsTabela .lsYild { text-shadow: 0 2px 0 rgba(24,60,10,.8), 0 3px 6px rgba(0,0,0,.35); }

/* ═══════ OYNA DÜĞMESİ — GEMINI ÜRETİMİ 3D GÖVDE (6 Ağu) ═══════
   Kullanıcı: *"oyna butonu hâlâ olmadı, bir gariplik var — 3D üretmek ister misin?"*
   CSS ile çizilen 3D taklidi bırakıldı; gövde artık gerçek bir render (`ui/oyna_*.webp`).
   🔴 Yazı GÖRSELE ÇİZDİRİLMEDİ — Gemini Türkçe metinde bozuk harf basıyor ve etiket
      değişebiliyor. Gövde görsel, "▶ OYNA" HTML katmanı.
   🔑 Görselin ALTINDA gövde duvarı (3D taban) var; yazı dikeyde ORTAYA değil YÜZE
      oturmalı → `padding-bottom` ile yukarı kaydırılıyor.
   Varyantlar: a kapsül · b yuvarlak dikdörtgen (varsayılan) · c mücevher. `?buton=a|b|c`. */
.sahneVar .btn.birincil.buyuk {
  width: min(64%, 262px); aspect-ratio: 2.66; padding: 0 10px 9%;
  display: flex; align-items: center; justify-content: center;
  background: url('ui/oyna_e.webp') center / 100% 100% no-repeat;   /* varsayılan */
  border: none; border-radius: 0; box-shadow: none;
  font-size: 23px; letter-spacing: .04em;
  text-shadow: 0 3px 0 rgba(26,86,2,.95), 0 -1px 0 rgba(26,86,2,.6),
               2px 0 0 rgba(26,86,2,.55), -2px 0 0 rgba(26,86,2,.55);
  filter: drop-shadow(0 6px 10px rgba(20,60,4,.4));
}
.sahneVar .btn.birincil.buyuk::after { display: none; }   /* CSS ışık halkası artık gereksiz */
.sahneVar .btn.birincil.buyuk:active { transform: translateY(5px) scaleY(.965); box-shadow: none; }
/* 🔴 2. TUR — kullanıcı: *"buton güzel de YUKARI BAKIYOR, bize doğru bakması gerekiyor,
   alt gölge kısmı yüksek."* 1. turda gövde duvarını kalın isteyince model üstten bakan
   bir perspektif çizdi. Yeni sette kamera tam karşıda ve alt pah ince (d/e/f).
   Varsayılan **e**. Eskiler (a/b/c) `?buton=` ile hâlâ denenebiliyor. */
body.butonA.sahneVar .btn.birincil.buyuk { background-image: url('ui/oyna_a.webp'); aspect-ratio: 2.45; }
body.butonC.sahneVar .btn.birincil.buyuk { background-image: url('ui/oyna_c.webp'); aspect-ratio: 2.59; }
body.butonD.sahneVar .btn.birincil.buyuk { background-image: url('ui/oyna_d.webp'); aspect-ratio: 2.36; }
body.butonE.sahneVar .btn.birincil.buyuk { background-image: url('ui/oyna_e.webp'); aspect-ratio: 2.66; }
body.butonF.sahneVar .btn.birincil.buyuk { background-image: url('ui/oyna_f.webp'); aspect-ratio: 2.35; }
/* İnce pahlı gövdede yazı neredeyse ortada — 1. turdaki %9'luk kaydırma artık fazla. */
body.butonD.sahneVar .btn.birincil.buyuk,
body.butonE.sahneVar .btn.birincil.buyuk,
body.butonF.sahneVar .btn.birincil.buyuk { padding-bottom: 3%; }
@media (max-height: 700px) { .sahneVar .btn.birincil.buyuk { width: min(52%, 210px); font-size: 19px; } }

/* Hoş geldin/yönlendirme balonu kaldırıldı — kullanıcı 6 Ağu: "üstteki hoş geldiniz
   mesajını kaldır". Kazanma bilgisi üstteki şeritte duruyor (bölüm + yıldız + coin). */
.sahneVar .balon { display: none; }
/* 🔴 Yolun altındaki dikey bütçe 173 px (390×844) — 3D düğme büyüyünce plakanın
   altındaki ad+yıldız satırı düğmenin ARKASINDA kaldı (ekran görüntüsünde yakalandı;
   test yakalamamıştı çünkü ad, plakanın kutusuna DAHİL DEĞİL — mutlak konumlu).
   ✅ Yıldız satırı lobiden kaldırıldı (Bölümler ekranında ve kazanma şeridinde zaten var),
   düğme biraz küçültüldü, alta pay bırakıldı. */
.sahneVar .lsTabela .lsYild { display: none; }
.sahneVar .btn.birincil.buyuk { width: min(58%, 234px); margin-bottom: 6px; }
@media (max-height: 700px) { .sahneVar .btn.birincil.buyuk { width: min(46%, 190px); } }
/* Ölçülen dikey yığın (390×844): plaka 680-716 · ad 725-736 · düğme 725-810 → ad düğmenin
   arkasındaydı. Boşluk daraltıldı, düğme biraz küçüldü; KISA ekranda ad tamamen kalkıyor
   (360×640'ta 131 px'lik alta plaka + ad + düğme üçü birden sığmıyor). */
.sahneVar .lsTabela span { top: calc(100% + 5px); }
.sahneVar .btn.birincil.buyuk { width: min(54%, 216px); margin-bottom: 0; }
@media (max-height: 700px) {
  .sahneVar .lsTabela span { display: none; }
  .sahneVar .btn.birincil.buyuk { width: min(46%, 186px); }
}

/* ═══ 6 Ağu — kullanıcı düzeltmeleri: E varsayılan · plakanın altındaki ad kalksın ·
   Bölümler/Ayarlar SOL ÜSTE ═══ */
/* 1) Bölüm adı gereksiz — plaka zaten bölümü söylüyor. */
.sahneVar .lsTabela span { display: none; }

/* 2) Simge düğmeler sol üste, coin sağ üste. (Referansta da kare düğmeler SOLDA.) */
.sahneVar .lobiAlt { left: 10px; right: auto; align-items: flex-start; }
.sahneVar .lobiUst { justify-content: flex-end; padding-left: 104px; padding-right: 0; }
.sahneVar .lobiSonuc { margin-left: auto; margin-right: 0; max-width: calc(100% - 72px); }
@media (max-width: 420px) { .sahneVar .lobiUst { padding-left: 96px; } }
@media (orientation: landscape) {
  .sahneVar .lobiUst { justify-content: flex-end; }
  .sahneVar .lobiSonuc { left: auto; right: 12px; transform: none; }
}

/* ═══ 6 Ağu — sol üstteki simge düğmeler YAN YANA (coin gibi) ═══ */
.sahneVar .lobiAlt { flex-direction: row; align-items: center; }

/* 🔴 DOKUNMATİK BASMA EFEKTİ — `:active` iOS'ta elemana dokunma olayı bağlı değilse
   hiç uygulanmıyor: kullanıcı mobilde bastı, düğme "içeri girmedi". Artık `.basili`
   sınıfı da aynı stili alıyor (JS pointerdown/up ile ekleniyor).
   `touch-action: manipulation` de gecikmeyi ve çift dokunuş yakınlaşmasını kesiyor. */
.btn, .yuvarlakBtn, #bombaBtn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn.basili { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn.birincil.basili { transform: translateY(4px); }
.btn.ikincil.simge.basili { transform: translateY(3px); box-shadow: 0 1px 0 var(--r-altin-koyu); }
.sahneVar .btn.birincil.buyuk.basili { transform: translateY(5px) scaleY(.965); box-shadow: none;
                                       filter: drop-shadow(0 2px 5px rgba(20,60,4,.45)) brightness(1.06); }
.yuvarlakBtn.basili { transform: translateY(3px); box-shadow: 0 1px 0 var(--r-altin-koyu); }
/* Yükleme perdesi lobinin ÜSTÜNDE kalmalı — ikisi de `.perde` (z-index 5) ve `#lobi`
   DOM'da sonra geldiği için perdenin üstüne biniyordu; açılışta eski gradyan görünüyordu. */
#yukleniyor { z-index: 9; }

/* 🔴🔴 7 Ağu — PERDE OPAK OLMALI. Kullanıcı "yenileyince hâlâ önce eski lobi geliyor"
   dedi ve HAKLIYDI: 6 Ağu'da perdeyi sahne hazır olana kadar tutmuştuk ama `.perde`
   `rgba(6,14,26,.82)` + `backdrop-filter: blur(6px)` — yani %18 saydam. Perdenin
   ARDINDAKİ eski lobi (büyük duran tilki, konuşma balonu, "TOP ATIŞ" başlığı, eski
   bölüm kartı) bulanık ama net okunur hâlde görünüyordu. Ekran görüntüsüyle yakalandı;
   sınıf tabanlı test göremedi çünkü perde teknik olarak AÇIKTI.
   ✅ Renkler `lobi/arka.webp`ten ÖRNEKLENDİ (gök #77a9da → teras → çim #506a25), böylece
   perde kalkarken renk sıçraması olmuyor — aynı dünyanın bulanık hâli gibi duruyor. */
#yukleniyor {
  /* ⚠️ `background-color` AYRICA veriliyor: `background: linear-gradient(...)`
     kısayolu renk kanalını `transparent`a döndürür ve "opak mı" ölçümü ile
     gradyan yüklenemediği hâl ikisi birden saydam kalır. */
  background-color: #2f9ee0;                 /* oyunun kendi gök mavisi (`gokKur`) */
  background-image: radial-gradient(120% 78% at 50% 40%, #86d2f5 0%, #3fa9e4 46%, #1f7fc0 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity .45s ease;      /* 7 Ağu: sert kesilme olmasın, kare yumuşak devretsin */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
}
/* Perde sert kesilmez, 260 ms'de solar; `gizli` bitince eklenir. */
#yukleniyor.kalkiyor { opacity: 0; pointer-events: none; }

/* 🔴🔴 8 Ağu — LOBİDE HİÇBİR DÜĞMEYE BASILAMIYORDU (kullanıcı: "oyna butonuna basamıyorum").
   Sebep ÖZGÜLLÜK: yukarıdaki `#yukleniyor { display: flex }` bir KİMLİK seçicisi (1,0,0),
   onu gizlemesi beklenen `.perde.gizli { display: none }` ise iki sınıf (0,2,0) — yani
   `gizli` eklense bile perde YERLEŞİMDE KALIYOR. Görünmez (opacity 0) ama tam ekran,
   z-index 9 ve `pointer-events: auto` olduğu için lobinin bütün dokunuşlarını yiyordu.
   📐 Ölçüldü (canlı, 390×844 ve 1440×900): OYNA/Bölümler/Ayarlar düğmelerinin merkezinde
   `elementFromPoint` → `img.bootArtIm`; dokunuştan sonra `oynanabilir` hâlâ false.
   🔑 Aynı ailenin DÖRDÜNCÜ hatası (`.gizliBtn`, `.btn.ektop`, saydam perde, şimdi bu):
   bir elemanı KİMLİKLE biçimlendirdiysen, onu gizleyen kural da KİMLİK gücünde olmalı.
   ⚠️ `.kalkiyor`daki `pointer-events: none` de şart — 450 ms'lik solma boyunca perde
   hâlâ görünür durumda ve o pencerede basılan düğme yine ölüydü. */
#yukleniyor.gizli { display: none !important; }

/* ═══ AÇILIŞ PACKSHOT'I (BoomRush `#boot` kurgusunun aynısı) ═══
   Kullanıcı 7 Ağu: *"yüklenme ekranı çok kötü, boomrush'taki gibi packshot koyalım."*
   BoomRush'ta: düz marka rengi + ortada oyun kelime-markası + altta stüdyo imzası + pop.
   Burada oyunun logosu HENÜZ YOK → kelime-markasının yerinde geçici olarak MASKOT + yazı.
   🔑 Stüdyo imzası BoomRush'takinin AYNI dosyası (`brand/glowy_wordmark.webp`).
   ⚠️ Ölçüler hem `vw` hem `vh` ile sınırlı: yatay telefonda sadece vw kullanılırsa
      kahraman ekranı taşırıyor (BoomRush'ta ölçülen tuzağın aynısı). */
.bootIc { display: flex; flex-direction: column; align-items: center; gap: 6px;
          animation: bootPop .7s cubic-bezier(.22, 1.3, .4, 1) both; }
.bootHero {
  width: min(52vw, 44vh, 300px); height: auto; display: block;
  filter: drop-shadow(0 12px 18px rgba(8, 40, 70, .38));
}
.bootAd {
  font-size: min(13vw, 9vh, 76px); font-weight: 900; letter-spacing: .045em;
  color: var(--r-krem, #fbedde); line-height: 1;
  /* şişme/3D hissi katmanlı gölgeyle — logo gelene kadarki en yakın karşılık */
  text-shadow: 0 2px 0 #e6d0b4, 0 5px 0 #c4a37f, 0 9px 0 #8d6b46,
               0 14px 20px rgba(6, 40, 70, .45);
}
/* Stüdyo imzası: en altta, ortada, ürün adıyla yarışmayacak kadar küçük. */
.bootMark {
  position: absolute; left: 50%; bottom: 6.5%; transform: translateX(-50%);
  width: min(30vw, 15vh, 150px); height: auto; display: block;
  opacity: 0; animation: bootFade .6s ease .35s forwards;
}
/* ═══ 7 Ağu — SİNEMATİK KARŞILAMA KARESİ (açılışta rastgele biri) ═══
   🔑 `contain`: kareler 9:16; geniş/yatay ekranda `cover` kullanınca üstteki logo ya da
   alttaki imza kırpılıyordu. Artan bantların zemini perdenin kendi gradyanı.
   ⚠️ Görsel gelene kadar da aynı gradyan ekranda — boş kare yok.

   🔴🔴 8 Ağu — BULANIK DOLGU KALDIRILDI. Kullanıcı: *"açılışta bulanık bir ekran geliyor
   … öyle bir bulanıklık görmek istemiyorum."* İki ayrı bulanıklık vardı ve İKİSİ DE gitti:
   1. `<head>`e gömülü 24 px önizleme (`cover` ile gerilen tam ekran bulanık fotoğraf,
      ilk 80-400 ms) → yerine karenin kendi kenar renklerinden düz gradyan.
   2. `.bootArtBg` — karenin `blur(34px)` kopyası, `contain` bantlarını dolduruyordu.
      📐 390×844'te bantlar üstte 72 px + altta 55 px, yani 2,4 sn boyunca EKRANDA.
      → eleman silindi, bantlar artık aynı gradyanın düz rengi.
   🔑 Renkler tahmin edilmiyor, `tools/kare_renk.py` her karenin üst/alt %6'sını ölçüyor;
      kare değişirse betiği koştur ve `index.html`deki `RENK` haritasını güncelle. */
.bootArt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.artVar .bootArt { opacity: 1; }
/* 🔒 7 Ağu — YAVAŞ YAKINLAŞMA KALDIRILDI (kullanıcı: "fotoğrafa bir yaklaştırma efekti
   var, onu kaldıralım"). Kare artık tamamen sabit duruyor; süre 2,4 sn aynı kaldı. */
/* 🔴 10 Ağu — `contain` → `cover` (kullanıcı: "yükleme ekranı kahverengimsi şey gelsin
   istemiyorum, direkt görsel gelsin"). `contain` karenin üstünde/altında GRADYAN BANT
   bırakıyordu; kare 9:16, telefon 9:19.5 olduğu için bant 72'şer piksel ve alttaki
   kahverengi bant ekranın en göze çarpan yeriydi.
   📐 Dikey telefonda `cover` DİKEYDE HİÇ KIRPMIYOR — kare ekrandan daha GENİŞ oranlı
   olduğu için kırpma yanlarda oluyor (390×844'te her yandan %8,6). Logo ve "glowy"
   imzası yatayda ortalı, ikisi de sağlam.
   ⚠️ GENİŞ ekranda (tablet/masaüstü) `cover` DİKEYDE kırpar ve logoyu yiyebilir;
   orada `contain` korunuyor (aşağıdaki medya kuralı). Eşik: kare oranı 0.558. */
.bootArtIm { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
             object-fit: cover; object-position: center; }
@media (min-aspect-ratio: 5 / 9) {
  /* Ekran kareden daha geniş oranlı → cover dikeyde kırpar, logo/imza risk altında. */
  .bootArtIm { object-fit: contain; }
}

/* ═══ 8 Ağu — "YÜKLENİYOR" ibaresi (kullanıcı isteği) ═══
   Karenin altına, safe-area'nın içine. Kare 9:16 olduğu için dikey telefonda zaten
   düz renk bant var; geniş ekranda sanatın üstüne biniyor → kendi gölgesi ŞART.
   ⚠️ Noktalar ayrı bir `::after` ile oynuyor: metnin kendisi büyümediği için satır
   genişliği sabit kalıyor, ibare zıplamıyor. */
.bootYuk {
  position: absolute; left: 0; right: 0;
  /* 📐 İbare mümkünse ALT BANDIN ortasına oturur, karenin üstüne binmez.
     Bant yüksekliği = (ekran − karenin kapladığı yükseklik) / 2, kare 9:16 olduğu için
     kapladığı yükseklik `min(100vh, 100vw × 16/9)`. Bant yoksa (geniş ekranda kare
     yüksekliği doldurur) ibare kenara iner ve sanatın üstünde durur — gölgesi o yüzden. */
  /* 🔴 10 Ağu — kare artık `cover` (bant yok), o yüzden "bandın ortasına otur"
     hesabı geçersiz: ibare karenin İÇİNDEKİ "glowy" imzasının üstüne biniyordu.
     ✅ En alta, safe-area'nın içine alındı. */
  bottom: max(6px, env(safe-area-inset-bottom));
  margin: 0; text-align: center;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800; font-size: clamp(13px, 3.4vw, 17px);
  letter-spacing: .16em; color: #fff8ec;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .5);
  /* 🔑 GEÇ BELİRİR (10 Ağu). Kullanıcı: *"yükleme ekranı gelsin istemiyorum, direkt
     görsel gelsin."* Ama ibare 8 Ağu'da yine kullanıcı isteğiyle eklenmişti
     ("kare dururken ekranın beklediği belli olsun"). İkisi de doğru: hızlı açılışta
     ibare HİÇ görünmüyor, açılış uzarsa devreye giriyor.
     ⚠️ Saf CSS — JS zamanlayıcı eklemek açılış akışına bir yarış daha sokardı. */
  opacity: 0;
  animation: bootYukBelir .35s ease .9s forwards;
}
@keyframes bootYukBelir { to { opacity: .92; } }
.bootNok::after { content: ''; animation: bootNok 1.2s steps(1, end) infinite; }
@keyframes bootNok { 0% { content: '' } 25% { content: '.' }
                     50% { content: '..' } 75% { content: '...' } }
/* 🔴🔴 YEDEK PACKSHOT VARSAYILAN OLARAK KAPALI — kullanıcı 7 Ağu: "baştaki flashscreen'i
   kaldırmamışsın". Doğruydu: packshot açık başlıyordu ve karşılama karesi yüklenince
   gizleniyordu, yani açılışta önce tilki+"TOP ATIŞ" görünüp sonra sanata atlıyordu
   (ölçüldü: yenilemede 54-277 ms arası görünür kare).
   ✅ Mantık TERS: yedek yalnızca kare YÜKLENEMEZSE (`onerror`) açılır. Kare geç gelirse
   perdenin kendi opak göğü durur — boş ama sıçramasız. Zamanlayıcıyla açma: yavaş ağda
   packshot gelip sonra sanata atlar, aynı hatanın tekrarı olur. */
.bootIc, .bootMark { display: none; }
.yedekVar .bootIc { display: flex; }
.yedekVar .bootMark { display: block; }

@keyframes bootPop { 0% { transform: scale(.6); opacity: 0 }
                     60% { opacity: 1 }
                     100% { transform: scale(1); opacity: 1 } }
@keyframes bootFade { to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .bootIc, .bootMark { animation: none; opacity: 1; }
  .bootNok::after { animation: none; content: '...'; }
}

/* ═══ 6 Ağu — simge düğmeler coin ile AYNI HİZAYA ═══
   ⚠️ Düğmeler safe-area yüzünden değil, coin SOLDAYKEN çakışmasın diye 54 px'e
   konmuştu. Coin sağa geçince o gerekçe kalktı: ikisi de üst şeridin hizasında.
   Üst pay yine de `env(safe-area-inset-top)` ile korunuyor (çentikli telefon). */
.sahneVar .lobiAlt { top: max(18px, env(safe-area-inset-top)); }
.sahneVar .lobiUst { min-height: 46px; align-items: center; }
.btn.ikincil.simge { width: 46px; height: 46px; }
.btn.ikincil.simge svg { width: 24px; height: 24px; }
/* ⚠️ `.lobiAlt` mutlak konumu `.lobiIc`ye göre; `.lobiIc` zaten perdenin
   `max(18px, env(safe-area-inset-top))` payının içinde başlıyor. Bu yüzden `top`
   payını BİR DAHA eklemek düğmeleri 20 px aşağı kaydırıyordu (ölçüldü: merkez 61,
   coin 41). Doğrusu 0 — safe-area zaten perdeden geliyor. Yatayda da 0 → coinle
   simetrik kenar boşluğu. */
.sahneVar .lobiAlt { top: 0; left: 0; }

/* ═══════ DÜĞME AİLESİ — TÜM EKRANLARDA AYNI 3D GÖVDE (6 Ağu) ═══════
   Kullanıcı: *"bu yeni oyna butonu var ya, diğer her şeyi — bütün butonları,
   popup'lardakiler dahil — birebir o tasarıma getirmemiz lazım."*
   Üç renk, aynı gövde dili (`tools/gen_buton.js` varyant e/k/s):
     yeşil = birincil (OYNA, Devam, Tekrar dene) · kırmızı = ikincil · altın = satın alma.
   🔴 Kırmızı modelden hep koyu bordo geldi (3 tur) → renk düzeltmesi kodda
      (`tools/parlat_kirmizi.py`, anahtarlama hattının içinde, tek geçişte).
   🔑 `background-size: 100% 100%` ile esnetiliyor: gövde dikeyde esnedikçe altın çerçeve
      oranla inceliyor, yani her düğme boyunda doğru kalınlıkta duruyor. 9-slice denemedik
      çünkü kenar payını piksel olarak sabitlemek her yükseklikte ayrı ayar ister. */
/* 🔴 `background-size: 100% 100%` GENİŞ DÜĞMEDE ÇÖKÜYOR — "← Geri" tam genişlikte
   olduğu için kapsül yatayda 4-5 kat gerilip dev bir altın sosise dönüştü (ekran
   görüntüsünde yakalandı). ✅ 9-SLICE (`border-image`): kapaklar kendi oranını korur,
   yalnızca ORTA bölge esner.
   📐 Kapak genişlikleri ölçüldü: yeşil 99 · kırmızı 58 · altın 79 px (760 px genişlikte).
   Üst/alt dilim 0 → gövde dikeyde esner, altın çerçeve yüksekliğe göre orantılı kalır. */
.btn {
  position: relative;
  border-style: solid; border-radius: 0; box-shadow: none; background: none;
  border-width: 0 23px;
  border-image-source: url('ui/btn_yesil.webp');
  border-image-slice: 0 99 fill;
  border-image-repeat: stretch;
  min-height: 46px; padding: 12px 10px 14px;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 7px rgba(20, 40, 10, .3));
  text-shadow: 0 2px 0 rgba(26, 86, 2, .9), 0 -1px 0 rgba(26, 86, 2, .5);
}
.btn::after { content: none; }
.btn.birincil { border-image-source: url('ui/btn_yesil.webp'); border-image-slice: 0 99 fill; }
.btn.ikincil  { border-image-source: url('ui/btn_kirmizi.webp'); border-image-slice: 0 58 fill;
                border-width: 0 14px;
                text-shadow: 0 2px 0 rgba(120, 8, 34, .9), 0 -1px 0 rgba(120, 8, 34, .5);
                filter: drop-shadow(0 4px 7px rgba(60, 8, 20, .32)); }
.btn.ektop    { border-image-source: url('ui/btn_altin.webp'); border-image-slice: 0 79 fill;
                border-width: 0 19px; color: #5a3c00;
                text-shadow: 0 1px 0 rgba(255, 240, 190, .6);
                filter: drop-shadow(0 4px 7px rgba(80, 55, 0, .3)); }
.btn.buyuk    { border-width: 0 30px; min-height: 56px; }
.btn.ikincil.buyuk { border-width: 0 18px; }
.btn:active, .btn.basili { transform: translateY(4px); box-shadow: none;
                           filter: drop-shadow(0 1px 3px rgba(20, 40, 10, .35)) brightness(1.06); }
/* Simge düğmeler yuvarlak kalır — gövde görseli kapsül, daireye esnetilmez. */
.btn.ikincil.simge { border-image: none; border-style: solid;
  background: radial-gradient(circle at 40% 28%, #c4144f, #a20439 62%, #6d0125);
  border: 3px solid var(--r-altin); border-radius: 50%;
  box-shadow: 0 4px 0 var(--r-altin-koyu), 0 6px 9px rgba(60,4,20,.34),
              inset 0 3px 0 rgba(255,255,255,.24);
  filter: none; }
/* Yetersiz coin: gri değil, soluk altın */
.btn.ektop.yetersiz { filter: grayscale(.55) brightness(.9); }

/* Bölüm kutucukları da aynı dile gelsin: krem yüz + altın çerçeve, kilitli olan soluk. */
.bolumBtn {
  background: linear-gradient(var(--r-krem), var(--r-krem-koyu));
  border: 3px solid var(--r-altin); color: var(--r-kahve);
  box-shadow: 0 4px 0 var(--r-altin-koyu), 0 6px 9px rgba(60, 26, 4, .28),
              inset 0 2px 0 rgba(255, 255, 255, .7);
}
.bolumBtn.acik  { border-color: var(--r-altin); }
.bolumBtn.bitti { background: linear-gradient(#bdf0c2, #7fd08c); }
.bolumBtn.kilit { background: linear-gradient(#d9d2c6, #b9b0a2); color: rgba(90, 60, 25, .45);
                  border-color: #c6a860; box-shadow: 0 3px 0 rgba(120, 90, 30, .4); }
.bolumBtn .yild { color: #d79a11; }
.bolumBtn.kilit .yild { color: rgba(90, 60, 25, .3); font-size: 13px; }
/* Kilitli kutucuk gerçekten "kapalı" okunmalı — 75 bölümlük listede soluk gri
   tonu tek başına yetmiyordu (ekran görüntüsünde açık olanla karışıyordu). */
.bolumBtn.kilit { opacity: .72; }
/* Sıradaki bölüm: açık ama henüz bitmemiş TEK kutucuk. Altın halkayla işaretli. */
.bolumBtn.siradaki { box-shadow: 0 0 0 3px rgba(255, 225, 18, .85),
                     0 4px 0 var(--r-altin-koyu), 0 6px 12px rgba(60, 26, 4, .3); }
.bolumBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--r-altin-koyu); }

/* Lobideki büyük OYNA hâlâ kendi (daha büyük) ölçüsünü kullanıyor — sadece
   gövde görselini aileden alıyor. */
.sahneVar .btn.birincil.buyuk { min-height: 0; border-width: 0; border-image: none; }
/* 📐 Çerçeve kalınlığı ölçüldü: yeşil 28px/286 (%9,8) · kırmızı 24px/292 (%8,2).
   Üst/alt dilimi 0 bırakınca çerçeve yükseklikle birlikte inceliyordu (tam genişlikteki
   "← Geri" düğmesinde bariz). Artık üst/alt da dilimli → çerçeve her boyda SABİT kalınlıkta.
   Ayrıca tek başına duran düğmeler tüm satırı kaplamasın: kaynak oranı 2,6:1, çok geniş
   düğmede gövde yassı görünüyor. */
.btn { border-width: 7px 23px; border-image-slice: 28 99 fill; }
.btn.ikincil { border-width: 6px 14px; border-image-slice: 24 58 fill; }
.btn.ektop { border-width: 7px 19px; border-image-slice: 26 79 fill; }
.btn.buyuk { border-width: 8px 30px; }
.btn.ikincil.buyuk { border-width: 7px 18px; }
.dugmeler .btn { max-width: 240px; }
.dugmeler { justify-content: center; }
.btn.ikincil.simge { border-width: 3px; max-width: none; }
.btn.ektop { max-width: none; }        /* satın alma düğmesi kartın tam genişliğinde kalsın */
.sahneVar .btn.birincil.buyuk { border-width: 0; max-width: none; }
/* Dar düğmelerde (ayarlar kartında 3 tane yan yana) yazı çerçeveye değiyordu:
   kapak payları sabit olduğu için yüz alanı daralıyor. Kapakları ve yazıyı küçült. */
.btn { font-size: 14px; padding: 12px 4px 14px; border-width: 7px 17px; }
.btn.ikincil { border-width: 6px 11px; }
.btn.ektop { font-size: 16px; }
.btn.buyuk { font-size: 17px; border-width: 8px 26px; }
.btn.ikincil.buyuk { border-width: 7px 15px; }
@media (min-width: 460px) { .btn { font-size: 15px; } }
/* 📐 Ölçüldü: ayarlar kartındaki 3 düğme 74 px'e sıkışıyor, yüz alanı 52 px kalıyor ama
   "Bölümler" 74 px yer istiyor → yazı çerçeveye taşıyordu. Düğmelere taban genişlik ver,
   sığmazsa satır atlasınlar; dar ekranda yazıyı da küçült. */
.btn { flex: 1 1 106px; min-width: 106px; }
.btn.ikincil.simge { flex: none; min-width: 0; }
.btn.ektop { flex: none; min-width: 0; width: 100%; }
@media (max-width: 420px) { .btn { font-size: 13px; } .btn.buyuk { font-size: 16px; } }
/* Tek başına duran geniş düğme (Bölümler ekranındaki "← Geri") yassı görünüyordu:
   240 px genişlik / 48 px yükseklik, kaynak oranı 2,6:1 iken 5:1. Biraz daralt + yükselt. */
.dugmeler .btn { max-width: 200px; }
.btn { min-height: 52px; }

/* ═══ 🔴 iOS'ta OYNA DÜĞMESİ YASSILAŞIYORDU (kullanıcı telefon ekran görüntüsü attı) ═══
   📐 Ölçüldü: iPhone'da 212×30 px (oran 7,1) · Chromium'da 216×81 (2,66). Yani yükseklik
   `aspect-ratio`dan değil İÇERİKTEN geliyor — Safari, satır yönlü flex kabındaki öğede
   aspect-ratio'yu es geçiyor. Masaüstü tarayıcıda doğru göründüğü için testler de göremedi.
   ✅ Yükseklik ARTIK AÇIKÇA veriliyor (aspect-ratio'ya güvenmiyoruz) ve düğme flex'te
   ne esniyor ne büzülüyor. Genişlik `vw` tabanlı — kap genişliğine bağlı kalırsa yükseklik
   hesabı `calc()` ile eşleşmez. */
.sahneVar .btn.birincil.buyuk {
  flex: 0 0 auto; align-self: center;
  width: min(54vw, 216px);
  height: calc(min(54vw, 216px) / 2.66);
  aspect-ratio: auto; min-height: 0; max-width: none;
}
body.butonA.sahneVar .btn.birincil.buyuk { height: calc(min(54vw, 216px) / 2.45); }
body.butonC.sahneVar .btn.birincil.buyuk { height: calc(min(54vw, 216px) / 2.59); }
body.butonD.sahneVar .btn.birincil.buyuk { height: calc(min(54vw, 216px) / 2.36); }
body.butonF.sahneVar .btn.birincil.buyuk { height: calc(min(54vw, 216px) / 2.35); }
@media (max-height: 700px) {
  .sahneVar .btn.birincil.buyuk { width: min(46vw, 186px); height: calc(min(46vw, 186px) / 2.66); }
}

/* Yatayda iki sütun (solda tilki + balon, sağda kart) ESKİ lobinin yerleşimiydi.
   Sahne modunda tilki zaten arka planın içinde ve balon yok → tek sütun, düğme ortada.
   ⚠️ `test_akis.js`'teki "yatayda İKİ SÜTUN" iddiası bu yüzden sahne modunda geçersiz;
   test niyeti korunarak güncellendi (yerleşim taşmıyor + düğme ortada). */
@media (orientation: landscape) {
  .sahneVar .lobiIc { display: flex; flex-direction: column; justify-content: space-between; }
  .sahneVar .lobiSag { margin: 0 auto; max-width: 460px; }
  .sahneVar .lobiSahne { display: none; }
}
/* 📐 Yatay + kısa ekranda (844×390) yolun altında yalnızca 93 px kalıyor — 16:9 görsel
   ekranı doldururken kaydırma payı 85 px'le sınırlı. Plaka + düğme oraya sığmalı:
   ikisi de küçülüyor, aradaki boşluk daralıyor. */
@media (orientation: landscape) and (max-height: 520px) {
  .sahneVar .lsTabela { min-width: 76px; padding: 2px 9px 3px; border-width: 2px; top: 5px; }
  .sahneVar .lsTabela b { font-size: 12px; }
  .sahneVar .btn.birincil.buyuk { width: min(26vw, 132px); height: calc(min(26vw, 132px) / 2.66);
                                  font-size: 13px; }
  .sahneVar #lobi.perde { padding-bottom: max(5px, env(safe-area-inset-bottom)); }
}