/* =====================================================================
   TELEFON KABUĞU (≤ 680 px) · tek kaynak · v2026.10-zzv (24.10.2026)
   Hedef (Emir, 23–24.10): uygulama telefonun bütün ekranını kullanır; saatin ve ev çizgisinin altı dahil, açılışla
   uygulama arasında kenar farkı yok. Saat bölgesinde düz şerit yok: altında içerik (anasayfada lacivert sahne) görünür,
   okunurluk için yalnız hafif ton ve bulanıklık.
   · Kök: yayın iskeletinin (index.html 1. satır) güvenli alan dolgusu telefonda 0; güvenli alanı her parça kendisi taşır.
   · Üst çubuk 44 px + üst güvenli alan. Zemin: sayfa başında sayfa zemini (aşağı doğru söner); içerik altına kayınca
     yarı saydam ve buzlu; anasayfa sahnesi altındayken saydam (html.hero, js/app.js MOTION.hero).
   · Anasayfanın ilk sahnesi üst kenara ve iki yana kadar uzanır; içi yerinde kalır (üst dolgu = uzama).
   · Sekme çubuğu ev çizgisinin hemen üstünde; içerik ekranın alt kenarına kadar akar.
   · Aşağı kaydırınca üst ve alt çubuk çekilir (html.bars-off, js/app.js BARS). Yukarı kaydırınca, sayfanın başında ya da
     sonunda ve sayfa değişince geri gelir. Hareket yalnız transform.
   · Saat bölgesi (durum çubuğu) yalnız üst güvenli alanın içindedir; altındaki hiçbir şeyi örtmez (v2026.10-zzx):
     – çubuklar çekik, üstte yapışmış araç çubuğu yok: içerik saatin altından bulanık görünür, hafif ton bölgenin içinde söner;
     – ekran genişliğinde bir araç çubuğu üste yapıştı (html.pinned, çubukta .pin; js/app.js MOTION.chrome): bölge ve çubuk
       aynı cam malzemeyle (--chrome) tek yüzey olur, araya koyu bant girmez;
     – ana ekran uygulamasının açık teması (html.pwa.sb-light; saat hep beyaz): bölgede lacivert cam; sahne altındayken gerekmez;
     – tam ekran katmanlar (hikâye oynatıcı, menü, oyun) açıkken örtü yok.
   · iOS 26 ana ekran uygulamasında görünüm alanı durum çubuğu kadar kısa kalabilir (WebKit 301108): index.html'in başındaki
     erken betik kökü kaydırılabilir yapıp görünüm alanını tam ekrana açmayı dener (html.vfix); açılmazsa geri alır
     (html.vshort) ve aşağıdaki son kural içeriği alt kenarda yumuşak söndürür.
   Masaüstü ve tablet (≥ 681 px) bu dosyadan etkilenmez (yalnız en alttaki menü düğmesi kuralı).
   ===================================================================== */
