/* ═══════════════════════════════════════════════════════════════════ HARMAN ALT MENÜSÜ — altın palet Alt menü SİTE GENELİ bir bileşen (templates/partials/bottom_nav.php) ve ana sayfa, firmalar, etkinlikler, haber, ilan… hepsinde aynı. Orada mavi kalıyor; burada YALNIZ Harman yüzeylerinde altına çevriliyor. NEDEN AYRI DOSYA: Harman yüzeyleri üç ayrı CSS yüklüyor — harman.css (11 sayfa), harman-dm.css (mesajlar), harman-reels.css (reels). Kuralları üçüne birden yazmak üç kopya demekti ve zamanla ayrışırdı. Tek dosya, tek kaynak; üç kapsam da aynı bloktan besleniyor. app.css'e DOKUNULMUYOR: orada yüzlerce dize kilidi var ve değişiklik Harman dışındaki her sayfayı da boyardı. KAPSAM ÜÇ AYRI YERDEN GELİYOR, çünkü menünün DOM konumu sayfaya göre değişiyor (ölçüldü): body.hs-body > nav.bottomnav → .hs'in KARDEŞİ, içinde değil body.hs-dm-body > nav.bottomnav → aynı div.rls > nav.bottomnav → reels menüyü kendi kabına basıyor Menü .hs'in KARDEŞİ; bu dosya yazıldığında --hs-* yalnız .hs üzerinde tanımlıydı ve menüde MİRAS ALINAMIYORDU (ölçüldü: hepsi "çözülmedi"). Sonradan harman.css'te tokenlar body.hs-body'ye de taşındı, yani o kapsam için sorun kalmadı — AMA hs-dm-body ve .rls sayfalarında harman.css hiç yüklenmiyor (onlar --hd-* ve --hr-* tanımlıyor). Üç kapsamı TEK bloktan beslemek için dosya kendi --hsn-* setini tutuyor; başka dosyanın kapsamına bağlı değil. Aynı tuzak mesajlarda bir kez giden balonları görünmez yapmıştı. TEMA: Harman yüzeyleri açık temada da KOYU (harman.css tokenları tema dallanması taşımıyor). app.css ise açık temada menüye beyaz zemin veriyor — burada iki temada da koyu zemin dayatılıyor, yoksa koyu sayfanın altında beyaz bir şerit kalıyordu. ═══════════════════════════════════════════════════════════════════ */ body.hs-body, body.hs-dm-body, .rls{ --hsn-bg:rgba(11,13,16,.96); --hsn-line:rgba(255,255,255,.085); --hsn-t2:#8f98a5; --hsn-t:#f4f6f8; --hsn-accent:#f5c542; /* Altın zeminde metin: harman.css'teki her altın düğmeyle aynı ton (.hs-pill-primary, .hs-svopen, .hs-nfollow). */ --hsn-on-accent:#151109; --hsn-danger:#ff5f67; /* Rozet halkası menü zeminiyle aynı olmalı ki çember görünmesin. */ --hsn-halka:#0b0d10; /* Sekmelerin alt nefes payı. Menünün KENDİ alt dolgusu 0; bu pay ögelerin içinde duruyor — gerekçesi aşağıda. Tek token, çünkü sekmeler ile "Oluştur" düğmesi ayrı kurallardan besleniyor ve sayılar ayrışırsa etiket hizası kayar. */ --hsn-dip:9px; } /* ═══════════ ALT DOLGU MENÜDEN ÖGELERE TAŞINDI ═══════════ app.css menüye şunu veriyor: .bottomnav{padding:9px 6px calc(9px + env(safe-area-inset-bottom,0))} env(safe-area-inset-bottom) iPhone'un ana ekran çubuğu kadar (≈34px) ekliyor; iOS WebView'ında menünün altında koca bir boş şerit kalıyor. Kullanıcı alt dolgunun 0 olmasını, ama yazıların en alta yapışmamasını istedi. Dolgu menüden alındı, nefes payı ÖGELERİN kendi alt dolgusuna taşındı: ögeler zaten alta hizalı (app.css align-items:flex-end), yani etiketin alt kenarı kılı kıpırdamıyor (ölçüldü: y=803, beş sekmede de). Tarayıcıda görüntü BİREBİR AYNI kalıyor; kaybolan tek şey iOS'taki güvenli alan şeridi. TAKAS AÇIKÇA YAZILIYOR: güvenli alan payı gittiği için iPhone'un ana ekran çubuğu artık menünün alt kenarıyla üst üste biniyor. Kullanıcı dolgunun sıfırlanmasını açıkça istedi. */ body.hs-body .bottomnav, body.hs-dm-body .bottomnav, .rls .bottomnav{ padding-bottom:0 } /* ÖZGÜLLÜK — ÖLÇÜLDÜ, TAHMİN EDİLMEDİ. Rakip kural app.css'te :root[data-theme="dark"] .bottomnav. :root bir PSEUDO-SINIF, eleman değil → (0,3,0). İlk denemede "body.hs-body nav.bottomnav" (0,2,2) yazılmıştı ve ZEMİN TUTMADI (tarayıcıda ölçüldü: rgba(17,25,42,.88) geliyordu). :root öne eklenerek (0,3,2)'ye çıkarıldı. Yalnız bu kural bumped — diğer bildirimlerin tema-kapsamlı rakibi yok, onlar zaten kazanıyordu. */ :root body.hs-body nav.bottomnav, :root body.hs-dm-body nav.bottomnav, :root .rls nav.bottomnav{ background:var(--hsn-bg); border-top:1px solid var(--hsn-line); box-shadow:0 -10px 34px rgba(0,0,0,.5), 0 -2px 10px rgba(0,0,0,.34); } body.hs-body .bottomnav .bn, body.hs-dm-body .bottomnav .bn, .rls .bottomnav .bn{ color:var(--hsn-t2); padding-bottom:var(--hsn-dip) } body.hs-body .bottomnav .bn:not(.active):hover, body.hs-dm-body .bottomnav .bn:not(.active):hover, .rls .bottomnav .bn:not(.active):hover{ color:var(--hsn-t) } /* Etkin sekme: altın. İkon dolgusu app.css'te fill:currentColor + fill-opacity:.16 — renk buradan gelince dolgu da kendiliğinden altın. */ body.hs-body .bottomnav .bn.active, body.hs-dm-body .bottomnav .bn.active, .rls .bottomnav .bn.active{ color:var(--hsn-accent) } /* Ortadaki oluştur düğmesi — maviydi (#1f6fd6 / #3b8ef0). */ /* OLUŞTUR DÜĞMESİ MENÜNÜN İÇİNDE VE YUVARLAK KARE. app.css onu ".bn.center{margin-top:-26px}" ile yukarı kaldırıyor ve ".fab{border-radius:50%}" ile tam daire yapıyor. ÖLÇÜLDÜ: 56px'lik daire menünün üst kenarını 15px aşıyordu — kaldırılan parçanın çevresinden arkadaki sayfa görünüyor ve menünün üst çizgisi kesiliyordu. Harman'da düğme menünün İÇİNDE duruyor (kullanıcı kararı: mockup translateY(-12px) ile taşırıyor, burada taşırmıyoruz) ve köşeleri yuvarlatılmış kare — tam daire değil. */ body.hs-body .bottomnav .bn.center, body.hs-dm-body .bottomnav .bn.center, .rls .bottomnav .bn.center{ margin-top:0; gap:1px; /* ALT HİZA — ÖLÇÜLDÜ, TAHMİN EDİLMEDİ. Komşu sekmelerin etiket alt kenarı y=803'te, "Oluştur"unki y=802'de kalıyordu: .bn.center bir