/* ============================================================
   Bayconti Tycoon — ÇEKİRDEK BİLEŞENLER
   ============================================================
   styles.css'ten SONRA yüklenir ki eski kuralları düzeltebilsin.
   Yalnız üç şey burada: BUTON, KART, POPUP. Denetimde 13 ayrı
   buton sınıfı ve 10 ayrı kart sınıfı vardı; hepsi birbirinden
   habersiz yazılmış.

   ⚠ Renkler DEĞİŞMİYOR. Oyunun kimliği (lacivert + altın + gece
   sokak) güçlü; burada yapılan tek şey geometriyi, dokunma
   hedefini ve hareketi tek karara indirmek.
   ============================================================ */

/* ── BUTON ───────────────────────────────────────────────────
   Tek anatomi: yükseklik, yarıçap, tipografi, basılma geri
   bildirimi. Varyantlar yalnız RENK katıyor.
   ⚠ min-height: var(--tap-min) pazarlığa kapalı — denetimde
   93 etkileşimli öğenin 57'si 44 px altındaydı. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--card-2);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Dokunma geri bildirimi: hover mobilde yok, ASIL olan :active.
   Ölçek küçültme layout'u kaydırmaz (transform, reflow yok). */
.btn:active { transform: scale(.96); }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Varyantlar — mevcut renkler korundu, yalnız gölge token'landı */
.btn.primary {
  background: linear-gradient(180deg, var(--eblue-2), var(--eblue));
  color: #fff;
  box-shadow: 0 6px 14px rgba(43, 127, 255, .4);
}
.btn.success {
  background: linear-gradient(180deg, #6dffae, #1ec97a);
  color: #002414;
  box-shadow: var(--glow-good);
}
.btn.danger {
  background: linear-gradient(180deg, #ff7080, #c9243a);
  color: #fff;
  box-shadow: 0 6px 14px rgba(201, 36, 58, .4);
}
/* `cnt-buy` = CNT ile satın alma. `cnt` adı KULLANILAMIYOR: toast.js
   `kind !== 'cnt'` filtresiyle o türü modaldan eliyor. */
.btn.cnt,
.btn.cnt-buy {
  background: linear-gradient(180deg, #8f63ff, #4a1fb5);
  color: #fff;
  box-shadow: 0 6px 14px rgba(143, 99, 255, .4);
}
.btn.gold {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #2a1c00;
  box-shadow: var(--glow-gold);
}
.btn.ghost {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
}

/* Ölçüler. `sm` bile 44 px tabanını korur — yalnız yatayda daralır. */
.btn.btn-sm { padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.btn.btn-lg { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-md); }
.btn.btn-block { display: flex; width: 100%; }
.btn.btn-icon { width: var(--tap-min); padding: 0; border-radius: var(--r-circle); }

/* Popup butonları: eski `.toast .btn` bloğu (0,2,0) bu dosyadaki
   `.btn`i (0,1,0) yenerdi. Aynı özgüllükte yeniden yazıp geometriyi
   token'lara bağlıyoruz; renk varyantları yukarıdan geliyor. */
.toast .btn {
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
/* Eylem satırı sabit 2 sütunlu grid'di: tek eylemli panelde buton yarım
   kalıp metni sarıyordu ("200 CNT ile / aç"). Esnek satır — bir butonsa
   tam genişlik, ikiyse eşit bölünür. */
.toast .actions {
  display: flex;
  gap: var(--sp-2);
}
.toast .actions .btn {
  flex: 1 1 0;
  white-space: nowrap;
}

/* ── KART ────────────────────────────────────────────────────
   Ortak yüzey: zemin, kenar, yarıçap, iç boşluk. İçerik düzeni
   kartın kendi sınıfında kalır. */
.ui-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--el-1);
}
.ui-card.raised { background: var(--card-2); box-shadow: var(--el-2); }
.ui-card.tappable {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.ui-card.tappable:active { transform: scale(.985); }
.ui-card.is-locked { opacity: .55; }

/* Kart başlığı/alt satırı — 12 px tabanı burada da geçerli */
.ui-card .ui-card-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.ui-card .ui-card-sub {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
  margin-top: 2px;
}

/* ── ANA EKRAN YERLEŞİMİ ─────────────────────────────────────
   Ölçüm: üst yığın 359 px = ekranın **%44**'ü, maskot sahnesi 320 px (%39).
   Maskotun kafası günlük olay şeridine değiyor, bacakları enerji çubuğuyla
   kesiliyordu. İki müdahale:
     1) HUD (üst bar + bakiye) akıştan çıkarıldı → sahnenin üzerinde yüzüyor
     2) İki promosyon bloğu tek yatay şeride indi (160 px → ~90 px)
   `.scene.home` zaten tam ekran ve okunabilirlik gradyanı mevcut. */
/* ⚠⚠ `--safe-top` DOLGUYA GİRİYOR (8 Ağu). Telegram TAM EKRAN kipinde
   uygulamanın üstünde artık kendi başlığı yok; onun yerine cihazın durum
   çubuğu ve Telegram'ın YÜZEN düğmeleri (`✕ Close` solda, `⌄ ⋯` sağda)
   duruyor. Cihazda ölçüldü: bu dolgu olmadan profil hapı `✕`in, CNT hapı
   ise `⌄ ⋯`in ALTINDA kalıyordu — CNT tamamen görünmez olmuştu.
   ⚠ `.topbar` bunu zaten ödüyordu; ana ekranın HUD'u akıştan çıkarılmış
   ayrı bir katman olduğu için kural ona uğramıyordu. */
.scene.home .home-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-hud);
  padding: calc(var(--sp-3) + var(--safe-top, 0px)) var(--sp-4) 0;
  pointer-events: none;              /* boşluklar sahneye geçsin */
}
.scene.home .home-hud > * { pointer-events: auto; }

/* İki CTA yan yana dar kalıyor; "Bayconti'ye git" iki satıra sarıyordu. */
.scene.home .home-cta {
  white-space: nowrap;
  padding: 0 var(--sp-2);
}

.scene.home .promo-strip {
  position: absolute;
  top: var(--hud-h, 200px);          /* nav.js ölçüp yazıyor */
  left: 0;
  right: 0;
  z-index: var(--z-hud);
}

/* ⚠ Kartlar TAM genişlik. Önce %88 denendi: sonraki kartın dilimi sağda
   renkli bir parça olarak kalıyordu ve "devamı var" ipucu değil, ekrandan
   TAŞMIŞ/KAYBOLMUŞ içerik gibi okunuyordu. Peek yerine nokta göstergesi. */
.scene.home .promo-scroll {
  display: flex;
  /* ⚠ Boşluk, yan padding'lerin TOPLAMINDAN büyük olmalı. Küçükse sonraki
     kart ekranın içinde birkaç piksel görünüp "taşmış/kesilmiş öğe" gibi
     duruyor — sorunun aslı buydu. 2×16 padding → 32 px boşluk. */
  gap: var(--sp-8);
  padding: 0 var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.scene.home .promo-scroll::-webkit-scrollbar { display: none; }
.scene.home .promo-scroll > * {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
}
/* Boş slot yer kaplamasın (teklif aktif değilken) */
.scene.home .promo-scroll > *:empty { display: none; }

.scene.home .promo-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}
.scene.home .promo-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: rgba(255, 255, 255, .28);
  transition: background var(--dur-base) var(--ease-out),
              width var(--dur-base) var(--ease-out);
}
.scene.home .promo-dots span.on {
  width: 18px;                       /* aktif nokta çubuğa dönüşür */
  border-radius: var(--r-pill);
  background: var(--gold);
}

