/*
 * audit-fixes.css
 * Created: 2026-04-27
 * Source: AI_AUDIT_REPORTS/anasayfa-audit-20260427.md
 *
 * Purpose: Low-risk parity fixes detected during anasayfa 30+ category audit.
 * Owner: this file only. theme-robinbet-mobile.css is NOT modified (rule #30).
 * Scope: anasayfa (/tr/) — fixes are global selectors but minimum-impact.
 *
 * Audit findings addressed:
 *  - Bulgu 2.2: overscroll-behavior parity (MR auto contain -> BS none)
 *  - Bulgu 2.3: focus outline color leak (MR gold -> BS white-translucent)
 *  - Bulgu 2.4: FDS design token cascade missing on MR
 *
 * NOT addressed here (require deeper review):
 *  - Bulgu 2.1: transition-timing-function (would need !important on every
 *    component, high regression risk; defer to component-by-component fix)
 *  - Bulgu 2.5: section tree naming (PHP template rework, out of CSS scope)
 *
 * Smoke-test pending: not yet pushed to VPS.
 */

/* ==============================================================
 * Bulgu 2.2 — Overscroll behavior parity
 *
 * ITER 688 (2026-05-23) CORRECTION:
 * Önceki claim YANLIŞTI ("BS body: overscroll-behavior: none").
 * Canlı BS audit (m.bahissende305.com/tr/casino/slots, 2026-05-23):
 *   html.overscrollBehavior = auto
 *   body.overscrollBehavior = auto
 * BS PULL-TO-REFRESH AKTIF (kullanıcıyla teyit edildi).
 *
 * MR'da base.css body.mobile-site { overscroll-behavior-y:contain }
 * pull-to-refresh'i kapatıyordu. Specificity (0,0,1,1) önceki rule'u
 * (html,body = 0,0,0,1) yeniyor.
 *
 * Fix: html.mobile-root body.mobile-site (specificity 0,0,2,2) override
 * ile auto'ya çek. !important ile garanti. Pull-to-refresh aktif.
 * ============================================================== */
html.mobile-root body.mobile-site,
html.mobile-root,
html,
body {
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: auto !important;
}

/* ==============================================================
 * Bulgu 2.3 — Focus outline parity
 * BS focus rings: rgba(255,255,255,0.85)
 * MR focus rings: rgb(212,175,55) (theme gold leak on logo + nav)
 * Effect: keyboard nav consistency with BS
 * ============================================================== */
*:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
  outline-style: solid;
  outline-width: 2.4px;
  outline-offset: 1px;
}

/* Override theme-gold focus on specific MR header elements where leak
 * was confirmed in audit (mobileHeader-logo, hdr-btn-login, etc.) */
.mobileHeader-logo:focus-visible,
.hdr-btn-login:focus-visible,
.hdr-btn-register:focus-visible,
.hdr-toggle-button-bc:focus-visible,
.hdr-navigation-link-bc:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
}

/* ==============================================================
 * Bulgu 2.4 — FDS design token cascade
 * BS uses Frontend Design System (FDS) ref tokens for sizes,
 * weights, line-heights, letter-spacing. MR has none of them.
 * Effect: any component imported from BS that references --fds-ref-*
 * will silently fall back to initial; injecting same scale closes diff.
 * ============================================================== */
