/* Alt gezinme — site genelinde ortak. Keşfet'te kullanılan çubuğun aynısı; tüm sayfalarda aynı görünsün diye ayrı dosyaya alındı (hem layout hem shorts.php bunu yükler). */ :root { --altnav-y: 54px; /* Ana ekran çizgisi payı SADECE uygulama olarak açıldığında gerekli. Tarayıcıda alt araç çubuğu zaten o alanı kaplıyor; env() değerini koşulsuz eklemek çubuğu yukarı itip altında boşluk bırakıyordu (iOS). */ --altnav-guvenli: 0px; /* Alt gezinme vurgusu iOS sistem kırmızısıydı (#ff3b30) ve sitenin vurgu rengiyle ilgisi yoktu: aynı ekranda iki farklı "aktif" rengi görünüyordu. Tek kaynak: --kor. */ --altnav-vurgu: var(--kor, #ff5a1f); } /* iPhone'da ölçüldü (iOS 18.7, uygulama modu): env(safe-area-inset-bottom) = 34px. Bu payın TAMAMINI ayırmak çubuğu 88px yapıyor ve ikonların altında 34 piksellik ölü bant bırakıyor — video akışının üstünde bu bant "çubuk yukarı kaymış, altta boşluk var" gibi görünüyor. Ana ekran çizgisi aslında ~5px yüksekliğinde ve dipten ~8px yukarıda; 16px ona değmemek için yeterli. Çubuğun arka planı yine ekranın dibine kadar iniyor. */ @media (display-mode: standalone) { :root { --altnav-guvenli: env(safe-area-inset-bottom, 0px); } } /* iOS'ta display-mode her sürümde eşleşmiyor; navigator.standalone ile 'e eklenen sınıf yedek yol (bkz. layout.php / shorts.php). */ html.dh-uygulama { --altnav-guvenli: env(safe-area-inset-bottom, 0px); } .alt-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--altnav-y) + var(--altnav-guvenli)); padding-bottom: var(--altnav-guvenli); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(12, 12, 15, 0.78); backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); border-top: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); } /* Bulanıklık desteklenmiyorsa (ya da tarayıcı çizmeyi bırakırsa) çubuk %86 saydam siyah olarak kalıyor ve arkasındaki her şey içinden görünüyor. Kullanıcının isteği net: görünmese bile SİYAH görünsün. Bu yüzden desteklenmediği durumda arka plan tamamen opak. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .alt-nav { background: #08080a; } } .nav-oge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* Sabit ikon alanı: aktif sekmenin üst göstergesi diğerlerini kaydırmasın diye yükseklik baştan ayrılıyor. */ padding-top: 3px; color: #8e8e93; text-decoration: none; font-size: 10.5px; font-weight: 500; letter-spacing: .1px; transition: color .18s ease; } /* Dolu simgeler: küçük boyutta ince çizgili olanlardan çok daha okunaklı */ .nav-ikon { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; stroke: none; transition: transform .2s cubic-bezier(.34,1.56,.64,1); } .nav-oge:active .nav-ikon { transform: scale(.88); } /* İçteki oynat üçgeni HER ZAMAN koyu: aksi halde pasif durumda üçgen de dış dikdörtgenle aynı griye boyanıp kayboluyordu ve ikon Keşfet'te (etkin) başka, ana sayfada (pasif) başka görünüyordu. */ .nav-dolu .ic { fill: #0a0a0a; stroke: none; } .nav-oge.etkin { color: var(--altnav-vurgu); } .nav-oge.etkin .nav-dolu { fill: var(--altnav-vurgu); stroke: var(--altnav-vurgu); } /* Aktif sekmenin üstünde ince gösterge */ .nav-oge.etkin::before { content: ""; position: absolute; top: 0; width: 26px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--altnav-vurgu); } /* Geniş ekranda sol menü zaten var; alt çubuk yalnızca dar ekranda. (Keşfet kendi CSS'inde de gizliyor, burada site geneli için.) */ @media (min-width: 1024px) { .alt-nav { display: none; } } /* Çubuk sayfanın son satırlarını örtmesin */ @media (max-width: 1023px) { body.alt-navli { padding-bottom: calc(var(--altnav-y) + var(--altnav-guvenli) + 8px); } body.alt-navli footer { margin-bottom: 0; } } /* ── Mobil sol menü ──────────────────────────────────────── Bu kurallar bilerek burada: desktop.css içinde genel bir ".sidebar{display:none}" var ve bu dosya ondan SONRA yüklendiği için mobilde menünün açılmasını garanti eder. */ @media (max-width: 1023px) { .sidebar { display: flex !important; flex-direction: column; position: fixed !important; /* ⚠️ `bottom: 0` KALDIRILDI — "menü biraz yukarı kalkıyor" HATASI. Aşağıda `height: 100dvh` var; `top` + `bottom` + `height` üçü birden verilince tarayıcı `bottom`u yok sayıyor ve iki ölçü çakışıyordu. Üstelik `dvh` adres çubuğu görünüp kaybolduğunda DEĞİŞİYOR: yükseklik anlık küçülünce alt kenar yukarı sıçrıyor ve menü "kalkmış" gibi görünüyordu. Tek çapa: üstten sabit, yükseklik görünür alan kadar. */ top: 0; left: -300px; width: 284px; max-width: 86vw; z-index: 1000; background: #0b0b0b; border-right: 1px solid #1a1a1a; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); /* ⚠️ "GİRİŞ YAP / KAYIT OL'A BASMAK İÇİN KAYDIRMAK GEREKİYOR" DÜZELTMESİ. Burada `overflow-y:auto` vardı: KENAR ÇUBUĞUNUN TAMAMI kayıyordu. Menü listesi ekrandan uzun olunca alttaki giriş/kayıt düğmeleri görünür alanın dışında kalıyor, kullanıcı basmak için kaydırmak zorunda kalıyordu (bildirilen hata). Doğrusu drawer deseni: GÖVDE (.sb-nav) kendi içinde kayar, ALT BÖLGE (.sb-alt → giriş/kayıt/çıkış) dibe sabit ve HER ZAMAN görünür. `100dvh`: mobil Chrome'da adres çubuğu görünürken `100vh` gerçek görünür yüksekliği vermiyor; çubuğun kapladığı kadarı ekranın dışında kalıyor ve alt düğmeler yine erişilemez oluyordu. `dvh` o anki dinamik yüksekliği veriyor. `vh` satırı desteklemeyen eski tarayıcılar için yedek olarak ÖNCE yazılıyor. ⚠️ `bottom: 0` YAZMAYI DENEME — İKİ KEZ GERİ ALINDI. Sabit konumlu öğede `bottom`, adres çubuğu kayarken alt kenarı oynatıyor; `margin-top:auto` ile dibe yapışan `.sb-alt` onunla birlikte zıplıyor ve kullanıcının gördüğü "aşağı kaydırınca sol menü yukarı kalkıyor" oluyor. Tek çapa üstten: `top:0` + yükseklik. (İlk geri alma nedeni `top`+`bottom`+`height` çakışmasıydı; ikinci kez yükseklik olmadan denendi, davranış yine aynı çıktı.) */ /* ⚠️ `dvh` KALSIN — SABİT PİKSEL YÜKSEKLİK DENENDİ VE GERİ ALINDI. Bir ara menü açılırken JS ile görünür alan ölçülüp `--sb-yukseklik` olarak sabit piksel veriliyordu. Amaç araç çubuğu durumuna göre doğru ölçmekti ama SABİT olması yeni bir kusur doğurdu: kullanıcı aşağı kaydırıp tarayıcının araç çubuğunu gizlediğinde görünür alan BÜYÜYOR, menü ise ölçüldüğü boyda kalıyor ve altta boşluk açılıyor. `dvh` dinamiktir — çubuk gizlenince menü de onunla birlikte uzar, ki kullanıcının beklediği davranış budur. `vh` satırı `dvh` bilmeyen eski tarayıcılar için yedek. */ height: 100vh; height: 100dvh; overflow: hidden; transition: left .28s cubic-bezier(.4, 0, .2, 1); box-shadow: 10px 0 30px rgba(0,0,0,.8); } /* Kaydırılan TEK bölge burası. `min-height:0` ŞART: flex öğesi varsayılan olarak içeriğinden küçülmez, o yüzden `overflow` hiç devreye girmez ve liste yine taşardı. */ .sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Liste sonuna gelince kaydırma arkadaki sayfaya ZİNCİRLENMESİN: iOS'ta zincirlenen kaydırma adres çubuğunu oynatıyor, o da menüyü kıpırdatıyordu. Menü kendi içinde kalsın. */ overscroll-behavior: contain; } /* ── KAYDIRMADAN SIĞDIRMA ───────────────────────────────────────── Ölçüldü: misafir kullanıcıda içerik ~758px, tipik telefonda Chrome adres çubuğu düştükten sonra kalan görünür alan ~700px → taşıyor ve menü kaydırılmak zorunda kalıyor. Aşağıdaki üç ayar ~120px kazandırıp her şeyi tek ekrana sığdırıyor; ölçüler ORANLI küçülüyor, görsel dil (yazı boyutu, ikon boyutu, hiyerarşi) AYNEN korunuyor. `.sb-nav` kaydırması yine de duruyor: emniyet ağı — girişli kullanıcı (hesap kartı) ya da yönetici (ekstra madde) gibi daha uzun hâllerde veya çok küçük ekranda içerik yine sığmazsa erişim kaybolmasın. */ /* 1) Bölüm başlıkları: üstteki 18px nefes fazlaydı. 3 başlık × ~7px */ .sb-ayrac { padding: 12px 12px 6px; } /* 2) Menü maddeleri: 11px → 9px dikey. 8-9 madde × ~4px */ .sb-item { padding: 9px 12px; } /* 3) "Uygulamayı Yükle" tanıtım kartı ~77px yer kaplıyor (63px + 14px üst boşluk) ve aynı işlev zaten hemen ÜSTÜNDEKİ "Uygulama" menü maddesinde var. Aynı şeyi iki kez göstermek için ayrılan yer, menünün geri kalanını ekran dışına itiyor. ⚠️ EŞİK `max-height: 780px` İDİ, YETMEDİ. "Pratikte tüm telefonları kapsıyor" varsayımı yanlış çıktı: iPhone'un görünür alanı 844px, yani kart telefonlarda GÖRÜNMEYE devam ediyordu. ÖLÇÜLDÜ (390×844): menü listesi 429px içeriğe karşı 403px alana sıkışıyor — "Duyurular" maddesi yarım kalıyor ve kaydırmadan görünmüyor; "Kayıt Ol" da ekranın tam dibine (735-780) yapışıyor. Yükseklik eşiği yerine artık kural dar ekranın TAMAMI için geçerli: gerekçe zaten ekran yüksekliği değil, aynı bağlantının iki kez yer kaplaması. Tablet/masaüstünde (≥1024px) kart görünmeye devam ediyor. */ .sb-promo { display: none; } .sidebar.open, .sidebar.acik { left: 0 !important; } /* ⚠️ "ÇIKIŞ YAP YUKARI KALKMIŞ" — iPhone'a özgü ölü boşluk. Alt bölge menünün dibine `margin-top:auto` ile yapışıyor ama altında iki dolgu üst üste biniyordu: • yukarıdaki `.sidebar` alt dolgusu → safe-area (~34px) + 16px • desktop.css'teki `.sb-alt` → + 20px Toplam ~70px: düğmeler ekranın dibinden bariz yukarıda kalıyor, altları boş duruyordu. Yalnızca iPhone'da görünmesinin sebebi, diğer cihazlarda `env(safe-area-inset-bottom)` değerinin 0 olması. Bu düzeltme ESKİDEN `layoutBasla()`'nın satır içi CSS'indeydi; oysa Keşfet (shorts.php) kendi 'ini yazıyor ve layoutBasla'yı HİÇ çağırmıyor — düzeltme o sayfaya hiç ulaşmıyordu. Gerçek CSS dosyasına taşındı: menüyü basan her sayfa artık aynı davranıyor. */ /* ⚠️ ÇIKIŞ YAP ALT GEZİNME ÇUBUĞUNUN BANDINDA KALIYORDU — BASILAMIYOR. Menü tam ekran (`100dvh`) ve alt bölge dibe yapışıyor; dolgu yalnızca güvenli alan kadardı (~34px + 6px). Ama uygulama modunda ekranın dibindeki 88px'i (`--altnav-y` 54 + güvenli alan 34) alt gezinme çubuğu kaplıyor. Menü z-sırasında onun ÜSTÜNDE olduğu için düğme görünüyor, fakat tam o bandın içinde kaldığından kullanıcı basmaya çalıştığında parmağı çubuğun/ana ekran çizgisinin bölgesine denk geliyordu: "çıkış yap aşağıda kalıyor, basılmıyor". Çözüm: alt bölgeye çubuk yüksekliği kadar yer aç. Tarayıcıda `--altnav-guvenli` 0 olduğu için orada yalnızca çubuk payı ekleniyor, gereksiz boşluk oluşmuyor. ⚠️ `.sb-alt` KIRPILABİLİYORDU. `flex-shrink:0` + `overflow:hidden` birlikte, alt bölge sığmadığında onu görünür alanın DIŞINA taşırıyor ve düğme büsbütün erişilemez oluyordu (kısa ekranlarda). `min-height:0` ile küçülmesine izin veriliyor; taşarsa kendi içinde kayıyor. */ /* ⚠️ UYGULAMA MODUNDA YÜKSEKLİK `vh`'YE SABİTLENİYOR — "ÇIKIŞ YAP ALTTA KALIYOR" DÜZELTMESİ. Ana ekrana eklenmiş uygulamada `100dvh` bazı iOS sürümlerinde görünür alandan BÜYÜK çıkıyor (bir ara denenen `-webkit-fill-available` ise büsbütün belge yüksekliğini veriyordu). Menü ekranın altından taşıyor, dibe yapışan `.sb-alt` ekran dışında kalıyor ve `overflow:hidden` yüzünden kaydırarak da ulaşılamıyordu. Uygulama modunda adres çubuğu YOK, yani görünür alan hiç değişmiyor: orada `100vh` tam olarak ekran yüksekliği ve dinamik birimlerin aksine ölçüsü oynamıyor. Tarayıcıda ise `dvh` gerekli olduğu için (adres çubuğu) yukarıdaki kural aynen duruyor — bu geçersiz kılma yalnızca uygulama modunda devreye giriyor. */ @media (display-mode: standalone) { .sidebar { height: 100vh; } } html.dh-uygulama .sidebar { height: 100vh; } /* Alt boşluk: çubuk yüksekliği + güvenli alan + nefes payı. ⚠️ PAY 10px İDİ, 22px'E ÇIKARILDI. "Kayıt Ol" alt gezinme çubuğunun hemen üstüne yapışık duruyordu; parmak o bantta kolayca kayıyor. Sabit piksel yerine değişkenlerden hesaplandığı için her cihazda kendiliğinden doğru: tarayıcıda güvenli alan 0 (yalnızca çubuk payı), uygulama modunda ana ekran çizgisi payı da ekleniyor. */ /* ⚠️ GÜVENLİ ALAN DEĞİŞKENDEN DEĞİL, DOĞRUDAN `env()`DEN. `--altnav-guvenli` tarayıcıda bilerek 0 (alt gezinme ÇUBUĞU için doğru — orada tarayıcının kendi araç çubuğu zaten o alanı kaplıyor). Ama bu kenar çubuğu bir KAPLAMA: iPhone'da tarayıcı modunda da ana ekran çizgisi payı gerekiyor, yoksa "Çıkış Yap" o banda denk geliyor ve parmak kayıyor. Uygulama modunda değer zaten aynı, yani gerileme yok. */ /* ⚠️ ALT GEZİNME ÇUBUĞU İÇİN YER AYIRMIYORUZ — O YER BOŞA GİDİYORDU. Dolgu `var(--altnav-y)` (54px) içeriyordu; gerekçe "düğme alt çubuğun bandına denk gelmesin" idi. Ama menü AÇIKKEN o çubuk görünmüyor: kenar çubuğu z-1000, alt çubuk z-40, aradaki karartma z-900. ÖLÇÜLDÜ (`elementFromPoint`, 390×844): alt çubuğun tam ortasındaki noktada bulunan öge `.sidebar` — yani çubuk hem görünmüyor hem dokunulamıyor. Ona ayrılan 54px sadece "Kayıt Ol"un altında ölü boşluk bırakıyordu (düğme 768'de bitiyor, ekran 844). Kalan iki bileşenin ikisi de gerçek: env(safe-area-inset-bottom) → iPhone ana ekran çizgisi payı 16px → düğmenin ekran kenarına yapışmaması Bu kural mobil bloğun içinde; masaüstünde etkisi yok. */ .sidebar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } /* ⚠️ UYGULAMA MODUNDA DAHA FAZLA PAY GEREKİYOR. Tarayıcıda 16px yeterli: altta ana ekran çizgisi yok, düğmenin altında gereksiz boşluk bırakmak istemiyoruz (bkz. yukarıdaki not — 54px'lik alt çubuk payı tam bu yüzden kaldırıldı). Uygulama modunda ise `env(safe-area-inset-bottom)` = 34px ve o bant iOS'un YUKARI KAYDIRMA JEST bölgesi. Güvenli alan kadar boşluk bırakmak düğmeyi çizginin hemen üstüne koyuyor; parmak jest bandına denk geliyor ve basış kayıyor — oynatıcıda aynı sorunu ALT_SERIT ile çözmüştük. Ölçüldü (390×844): 16px payla düğme 794'te bitiyor (dipten 50px), 34px payla 776'da (dipten 68px) — ikincisi jest bandının dışında. `display-mode` iOS'un bazı sürümlerinde eşleşmiyor, `html.dh-uygulama` yedek yol (bkz. layout.php / shorts.php). */ @media (display-mode: standalone) { .sidebar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); } } html.dh-uygulama .sidebar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); } .sb-alt { margin-top: auto; flex-shrink: 0; padding: 14px 0 0; min-height: 0; overflow-y: auto; } /* Menü açıkken hamburger gizlenir, arka plan kaymaz */ body.menu-acik #mobileMenu { display: none !important; } body.menu-acik { overflow: hidden; } } /* ── Dil seçim şeridi (sayfa içinde) ─────────────────────── Eskiden ekranın dibine sabitlenmiş bir çubuktu ve alt gezinmenin tam üstüne biniyordu. Artık sayfa akışında, yatay kaydırılabilir. */ .dil-secim { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 16px 12px; margin: 0 auto; max-width: 1400px; } .dil-secim::-webkit-scrollbar { display: none; } .dil-secim .tbb-item { flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #c9c9d1; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; min-width: 0; transition: background .18s ease, border-color .18s ease, color .18s ease; } .dil-secim .tbb-item span { font-size: 14px; color: inherit; } .dil-secim .tbb-item:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.2); } .dil-secim .tbb-item.on, .dil-secim .tbb-item.on span { color: #fff; background: linear-gradient(90deg, #ff2d20, #f97316); border-color: transparent; } /* ══ KISA EKRANDA MENÜYÜ SIĞDIRMA ═════════════════════════════════════════ ÖLÇÜLDÜ (2026-08-07, 360×640, girişsiz): menü listesinin içeriği 429px, ona kalan yer 324px. Aradaki 105px'lik fark son üç maddeyi ("Uygulama", "Dizi İste", "Duyurular") kaydırma katlanmasının altında bırakıyor. Maddeler ekran sınırları içinde görünüyor ama `elementFromPoint` onlara ulaşamıyor — kullanıcının "sol tab yazıları kapatıyor, Listem/Dizi İste" dediği durum bu. 375×667'de iki madde, 390×844'te hiçbiri etkilenmiyor. Kutular ÇAKIŞMIYOR (.sb-nav 130-454, .sb-alt 454-624) — yani hizalama hatası değil, düpedüz yer yokluğu. Çözüm de yer açmak: 1) Menüdeki arama kutusu (~64px: 46 + 18 alt boşluk) GEREKSİZ — başlıkta zaten bir arama düğmesi var (#mobileAra, sağ üst). Aynı işlev iki kez yer kaplıyor; promo kartında olduğu gibi. 2) Bölüm başlıkları ve menü maddelerinin dikey payları biraz daha kısalıyor (~50px). Yazı ve ikon boyutlarına DOKUNULMUYOR. Toplam ~114px — açık 105px'i kapatıyor. Eşik 760px: üstündeki telefonlarda (ör. 390×844) her şey zaten sığıyor, orada ferah ölçüler duruyor. */ @media (max-width: 1023px) and (max-height: 760px) { .sb-ara { display: none; } .sb-ayrac { padding: 8px 12px 4px; } .sb-item { padding: 7px 12px; } }