/* Sahne (sokak arka planı, zemin, ışıma) artık TAM ekranı dolduruyor —
   %39 → %82. Ama maskot sahneye göre yüzdeyle ölçülüyor
   (`height:120%; bottom:-20%`, 320 px'lik eski sahneye göre ayarlanmış),
   bu yüzden sahne büyüyünce 795 px'e fırlayıp kadrajı taşıyordu.
   ⚠ `.mascot` mutlak konumlu: sahneye padding vermek onu ETKİLEMEZ.
   Üstten `--hud-h` ile sınırlanıp yükseklik top/bottom'dan türetiliyor.
   Üst sınır olarak HUD alınıyor (şerit değil): promosyon şeridi geçici bir
   kart, maskotun onun arkasından yükselmesi derinlik veriyor; bakiye HUD'unun
   arkasına girmesi ise kafayı kapatırdı. */
/* ⚠ Maskotu sahnenin YÜZDESİYLE ölçme. Sahne tam ekran olunca `height:120%`
   onu 795 px'e şişirdi ve 3B kamera kadrajı (diz hizası) sabit olduğu için
   karakter uyluktan kesilerek kocaman render edildi. Ölçü artık EKRANA
   bağlı, sahneye değil. */
.scene.home {
  /* Maskotun geometrisi TEK yerde. Konuşma balonu ve kombo çipi de buradan
     türetiliyor ki yerleşim değişince üçü birlikte hareket etsin. */
  /* ⚠⚠ HAM `56dvh` DEĞİL — KULLANILABİLİR yüksekliğin %56'sı (8 Ağu).
     Telegram tam ekranda görüntü alanı büyüyor (719 → 844) ama büyüyen
     yerin bir kısmını çentik ve Telegram'ın yüzen düğmeleri yiyor. Maskot
     ham `dvh`ye bağlıyken 403 → 473 px'e şişti, alta yapışık olduğu için
     kafası yukarı çıktı ve PROMOSYON KARTI YÜZÜNÜN ÜSTÜNE BİNDİ
     (ölçüldü: örtüşme 55 → 121 px; canvas'ın kafa üstü saydam payı ~43 px
     olduğu için 55 sorunsuz, 121 yüzü kapatıyor).
     Güvenli alan payları düşülünce maskot 402 px'e dönüyor ve örtüşme 51 —
     yani tam ekran ÖNCESİ hâlle birebir aynı.
     ⚠ Pay yokken (tarayıcı, masaüstü) ifade `0.56 * 100dvh`e sadeleşiyor:
     davranış birebir korunuyor. */
  --mascot-h: calc(0.56 * (100dvh - var(--safe-top, 0px) - var(--safe-bot, 0px)));
  --mascot-drop: 6%;                 /* sahne yüzdesi — ayaklar alt kenarı aşsın */
}
.scene.home .mascot {
  top: auto;
  bottom: calc(-1 * var(--mascot-drop));
  height: var(--mascot-h);
  max-width: 62%;
}