:root {
  /* Font sizes (BS scale) */
  --fds-ref-font-size-40: 8px;
  --fds-ref-font-size-50: 10px;
  --fds-ref-font-size-60: 12px;
  --fds-ref-font-size-70: 14px;
  --fds-ref-font-size-80: 16px;
  --fds-ref-font-size-90: 18px;
  --fds-ref-font-size-120: 24px;
  --fds-ref-font-size-160: 32px;
  --fds-ref-font-size-200: 40px;
  --fds-ref-font-size-240: 48px;
  --fds-ref-font-size-280: 56px;

  /* Font weights (BS scale) */
  --fds-ref-font-weight-regular: 400;
  --fds-ref-font-weight-medium: 500;
  --fds-ref-font-weight-semibold: 600;
  --fds-ref-font-weight-bold: 700;

  /* Letter spacing */
  --fds-ref-letter-spacing-none: 0;
  --fds-ref-letter-spacing-320: 0.4px;

  /* Line heights — full BS scale (captured live tab 1067854104 2026-05-12, 10 values) */
  --fds-ref-font-line-height-60:  12px;
  --fds-ref-font-line-height-70:  14px;
  --fds-ref-font-line-height-80:  16px;
  --fds-ref-font-line-height-100: 20px;
  --fds-ref-font-line-height-120: 24px;
  --fds-ref-font-line-height-160: 32px;
  --fds-ref-font-line-height-200: 40px;
  --fds-ref-font-line-height-240: 48px;
  --fds-ref-font-line-height-320: 64px;
  --fds-ref-font-line-height-360: 72px;

  /* ITER 277 §E port (2026-05-12) — 55 missing fds-ref tokens captured from BS
   * tab 1067854104 via getComputedStyle(documentElement) iteration.
   * Closes §E delta (MR 18→76 fds-ref tokens, BS parity). */

  /* Alpha scale (BS opacity tokens, 14 values 0.02–1.0) */
  --fds-ref-alpha-2:   0.02;
  --fds-ref-alpha-4:   0.04;
  --fds-ref-alpha-8:   0.08;
  --fds-ref-alpha-12:  0.12;
  --fds-ref-alpha-16:  0.16;
  --fds-ref-alpha-24:  0.24;
  --fds-ref-alpha-32:  0.32;
  --fds-ref-alpha-48:  0.48;
  --fds-ref-alpha-56:  0.56;
  --fds-ref-alpha-64:  0.64;
  --fds-ref-alpha-72:  0.72;
  --fds-ref-alpha-80:  0.8;
  --fds-ref-alpha-90:  0.9;
  --fds-ref-alpha-100: 1;

  /* Border tokens (BS style + widths) */
  --fds-ref-border-style-solid:   solid;
  --fds-ref-border-width-dashed:  dashed;
  --fds-ref-border-width-none:    0;
  --fds-ref-border-width-thin:    1px;
  --fds-ref-border-width-thick:   2px;
  --fds-ref-border-width-thicker: 4px;

  /* Radius scale (BS 9 values 0–999px) */
  --fds-ref-radius-none:    0px;
  --fds-ref-radius-4xsmall: 2px;
  --fds-ref-radius-3xsmall: 4px;
  --fds-ref-radius-2xsmall: 6px;
  --fds-ref-radius-xsmall:  8px;
  --fds-ref-radius-small:   10px;
  --fds-ref-radius-medium:  12px;
  --fds-ref-radius-large:   16px;
  --fds-ref-radius-full:    999px;

  /* Spacing scale (BS 20 values 0–80px + 2xsmall-nudge=5px outlier) */
  --fds-ref-spacing-none:          0px;
  --fds-ref-spacing-4xsmall:       2px;
  --fds-ref-spacing-3xsmall:       4px;
  --fds-ref-spacing-2xsmall-nudge: 5px;
  --fds-ref-spacing-2xsmall:       6px;
  --fds-ref-spacing-xsmall:        8px;
  --fds-ref-spacing-small:         10px;
  --fds-ref-spacing-medium:        12px;
  --fds-ref-spacing-large:         16px;
  --fds-ref-spacing-xlarge:        20px;
  --fds-ref-spacing-2xlarge:       24px;
  --fds-ref-spacing-3xlarge:       28px;
  --fds-ref-spacing-4xlarge:       32px;
  --fds-ref-spacing-5xlarge:       36px;
  --fds-ref-spacing-6xlarge:       40px;
  --fds-ref-spacing-7xlarge:       44px;
  --fds-ref-spacing-8xlarge:       48px;
  --fds-ref-spacing-9xlarge:       56px;
  --fds-ref-spacing-10xlarge:      64px;
  --fds-ref-spacing-11xlarge:      80px;
}

/* ==============================================================
 * ITER 274 → ITER 430 → ITER 431 (BS-EXACT, 2026-05-18)
 * History:
 *  ITER 274: header tightened to ~6px edge gap (MR-only)
 *  ITER 430: user "bir tık sağa" → padding-right 2px (overshoot, 0px gap)
 *  ITER 431: user "exact yap" → revert to BS-exact via rule #160
 * Authoritative source now: home-overlay-stack-fix.css §3b (full BS-exact block):
 *   - outer .mobileHeader padding: 0
 *   - .mobileHeader-inner padding: 0 14px 0 7px
 *   - .mobileHeader-actions gap: 0, KAYIT margin-left:12, 3-nokta margin-left:6
 *   - GIRIS/KAYIT letter-spacing: normal
 * This rule kept ONLY as documentary comment; actual values overridden upstream.
 * smartPanel margin retained for ITER 275 hide-flow (display:none separately).
 * ============================================================== */
.mobileHeader-smartPanel { margin-left: 2px; }

