/* ============================================================ * header-init-fix.css — ITER 516 (2026-05-18) * * Purpose: hoist header-layout rules that used to live in the * lazy-loaded `login-register-final-fix.css` into an eagerly loaded * stylesheet so they apply at first paint, NOT on first GIRIS click. * * Problem before this file: * `login-register-final-fix.css` was loaded by `auth-modal-lazy.js` * on first GIRIS/KAYIT click. That file contains 36+ header rules * (`.mobileHeader-inner`, `.mobileHeader-actions`, `#smart-panel-holder`, * `#mobSmartPanel`) that override the eager `theme-robinbet-mobile.css` * defaults. So on first click, the lazy stylesheet appended to * , the cascade re-evaluated, and the header content visibly * snapped ~8px to the right: * - `.mobileHeader-inner` padding-right: 12px → 6px (–6px) * - `.mobileHeader-actions` gap: 8px → 7px (–2px aggregate) * - Plus `#smart-panel-holder` width/height changes * * User report (2026-05-18 verbatim): * "siteye ilk girişte giriş kayıt ol butonlarının olduğu headerin * görünümü bu şekilde ... ardından giriş butonuna basınca hepsi * anlık olarak sağ tarafa kayıyor" * * Fix: BaseLayout.astro now eagerly loads this file (unconditional, * for all visitors logged-out OR logged-in — header layout is the * same in both states). The lazy file still contains the same rules * to preserve backwards-compat with any code path that bypasses * BaseLayout; second load is a cascade no-op (same selectors + values). * * Source: rules verbatim from * frontend/mobile/assets/css/login-register-final-fix.css L216-359 * (ITER 86 / 91 / 94 / 96 / 105 / 274 / 275 origins preserved in * comments below for archaeology). * * Rule refs: rule #20 numerical proof (6+2=8px shift measured), * rule #21 mistake → rule (lazy CSS = first-paint shift), * rule #156 systemic audit (other lazy CSS files audited * for header rules — none found). * ============================================================ */ /* ITER 274 — header right action buttons closer to right edge. * BS: GIRIS/KAYIT/3-dot flush right with ~6px gap. * Was padding-right:0 (ITER 87) — bumped to 6px for BS-paralel breathing room. * Selector chain preserves specificity to override theme rule. */ html.mobile-root body.mobile-site .mobileHeader-inner, html.mobile-root body.mobile-site header.mobileHeader .mobileHeader-inner, html[lang] body .mobileHeader-inner, html[lang] body header.mobileHeader .mobileHeader-inner { padding-right: 6px !important; margin-right: 0 !important; display: flex !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; } /* ITER 96 — 3-dot button BS-paralel — MAX specificity (theme rule yenmek için). * Theme rule (1,3,2) eşitlikte load order'da kazanıyordu. Triple class + button tag spec bump. */ html.mobile-root body.mobile-site .mobileHeader-actions button#smart-panel-holder.hdr-toggle-button-bc.hdr-toggle-button-bc, html.mobile-root body.mobile-site .mobileHeader .mobileHeader-actions button#smart-panel-holder.hdr-toggle-button-bc, html.mobile-root body.mobile-site .mobileHeader-actions #smart-panel-holder.hdr-toggle-button-bc.hdr-toggle-button-bc.hdr-toggle-button-bc, html[lang] body .mobileHeader-actions button#smart-panel-holder.hdr-toggle-button-bc { width: 28px !important; height: 28px !important; background: rgba(255, 255, 255, 0.1) !important; border-radius: 50% !important; border: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; flex: 0 0 auto !important; /* ITER 431 "exact yap" — was margin:0 shorthand (1,5,3 spec) blocking * home-overlay-stack-fix.css §3b-gaps margin-left:6 (1,4,3 spec) via shorthand * longhand expansion. BS-exact KAYIT→3-nokta gap = 6px. Bake directly. */ margin: 0 0 0 6px !important; } /* Inner icon — ensure visible 3-dot glyph */ html.mobile-root body.mobile-site .mobileHeader-actions #smart-panel-holder > i.bc-i-vertical-toggle, html.mobile-root body.mobile-site #smart-panel-holder > i { font-size: 16px !important; color: rgba(255, 255, 255, 0.85) !important; line-height: 1 !important; display: inline-block !important; } /* ITER 105 — Duplicate 3-dot kaldır. * #smart-panel-holder::before bir CSS-only fallback 3-nokta yapıyor (box-shadow ile). * Aynı anda font glyph 3-nokta render eder. * Çift görünüm — pseudo'yu kapat, font icon kalsın. */ html.mobile-root body.mobile-site #smart-panel-holder::before, html.mobile-root body.mobile-site button#smart-panel-holder::before, html.mobile-root body.mobile-site .mobileHeader-actions #smart-panel-holder::before, html[lang] body #smart-panel-holder::before { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; width: 0 !important; height: 0 !important; } html.mobile-root body.mobile-site #smart-panel-holder::after, html[lang] body #smart-panel-holder::after { content: none !important; display: none !important; } /* ITER 94 (2026-04-XX) — mobSmartPanel (panel content div) 3-dot'tan SONRA * yer alıyordu 14px gap; bu div panel popup'i — sadece aktifken görünmeli. * Default'da position:absolute + visibility:hidden ile akıştan çıkar, kaymayı önler. * * SUPERSEDED by ITER 519 (2026-05-18 — three-dot-menu.css) * Wrapper is now an always-rendered BS-paralel pass-through container hosting * the 5-button vertical dropdown panel. The "no layout space" guarantee is now * provided by three-dot-menu.css §2 (display:block, position:static, width:0, * height:0, pointer-events:none) — the BS-exact approach. The descendant * .hdr-smart-panel-holder-arrow-bc is the actual panel (position:fixed, * opacity 0→1 with .is-open / body.smart-panel-is-visible toggle). * * Removing the `position: absolute + visibility: hidden + height: 0` block * unblocks the panel render. visibility:hidden was inheriting to descendants * and overriding three-dot-menu.css §4 open-state visibility:visible because * the BS toggle class (body.smart-panel-is-visible) doesn't propagate to this * ID-level rule (specificity (1,1,2) — IDs win even without !important). * * Companion fix: audit-fixes.css ITER 275 (display:none on same wrapper) also * removed — see that file. * * Cross-ref: rule #156 (systemic audit), rule #160 (EXACT KLONLA), rule #21 * (mistake→rule: ID-level visibility:hidden on a wrapper that gets re-purposed * later creates a hard-to-debug override conflict because IDs bypass * class-based specificity battles). */ /* (ITER 94 hide-rule + open-state pair intentionally removed — see above) */ /* ITER 86 — Header right group (GİRİŞ + KAYIT + 3-dot) sağa zorla yanaştır. * Önceki ITER 82 yetersiz (kullanıcı: 'hala yanaştırmamışsın'). * Fix: header padding-right:0, actions margin-left:auto + margin-right:0 + padding-right:2, * actions gap:4 (sıkışıklık), 3-dot last-child margin/padding right:0 zorla. * Why: BS'te actions container right edge'e dayalı, MR'da 14px+ gap vardı. */ html.mobile-root body.mobile-site header.mobileHeader, html.mobile-root body.mobile-site .mobileHeader, html[lang] body header.mobileHeader, html[lang] body .mobileHeader { padding-right: 0 !important; padding-left: 6px !important; } html.mobile-root body.mobile-site .mobileHeader-actions, html.mobile-root body.mobile-site header.mobileHeader .mobileHeader-actions, html[lang] body header.mobileHeader .mobileHeader-actions, html[lang] body .mobileHeader .mobileHeader-actions { margin-left: auto !important; margin-right: 0 !important; padding-right: 0 !important; /* ITER 275: BS-paralel — gap controlled by .mobileHeader-inner padding-right:6px (was 14px, compounded to 20px gap) */ padding-left: 0 !important; gap: 0 !important; /* ITER 431 "exact yap" — BS-exact: actions container gap=0, inter-button gaps via per-button margin-left (KAYIT=12, 3-nokta=6) in home-overlay-stack-fix.css §3b-gaps. Supersedes ITER 91 (gap:7). */ display: flex !important; align-items: center !important; justify-content: flex-end !important; position: relative !important; right: 0 !important; } html.mobile-root body.mobile-site .mobileHeader-actions > *:last-child, html.mobile-root body.mobile-site .mobileHeader-actions > #smart-panel-holder, html.mobile-root body.mobile-site .mobileHeader #smart-panel-holder, html[lang] body .mobileHeader-actions > *:last-child, html[lang] body .mobileHeader-actions > #smart-panel-holder, html[lang] body .mobileHeader #smart-panel-holder { margin-right: 0 !important; padding-right: 0 !important; } /* 3-dot button inner — herhangi bir margin/padding yutmasın */ html.mobile-root body.mobile-site .mobileHeader-actions #smart-panel-holder > *, html.mobile-root body.mobile-site .mobileHeader #smart-panel-holder button, html[lang] body .mobileHeader-actions #smart-panel-holder > *, html[lang] body .mobileHeader #smart-panel-holder button { margin-right: 0 !important; padding-right: 4px !important; }