/* ============================================================
   bottom-tab-fix.css — BS-paralel mobile bottom-tab parity
   Audit: 2026-04-27 (rule §19 + §20, rule #130-#150)
   BS reference: m.bahissende301.com .tab-navigation-w-bc
   Owner: bottom-tab-fix agent. File ownership rule §0.30.
   ----
   Differences captured (BS = target):
     container: justify-content space-between, align-items center,
                z-index 950, box-shadow 0 -2px 10px rgba(0,0,0,.5),
                backdrop-filter blur(3px)
     items: padding 0 4px, font-size 16px, flex 0 1 auto, gap normal,
            height 49px, color rgba(255,255,255,.5)
     icons: color #fff, line-height 24px, height 24px
     labels: font-size 10px, line-height 14px
     active indicator: BS has none (top gold bar removed; color goes gold via .active)
   ============================================================ */

/* ===== Container ===== */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter,
html.mobile-root body.mobile-site div.tab-navigation-w-bc.mobFooter {
    /* BS: space-between + center alignment (not stretch) */
    justify-content: space-between !important;
    align-items: center !important;
    /* BS: z-index 950 (not 1105) */
    z-index: 950 !important;
    /* BS: shadow + backdrop blur */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
    /* BS: gap normal (== 0 for flex with space-between) */
    gap: normal !important;
    /* BS-paralel ITER 514: min-height calc consumes safe-area (no separate height + padding-bottom).
       BS extracted: min-height: calc(var(--tab-navigation-height) + env(safe-area-inset-bottom)). */
    min-height: calc(49px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 20px !important;
    background: rgb(18, 18, 18) !important;
    border-top: 0.8px solid rgb(210, 176, 56) !important;
    /* ITER 734 (2026-05-27) — BS-paralel: bottom-bar üst köşeler yuvarlak.
       BS audit: border-radius: 25px 25px 0 0. MR'da 0px idi. */
    border-radius: 25px 25px 0 0 !important;
}

/* ===== Items: 5 buttons (CANLI / BAHIS KUPONU / CASINO / DESTEK / MENU) ===== */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc,
html.mobile-root body.mobile-site .tab-navigation-w-bc .tab-nav-item-bc.mobFooter-item,
html.mobile-root body.mobile-site div.tab-navigation-w-bc.mobFooter .tab-nav-item-bc {
    /* BS: flex 0 1 auto + explicit width 72px (= (400-40 padding) / 5 items) */
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    width: 72px !important;
    min-width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    /* BS: padding 0 4px (horizontal, not vertical) */
    padding: 0 4px !important;
    /* BS: font-size 16px (default body) — labels are explicit 10px */
    font-size: 16px !important;
    font-weight: 400 !important;
    /* BS: gap normal between icon+label — BS wraps icon line-height 24 + label 14 */
    gap: normal !important;
    row-gap: normal !important;
    column-gap: normal !important;
    /* preserve display/flex/dir */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* BS: 50% white inactive */
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    text-transform: none !important;
    /* prevent label overflow visually but BS allows truncation via ellipsis */
    overflow: visible !important;
}

/* ===== Icon font glyphs (bc-i-*) ===== */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc .tab-nav-icon-bc,
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .mobFooter-item i {
    /* BS: 20px font-size (already match), 24px line-height (was 20), color #fff (was #ebebeb) */
    font-size: 20px !important;
    line-height: 24px !important;
    height: 24px !important;
    width: 20px !important;
    color: rgb(255, 255, 255) !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
}

/* ===== Labels (10px, line-height 14px) ===== */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc .tab-nav-title-bc,
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .mobFooter-item .mobFooter-label {
    /* BS: 10px font-size, 14px line-height (was 12) */
    font-size: 10px !important;
    line-height: 14px !important;
    /* BS: rgba(255,255,255,.5) inherited from item, label keeps color from parent */
    color: inherit !important;
    font-weight: 400 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
}

/* ===== Remove MR-specific top gold bar indicator (BS has no ::before) ===== */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc::before,
html.mobile-root body.mobile-site .tab-navigation-w-bc .tab-nav-item-bc.mobFooter-item::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* ===== Active state — BS uses color shift, no top bar ===== */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc.active,
html.mobile-root body.mobile-site .tab-navigation-w-bc .tab-nav-item-bc.mobFooter-item.active {
    color: var(--secondary, #D4AF37) !important;
}
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc.active .tab-nav-icon-bc,
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc.active i {
    color: var(--secondary, #D4AF37) !important;
}

/* ===== Tap feedback — preserve scale press effect ===== */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc:active,
html.mobile-root body.mobile-site .tab-navigation-w-bc .tab-nav-item-bc.mobFooter-item:active {
    transform: scale(0.94);
    transition: transform 0.1s ease;
}

/* ===== iOS safe-area inset (rule #147) — ITER 514: consumed via min-height calc above =====
   BS pattern: min-height: calc(49px + env(safe-area-inset-bottom)) instead of padding-bottom: env(...).
   Box model cleaner — Chrome paint catch-up during URL-bar collapse uses single height source. */

/* ============================================================
   ITER 241 — Brightness/tone match (kullanıcı: "soluk duruyorlar")
   BS computed: label parlaklığı ve kontrast MR'da düşük kalmış.
   Düzeltme: alpha 0.5 → 0.85, font-weight 400 → 500, antialias on.
   ============================================================ */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc,
html.mobile-root body.mobile-site .tab-navigation-w-bc .tab-nav-item-bc.mobFooter-item {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc .tab-nav-title-bc,
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .mobFooter-item .mobFooter-label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc .tab-nav-icon-bc,
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .mobFooter-item i {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================================
   ITER 513 (2026-05-17) — Chrome mobile position:fixed scroll-drift
   ------------------------------------------------------------
   User feedback ITER 512 revert: "scroll bile yapmadan siteye ilk
   girişte bu şekilde oldu görünüm. tamamen yanlış fix yöntemin ederhal
   geri al ve edaha mantıklı bişey bul" — aggressive `contain: layout
   paint` + `will-change: transform` + `transform-style: flat`
   combination created a new stacking context that broke slot card
   overlay layering, causing OYNA play-btn artifact to leak through.

   Minimal fix (ITER 415 logo-render pattern):
   - Use ONLY translateZ(0) + backface-visibility (proven safe in ITER 415)
   - NO `contain: paint` (creates paint clip + stacking context)
   - NO `will-change: transform` (redundant with translateZ, creates layer)
   - NO `transform-style: flat` (default value, no-op but explicit)

   translateZ(0) alone is enough to force Chrome Blink to allocate a
   dedicated compositor layer for .mobFooter, fixing position:fixed
   scroll-drift in `overflow-x: clip` body context, without the
   side-effects of the previous attempt.
   ============================================================ */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter,
html.mobile-root body.mobile-site div.tab-navigation-w-bc.mobFooter {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* ============================================================
   ITER 514 (2026-05-17) — BS-paralel min-height calc env pattern
   ------------------------------------------------------------
   User feedback ITER 513: "chromede scroll yapınca o kısım hiç
   aşağı inmese? bahissendede chromede hiç aşağı inmediğini
   göreceksin (ama safaride iniyor orası iyi)" — ITER 513 GPU
   layer alone (translateZ(0)) insufficient against Chrome
   mobile URL-bar collapse scroll-drift.

   BS extracted CSS (live m.bahissende302.com .tab-navigation-w-bc):
     position: fixed !important
     bottom: 0px !important
     transform: translateZ(0px) !important
     min-height: calc(var(--tab-navigation-height) + env(safe-area-inset-bottom)) !important
     padding: 0px 20px !important
     (NO height, NO padding-bottom: env)

   MR previously had:
     height: 49px !important
     min-height: 49px !important
     padding: 0 20px !important
     + @supports { padding-bottom: env(safe-area-inset-bottom, 0px) !important }

   Root cause:
   - height: 49px hard-locks content-box; padding-bottom env adds
     to total box outside the height constraint.
   - During Chrome URL-bar collapse the viewport grows ~50px in one
     paint frame. Fixed element re-anchors to new viewport bottom,
     but the split height (49px content + env padding) causes
     subpixel reflow lag — even with GPU layer the box geometry
     recalculates twice (height + padding-bottom).
   - BS bundles both into a single min-height calc → geometry
     stable in 1 step, layer translates clean.

   Fix (this iter): consolidate to BS pattern.
   - Remove `height: 49px !important` (was line ~33)
   - Replace `min-height: 49px` with `min-height: calc(49px + env(safe-area-inset-bottom, 0px))`
   - Remove `@supports { padding-bottom: env(...) }` block
   - Keep ITER 513 translateZ(0) + backface-visibility GPU layer

   Safari preservation:
   - env(safe-area-inset-bottom) still consumed (just via min-height
     now), iOS notch padding unchanged visually
   - No transform animation (ITER 515 mistake), no transition on
     transform (which broke Safari before)
   - Compositor layer behavior on Safari unchanged

   Expected result:
   - Chrome mobile: GPU layer + single height source → bottom-nav
     pinned during URL-bar collapse (no drift)
   - Safari iOS: unchanged (notch padding via min-height, no
     animation, no containing-block side effects)
   ============================================================ */