/* ============================================================
   VİTRİN (index.html) — mobil önce
   Asıl kusur: sticky .navbar içindeki .filters flex-wrap ile
   4-5 satıra çıkıp ekranın yarısını kaplıyor, içerik altından
   kayıyordu. Mobilde filtreler TEK SATIR + yatay kaydırma olur,
   eylemler alt çubuğa iner.
   index.html'in kendi <style> bloğundan sonra yüklenir.
   ============================================================ */

:root { --hometab-h: 62px; }

body {
  padding-bottom: calc(var(--hometab-h) + var(--safe-b) + 14px);
  /* Yükleme düğmesi alt çubuğun üstüne kalksın (mobile.css okur) */
  --install-lift: calc(var(--hometab-h) + 8px);
}

.wrap {
  padding-left: calc(16px + var(--safe-l));
  padding-right: calc(16px + var(--safe-r));
}

/* ---------- Yapışkan bar: kısa ve tek satır ---------- */
.navbar {
  padding-top: calc(9px + var(--safe-t));
  padding-bottom: 9px;
  margin-top: 8px;
}
.navtop { margin-bottom: 9px; flex-wrap: nowrap; }
.searchbox { flex: 1 1 auto; min-width: 0; max-width: none; }
.searchbox input { font-size: 16px; } /* iOS odak zoom'unu engeller */

/* Sürpriz düğmesi alt çubuğa taşındı — barda yer kaplamasın */
.navbar .randbtn { display: none; }

/* Filtre çipleri: sarmala DEĞİL, kaydır */
.filters, .agefilter {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* NOT: scroll-snap KULLANILMAZ. scroll-snap-align:start, çipin sol
     kenarını kaydırma kabının kenarına hizalamak için satırı kendiliğinden
     kaydırıyordu (filtre 14px, yaş satırı 108px) — yani ilk çip ekran
     kenarına yapışıyor, yaş satırı ise "Tümü"yü atlamış görünüyordu. */
  scrollbar-width: none;
  /* Kenardan nefes payı: çipler ekran kenarına yapışmasın */
  padding: 4px calc(14px + var(--safe-r)) 8px calc(14px + var(--safe-l));
  margin-left: calc(-1 * (16px + var(--safe-l)));
  margin-right: calc(-1 * (16px + var(--safe-r)));
}
.filters::-webkit-scrollbar, .agefilter::-webkit-scrollbar { display: none; }
.agefilter { margin-top: 10px; }
.agefilter .albl { flex: 0 0 auto; }

/* Üst şerit mobilde gereksiz: aynı bağlantı alt çubukta var */
.topbar { display: none; }

/* ============================================================
   SÜS KATMANI — "her şey üst üste"nin asıl sebebi
   Kelebek/balon/kuş/arı/pırıltı hepsi position:absolute ve SABİT
   piksel offset'li (top:96px, top:150px…). Bu değerler geniş hero'nun
   boş kenarlarına göre ayarlanmış; 390px'lik telefonda tam da başlığın
   ve rozetlerin üstüne düşüyorlar.
   Hepsi aria-hidden="true" saf süs → mobilde gizlemek bilgi kaybı
   DEĞİLDİR. Bant hâlindeki süsler (flamalar, tepe sahnesi, gökyüzü)
   kendi şeritlerinde durdukları için kalır.
   ============================================================ */
.bfly, .balloon, .bird, .bee, .spark { display: none; }

/* Gökyüzü 340px sabit: telefonda gök kuşağı aşağı taşıp rozetlerin
   arkasına giriyor ve okumayı zorlaştırıyordu. Hero'ya göre ölçekle. */
.hero-sky { height: 210px; }

/* Başlık ve alt metne nefes payı */
.hero-inner { padding-top: 10px; }
.logo { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
.tagline { font-size: 0.92rem; padding: 0 6px; }

/* 3B band telefonda yer israfı */
@media (max-width: 560px) {
  .hero3d-band { height: 92px; }
}

/* Oturum rozeti (bahce-sync.js, satır içi stilli → !important şart):
   top:10px'te flamaların ve maskotun üstüne biniyordu. Flama bandı 44px,
   rozet onun ALTINA iner; ayrıca çentik payını da alır.
   Ayrıca sabit kalırsa, sayfa kaydırıldığında yapışkan arama çubuğunun
   ÜSTÜNE biniyor (rozetin z-index'i 2.1 milyar). Vitrinde absolute yapıp
   sayfayla birlikte kaydırıyoruz; oyun sayfalarında sabit HUD olarak kalır. */
#bahce-chip {
  position: absolute !important;
  top: calc(52px + var(--safe-t)) !important;
  right: calc(12px + var(--safe-r)) !important;
}

/* ---------- ALT EYLEM ÇUBUĞU ---------- */
.hometabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  gap: 2px;
  padding: 5px calc(6px + var(--safe-r)) calc(5px + var(--safe-b)) calc(6px + var(--safe-l));
  background: rgba(255, 253, 250, 0.94);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 2px solid #fff;
  box-shadow: 0 -8px 26px rgba(120, 110, 160, 0.13);
}
.hometabs button, .hometabs a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 2px;
  border: none;
  border-radius: 16px;
  background: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s, background 0.15s, transform 0.1s;
}
.hometabs .ht-ico { font-size: 1.32rem; line-height: 1; }
.hometabs button:active, .hometabs a:active { transform: scale(0.94); }
.hometabs .ht-parent { color: #8b6fd6; }
.hometabs .ht-rand { color: #e8734f; }

/* ---------- MASAÜSTÜ: eski düzen geri gelir ---------- */
@media (min-width: 861px) {
  body { padding-bottom: 80px; --install-lift: 0px; }
  .topbar { display: block; }
  /* Geniş ekranda süslerin yeri var — hepsi geri gelir */
  .bfly, .balloon, .bird, .bee, .spark { display: block; }
  .hero-sky { height: 340px; }
  .hero-inner { padding-top: 4px; }
  .logo { font-size: clamp(2.1rem, 6.2vw, 3.6rem); }
  .tagline { font-size: 0.98rem; padding: 0; }
  .hometabs { display: none; }
  .navbar .randbtn { display: inline-flex; }
  .navtop { flex-wrap: wrap; }
  .searchbox { flex: 1; max-width: 480px; min-width: 210px; }
  .filters, .agefilter {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding: 2px 4px;
  }
  .agefilter { margin-top: 14px; }
}