/* ⚠ Konuşma balonu (`top: 6%`) ve kombo çipi (`top: 14%`) sahnenin
   YÜZDESİYLE konumlanmıştı. Sahne 320 px iken bu maskotun kafası hizasına
   düşüyordu; sahne tam ekran (662 px) olunca %6 = 40 px, yani ikisi de
   HUD'un içine çıktı.
   ⚠ Maskotun ELEMAN tepesine göre hizalamak da yanlış: 3B canvas'ta kafanın
   üstünde saydam boşluk var, eleman promosyon şeridinin 43 px altına
   uzanıyor. Bu yüzden ikisi de HUD + şeridin altına sabitleniyor —
   `--home-hud-h` nav.js'te ölçülüyor, yerleşim değişse de takip eder. */
.scene.home .mascot-speech {
  top: calc(var(--home-hud-h, 320px) + var(--sp-2));
  bottom: auto;
}
/* Kombo çipi balonun altında: ikisi aynı anda görünebiliyor. */
.scene.home .combo-chip {
  top: calc(var(--home-hud-h, 320px) + 52px);
  bottom: auto;
}

/* Yan butonlar sahnenin ortasına hizalıydı; sahne tam ekran olunca maskotun
   KAFASININ iki yanına çıkıp promosyon şeridiyle çakıştılar. Alt yarıya,
   gövdenin iki yanına indirildi. */
.scene.home .side.left,
.scene.home .side.right {
  top: auto;
  bottom: calc(18% + var(--safe-bot));
  transform: none;
}