@media (max-width:680px){
  html:root{padding-top:0;padding-bottom:0}
  :root{--tb-h:calc(44px + env(safe-area-inset-top,0px));--tb-b:max(12px,calc(env(safe-area-inset-bottom,0px) - 10px));--gm-top:var(--tb-h);
    --chrome:color-mix(in srgb,var(--bg) 70%,transparent);--chrome-fx:blur(22px) saturate(1.6)}

  /* üst çubuk */
  .topbar{height:var(--tb-h);padding:calc(2px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px));
    background:linear-gradient(var(--bg) 20%,color-mix(in srgb,var(--bg) 70%,transparent) 64%,transparent);
    transition:transform .32s var(--spring),background-color .25s}
  .topbar > .brand{top:calc(22px + env(safe-area-inset-top,0px));transform:translate(-50%,-50%)}
  .app.scrolled .topbar{background:color-mix(in srgb,var(--bg) 50%,transparent);box-shadow:0 .5px 0 var(--line);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7)}
  /* anasayfa sahnesi altındayken: saydam; sahnenin başlığı altına kayınca sahne laciverdiyle buzlu; açık temada logo açık */
  html.hero .topbar{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.hero .app.scrolled .topbar{background:color-mix(in srgb,#0C1437 60%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6)}
  html.hero:not(.menu-open) #vgDefs{--logo-a:#DCE4FF;--logo-b:#7E9EFF}

  /* içerik, anasayfa sahnesi, sekme çubuğu */
  .main{padding-top:var(--tb-h);padding-bottom:calc(var(--tb-b) + 86px);scroll-padding-bottom:calc(var(--tb-b) + 86px)}
  #main .page.home > .stage:first-child{margin:calc(-2px - var(--tb-h)) -16px 0;padding-top:calc(2px + var(--tb-h));border-radius:0 0 26px 26px}
  #tabbar{bottom:var(--tb-b);transition:transform .32s var(--spring)}
  /* v2026.10-zzzz5: sekme çubuğunun arkasında yumuşak karartma; hap düğmelerin arasındaki boşlukta alttaki satırların rakamları keskin
     görünüp "çubuğun içinde sayı var" izlenimi veriyordu (Emir 27.10, Sıralama ekran kaydı) */
  #tabbar::before{content:"";position:absolute;left:-14px;right:-14px;bottom:calc(-1 * var(--tb-b));height:calc(var(--tb-b) + 62px + 26px);z-index:-1;pointer-events:none;
    background:linear-gradient(to top,var(--bg) 0,var(--bg) 48%,color-mix(in srgb,var(--bg) 82%,transparent) 72%,transparent)}
  html.game-on #tabbar::before{display:none}
  html.menu-open .rail{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:calc(var(--tb-b) + 98px)}
  html.game-on .ar{height:calc(var(--vvh) - var(--gm-top) - env(safe-area-inset-bottom,0px) - 14px)}

  /* çubuklar çekik */
  html.bars-off .topbar{transform:translateY(-100%)}
  html.bars-off #tabbar{transform:translateY(calc(100% + var(--tb-b) + 8px))}
  html.bars-off .totop{transform:translateY(calc(var(--tb-b) + 62px))}
  .totop{transition:transform .32s var(--spring),opacity .2s}
  html.bars-off .main :is(.xbar,.tabs){top:-44px}           /* yapışkan araç çubukları boşalan yere (geçiş js/app.js FLIP) */

  /* yapışmış araç çubuğu (çubuklar çekik): saat bölgesiyle aynı cam */
  html.bars-off .main .pin{background:var(--chrome)!important;-webkit-backdrop-filter:var(--chrome-fx);backdrop-filter:var(--chrome-fx)}

  /* saat bölgesi: yalnız güvenli alanın içinde */
  .app::before{content:"";position:absolute;left:0;right:0;top:0;z-index:45;height:env(safe-area-inset-top,0px);pointer-events:none;opacity:0;transition:opacity .2s;
    background:linear-gradient(color-mix(in srgb,var(--bg) 46%,transparent),color-mix(in srgb,var(--bg) 26%,transparent));
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  html.bars-off .app::before{opacity:1}
  html.bars-off.pinned .app::before{background:var(--chrome);-webkit-backdrop-filter:var(--chrome-fx);backdrop-filter:var(--chrome-fx);-webkit-mask-image:none;mask-image:none}
  html.pwa.sb-light .app::before{opacity:1;z-index:85;
    background:linear-gradient(color-mix(in srgb,var(--brand) 76%,transparent),color-mix(in srgb,var(--brand) 58%,transparent));
    -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  html.pwa.sb-light.bars-off.pinned .app::before{-webkit-mask-image:none;mask-image:none}       /* çubuğun üstünde net kenar */
  html.pwa.sb-light.hero:not(.bars-off) .app::before{opacity:0}                              /* sahne zaten lacivert */
  html:is(.game-on,.menu-open):not(.pwa.sb-light) .app::before,html.wrp-open .app::before{display:none}

  /* görünüm alanı kısa kaldıysa: alttaki şerit sayfa zemini renginde; içerik oraya sert kesilmeden söner */
  html.vshort .app::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;z-index:44;pointer-events:none;background:linear-gradient(transparent,var(--bg))}
}
@media (max-width:680px) and (prefers-reduced-motion:reduce){
  .topbar,#tabbar,.totop,.app::before{transition:none}
}
/* menü başlığında tam ekran düğmesi (yalnız tarayıcı izin verirse görünür) */
.rail-h .rail-fs{margin-left:auto;margin-right:8px}