/* ==============================================================
 * ITER 275 (2026-04-XX) — Hide empty/broken .mobileHeader-smartPanel wrapper
 *   Original problem: wrapper contained a hidden notification bell button,
 *   rendered as a ~3px ghost slot, pushed the 3-dot button 14px+ from right edge.
 *
 * SUPERSEDED by ITER 519 (2026-05-18 — three-dot-menu.css)
 *   The wrapper is now the BS-exact host for a 5-button vertical dropdown panel
 *   (notification / favorite / settings / live-chat / betslip — BetConstruct-Icons
 *   font glyphs U+E94E / U+E93B / U+E96A / U+EA1B / U+E936). The wrapper itself
 *   is a pass-through positioning container (width:0, height:0, position:static,
 *   pointer-events:none) per three-dot-menu.css §2 — it no longer pushes anything.
 *   The actual panel is its descendant .hdr-smart-panel-holder-arrow-bc
 *   (position:fixed, top:114px, right:5px, 50x280, opacity 0→1 on open).
 *
 *   Removing `display: none !important` here unblocks the panel render. The
 *   previous "no visual space" guarantee is preserved by three-dot-menu.css §2.
 *
 *   Companion fix: header-init-fix.css ITER 94 (visibility:hidden on same wrapper)
 *   also needs to be neutralized — see that file.
 *
 * Cross-ref: rule #156 (systemic audit), rule #160 (EXACT KLONLA), rule #21
 *   (mistake→rule: ITER 275's blanket display:none collided with ITER 519
 *   wrapper-reuse; future hide-rules must target the empty-state element, not
 *   the structural wrapper).
 * ============================================================== */
/* (ITER 275 hide-rule intentionally removed — see comment above) */

/* ============================================================== */
/* ITER 332 — Logged-in body class state flag (BS-paralel)         */
/* Used to differentiate post-login styling from logged-out.       */
/* BaseLayout.astro adds `is-logged-in` to body when member_jwt    */
/* cookie is present + length > 20 (structural sanity).            */
/* ============================================================== */
body.mobile-site.is-logged-in .mobileHeader-balance {
  display: flex !important;
}

/* ITER 572 (rev5 2026-05-23) — FULL EXACT BS match.
 *
 * Live measurement summary (BS vs MR):
 *   - BS: logo wrapper 249.48px wide (image 100 + 149px whitespace)
 *   - MR: logo wrapper 100px only → 162px BIG empty gap to balance
 *   - BS: hdr-user-bc (balance+avatar) compact 30.40px tall
 *   - MR: mobileHeader-actions tall 44px (includes smart panel)
 *   - BS: balance→avatar TOUCHING (0px gap)
 *   - BS: bal-wrap.user-balance-dropdown height=14.40 (text only)
 *   - MR: #mobileHeaderBalanceWrap height=44 (parent inherited)
 *
 * Comprehensive fix:
 *   1. Balance margin-right 0 ✓ (BS-paralel)
 *   2. Balance wrap height auto (no implicit 44px) — content-sized
 *   3. Actions wrapper height auto (let content decide)
 *   4. Logo wrapper flex-grow:1 + margin-right:5px (BS-paralel wide)
 *   5. Currency margin-left 0 (BS touching, no breathing room)
 */
#mobileHeaderBalanceWrap,
html.mobile-root body.mobile-site #mobileHeaderBalanceWrap,
html.mobile-root body.mobile-site .mobileHeader #mobileHeaderBalanceWrap {
  margin-right: 6px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* Logo wrapper — BS-paralel: expand to fill space.
 * BS .logo-container w=249.48 (image 100 + whitespace 149) + margin-right:5px.
 * MR .mobileHeader-logo was 100px → 162px gap to balance. fix: flex-grow:1 +
 * margin-right:5px → wrapper auto-expands to match BS layout. */
html.mobile-root body.mobile-site .mobileHeader-logo {
  flex: 1 1 auto !important;
  margin-right: 5px !important;
}

/* Currency symbol — BS-paralel: ayrı <span>.currencySymbol element.
 * BS: .balanceAmount + .currencySymbol (touching, no margin). */
html.mobile-root body.mobile-site #mobileHeaderBalanceWrap .currencySymbol {
  font-weight: 500 !important;
  font-size: 12px !important;
  color: rgb(255, 255, 255) !important;
  margin-left: 0 !important;
  display: inline !important;
}
body.mobile-site:not(.is-logged-in) .mobileHeader-balance {
  display: none !important;
}
body.mobile-site:not(.is-logged-in) .mobileHeader-actions .hdr-btn-login,
body.mobile-site:not(.is-logged-in) .mobileHeader-actions .hdr-btn-register {
  display: inline-flex !important;
}
body.mobile-site.is-logged-in .mobileHeader-actions .hdr-btn-login,
body.mobile-site.is-logged-in .mobileHeader-actions .hdr-btn-register {
  display: none !important;
}

/* ITER 332 — Hot jackpot pool animated rotating border             */
/* BS-paralel: bs-reference custom.css:416-436 conic gradient ring  */
@property --qa-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes qaRotate {
  from { --qa-angle: 0deg; }
  to   { --qa-angle: 360deg; }
}
body.mobile-site .hot-jackpot-pool {
  position: relative !important;
}
body.mobile-site .hot-jackpot-pool::before {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: inherit !important;
  background: conic-gradient(from var(--qa-angle), rgba(212,175,55,1) 0%, rgba(212,175,55,0.1) 30%, rgba(212,175,55,1) 50%, rgba(212,175,55,0.1) 70%, rgba(212,175,55,1) 100%) !important;
  animation: qaRotate 4s linear infinite !important;
  z-index: -1 !important;
}