/* Rastgele olay bandı `position: fixed` ve body'ye ekleniyor — `.scene.home`
   ata seçicisiyle hedeflenemiyor. Konumu bu yüzden :root'taki değişkenden
   okuyor; nav.js ekran değiştikçe yazıyor.
   ⚠ Eski `top: 64px` "kullanıcı şeridinin altı" varsayımıydı; HUD 211 px'e
   çıkınca bant bakiye bloğunun ortasına düştü. */
.revt-banner {
  top: calc(env(safe-area-inset-top, 0px) + var(--overlay-top, 64px));
  z-index: var(--z-toast);
}

/* Enerji çubuğu maskotun bacaklarını ortadan kesiyordu — kart gibi değil,
   sahnenin üstünde yüzen ince bir HUD şeridi olmalı. Daha saydam, daha
   dar, daha güçlü bulanıklık: karakterin önünde durduğu belli olsun ama
   onu ikiye bölmesin. */
.scene.home .energy {
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  background: rgba(10, 24, 48, .48);
  border-color: rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--el-2);
}

/* ── İKONLAR ─────────────────────────────────────────────────
   `src/ui/icons.js` üretiyor. Emoji metin olduğu için `font-size` ile
   boyutlanıyordu; SVG öyle değil — boyut satır içi veriliyor. Buradaki
   kurallar yalnız HİZALAMA için.
   ⚠ Renk `currentColor`: ikon bulunduğu yerin rengini alıyor, bu yüzden
   rozet/buton varyantlarında ayrıca renk tanımlamaya gerek yok. */
.ikon {
  display: inline-block;
  vertical-align: -0.18em;      /* metinle aynı optik hatta otursun */
  flex-shrink: 0;
}
/* Tek başına ikon taşıyan kutularda ortala */
.slot .lock-ic,
.shop-card .lvl-lock,
.quest-row .ico,
.ranks-podium .trophy,
.wp-empty-arrow {
  display: grid;
  place-items: center;
  line-height: 0;
}
.quest-row .ico .ikon { opacity: .9; }
/* Tamamlanmış görevde onay yeşil, bekleyende altın — durum rengi ikondan
   okunsun, yalnız metinden değil. */
.quest-row.complete .ico { color: #6dffae; }
.quest-row .ico { color: var(--gold); }

/* Sekmedeki "tamamlanan görev var" göstergesi. Önce satır içi renkli `●`
   karakteriydi — yazı tipine bağlı boyut/hiza, kontrolsüz. */
.tab-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-radius: var(--r-circle);
  background: #6dffae;
  box-shadow: var(--glow-good);
  vertical-align: 0.15em;
}

/* Kozmetik detay paneli içeriği (nav.js → openCosmeticSheet) */
.toast .sheet-why {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--gold);
}
.toast .sheet-desc {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
.toast .sheet-bal {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-top: var(--sp-3);
}

/* ── POPUP / MODAL ───────────────────────────────────────────
   Perde + kabuk. Katman sırası artık adlı token'lardan geliyor;
   eski 28 dağınık z-index yerine altı basamak. */
.ui-scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 20, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ui-scrim.open { opacity: 1; pointer-events: auto; }

.ui-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--z-modal);
  width: min(calc(100vw - var(--sp-8)), 340px);
  padding: var(--sp-5);
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--el-3);
  /* Kapalıyken hafif küçük + aşağıda; açılışta yerine oturur.
     Çıkış girişten hızlı — kullanıcı kapatma niyetini beklemez. */
  transform: translate(-50%, -46%) scale(.94);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.ui-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease-spring),
              opacity var(--dur-base) var(--ease-out);
}

/* Alttan açılan panel (satın alma, ödüller) — mobilde başparmağa
   yakın olduğu için tam ekran modal yerine bu tercih edilmeli. */
.ui-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  max-height: 82dvh;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-6) + var(--safe-bot));
  background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
  border-top: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--el-4);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.ui-sheet.open { transform: translateY(0); }

/* Sürükleme tutamağı — panelin kapatılabilir olduğunu söyler */
.ui-sheet .ui-grab {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
}