/* ---- 00-tokens.css ---- */
/*
 * Aquabet modern layer — design tokens.
 * Loaded LAST in <head> (inc/aqua/_head.php) and kept UNLAYERED on purpose:
 * layered normal rules lose to every existing unlayered rule.
 *
 * Scope prefix for every rule in this layer:  html body.gm-sidebar-layout
 * (present on all _head.php pages; absent on /sports, payment forms and the
 * standalone withdraw page).
 *
 * Member pages (/hesabim kasa, /profile/*, game.php, cark.php) also carry
 * gm-sidebar-layout and cannot be previewed, so:
 *  - shared chrome (announce bar, header.topbar, footer.site-footer,
 *    nav.gm-bottombar, #authModal, FAB, .bg-aurora) may be restyled globally;
 *  - CONTENT rules must be scoped positively to the storefront roots
 *    :is(main.page-shell, div.legal-page, main.gm-404) and never use bare
 *    element/generic selectors (button, input, .btn-primary, .active, ...).
 *
 * New tokens are --am-* (nothing outside this layer consumes them). The
 * theme's legacy aliases (--panel, --line, ...) are re-pointed only on the
 * storefront roots + chrome (see bottom), so member content keeps its look.
 *
 * Design language v2 ("flat", 2026-10-21), applied by every partial:
 *  - Surfaces are separated by TONE, not lines: page --am-bg, then
 *    --am-surface-1 (cards, panels, chips at rest), --am-surface-2 (chips
 *    and buttons inside a panel, hover lift of a card), --am-surface-3
 *    (hover of a chip already on surface-2, active segment). Fills are flat
 *    colours; --am-grad-card / --am-grad-soft are kept as names but resolve
 *    to flat fills, so a missed consumer still renders flat.
 *  - No 1px border on cards, chips, pills, panels or footer items. Where a
 *    border was part of the box geometry (pill heights, the 44px hit-area
 *    maths) it stays as "1px solid transparent", so nothing moves.
 *    Hairlines (--am-line) remain only as dividers inside a surface (table
 *    rows, list separators, the scrolled header edge). Text inputs are
 *    the one exception with a visible edge at rest (--am-field-line, 3:1
 *    against the surface-1 panel, WCAG 1.4.11), brighter on hover. Floating overlays (dropdown, modals, sheets, toast) keep a dark
 *    drop shadow for lift.
 *  - Hover = a small tone lift (surface-1 -> 2 -> 3, or a text colour
 *    change); never a cyan ring or glow. --am-glow resolves to a transparent
 *    shadow for that reason.
 *  - Cyan is for state and action only: the primary CTA fill (--am-grad,
 *    near-solid), active chips (--am-tint), icons, links, focus rings
 *    (--am-focus). Only primary CTAs carry a soft coloured drop shadow
 *    (--am-cta-shadow); small gradient badges and the play disc carry none.
 *  - Type: page titles --am-fs-title (32px phones -> 48px wide desktop,
 *    800, -.03em), section titles --am-fs-section (20 -> 28px, 800), no
 *    accent bar before section titles.
 *  - Whitespace: --am-section-gap 32 / 48 / 64, --am-card-gap 10 / 12 / 16 /
 *    20 (12-cards.css).
 */
html body.gm-sidebar-layout {
  /* Surfaces: deep ocean. v2 steps are a little wider apart than v1
     (#071823/#0b2131/#112c40) because tone now does the job hairlines did. */
  --am-bg: #030c13;
  --am-bg-rgb: 3 12 19;
  --am-surface-1: #0a1c29;
  --am-surface-1-rgb: 10 28 41;
  --am-surface-2: #0f2536;
  --am-surface-2-rgb: 15 37 54;
  --am-surface-3: #163246;
  --am-surface-3-rgb: 22 50 70;
  --am-overlay: rgb(2 9 15 / .72);

  /* Hairlines: dividers only (see the v2 rules above). */
  --am-line: rgb(150 215 240 / .07);
  --am-line-2: rgb(150 215 240 / .13);
  --am-line-accent: rgb(0 229 255 / .32);
  /* --am-line composited over --am-bg: for a hairline painted over
     scrolling content (the stuck lobby band, 25-lobby.css). */
  --am-line-solid: #0d1a22;
  /* Text-field edge at rest: composited over the --am-bg well it is
     #4a6d7d, 3.1:1 against --am-surface-1 (the auth dialog and reset
     card) and 3.5:1 against the well, so a field reads as a field before
     it is focused (focus keeps the cyan border + ring). */
  --am-field-line: rgb(150 215 240 / .48);
  --am-field-line-hover: rgb(150 215 240 / .64);

  /* Text. --am-text-3 is >= 4.5:1 on every surface up to surface-3
     (#7f9bad: 6.8 on bg, 5.9 on s1, 5.4 on s2, 4.6 on s3). */
  --am-text: #eef8fc;
  --am-text-2: #a9c4d3;
  --am-text-3: #7f9bad;

  /* Brand (unchanged hues: logo cyan + ocean blue) */
  --am-accent: #00e5ff;
  --am-accent-rgb: 0 229 255;
  --am-accent-2: #0ea5e9;
  --am-accent-2-rgb: 14 165 233;
  --am-accent-deep: #0077b6;
  --am-on-accent: #02131c;
  /* Primary CTA fill: near-solid cyan (a short top-to-bottom tonal step
     instead of v1's three-stop diagonal sheen). */
  --am-grad: linear-gradient(180deg, #34e7fb 0%, #10c4ec 100%);
  --am-grad-hover: linear-gradient(180deg, #5eeefc 0%, #25d0f1 100%);
  /* Flat cyan tint for active chips, icon tiles and selected rows. */
  --am-tint: rgb(0 229 255 / .12);
  --am-tint-2: rgb(0 229 255 / .18);
  /* Legacy names kept for any consumer that was missed: both are flat now. */
  --am-grad-soft: var(--am-tint);
  --am-grad-card: var(--am-surface-1);
  --am-success: #34d399;
  --am-danger: #f87171;
  --am-warn: #fbbf24;

  /* Radii */
  --am-r-xs: 8px;
  --am-r-sm: 10px;
  --am-r-md: 14px;
  --am-r-lg: 20px;
  --am-r-xl: 28px;
  --am-r-pill: 999px;

  /* Spacing (4px grid) */
  --am-s-1: 4px;
  --am-s-2: 8px;
  --am-s-3: 12px;
  --am-s-4: 16px;
  --am-s-5: 20px;
  --am-s-6: 24px;
  --am-s-7: 32px;
  --am-s-8: 40px;
  --am-s-9: 48px;
  --am-s-10: 64px;

  /* Layout: one container for header, content and footer */
  --am-container: 1320px;
  --am-gutter: 16px;
  --am-section-gap: 32px;

  /* Type */
  --am-font: "AM Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --am-font-num: "Rajdhani", "AM Inter", "Inter", sans-serif;
  --am-fs-2xs: 11px;
  --am-fs-xs: 12px;
  --am-fs-sm: 13px;
  --am-fs-base: 14px;
  --am-fs-md: 15px;
  --am-fs-lg: 17px;
  --am-fs-xl: 20px;
  --am-fs-2xl: 24px;
  /* Page title: 32px up to ~500px, 40 at 1024, 44.5 at 1280, 47 at 1440,
     48 from ~1500. Section title: 20px phones, 24.5 at 901, 27 at 1201,
     28 from ~1280. */
  --am-fs-title: clamp(32px, 1.6vw + 24px, 48px);
  --am-fs-section: clamp(20px, .9vw + 16.5px, 28px);
  --am-fs-3xl: var(--am-fs-title);   /* v1 name, still read by the page titles */
  --am-title-weight: 800;
  --am-title-track: -.03em;
  --am-section-track: -.025em;

  /* Elevation: floating overlays only (cards are flat). */
  --am-shadow-1: 0 1px 2px rgb(0 0 0 / .22);
  --am-shadow-2: 0 10px 28px rgb(0 0 0 / .38);
  --am-shadow-3: 0 24px 60px rgb(0 0 0 / .55);
  --am-glow: 0 0 0 0 transparent;    /* v1 hover glow, retired (kept valid inside shadow lists) */
  --am-cta-shadow: 0 4px 14px -6px rgb(var(--am-accent-2-rgb) / .45);
  --am-cta-shadow-hover: 0 6px 18px -6px rgb(var(--am-accent-2-rgb) / .55);
  --am-focus: 0 0 0 2px var(--am-bg), 0 0 0 4px rgb(0 229 255 / .75);

  /* Motion */
  --am-ease: cubic-bezier(.2, .7, .2, 1);
  --am-dur: .18s;

  /* Floating UI (FAB, toasts) sits this far above the bottom edge.
     10-chrome.css restates it at <=900px relative to the bottom bar. */
  --am-float-bottom: 24px;
}

/* Legacy aliases re-pointed to the new palette, storefront roots + chrome only. */
html body.gm-sidebar-layout :is(.gm-topbar-announce, header.topbar, main.page-shell, div.legal-page, main.gm-404, footer.site-footer, nav.gm-bottombar, #authModal) {
  --bg-0: var(--am-bg);
  --bg-1: var(--am-surface-1);
  --bg-2: var(--am-surface-2);
  --panel: var(--am-surface-1);
  --panel-2: var(--am-surface-2);
  --panel-strong: var(--am-surface-2);
  --line: var(--am-line-2);          /* v2: leftover theme borders stay calm (was the cyan --am-line-accent) */
  --line-soft: var(--am-line);
  --shadow: var(--am-shadow-2);
  --gm-radius: var(--am-r-md);
  --muted: var(--am-text-2);
  --text: var(--am-text);
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout {
    --am-gutter: 24px;
    --am-section-gap: 48px;
  }
}

@media (min-width: 1201px) {
  html body.gm-sidebar-layout {
    --am-gutter: 32px;
    --am-section-gap: 64px;
  }
}

/* ---- 01-fonts.css ---- */
/*
 * "AM Inter": the self-hosted Inter variable files (already shipped and cached
 * under /assets/aqua/fonts) declared once with the full weight axis, so
 * 550/650/750 render true instead of snapping. Same URLs and unicode-range as
 * google-fonts-inter.css; latin + latin-ext keep Turkish glyphs and ₺.
 */
@font-face {
  font-family: "AM Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/aqua/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "AM Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/aqua/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 05-base.css ---- */
/*
 * Base: page canvas, typography defaults, focus, selection, shared buttons.
 * Element/generic selectors are scoped to the storefront roots + chrome
 * (member pages share _head.php, see 00-tokens.css). :where() keeps the
 * defaults at low specificity so every component rule still wins, while
 * staying unlayered so it beats the legacy Cinzel/Gilroy rules that
 * aqua-profile-legacy.css (@layer aqua-legacy) applies on gm-arwen-page pages.
 *
 * Hard bans on html/body in this layer: transform, filter, perspective,
 * contain, will-change, backdrop-filter (break position:fixed #game-stage,
 * .topbar, .gm-bottombar) and overflow-x:hidden on both (breaks the sticky
 * member .dash-sidebar; use overflow-x:clip on body if ever needed).
 */
html body.gm-sidebar-layout {
  background-color: var(--am-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: rgb(var(--am-accent-rgb) / .28) transparent;
}

html body.gm-sidebar-layout :is(.gm-topbar-announce, header.topbar, main.page-shell, div.legal-page, main.gm-404, footer.site-footer, nav.gm-bottombar, #authModal) {
  font-family: var(--am-font);
  font-feature-settings: "cv11", "ss01";
}

:where(html body.gm-sidebar-layout) :where(main.page-shell, div.legal-page, main.gm-404, #authModal, footer.site-footer) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--am-font);
  font-variant: normal;
  letter-spacing: -.02em;
  text-wrap: balance;
}

:where(html body.gm-sidebar-layout) :where(main.page-shell, div.legal-page, main.gm-404, #authModal, header.topbar, footer.site-footer, nav.gm-bottombar) :is(button, input, select, textarea) {
  font-family: var(--am-font);
}

:where(html body.gm-sidebar-layout) ::selection {
  background: rgb(var(--am-accent-rgb) / .32);
  color: #fff;
}

:where(html body.gm-sidebar-layout) :where(main.page-shell, div.legal-page, main.gm-404, #authModal, header.topbar, footer.site-footer, nav.gm-bottombar) :is(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .8);
  outline-offset: 2px;
}

/* Shared primary button, storefront roots + auth modal only (Bootstrap
   history pages and deposit-ocean scopes also use .btn-primary).
   v2: near-solid cyan fill, the soft CTA shadow, no inset sheen. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404, #authModal) :is(.btn-primary, .gm-btn-gold) {
  background: var(--am-grad);
  color: var(--am-on-accent);
  border: 0;
  border-radius: var(--am-r-pill);
  font-family: var(--am-font);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--am-cta-shadow);
}
/* Motion is opt-in across the layer (same selector, so same weight). */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404, #authModal) :is(.btn-primary, .gm-btn-gold) {
    transition: background var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), transform var(--am-dur) var(--am-ease);
  }
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404, #authModal) :is(.btn-primary, .gm-btn-gold):hover {
  background: var(--am-grad-hover);
  box-shadow: var(--am-cta-shadow-hover);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404, #authModal) :is(.btn-primary, .gm-btn-gold):active {
  transform: translateY(1px);
}

/* ---- 10-chrome.css ---- */
/*
 * Chrome: announcement bar, fixed header (guest + member cluster), desktop
 * nav, account dropdown, mobile drawer + hamburger (built by 10-chrome.js),
 * bottom tab bar, .bg-aurora, and the fixed-chrome geometry tokens.
 *
 * Shared chrome is restyled globally (member pages too), always through
 * "html body.gm-sidebar-layout header.topbar|nav.gm-bottombar|..." so the
 * legacy /sports header (same class names, no gm-sidebar-layout) is untouched.
 *
 * Cascade notes (competitors are head files, we load later):
 *  - member-chrome <=980/640/380 forces guest buttons with (0,4,0)-(0,5,0)
 *    !important and the logo with (0,2,1) !important; the rules marked
 *    "!important" below mirror those properties with higher specificity.
 *  - Every property set here is set at all widths (mobile-first, then 601 /
 *    901 / 1024 / 1201), which neutralises the legacy 380/600/640/900/980/
 *    1200/1600 chrome bands for those properties.
 *  - Nothing here forces display with !important; [hidden] (dropdown, drawer)
 *    keeps winning via the theme's [hidden]{display:none!important}.
 *  - Member shells (body > .dash-shell) are full width: from 901px the header
 *    row, the announce close button and the footer shell (50-footer.css)
 *    follow the shell padding (--am-chrome-member-x) instead of the 1320px
 *    container. Chrome only; member content is not touched.
 *  - Guest auth buttons, the hamburger and the announce close carry
 *    transparent pseudo-element hit areas (44px touch targets).
 *  - Design language v2 (00-tokens.css header): flat announcement strip,
 *    no resting header hairline (it appears with the scrolled shadow),
 *    filled surface-2 pills instead of outlined ones (1px borders kept
 *    transparent where the 44px hit-area maths counts them), cyan only on
 *    the primary CTA, icons, active states and focus. The bottom bar is a
 *    flat surface-1 dock; its centre CTA keeps the soft CTA shadow.
 */

/* ---- Geometry tokens ------------------------------------------------------
   Real fixed-chrome heights. body padding-top/bottom, the html scroll-padding
   (the single in-page scroll offset, below) and the catalog sticky band all
   read these, so they must match the boxes below.
   Bottom bar is docked flush: 64px + safe area, counted once.
   The announcement strip is 30px at every width (its one text line is
   27-simplify.css; the height is kept so nothing that reads --gm-top moves). */
html body.gm-sidebar-layout {
  --gm-announce: 30px;
  --gm-header: 56px;
  --gm-top: calc(var(--gm-announce) + var(--gm-header));
  --gm-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  --am-float-bottom: calc(var(--gm-bottom) + 12px);
  --am-chrome-logo-h: clamp(22px, 6.2vw, 24px);
  --am-chrome-brand-min: 72px;
  --am-chrome-btn-h: 36px;
  --am-chrome-gap: 6px;
  --am-chrome-row-gap: 8px;
  --am-chrome-nav-fs: 13px;
  --am-chrome-nav-px: 9px;
  --am-chrome-nav-icon: none;
}
/* html carries the viewport scroll-padding (theme: html{scroll-padding-top:
   calc(var(--gm-top) + 20px)}), so it gets the same values. */
html:has(> body.gm-sidebar-layout) {
  --gm-announce: 30px;
  --gm-header: 56px;
  --gm-top: calc(var(--gm-announce) + var(--gm-header));
}
html body.gm-sidebar-layout.gm-no-announce,
html:has(> body.gm-sidebar-layout.gm-no-announce) {
  --gm-announce: 0px;
}
/* ---- In-page scroll offset (one offset, owned here with --gm-top) --------
   The viewport scroll-padding on html is THE offset that clears the fixed
   chrome: hash links, scrollIntoView() and keyboard focus scrolling all
   honour it (same formula as the theme's own html rule, so without :has()
   nothing changes). The theme also gives :target scroll-margin-top:
   calc(var(--gm-top) + 20px); margin and padding add up, so a storefront
   target landed --gm-top + 40px below the header bottom. That margin is
   zeroed on the storefront roots only. Member pages keep the live
   behaviour on purpose (the /hesabim finance panels carry their own
   scroll-margin in aqua-hesabim.css / aqua-member-chrome.css, and their
   deep links and scrollIntoView() must land where they do today). A
   component that wants a deliberate extra nudge sets scroll-margin at
   higher weight (40-content: legal cards +4px from 601px). */
html:has(> body.gm-sidebar-layout) {
  scroll-padding-top: calc(var(--gm-top) + 20px);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) :target {
  scroll-margin-top: 0;
}

/* Sub-360 phones (320/340): tighter row so logo + auth still fit. */
@media (max-width: 359.98px) {
  html body.gm-sidebar-layout {
    --am-chrome-gap: 4px;
    --am-chrome-row-gap: 6px;
  }
}

@media (min-width: 901px) {
  html body.gm-sidebar-layout {
    --gm-announce: 30px;
    --gm-header: 64px;
    --gm-bottom: 0px;
    --am-float-bottom: 24px;
    --am-chrome-logo-h: 26px;
    --am-chrome-btn-h: 40px;
    --am-chrome-gap: 8px;
    --am-chrome-row-gap: 16px;
  }
  /* The member cluster is ~150px wider than Giriş/Kayıt: tighter nav. */
  html body.gm-sidebar-layout[data-auth-logged-in="1"] {
    --am-chrome-nav-fs: 12.5px;
    --am-chrome-nav-px: 8px;
  }
  html:has(> body.gm-sidebar-layout) {
    --gm-announce: 30px;
    --gm-header: 64px;
  }
  html body.gm-sidebar-layout.gm-no-announce,
  html:has(> body.gm-sidebar-layout.gm-no-announce) {
    --gm-announce: 0px;
  }
}

/* Desktop nav sizing per band (labels always visible; icons when they fit). */
@media (min-width: 1024px) {
  html body.gm-sidebar-layout {
    --am-chrome-logo-h: 28px;
    --am-chrome-row-gap: 20px;
    --am-chrome-nav-fs: 13.5px;
    --am-chrome-nav-px: 12px;
    --am-chrome-nav-icon: inline-block;
  }
  html body.gm-sidebar-layout[data-auth-logged-in="1"] {
    --am-chrome-nav-fs: 13px;
    --am-chrome-nav-px: 9px;
    --am-chrome-nav-icon: none;
  }
}
@media (min-width: 1201px) {
  html body.gm-sidebar-layout {
    --am-chrome-logo-h: 30px;
    --am-chrome-row-gap: 28px;
  }
  html body.gm-sidebar-layout[data-auth-logged-in="1"] {
    --am-chrome-nav-fs: 13.5px;
    --am-chrome-nav-px: 12px;
  }
}
@media (min-width: 1280px) {
  html body.gm-sidebar-layout[data-auth-logged-in="1"] {
    --am-chrome-nav-icon: inline-block;
  }
}

/* ---- Ambient background ---------------------------------------------------
   v2: the flat deep-ocean canvas. Only a faint ocean-blue wash stays at the
   very top (no cyan glow under the header), so surfaces read by tone. */
html body.gm-sidebar-layout > .bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 36% at 50% -10%, rgb(0 119 182 / .07) 0%, rgb(0 119 182 / 0) 70%),
    var(--am-bg);
  animation: none;
}

/* ---- Announcement bar -----------------------------------------------------
   Slim 30px strip above the header: box, colours, close button and the
   geometry tokens live here; the text line itself (one line at every width,
   static ellipsis or JS marquee) is 27-simplify.css. 11.5px below 901px
   (12px from 901). z-index 101 lets the 32px close target reach 2px into
   the header's empty top edge. */
html body.gm-sidebar-layout .gm-topbar-announce {
  position: fixed;
  inset: 0 0 auto;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--gm-announce);
  margin: 0;
  padding: 0 40px 0 var(--am-gutter);
  overflow: visible;
  border: 0;
  background: var(--am-surface-1);
  box-shadow: none;
  color: var(--am-text-2);
  font: 500 11.5px/1.2 var(--am-font);
  letter-spacing: 0;
  text-align: center;
}
html body.gm-sidebar-layout.gm-no-announce .gm-topbar-announce {
  display: none;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-track i {
  display: none;
  margin-right: 7px;
  color: rgb(var(--am-accent-rgb) / .8);
  font-size: 11px;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-track strong {
  color: var(--am-accent);
  font-weight: 650;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close {
  position: absolute;
  top: 0;
  right: 2px;
  display: grid;
  justify-items: center;
  align-items: start;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: calc((var(--gm-announce) - 20px) / 2) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--am-text-2);
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 44px wide touch target: extends left only (the button sits at the
   viewport edge, and the strip text has no links). */
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close::before {
  content: "";
  position: absolute;
  inset: 0 0 0 -12px;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--am-surface-2);
  font-size: 10px;
  line-height: 1;
}
@media (hover: hover) {
  html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close:hover i {
    background: var(--am-surface-3);
    color: var(--am-text);
  }
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close:focus-visible {
  outline: none;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close:focus-visible i {
  box-shadow: var(--am-focus);
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-track i {
    display: inline;
  }
}
/* From 901px the close icon (20px, centred in the 32px button) ends on the
   header's content edge: --am-chrome-ann-x is that edge's distance from the
   viewport side (gutter, or half the space beside the 1320px container;
   member shells use their own padding). The text keeps clear of it on both
   sides, so it stays centred. 100% = the fixed bar's width = the viewport. */
@media (min-width: 901px) {
  html body.gm-sidebar-layout .gm-topbar-announce {
    --am-chrome-ann-x: max(var(--am-gutter), (100% - var(--am-container)) / 2);
    padding: 0 calc(var(--am-chrome-ann-x) + 36px);
    font-size: 12px;
  }
  html body.gm-sidebar-layout:has(> .dash-shell) .gm-topbar-announce {
    --am-chrome-ann-x: var(--am-chrome-member-x);
  }
  html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close {
    right: calc(var(--am-chrome-ann-x) - 6px);
  }
}

/* ---- Header shell ---------------------------------------------------------
   Full-bleed fixed bar (no floating card). Solid below 901px (no blur on
   phones); glass only on desktop. The two legacy scroll handlers disagree
   between 36-48px and toggle .scrolled on/off/on, so .scrolled is pinned to
   the resting look and the deeper "scrolled" look keys on
   [data-am-scrolled="1"], set by 10-chrome.js from one threshold.
   v2: the 1px bottom border is transparent at rest (the bar sits on the
   page tone) and turns into the hairline with the scrolled shadow. */
html body.gm-sidebar-layout header.topbar {
  position: fixed;
  top: var(--gm-announce);
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 100;
  height: var(--gm-header);
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: rgb(var(--am-bg-rgb) / .96);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}
html body.gm-sidebar-layout header.topbar.scrolled {
  top: var(--gm-announce);
  height: var(--gm-header);
  border-bottom-color: transparent;
  background: rgb(var(--am-bg-rgb) / .96);
  box-shadow: none;
}
html body.gm-sidebar-layout header.topbar[data-am-scrolled="1"] {
  border-bottom-color: var(--am-line);
  background: rgb(var(--am-bg-rgb) / .985);
  box-shadow: 0 8px 24px rgb(0 0 0 / .32);
}

/* Inner row = the shared container: content box = min(100% - 2 gutters,
   --am-container), same edges as content and footer.
   <=900: [hamburger] [brand] [auth, right-aligned]. The 30px hamburger
   column is reserved before JS runs, so the logo never shifts (the 40px
   button overhangs it by 10px so its lines sit on the gutter edge).
   The auth track is sized first (max-content); the brand takes what is left
   (logo scales down, floor --am-chrome-brand-min), so a long balance or a
   320px screen shrinks the logo instead of running over it. */
html body.gm-sidebar-layout header.topbar .topbar-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(var(--am-chrome-brand-min), 1fr) minmax(0, max-content);
  align-items: center;
  column-gap: var(--am-chrome-row-gap);
  width: 100%;
  max-width: calc(var(--am-container) + 2 * var(--am-gutter));
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--am-gutter);
}
html body.gm-sidebar-layout header.topbar .topbar-row > .gm-brand-cluster {
  grid-column: 2;
  grid-row: 1;
}
html body.gm-sidebar-layout header.topbar .topbar-row > .auth-links {
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
  min-width: 0;
}
/* Member shells (a body > .dash-shell child: /hesabim, /profile/*) are full
   width with their own padding (theme 24px; aqua-hesabim.css 20px on
   /hesabim at 901-1200), not the 1320px container. From 901px the header
   row (and the footer shell, 50-footer.css, and the announce close button
   below) follows those edges, so the logo sits above the sidebar and the
   auth cluster ends on the content's right edge. Below 901px the shells
   stack and the normal gutter is kept. Only the chrome changes here;
   member content is untouched. */
html body.gm-sidebar-layout {
  --am-chrome-member-x: 24px;
}
@media (min-width: 901px) and (max-width: 1200px) {
  html body.gm-sidebar-layout.gm-account-page {
    --am-chrome-member-x: 20px;
  }
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout:has(> .dash-shell) header.topbar .topbar-row {
    max-width: none;
    padding-inline: var(--am-chrome-member-x);
  }
}
@media (scripting: none) {
  html body.gm-sidebar-layout header.topbar .topbar-row {
    grid-template-columns: minmax(var(--am-chrome-brand-min), 1fr) minmax(0, max-content);
  }
  html body.gm-sidebar-layout header.topbar .topbar-row > .gm-brand-cluster {
    grid-column: 1;
  }
  html body.gm-sidebar-layout header.topbar .topbar-row > .auth-links {
    grid-column: 2;
  }
}

/* ---- Brand ----------------------------------------------------------------
   The 500x273 PNG only has opaque pixels in rows 83-191. A 500/112 box with
   object-fit:cover (centred) crops the transparent padding without markup
   changes, so the wordmark is ~96% of the box height.
   Width is the token size, capped at 100% of the brand track (height follows
   through aspect-ratio), so the logo scales down as a whole when the auth
   cluster needs the room; the % cap is ignored for the desktop auto track.
   min-width:0 also beats gm-arwen-page's .brand{min-width:fit-content}. */
html body.gm-sidebar-layout header.topbar .gm-brand-cluster {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  height: auto;
  margin: 0;
  flex: none;
}
html body.gm-sidebar-layout header.topbar .gm-brand-cluster .brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  height: auto;
  max-height: none;
  padding: 4px 0;
  border-radius: var(--am-r-xs);
  text-decoration: none;
}
html body.gm-sidebar-layout header.topbar .gm-brand-cluster .brand img {
  display: block;
  width: calc(var(--am-chrome-logo-h) * 500 / 112) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 500 / 112;
  object-fit: cover;
  object-position: 50% 50%;
  flex: none;
  filter: none !important;
  transition: none;
}

/* ---- Hamburger (injected by 10-chrome.js, <=900 only) --------------------- */
html body.gm-sidebar-layout header.topbar .am-burger {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 0 0 -10px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--am-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 44px touch target around the 40px button. */
html body.gm-sidebar-layout header.topbar .am-burger::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
}
html body.gm-sidebar-layout header.topbar .am-burger-box {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
html body.gm-sidebar-layout header.topbar .am-burger-box::before,
html body.gm-sidebar-layout header.topbar .am-burger-box::after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
html body.gm-sidebar-layout header.topbar .am-burger-box::before {
  top: -6px;
  width: 18px;
}
html body.gm-sidebar-layout header.topbar .am-burger-box::after {
  top: 6px;
  width: 12px;
}
html body.gm-sidebar-layout header.topbar .am-burger:active,
html body.gm-sidebar-layout header.topbar .am-burger[aria-expanded="true"] {
  background: var(--am-surface-2);
  color: var(--am-accent);
}
@media (hover: hover) {
  html body.gm-sidebar-layout header.topbar .am-burger:hover {
    background: var(--am-surface-1);
  }
}

/* ---- Desktop nav ----------------------------------------------------------
   In grid flow (no absolute centring, so no overlap). Hidden <=900 where the
   drawer + bottom bar take over. Labels always; size/icons come from the
   --am-chrome-nav-* tokens (icons from 1024 for guests, 1280 for members).
   The 4px padding/-4px margin + overflow is only a safety net (fallback
   fonts): it clips instead of running under the auth cluster, while focus
   rings still fit. */
html body.gm-sidebar-layout header.topbar .main-text-nav {
  display: none;
  position: static;
  left: auto;
  transform: none;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  margin: -4px;
  padding: 4px;
  overflow: hidden;
}
html body.gm-sidebar-layout header.topbar .main-text-nav .text-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  height: 36px;
  padding: 0 var(--am-chrome-nav-px);
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: transparent;
  box-shadow: none;
  color: var(--am-text-2);
  font: 600 var(--am-chrome-nav-fs)/1 var(--am-font);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
}
html body.gm-sidebar-layout header.topbar .main-text-nav .text-link span {
  display: inline;
}
html body.gm-sidebar-layout header.topbar .main-text-nav .text-link i {
  display: var(--am-chrome-nav-icon);
  width: 16px;
  color: rgb(var(--am-accent-rgb) / .55);
  font-size: 14px;
  text-align: center;
}
/* Hover only for real pointers (no sticky hover on touch tablets >=901). */
@media (hover: hover) {
  html body.gm-sidebar-layout header.topbar .main-text-nav .text-link:hover {
    border-color: transparent;
    background: var(--am-surface-1);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout header.topbar .main-text-nav .text-link:hover i {
    color: rgb(var(--am-accent-rgb) / .8);
  }
}
html body.gm-sidebar-layout header.topbar .main-text-nav .text-link.active {
  border-color: transparent;
  background: var(--am-surface-2);
  color: var(--am-text);
}
html body.gm-sidebar-layout header.topbar .main-text-nav .text-link.active i {
  color: var(--am-accent);
}
/* Spor: same glyph as the bottom bar (futbol instead of medal). */
html body.gm-sidebar-layout header.topbar .main-text-nav .text-link[href="/spor"] .fa-medal::before {
  content: "\f1e3";
}

/* ---- Auth cluster: shared button base ------------------------------------- */
html body.gm-sidebar-layout header.topbar .auth-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--am-chrome-gap);
  min-width: 0;
  margin: 0;
}
html body.gm-sidebar-layout header.topbar .auth-links .auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--am-chrome-btn-h);
  min-height: var(--am-chrome-btn-h);
  margin: 0;
  border-radius: var(--am-r-pill);
  font-family: var(--am-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: nowrap;
  filter: none;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Guest: Giriş Yap (ghost) + Kayıt Ol (primary) ------------------------
   Same pill height at all widths; text only. !important mirrors the
   member-chrome <=980/640/380 !important block (also kills the legacy
   blur/inset leak on gm-arwen-page). */
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn {
  width: auto !important;
  min-width: 0 !important;
  height: var(--am-chrome-btn-h) !important;
  min-height: var(--am-chrome-btn-h) !important;
  padding: 0 clamp(10px, 3.3vw, 16px) !important;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--am-r-pill);
  box-shadow: none;
}
/* Touch target: the 36px pills (40px from 901) get a transparent 44px+
   hit area inside the header's empty top/bottom band (-5px from the
   padding box = 44px with the 1px border). Sideways only 2px, so the two
   buttons' areas never overlap (6px gap, 4px below 360px). Guest buttons
   only: the member circles keep their pseudo-elements free. */
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn {
  position: relative;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn::after {
  content: "";
  position: absolute;
  inset: -5px -2px;
  border-radius: inherit;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn i {
  display: none;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn span {
  display: inline;
  color: inherit;
  font: inherit;
}
/* v2: Giriş Yap is a filled surface-2 pill (border transparent, geometry
   kept); Kayıt Ol is the page's one primary CTA (fill + soft CTA shadow). */
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn.btn-login {
  border-color: transparent !important;
  background: var(--am-surface-2) !important;
  color: var(--am-text) !important;
  box-shadow: none;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn.btn-register {
  border-color: transparent !important;
  background: var(--am-grad) !important;
  color: var(--am-on-accent) !important;
  font-weight: 700;
  box-shadow: var(--am-cta-shadow);
}
@media (hover: hover) {
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn.btn-login:hover {
    border-color: transparent !important;
    background: var(--am-surface-3) !important;
    color: #fff !important;
  }
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn.btn-register:hover {
    background: var(--am-grad-hover) !important;
    box-shadow: var(--am-cta-shadow-hover);
  }
}

/* ---- Member: balance pill, deposit CTA, withdraw + account circles -------- */
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-header-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 168px;
  height: var(--am-chrome-btn-h);
  margin: 0;
  padding: 0 clamp(10px, 3vw, 12px);
  border: 1px solid transparent !important;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2);
  box-shadow: none;
  color: var(--am-text) !important;
  font-family: var(--am-font);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-header-balance-main,
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-header-balance-bonus {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--am-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-header-balance-main {
  color: var(--am-text);
  font-size: clamp(12px, 3.4vw, 13px);
  font-weight: 700;
  line-height: 1.1;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-header-balance-bonus {
  display: none;
  color: var(--am-text-3);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.1;
}
/* Circles (withdraw, account) and the deposit CTA share one size. */
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn {
  width: var(--am-chrome-btn-h);
  min-width: var(--am-chrome-btn-h);
  height: var(--am-chrome-btn-h);
  min-height: var(--am-chrome-btn-h);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2);
  box-shadow: none;
  color: var(--am-text-2);
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn i {
  font-size: 14px;
  line-height: 1;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn span {
  display: none;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-account-menu.open .auth-btn.gm-header-account-btn,
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-account-btn[aria-expanded="true"] {
  border-color: transparent;
  background: var(--am-surface-3);
  color: var(--am-accent);
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-withdraw-btn {
  display: none;
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn {
  border-color: transparent;
  background: var(--am-grad);
  color: var(--am-on-accent);
  font-weight: 700;
  box-shadow: var(--am-cta-shadow);
}
@media (hover: hover) {
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn:hover {
    border-color: transparent;
    background: var(--am-surface-3);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn:hover {
    border-color: transparent;
    background: var(--am-grad-hover);
    color: var(--am-on-accent);
    box-shadow: var(--am-cta-shadow-hover);
  }
}
/* <360px: the deposit circle gives way to the balance (no truncated money);
   Para Yatır stays one tap away as the bottom bar's raised centre CTA. */
@media (max-width: 359.98px) {
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn {
    display: none;
  }
}
html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn i {
  font-size: 13px;
}

/* ---- Account dropdown -----------------------------------------------------
   Visibility stays on the native [hidden] attribute (+ .open on the wrapper).
   Opaque flat surface (a nested backdrop-filter inside the blurred header
   would not see the page anyway). Anchored 6px under the header edge. v2:
   no outline, no gradient; the drop shadow gives the lift. */
html body.gm-sidebar-layout header.topbar .gm-account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
html body.gm-sidebar-layout header.topbar .gm-account-menu .gm-account-dropdown {
  position: absolute;
  top: calc(100% + (var(--gm-header) - var(--am-chrome-btn-h)) / 2 + 6px);
  right: 0;
  left: auto;
  z-index: 5;
  width: 280px;
  min-width: 0;
  max-width: calc(100vw - 2 * var(--am-gutter));
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-surface-2);
  box-shadow: var(--am-shadow-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--am-text);
  font-family: var(--am-font);
  transform-origin: top right;
}
html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 6px 8px 12px;
  border-bottom: 1px solid var(--am-line);
  color: var(--am-text);
  font: 650 14px/1.25 var(--am-font);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  word-break: normal;
}
html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-user::before {
  content: "\f007";
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--am-tint);
  color: var(--am-accent);
  font: 900 14px/1 "Font Awesome 6 Free";
}
html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border-radius: var(--am-r-sm);
  background: transparent;
  color: var(--am-text);
  font: 600 14px/1.2 var(--am-font);
  letter-spacing: 0;
  text-decoration: none;
}
html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item i {
  width: 18px;
  color: rgb(var(--am-accent-rgb) / .75);
  font-size: 15px;
  text-align: center;
}
html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .8);
  outline-offset: -2px;
}
@media (hover: hover) {
  html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item:hover {
    background: var(--am-surface-3);
    color: #fff;
  }
}
html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item.gm-account-dropdown-logout {
  margin-top: 9px;
  color: #fca5a5;
}
html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item.gm-account-dropdown-logout::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 8px;
  left: 8px;
  height: 1px;
  background: var(--am-line);
}
html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item.gm-account-dropdown-logout i {
  color: #f87171;
}
@media (hover: hover) {
  html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item.gm-account-dropdown-logout:hover {
    background: rgb(248 113 113 / .1);
    color: #fecaca;
  }
}

/* ---- Header breakpoints --------------------------------------------------- */
@media (min-width: 601px) {
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-header-balance-bonus {
    display: block;
  }
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-withdraw-btn {
    display: inline-flex;
  }
}

@media (min-width: 901px) {
  html body.gm-sidebar-layout header.topbar .topbar-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  html body.gm-sidebar-layout header.topbar .topbar-row > .gm-brand-cluster {
    grid-column: 1;
  }
  html body.gm-sidebar-layout header.topbar .topbar-row > .auth-links {
    grid-column: 3;
  }
  html body.gm-sidebar-layout header.topbar .am-burger {
    display: none;
  }
  html body.gm-sidebar-layout header.topbar .main-text-nav {
    display: flex;
    grid-column: 2;
    grid-row: 1;
  }
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn {
    padding: 0 18px !important;
  }
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-header-balance {
    max-width: 180px;
    padding: 0 14px;
  }
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .gm-header-balance-main {
    font-size: 14px;
  }
  html body.gm-sidebar-layout header.topbar .gm-account-menu .gm-account-dropdown {
    box-shadow: var(--am-shadow-3);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body.gm-sidebar-layout header.topbar,
    html body.gm-sidebar-layout header.topbar.scrolled {
      background: rgb(var(--am-bg-rgb) / .82);
      backdrop-filter: blur(14px) saturate(1.2);
      -webkit-backdrop-filter: blur(14px) saturate(1.2);
    }
    html body.gm-sidebar-layout header.topbar[data-am-scrolled="1"] {
      background: rgb(var(--am-bg-rgb) / .9);
    }
  }
}

@media (min-width: 1024px) {
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn {
    width: auto;
    padding: 0 16px 0 14px;
  }
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn span {
    display: inline;
  }
}

@media (min-width: 1201px) {
  html body.gm-sidebar-layout header.topbar .main-text-nav {
    gap: 4px;
  }
}

/* ---- Mobile drawer (markup built by 10-chrome.js, appended to <body>) -----
   Hidden via the [hidden] attribute when closed; .is-open drives the slide.
   z 1500: above bottom bar (130) and FAB (880), below the promo modal
   (1990), the support toast (9000) and #authModal (10000); the full stack
   is documented once in the 55-overlays.css header.
   The scroll lock keeps the scrollbar gutter, so classic (Windows)
   scrollbars do not make the page shift sideways while it is open. */
html.am-drawer-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}
html body.gm-sidebar-layout > .am-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: block;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-overlay {
  position: absolute;
  inset: 0;
  background: var(--am-overlay);
  opacity: 0;
}
html body.gm-sidebar-layout > .am-drawer-root.is-open .am-drawer-overlay {
  opacity: 1;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(320px, 86vw);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
  border-right: 0;
  background: var(--am-surface-1);
  box-shadow: var(--am-shadow-3);
  color: var(--am-text);
  font-family: var(--am-font);
  transform: translateX(-100%);
  outline: none;
}
html body.gm-sidebar-layout > .am-drawer-root.is-open .am-drawer {
  transform: none;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  height: 56px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--am-line);
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-logo {
  display: block;
  width: calc(24px * 500 / 112);
  height: 24px;
  aspect-ratio: 500 / 112;
  object-fit: cover;
  object-position: 50% 50%;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--am-text-2);
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-close:active {
  background: var(--am-surface-2);
  color: var(--am-text);
}
@media (hover: hover) {
  html body.gm-sidebar-layout > .am-drawer-root .am-drawer-close:hover {
    background: var(--am-surface-2);
    color: var(--am-text);
  }
}

/* Account block: guest Giriş/Kayıt (forward to the header buttons) or
   member username + Hesabım / Para Yatır. */
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-account {
  display: grid;
  gap: 12px;
  flex: none;
  padding: 16px;
  border-bottom: 1px solid var(--am-line);
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: var(--am-text);
  font: 650 14px/1.25 var(--am-font);
  overflow-wrap: anywhere;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-user i {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--am-tint);
  color: var(--am-accent);
  font-size: 14px;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2);
  color: var(--am-text);
  font: 600 14px/1 var(--am-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-btn i {
  font-size: 13px;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-btn--primary {
  border-color: transparent;
  background: var(--am-grad);
  color: var(--am-on-accent);
  font-weight: 700;
  box-shadow: none;
}

/* Link list */
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-nav {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-nav + .am-drawer-nav {
  padding-top: 10px;
  border-top: 1px solid var(--am-line);
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--am-text-2);
  font: 600 15px/1.2 var(--am-font);
  letter-spacing: -.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link i {
  width: 20px;
  flex: none;
  color: rgb(var(--am-accent-rgb) / .6);
  font-size: 16px;
  text-align: center;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link::after {
  content: "\f054";
  margin-left: auto;
  color: var(--am-text-3);
  font: 900 11px/1 "Font Awesome 6 Free";
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link:active {
  background: var(--am-surface-2);
  color: var(--am-text);
}
@media (hover: hover) {
  html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link:hover {
    background: var(--am-surface-2);
    color: var(--am-text);
  }
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link[aria-current="page"] {
  border-color: transparent;
  background: var(--am-surface-2);
  color: var(--am-text);
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link[aria-current="page"] i,
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link[aria-current="page"]::after {
  color: var(--am-accent);
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 16px 0;
  padding: 16px 0 4px;
  border-top: 1px solid var(--am-line);
  color: var(--am-text-3);
  font: 500 12px/1.3 var(--am-font);
  text-decoration: none;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-age {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--am-surface-2);
  color: var(--am-text-2);
  font: 700 11px/1 var(--am-font);
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-link[href="/spor"] .fa-medal::before {
  content: "\f1e3";
}
html body.gm-sidebar-layout > .am-drawer-root :is(.am-drawer-link, .am-drawer-btn, .am-drawer-close, .am-drawer-foot):focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .8);
  outline-offset: 2px;
}

@media (min-width: 901px) {
  html body.gm-sidebar-layout > .am-drawer-root {
    display: none;
  }
}

/* ---- Bottom tab bar (<=900) -----------------------------------------------
   Docked flush; height = --gm-bottom (64px + safe area, padding counts the
   inset once). 5 equal tabs, single-line labels; the centre CTA is a raised
   52px gradient circle. Active tab = aria-current="page" (set by
   10-chrome.js) with a cyan indicator. Items capped at 560px on tablets.
   v2: flat surface-1 dock, no outline (tone + a soft upward shadow). */
html body.gm-sidebar-layout nav.gm-bottombar {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 130;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  height: var(--gm-bottom);
  margin: 0;
  padding: 0 max(4px, (100% - 560px) / 2) env(safe-area-inset-bottom, 0px);
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--am-surface-1);
  box-shadow: 0 -8px 24px rgb(0 0 0 / .32);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--am-text-3);
  font: 600 10.5px/1.15 var(--am-font);
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  transform: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb i {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 22px;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb span {
  display: block;
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb:active {
  opacity: .75;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb[aria-current="page"] {
  color: var(--am-text);
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb[aria-current="page"] i {
  color: var(--am-accent);
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 22px;
  height: 3px;
  margin-left: -11px;
  border-radius: 0 0 3px 3px;
  background: var(--am-accent);
}
@media (hover: hover) {
  html body.gm-sidebar-layout nav.gm-bottombar .gm-bb:hover {
    color: var(--am-text);
  }
}
/* Same glyphs as the header/drawer for the same routes. */
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb[href="/livecasino"] .fa-tv::before {
  content: "\f522";
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb[href="/slot"] .fa-dice-d6::before {
  content: "\e139";
}

/* Centre CTA: <button> for guests (opens login), <a> for members. The label
   keeps the other tabs' baseline (12px from the bottom); the circle rises
   ~17px above the bar with a surface-coloured ring. */
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb.gm-bb-center {
  justify-content: flex-end;
  gap: 4px;
  padding-bottom: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--am-text);
  font-weight: 650;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb.gm-bb-center i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--am-grad);
  box-shadow: 0 0 0 4px rgb(var(--am-surface-1-rgb)), var(--am-cta-shadow);
  color: var(--am-on-accent);
  font-size: 19px;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb.gm-bb-center[aria-current="page"]::before {
  display: none;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb.gm-bb-center[aria-current="page"] {
  color: var(--am-accent);
}
/* Keyboard focus: ring on the icon (the centre keeps its surface ring). */
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb:focus-visible {
  outline: none;
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb:focus-visible i {
  border-radius: 10px;
  box-shadow: var(--am-focus);
}
html body.gm-sidebar-layout nav.gm-bottombar .gm-bb.gm-bb-center:focus-visible i {
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(var(--am-surface-1-rgb)), 0 0 0 6px rgb(var(--am-accent-rgb) / .8);
}

/* 320-340px phones: 'Canlı Casino' still fits on one line. */
@media (max-width: 340.98px) {
  html body.gm-sidebar-layout nav.gm-bottombar {
    padding-right: 2px;
    padding-left: 2px;
  }
  html body.gm-sidebar-layout nav.gm-bottombar .gm-bb {
    padding: 0 1px;
    font-size: 10px;
    letter-spacing: -.02em;
  }
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout nav.gm-bottombar .gm-bb {
    font-size: 11px;
  }
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout nav.gm-bottombar {
    display: none;
  }
}

/* ---- Motion (opt-in) ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout header.topbar {
    transition: background-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout header.topbar .main-text-nav .text-link,
  html body.gm-sidebar-layout header.topbar .auth-links .auth-btn,
  html body.gm-sidebar-layout header.topbar .am-burger,
  html body.gm-sidebar-layout header.topbar .gm-account-dropdown .gm-account-dropdown-item,
  html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close i,
  html body.gm-sidebar-layout nav.gm-bottombar .gm-bb {
    transition: background-color var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), opacity var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-guest .auth-btn.btn-register,
  html body.gm-sidebar-layout header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn {
    transition: background var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout header.topbar .gm-account-menu.open .gm-account-dropdown {
    animation: am-chrome-pop .16s var(--am-ease) both;
  }
  html body.gm-sidebar-layout > .am-drawer-root .am-drawer-overlay {
    transition: opacity .24s var(--am-ease);
  }
  html body.gm-sidebar-layout > .am-drawer-root .am-drawer {
    transition: transform .26s var(--am-ease);
  }
}
@keyframes am-chrome-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ---- 12-cards.css ---- */
/*
 * Shared card + "view all" tokens, consumed by the two card families:
 *   home rows      20-home.css     main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game
 *   catalog grids  30-catalog.css  :is(#slotGrid, #lcGrid) .slot-card / .lc-card
 * and by the section "view all" pills (home 'Tümü' 20-home.css, /slot
 * 'Canlı Casino' 30-catalog.css, /vip + /turnuvalar 40-content.css).
 * Only custom properties live here (no selectors that match anything), so
 * each family keeps its own rules, geometry and cascade notes; the shared
 * part is the grid gap, the look of the favourite chip, the hover scrim and
 * the view-all pill. Nothing outside this layer reads --am-card-* or
 * --am-viewall-*, so declaring them on the body prefix is safe on member
 * pages too.
 *
 * Favourite chip (.gm-fav, 34px glass circle on the cover):
 *  - rest: dark glass so the outline heart reads on any art; v2 drops its
 *    hairline (the 1px border stays, transparent, so the 34px box and the
 *    -6px hit area are unchanged);
 *  - active: a cyan tint OVER a dark glass base. A plain translucent cyan
 *    (the old catalog value) vanished on bright covers; this keeps chip and
 *    heart >= 3:1 against them. The cyan ring stays as the one state cue
 *    besides the solid heart; the v1 cyan glow is gone.
 *
 * Card frame (v2): no border, no shadow, flat --am-card-bg; hover lifts the
 * tone to --am-card-bg-hover (caption cards) and shows the radial scrim +
 * play disc.
 * The play disc is the CTA fill without the v1 6px cyan halo.
 */
html body.gm-sidebar-layout {
  /* Gap between game cards (home rows and catalog grids alike):
     10 / 12 / 16 / 20px at base / 601 / 901 / 1201. */
  --am-card-gap: 10px;

  --am-card-bg: var(--am-surface-1);
  --am-card-bg-hover: var(--am-surface-2);
  --am-card-play-shadow: 0 6px 18px rgb(0 0 0 / .4);

  --am-card-chip-bg: rgb(2 11 18 / .6);
  --am-card-chip-bg-hover: rgb(2 11 18 / .8);
  --am-card-chip-line: transparent;
  --am-card-chip-shadow: 0 2px 8px rgb(0 0 0 / .28);
  --am-card-chip-on: linear-gradient(rgb(var(--am-accent-rgb) / .18), rgb(var(--am-accent-rgb) / .18)), rgb(2 11 18 / .78);
  --am-card-chip-on-hover: linear-gradient(rgb(var(--am-accent-rgb) / .26), rgb(var(--am-accent-rgb) / .26)), rgb(2 11 18 / .82);
  --am-card-chip-on-line: rgb(var(--am-accent-rgb) / .6);
  --am-card-chip-on-line-hover: rgb(var(--am-accent-rgb) / .8);
  --am-card-chip-on-shadow: 0 2px 8px rgb(0 0 0 / .32);

  /* Hover/focus shade behind the play disc: a soft radial pool (strongest
     under the 48px disc, gone by the cover's side edges), so the art and
     its baked-in title stay vivid and the 60-motion light sweep reads as
     light. v1's bottom-to-top shade dimmed the whole cover by ~40%. */
  --am-card-scrim: radial-gradient(circle closest-side at 50% 50%, rgb(2 9 15 / .42) 0%, rgb(2 9 15 / .16) 55%, rgb(2 9 15 / 0) 100%);

  /* "View all" pill beside a section title: one height, padding and
     surface everywhere. --am-viewall-hit is the vertical hit-area overhang
     of its transparent pseudo-element, measured from the padding box:
     36px - 2 * 1px border + 2 * 5px = 44px. v2: the 1px border is
     transparent (geometry kept), the pill is a flat surface-1 fill and
     hover lifts it to surface-2. */
  --am-viewall-h: 36px;
  --am-viewall-pad: 0 12px 0 14px;
  --am-viewall-bg: var(--am-surface-1);
  --am-viewall-bg-hover: var(--am-surface-2);
  --am-viewall-hit: -5px;
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout { --am-card-gap: 12px; }
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout { --am-card-gap: 16px; }
}
@media (min-width: 1201px) {
  html body.gm-sidebar-layout { --am-card-gap: 20px; }
}

/* ---- 15-slider.css ---- */
/*
 * Promo slider: the shared .gm-slider component (aqua-slider.js), one look
 * on every storefront page that renders it (today home, /slot and
 * /livecasino): rounded image (v2: no hairline ring, the art meets the page
 * directly), 6px pill dots in a row reserved UNDER the image, prev/next
 * arrows beside the dots on desktop pointers (15-slider.js), full width of
 * the shared container.
 *
 * Root (written out in full on every rule, called S in the comments):
 *   html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider   (0,3,3)
 * The storefront roots never exist on member pages. S beats the theme's
 * slider rules (aqua-theme.css, max (0,2,0)); no page ships its own slider
 * CSS. Width comes from the page container: home (main.gm-wire, 20-home)
 * and the catalog pages (30-catalog) already use
 * min(100% - 2 * --am-gutter, --am-container), so the slider lines up with
 * the header, titles, grids and footer. The theme's 1038px cap is dropped.
 *
 * Page-specific bits stay with the pages:
 *  - 20-home.css: 8px phone edge inset; main's flex gap replaces the bottom
 *    margin (its "> *" reset is later in the cascade at the same weight).
 *  - 30-catalog.css: grid-row 1 on /livecasino (main is a grid there). This
 *    file sets no grid placement, so that rule keeps working. From 901px
 *    the catalog pages also cap the frame at the art's 358px height
 *    (contained slides, blurred side bands from --am-slide-art) and use a
 *    24px --am-slider-after, so the first game row shows above the fold.
 *
 * aqua-slider.js contracts kept:
 *  - .gm-slides gets inline transform/transition while dragging: no
 *    transform or transition on it here. Slides stay stacked (theme:
 *    absolute, .active visible).
 *  - The viewport keeps its intrinsic 1038/358 ratio (the CTA art is baked
 *    into the images): never a fixed height.
 *  - The dots (.gm-slide-lines/.gm-slide-line) are created by the script,
 *    one per slide, inside the viewport. The viewport is the rounded clip
 *    but is left UNpositioned, so the absolute dots resolve against
 *    .gm-slider and sit in its padding-bottom row instead of being clipped.
 *    The row is reserved only with 2+ slides (the script adds no dots for
 *    one), so nothing shifts when the dots appear.
 *  - .gm-slider-status (sr-only, theme) also resolves against .gm-slider.
 *
 * Legacy 360px bug fixed here: the theme's 36/56px dash dots wrap
 * (flex-wrap) into a second row once 7 dashes no longer fit (<=~380px).
 * The pill dots sit in one nowrap row (7 slides = 240px on phones, 184px
 * on desktop).
 *
 * Breakpoints: base / 601 / 901 (the theme's 600 band is restated).
 */

/* ---------- Tokens ----------
   --am-slider-after: space to the next block on the catalog pages; from
   601px it is the section gap, the same rhythm home gets from main's gap
   (home cancels this margin, see 20-home.css).
   --am-slider-dot-pad: phones/tablets (no arrows there) get 32px-wide dot
   targets (6px pill + 2 * 13px) so a thumb does not hit the neighbour; the
   clamp shrinks them back towards 24px only if a long slide list would not
   fit the row ((row - 16px active extra) / n). 100% resolves against the
   dots row, the dots' containing block. --am-slider-n comes from
   15-slider.js (7 until it runs). Desktop keeps 24px (the arrows' math). */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider {
  --am-slider-r: var(--am-r-md);
  --am-slider-dots-h: 24px;         /* dot row under the image (= dot hit height) */
  --am-slider-dot-pad: clamp(9px, calc(((100% - 16px) / var(--am-slider-n, 7) - 6px) / 2), 13px);
  --am-slider-after: var(--am-s-4);
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider {
    --am-slider-r: var(--am-r-lg);
    --am-slider-after: var(--am-section-gap);
  }
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider {
    --am-slider-dots-h: 32px;       /* room for the 32px arrows that flank the dots */
    --am-slider-dot-pad: 9px;       /* 6px pill + 2 * 9px = 24px wide hit area */
  }
}

/* ---------- Frame ----------
   The section itself is a bare box: the frame (radius, ring, surface) is on
   the viewport so the dots row below the image stays transparent. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider {
  position: relative;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0 0 var(--am-slider-after);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider:has(.gm-slide + .gm-slide) {
  padding-bottom: var(--am-slider-dots-h);
}
/* The dots come from aqua-slider.js: no empty band with scripting off. */
@media (scripting: none) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider:has(.gm-slide + .gm-slide) {
    padding-bottom: 0;
  }
}
/* The viewport is the rounded clip (overflow:hidden + radius), so the track
   the script drags stays clipped with round corners. The track is an
   in-flow grid item filling the viewport (same box as the theme's absolute
   inset:0). */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slider-viewport {
  position: static;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 1038 / 358;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--am-slider-r);
  background: var(--am-surface-1);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slides {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}
/* Near-ratio art fills the frame instead of letterboxing on the surface-1
   fill: 15-slider.js gives a slide image whose own ratio is within 8% of
   the 1038/358 box [data-am-fit="cover"] (crop <= ~4% per side; today the
   1836x600 upload, 3.06:1, loses 2.6% of decorative edge per side). Any
   other ratio keeps the theme's contain, so baked-in copy is never cut;
   so does everything with JS off. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide img[data-am-fit="cover"] {
  object-fit: cover;
}
/* v1 drew a hairline ring here (::after over the slides); v2 is flat, so
   the pseudo-element is switched off. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slider-viewport::after {
  content: none;
}
/* Keyboard focus on the active slide link: its own outline would be cut off
   by the viewport clip, so the viewport shows the shared focus ring. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide:focus-visible {
  outline: none;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slider-viewport:has(.gm-slide:focus-visible) {
  box-shadow: var(--am-focus);
}

/* ---------- Dots ----------
   6px pills in the row under the image, one nowrap row. Hit areas are 32px
   wide below 901px (24px from 901, active pill +16px) and 24px tall (32px
   from 901px); 24px is the WCAG 2.5.8 minimum, and swiping the image works
   too.
   overflow-x: clip is only a safety net for an unusually long slide list on
   a narrow phone (never a horizontal page scroll). */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-lines {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--am-slider-dots-h);
  padding: 0;
  overflow-x: clip;
  pointer-events: none;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: auto;
  height: var(--am-slider-dots-h);
  padding: 0 var(--am-slider-dot-pad);
  border: 0;
  border-radius: var(--am-r-pill);
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  transition: none;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--am-r-pill);
  background: rgb(169 196 211 / .55);   /* ~3.4:1 on the page background */
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line.active {
  width: auto;
  background: transparent;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line.active::before {
  width: 22px;
  background: var(--am-accent);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .8);
  outline-offset: -4px;
}
@media (hover: hover) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line:hover {
    background: transparent;
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line:not(.active):hover::before {
    background: rgb(238 248 252 / .7);
  }
}

/* ---------- Prev/next arrows ----------
   Added by 15-slider.js (2+ slides, so the dots row is always reserved),
   desktop pointers only. They sit in the dots row, flanking the dots, never
   over the baked-in promo copy. The script sets --am-slider-n (dot count);
   the dot group width follows from the fixed dot sizes above:
   (n - 1) inactive 24px buttons + one 40px active button. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav {
  display: none;
}
@media (min-width: 901px) and (hover: hover) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav {
    --am-slider-dots-w: calc((var(--am-slider-n, 2) - 1) * (6px + 2 * var(--am-slider-dot-pad)) + 22px + 2 * var(--am-slider-dot-pad));
    position: absolute;
    top: auto;
    bottom: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--am-surface-1);
    color: var(--am-text-2);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-prev {
    left: calc(50% - var(--am-slider-dots-w) / 2 - var(--am-s-2) - 32px);
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-next {
    left: calc(50% + var(--am-slider-dots-w) / 2 + var(--am-s-2));
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav:hover {
    background: var(--am-surface-2);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav:focus-visible {
    outline: none;
    box-shadow: var(--am-focus);
  }
}

/* ---------- Placeholder slides ----------
   Only when the gorseller table is empty: text slides size the box instead
   of the ratio (a min-height on a ratio box would transfer a min-width and
   overflow the page). */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slider-viewport:has(.gm-slide-ph) {
  aspect-ratio: auto;
  min-height: 248px;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-ph {
  background: var(--am-surface-1);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-ph-inner {
  max-width: 560px;
  padding: var(--am-s-6) var(--am-s-6) var(--am-s-7);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-ph h2 {
  margin: 0 0 var(--am-s-2);
  color: var(--am-text);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--am-title-track);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-ph p {
  margin: 0 0 var(--am-s-4);
  color: var(--am-text-2);
  font-size: var(--am-fs-base);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-ph .gm-slide-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--am-s-3);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-ph .gm-btn-gold {
  min-height: 44px;
  padding: 10px 22px;
  font-size: var(--am-fs-base);
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slider-viewport:has(.gm-slide-ph) {
    min-height: 280px;
  }
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slider-viewport:has(.gm-slide-ph) {
    min-height: 340px;
  }
}

/* ---------- Motion (opt-in) ----------
   Only the dot pill and arrow colours animate; the slide cross-fade is the
   theme's (and off under reduced motion there). */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line::before {
    transition: width .25s var(--am-ease), background-color .25s var(--am-ease);
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav {
    transition: background-color var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease);
  }
}

/* ---- 20-home.css ---- */
/*
 * Home page content (/, aqua-home.php): hero placement, category tiles, game
 * rows and the winners ticker. Design language v2
 * (00-tokens.css header): flat tones, no card hairlines or glows, bigger
 * section titles without the accent bar. Header, footer, bottom
 * bar and FAB belong to the chrome partials; the hero slider component
 * itself (frame, dots, arrows) is shared with /slot and /livecasino in
 * 15-slider.css/.js, and the card chip/scrim tokens in 12-cards.css.
 *
 * Root (written out in full on every rule, called R in the comments):
 *   html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip)   (0,3,3)
 * Home has no body class and main.gm-wire is shared with /vip, /turnuvalar
 * and /canli-destek; only home has the category strip as a direct child.
 * Without :has() support the home content keeps the legacy look.
 * R beats the in-body <style> blocks of aqua-home.php (max (0,2,1)) and,
 * with !important, the theme's (0,3,1)!important cover rules.
 *
 * Shared selectors kept home-only on purpose: .gm-fav (catalog cards have
 * their own rules on the same tokens), .gm-row-section/.gm-row-head (/vip,
 * /turnuvalar, /canli-destek).
 *
 * Cascade notes:
 *  - .gm-slider: only the phone edge inset is set here (R > S of
 *    15-slider.css); its bottom margin is cancelled by the "> *" reset
 *    below (same weight as S, later in the cascade), main's gap spaces it.
 *  - .gm-game-cover keeps aspect-ratio:var(--ar) from the theme (slot covers
 *    330/420, live 300/300); nothing here forces another ratio.
 *  - Favorilerim sections are hidden by aqua-favs.js with inline
 *    style.display: no display !important on sections or cards.
 *  - Legacy bands neutralised for every property set here: theme 1200/900/
 *    600, inline 760/900. Steps: base (phones) / 601 / 901.
 *  - Layout owned by other partials, loaded later: 25-lobby (desktop row
 *    rails + arrows from 901px, the games-first order, header search,
 *    sticky chips) and 27-simplify (removes the trust strip and the quick
 *    links block at every width, so neither is styled here).
 */

/* ---------- Local tokens ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
  --am-home-gap: var(--am-card-gap); /* tiles and game rows: one gap (10/12/16/20px, 12-cards.css), the catalog grids' too */
  --am-home-hero-inset: 8px;        /* phone hero: distance to the viewport edge */
  --am-home-tile-r: 18px;
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
    --am-home-tile-r: var(--am-r-lg);
  }
}

/* ---------- Container + vertical rhythm ----------
   One column: content width = min(100% - 2 * gutter, --am-container).
   Sections are flex items, so the rhythm is a single gap (the in-body
   <style> children are display:none and take no slot). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
  display: flex;
  flex-direction: column;
  gap: var(--am-section-gap);
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: calc(var(--am-container) + 2 * var(--am-gutter));
  margin: 0 auto;
  padding: var(--am-s-4) var(--am-gutter) calc(var(--am-section-gap) + var(--am-s-2));
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > * {
  max-width: none;
  min-width: 0;
  margin: 0;
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
    padding-top: var(--am-s-6);
  }
}

/* ---------- Hero slider (home-only placement) ----------
   The component (frame, ring, dots row, arrows, placeholders) is
   15-slider.css. Home pulls it to 8px from the viewport edge on phones
   (near full bleed, a deliberate hero accent); from 601px it sits on the
   container edges like every other section. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-slider {
  margin-inline: calc(var(--am-home-hero-inset) - var(--am-gutter));
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-slider {
    margin-inline: 0;
  }
}

/* ---------- Category tiles (Slotlar / Canlı Casino / Spor / Bonuslar) ----------
   768x768 transparent art with the label baked in: always 1:1 + contain.
   Phones: 2x2 compact landscape cells (height follows the viewport, 100-140px);
   601+: one row of four 4:3 cells.
   Owner request (2026-10-21, was 21-home-tiles.css): no blue panel behind
   the tiles. The emblems stand on the page background (no border, fill or
   shadow; overflow visible so the hover zoom is never clipped); hover is a
   small lift + zoom (motion block) instead of a cyan glow. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--am-home-gap);
  align-items: stretch;
  justify-items: stretch;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  height: clamp(100px, 29.5vw, 140px);
  margin: 0;
  aspect-ratio: auto;
  overflow: visible;
  isolation: isolate;
  border: 0;
  border-radius: var(--am-home-tile-r);
  background: none;
  box-shadow: none;
  filter: none;
  text-decoration: none;
  transition: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover {
  filter: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip picture {
  display: contents;
}
/* The image box is the cell (contain keeps 1:1, centred). The art's own
   transparent margin is uneven (Spor/Bonuslar only 4.4% top/bottom, Slotlar
   9%), so it is not overscaled: neighbouring emblems keep clear of each
   other, also with the 1.04 hover zoom. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}
/* ---------- Recent winners ticker (renders only with data) ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins {
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-surface-1);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-head {
  gap: var(--am-s-2);
  padding: var(--am-s-3) var(--am-s-4) 0;
  color: var(--am-text-2);
  font: 650 var(--am-fs-2xs)/1 var(--am-font);
  letter-spacing: .08em;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-head i {
  color: var(--am-accent);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-view {
  padding: var(--am-s-2) 0 var(--am-s-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-win {
  gap: var(--am-s-2);
  margin-right: var(--am-s-7);
  color: var(--am-text-2);
  font-size: var(--am-fs-sm);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-win i {
  color: var(--am-accent);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-win b {
  color: var(--am-text);
  font-weight: 600;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-win .amt {
  color: var(--am-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Phones and tablets (the 901px step): no infinite marquee. The strip
   scrolls by hand; 20-home.js hides the template's duplicated second pass
   (data-am-dup), with JS off it simply shows both passes. */
@media (width < 901px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-view {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding-inline: var(--am-s-4);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--am-s-4), #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--am-s-4), #000 calc(100% - 32px), transparent);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-view::-webkit-scrollbar {
    display: none;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-track {
    animation: none;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-win[data-am-dup] {
    display: none;
  }
}

/* ---------- Game row sections: header pattern ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section {
  min-width: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-3);
  min-height: var(--am-viewall-h);  /* same head height with or without the 'Tümü' pill */
  margin: 0 0 var(--am-s-3);
}
/* Section title: v2 size/weight (20 -> 28px, 800), no accent bar (the
   bigger type carries the hierarchy; same as legal sections and catalog). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: var(--am-text);
  font-size: var(--am-fs-section);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--am-section-track);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2::before {
  content: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: var(--am-viewall-h);
  padding: var(--am-viewall-pad);
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-viewall-bg);
  color: var(--am-text-2);
  font-size: var(--am-fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: none;
}
/* 44px tall touch target around the 36px pill (shared view-all tokens). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all::after {
  content: "";
  position: absolute;
  inset: var(--am-viewall-hit) -2px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all i {
  font-size: 12px;
}
/* Neutralise the theme's hover (underline, colour) everywhere; the tone
   lift itself is for fine pointers only, so a tap does not leave it stuck. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all:hover {
  color: var(--am-text-2);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all:hover {
    border-color: transparent;
    background: var(--am-viewall-bg-hover);
    color: var(--am-text);
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head {
    margin-bottom: var(--am-s-5);
  }
}

/* ---------- Game rows: phone rail, then a 4-column grid ----------
   Phones: one horizontal scroll-snap rail per row (~2.6 cards visible),
   bleeding into the gutters; the vertical padding leaves room for the focus
   ring. 20-home.js sets data-am-rail-end at the end of the scroll so the
   right fade goes away.
   601-900: 4 columns (12 games a row = 3 full rows). From 901 every row is
   a desktop rail with arrows, owned by 25-lobby.css (it restates all the
   grid, spacing, overflow and mask properties set here). The gap is the
   catalog's (--am-home-gap = --am-card-gap). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-columns: clamp(118px, calc((100% + var(--am-gutter) - 2 * var(--am-home-gap)) / 2.6), 160px);
  align-items: start;
  gap: var(--am-home-gap);
  margin: -6px calc(var(--am-gutter) * -1) -10px;
  padding: 6px var(--am-gutter) 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--am-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-gutter), #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-gutter), #000 calc(100% - 36px), transparent 100%);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[data-am-rail-end] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-gutter), #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-gutter), #000 100%);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row::-webkit-scrollbar {
  display: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row > .gm-game {
  scroll-snap-align: start;
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[data-am-rail-end] {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Game card (shared GAME CARD SPEC) ----------
   a.gm-game > div.gm-game-cover[--ar] > button.gm-fav + (picture > img | img).
   Title and provider are baked into the art, so no text is added. The
   overlay (::before) and play button (::after) never take pointer events;
   the heart (z 5) stays on top. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-card-bg);
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  transform: none;
  transition: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:hover {
  border-color: transparent;
  transform: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover {
  position: relative;
  background: var(--am-card-bg) !important;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover img {
  transform: none;
  transition: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:hover .gm-game-cover img {
  transform: none;
}
/* Bottom-to-top shade + centred play button. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--am-card-scrim);
  opacity: 0;
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover::after {
  content: "\f04b";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  padding-left: 3px;
  border-radius: 50%;
  background: var(--am-grad);
  box-shadow: var(--am-card-play-shadow);
  color: var(--am-on-accent);
  font: 900 16px/1 "Font Awesome 6 Free";
  opacity: 0;
  transform: scale(.86);
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:focus-visible .gm-game-cover::before,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:focus-visible .gm-game-cover::after {
  opacity: 1;
  transform: none;
}
/* Hover (fine pointers): scrim + play disc only, no ring or glow. */
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:hover .gm-game-cover::before,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:hover .gm-game-cover::after {
    opacity: 1;
    transform: none;
  }
}

/* Favourite heart: 34px glass chip, 44px hit area (::before -6px from the
   32px padding box). Colours are the shared
   --am-card-chip-* tokens (12-cards.css), the same as the catalog cards. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--am-card-chip-line);
  border-radius: 50%;
  background: var(--am-card-chip-bg);
  box-shadow: var(--am-card-chip-shadow);
  color: var(--am-text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav:hover {
  border-color: var(--am-card-chip-line);
  color: var(--am-text);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav.active {
  border-color: var(--am-card-chip-on-line);
  background: var(--am-card-chip-on);
  box-shadow: var(--am-card-chip-on-shadow);
  color: var(--am-accent);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav:hover {
    border-color: var(--am-card-chip-line);
    background: var(--am-card-chip-bg-hover);
    color: var(--am-accent);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav.active:hover {
    border-color: var(--am-card-chip-on-line-hover);
    background: var(--am-card-chip-on-hover);
  }
}

/* ---------- Motion (opt-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a {
    transition: transform .22s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip img {
    transition: transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game {
    transition: transform .2s var(--am-ease), box-shadow .2s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover img {
    transition: transform .35s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover::before {
    transition: opacity .2s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover::after {
    transition: opacity .2s var(--am-ease), transform .25s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all {
    transition: border-color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all i {
    transition: transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all:hover i {
    transform: translateX(2px);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav.active > .fa-solid {
    animation: am-home-pop .32s var(--am-ease) 1;
  }
  @media (hover: hover) and (pointer: fine) {
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover,
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:hover {
      transform: translateY(-3px);
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover img {
      transform: scale(1.04);
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:hover .gm-game-cover img {
      transform: scale(1.04);
    }
  }
  /* Press feedback (touch and mouse) is 60-motion.css's. */
}
@keyframes am-home-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---- 25-lobby.css ---- */
/*
 * Lobby (owner request 2026-10-21, "make it more modern", direction 1):
 *  A. game search: header trigger + command-palette dialog (+ the field at
 *     the top of the mobile drawer), built by 25-lobby.js. The dialog only
 *     submits a GET form to /slot?q= or /livecasino?q=; 25-lobby.js fills
 *     the catalog page's own search input from ?q= there. No live results,
 *     no network.
 *  B. home lobby chip bar right after the hero slider (scroll-spy, sticky
 *     under the header from 901px, static on phones/tablets);
 *  C. home game rows as one horizontal scroll-snap rail each from 901px,
 *     with prev/next arrows in the section head.
 * Pairs with 25-lobby.js. Look follows design language v2 (00-tokens.css):
 * flat tone surfaces, no borders on chips/pills, cyan only for state.
 *
 * Header trigger, measured against the real header (guest + simulated
 * member cluster, 10-chrome.css): free room in the nav track after the
 * links, with nav icons off, is guest 66 / 129 / 305 / 336px and member
 * 14 / 25 / 201 / 189 / 275px at 901 / 1024 / 1200 / 1280 / 1366.
 *  <=600   no header trigger. At 360 the guest row has 19.6px spare
 *          (brand track 119 vs a 99.6px logo) and a 36px button + 6px gap
 *          needs 42 (at 390: 38 spare): the logo would shrink ~22% (and
 *          run into its 72px floor at 320). Phones get the search field at
 *          the top of the drawer and a search chip in the home chip bar.
 *  601-900 36px circle (all users).
 *  901+    guests: 40px circle, 220px pill from 1280. Members: no header
 *          trigger at 901-1200 (14/25px spare, a 40px circle needs 48),
 *          circle at 1201-1365, pill from 1366 (43px spare there). They keep the shortcuts
 *          (Ctrl/Cmd+K, "/") and, on home, the chip-bar search chip.
 *  With the trigger, the decorative nav icons are off (token
 *  --am-chrome-nav-icon, 10-chrome): at 1024-1200 (guests) and in the
 *  member pill band they are what does not fit; off at every width keeps
 *  the nav the same everywhere. Set on header.topbar[data-am-search] and,
 *  so the labels do not move when the button arrives, already under
 *  (scripting: enabled) before it.
 *  First paint: before 25-lobby.js runs, .auth-links::before draws the
 *  same box (pill or circle, same SVG backgrounds) under
 *  (scripting: enabled); header.topbar[data-am-search] removes it the
 *  moment the real button is in. Excluded on game.php (#game-stage covers
 *  the header and the bundle never runs there).
 *
 * Chip bar geometry: 40px chips; bar box --am-lobby-bar-h = 48px (4px
 * focus-ring room above/below) on phones/tablets, 56px from 901px. It sits
 * --am-lobby-space below the slider (margin-top cancels most of main's
 * flex gap). Until JS inserts it (main:not([data-am-lobby]), scripting
 * enabled) the slider's margin-bottom reserves exactly space + bar height,
 * so nothing below moves; 25-lobby.js sets data-am-lobby="1" (inserted) or
 * "off" (not inserted), which drops the reservation. JS off: nothing is
 * reserved, nothing inserted.
 * Sticky from 901px at top: var(--gm-top). [data-am-stuck] (set by an
 * IntersectionObserver in 25-lobby.js) gives it the header-like band: a
 * full-bleed fill + the header's scrolled edge (hairline + shade) drawn by
 * a filled, outset border-image (ink overflow only: no 100vw box, so no
 * horizontal overflow on classic scrollbars), while the header drops its
 * own edge, so header + chips read as one block with one edge. The html
 * scroll-padding gains --am-lobby-bar-h from 901px whenever the bar exists
 * (anchor jumps, scrollIntoView, focus scrolling land below the stuck
 * bar); 10-chrome.css keeps owning the base offset.
 *
 * Games first (>=901): the first game row (Popüler) is drawn right under
 * the chip bar and the category tiles follow it, so a game rail is in view
 * at load on desktop (first card at 749px at 1440x900, live: 899px). Flex
 * order does it (main is a flex column, 20-home.css): slider and bar -2,
 * first .gm-row-section -1, the rest 0 in DOM order; the first row sits
 * 24px under the bar instead of a full section gap. Being CSS, the first
 * paint is already right (JS on or off, before or after the bar exists).
 * 25-lobby.js also moves that section in the DOM to right after the bar
 * (and back below 901px), so Tab and reading order follow what is drawn;
 * the order values give the same picture either way. Phones and tablets
 * keep the template order (tiles first, the chip bar is not sticky there).
 *
 * Rails (>=901): 4 / 5 / 6 cards per view at 901 / 1024 / 1280 (12 games a
 * row = 3 / 2.4 / 2 views); the 8px padding (cancelled by margin) keeps the
 * hover lift and focus ring inside the scroller. Edge fades follow
 * [data-am-rail-x] = start | mid | end | none (25-lobby.js); they are only
 * as wide as that padding (a fully visible card is never dimmed) and drop
 * while focus is inside the rail. Without JS the right fade shows and the
 * scrollbar stays visible (thin), since there are no arrows then. Phones
 * keep 20-home's touch rail, 601-900 its 4-column grid (every rule here is
 * >=901 only).
 *
 * Cascade: R = html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip)
 * (0,3,3), as in 20-home.css. Rail rules use .gm-row[class] (0,6,3): ties
 * 20-home's .gm-row[data-am-rail-end] and wins by order (25 > 20). New
 * elements are am-* only; nothing here sets display !important, and every
 * JS-toggled element of ours uses [hidden] (theme [hidden]{display:none
 * !important}, restated below at our weight).
 *
 * z-index (add to the stack in 55-overlays.css): 40 lobby bar (stuck),
 * 1600 search dialog: above the drawer (1500, it opens from there), below
 * the promo modal (1990), toast (9000) and #authModal (10000); shortcuts
 * do nothing while those are open. SeedyChat and the support toast step
 * aside (visibility) while the dialog is open, like for the drawer.
 *
 * Breakpoints: base / 601 / 901 / 1024 / 1201 / 1280 / 1366 (1024 and
 * 1280 are the chrome's nav bands, 1366 the measured member pill fit). Motion only
 * inside (prefers-reduced-motion: no-preference).
 */

/* ---------- Tokens ---------- */
html:has(> body.gm-sidebar-layout),
html body.gm-sidebar-layout {
  --am-lobby-bar-h: 48px;
}
html body.gm-sidebar-layout {
  --am-lobby-space: 12px;
  --am-lobby-chip-h: 40px;
  --am-lobby-z: 40;
  --am-search-z: 1600;
  --am-rail-pad: 8px;
  /* Rail edge fade = the rail padding: it softens cards while they slide
     past the edge but never dims a card that is fully in view (cards fill
     the rail exactly, the arrows say there is more). */
  --am-rail-fade: var(--am-rail-pad);
  /* Magnifier (text-2) and the "/" key cap (surface-3 + text-2) as SVG, so
     the first-paint placeholder and the real button are pixel-identical. */
  --am-search-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c4d3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4.5 4.5'/%3E%3C/svg%3E");
  --am-search-kbd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='5' fill='%23163246'/%3E%3Cpath d='m11.6 5.2-3.2 9.6' fill='none' stroke='%23a9c4d3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --am-search-pill-w: 220px;
}
@media (min-width: 901px) {
  html:has(> body.gm-sidebar-layout),
  html body.gm-sidebar-layout {
    --am-lobby-bar-h: 56px;
  }
  html body.gm-sidebar-layout {
    --am-lobby-space: 8px;
  }
}

/* ======================================================================
   A. Game search
   ====================================================================== */

/* ---------- Header trigger (first child of .auth-links) ---------- */
html body.gm-sidebar-layout header.topbar[data-am-search] {
  --am-chrome-nav-icon: none;
}
/* Same before the button exists, so the nav labels never move. */
@media (scripting: enabled) {
  html body.gm-sidebar-layout:not(:has(#game-stage)) header.topbar {
    --am-chrome-nav-icon: none;
  }
}
html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--am-chrome-btn-h);
  height: var(--am-chrome-btn-h);
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-1) var(--am-search-ico) center / 18px 18px no-repeat;
  box-shadow: none;
  color: var(--am-text-3);
  font: 500 13px/1 var(--am-font);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 44px touch target inside the header's empty top/bottom band. */
html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn::after {
  content: "";
  position: absolute;
  inset: -4px -2px;
  border-radius: inherit;
}
html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn .am-search-btn-label {
  display: none;
}
html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn:hover {
    background-color: var(--am-surface-2);
    color: var(--am-text-2);
  }
}
html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn[aria-expanded="true"] {
  background-color: var(--am-surface-2);
}

/* First-paint placeholder: same box, drawn before 25-lobby.js runs. */
@media (scripting: enabled) {
  html body.gm-sidebar-layout:not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
    content: none;
    flex: none;
    box-sizing: border-box;
    width: var(--am-chrome-btn-h);
    height: var(--am-chrome-btn-h);
    border-radius: var(--am-r-pill);
    background: var(--am-surface-1) var(--am-search-ico) center / 18px 18px no-repeat;
    color: var(--am-text-3);
    font: 500 13px/var(--am-chrome-btn-h) var(--am-font);
    white-space: nowrap;
    pointer-events: none;
  }
  @media (min-width: 601px) {
    html body.gm-sidebar-layout:not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
      content: "";
    }
  }
  @media (min-width: 901px) and (max-width: 1200.98px) {
    html body.gm-sidebar-layout[data-auth-logged-in="1"]:not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
      content: none;
    }
  }
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn {
    display: inline-flex;
  }
}
@media (min-width: 901px) and (max-width: 1200.98px) {
  html body.gm-sidebar-layout[data-auth-logged-in="1"] header.topbar .auth-links > .am-search-btn {
    display: none;
  }
}

/* Pill: guests from 1280, members from 1366. Label + "/" key cap (fine
   pointers only: the key cap means a keyboard is there). */
@media (min-width: 1280px) {
  html body.gm-sidebar-layout:not([data-auth-logged-in="1"]) header.topbar .auth-links > .am-search-btn,
  html body.gm-sidebar-layout:not([data-auth-logged-in="1"]):not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
    justify-content: flex-start;
    width: var(--am-search-pill-w);
    padding: 0 12px 0 40px;
    background-position: 14px center;
  }
  html body.gm-sidebar-layout:not([data-auth-logged-in="1"]) header.topbar .auth-links > .am-search-btn .am-search-btn-label {
    display: block;
  }
}
@media (min-width: 1366px) {
  html body.gm-sidebar-layout[data-auth-logged-in="1"] header.topbar .auth-links > .am-search-btn,
  html body.gm-sidebar-layout[data-auth-logged-in="1"]:not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
    justify-content: flex-start;
    width: var(--am-search-pill-w);
    padding: 0 12px 0 40px;
    background-position: 14px center;
  }
  html body.gm-sidebar-layout[data-auth-logged-in="1"] header.topbar .auth-links > .am-search-btn .am-search-btn-label {
    display: block;
  }
}
/* Placeholder text: only where the bundle will replace it (the box rules
   above do nothing while content is none). */
@media (scripting: enabled) and (min-width: 1280px) {
  html body.gm-sidebar-layout:not([data-auth-logged-in="1"]):not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
    content: "Oyun ara…";
  }
}
@media (scripting: enabled) and (min-width: 1366px) {
  html body.gm-sidebar-layout[data-auth-logged-in="1"]:not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
    content: "Oyun ara…";
  }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout:not([data-auth-logged-in="1"]) header.topbar .auth-links > .am-search-btn,
  html body.gm-sidebar-layout:not([data-auth-logged-in="1"]):not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
    background-image: var(--am-search-ico), var(--am-search-kbd);
    background-position: 14px center, right 10px center;
    background-size: 18px 18px, 20px 20px;
  }
}
@media (min-width: 1366px) and (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout[data-auth-logged-in="1"] header.topbar .auth-links > .am-search-btn,
  html body.gm-sidebar-layout[data-auth-logged-in="1"]:not(:has(#game-stage)) header.topbar:not([data-am-search]) .auth-links::before {
    background-image: var(--am-search-ico), var(--am-search-kbd);
    background-position: 14px center, right 10px center;
    background-size: 18px 18px, 20px 20px;
  }
}

/* ---------- Drawer field (top of the mobile drawer, <=900) ---------- */
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-search-wrap {
  flex: none;
  padding: 12px 16px 0;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-search {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 44px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2) var(--am-search-ico) 16px center / 18px 18px no-repeat;
  color: var(--am-text-3);
  font: 500 15px/1 var(--am-font);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-search:active {
  background-color: var(--am-surface-3);
}
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-search:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .8);
  outline-offset: 2px;
}
/* The account block below keeps its own 16px padding. */
html body.gm-sidebar-layout > .am-drawer-root .am-drawer-search-wrap + .am-drawer-account {
  padding-top: 12px;
}

/* ---------- Dialog ---------- */
html.am-search-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}
html.am-search-open body.gm-sidebar-layout [data-destek-widget],
html.am-search-open body.gm-sidebar-layout .gm-support-status {
  visibility: hidden !important;
}
html body.gm-sidebar-layout > .am-search-root {
  position: fixed;
  inset: 0;
  z-index: var(--am-search-z);
  display: block;
  color: var(--am-text);
  font-family: var(--am-font);
  font-feature-settings: "cv11", "ss01";
}
html body.gm-sidebar-layout > .am-search-root[hidden] {
  display: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-overlay {
  position: absolute;
  inset: 0;
  background: var(--am-overlay);
  opacity: 0;
}
html body.gm-sidebar-layout > .am-search-root.is-open .am-search-overlay {
  opacity: 1;
}
/* Phones: full-height sheet (the input stays above the keyboard). */
html body.gm-sidebar-layout > .am-search-root .am-search {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--am-s-5);
  box-sizing: border-box;
  margin: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--am-gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--am-bg);
  outline: none;
  opacity: 0;
}
html body.gm-sidebar-layout > .am-search-root.is-open .am-search {
  opacity: 1;
  transform: none;
}
html body.gm-sidebar-layout > .am-search-root .am-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
html body.gm-sidebar-layout > .am-search-root .am-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--am-s-3);
  margin: 0;
}
html body.gm-sidebar-layout > .am-search-root .am-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--am-s-2);
  height: 52px;
  padding: 0 6px 0 48px;
  border-radius: var(--am-r-md);
  background: var(--am-surface-1) var(--am-search-ico) 16px center / 20px 20px no-repeat;
}
html body.gm-sidebar-layout > .am-search-root .am-search-field:focus-within {
  box-shadow: inset 0 0 0 2px rgb(var(--am-accent-rgb) / .55);
}
html body.gm-sidebar-layout > .am-search-root .am-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--am-text);
  font: 600 17px/1.2 var(--am-font);
  letter-spacing: -.01em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-input::placeholder {
  color: var(--am-text-3);
  opacity: 1;
}
html body.gm-sidebar-layout > .am-search-root .am-search-input::-webkit-search-decoration,
html body.gm-sidebar-layout > .am-search-root .am-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--am-r-sm);
  background: transparent;
  color: var(--am-text-2);
  font: 600 12px/1 var(--am-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 44px touch target around the 40px button (the 52px field has room). */
html body.gm-sidebar-layout > .am-search-root .am-search-close::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
}
html body.gm-sidebar-layout > .am-search-root .am-search-close i {
  font-size: 17px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-close .am-search-esc {
  display: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-close:active {
  background: var(--am-surface-2);
}
html body.gm-sidebar-layout > .am-search-root .am-search-hint {
  margin: 0;
  padding: 0 4px;
  color: var(--am-text-3);
  font: 500 var(--am-fs-sm)/1.4 var(--am-font);
}
html body.gm-sidebar-layout > .am-search-root .am-search-hint[data-am-error] {
  color: var(--am-warn);
}

/* Targets: two submit buttons (Enter = the first, slots). */
html body.gm-sidebar-layout > .am-search-root .am-search-targets {
  display: grid;
  gap: 4px;
  margin: 0;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--am-s-3);
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--am-r-md);
  background: transparent;
  color: var(--am-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target:first-child {
  background: var(--am-surface-1);
}
html body.gm-sidebar-layout > .am-search-root .am-search-target-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--am-tint);
  color: var(--am-accent);
  font-size: 16px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target-txt {
  display: grid;
  gap: 3px;
  min-width: 0;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target-t {
  color: var(--am-text);
  font: 650 var(--am-fs-md)/1.25 var(--am-font);
}
html body.gm-sidebar-layout > .am-search-root .am-search-target-q {
  overflow: hidden;
  color: var(--am-text-2);
  font: 500 var(--am-fs-sm)/1.3 var(--am-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target-k {
  display: none;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--am-surface-3);
  color: var(--am-text-2);
  font: 600 11px/1 var(--am-font);
}
html body.gm-sidebar-layout > .am-search-root .am-search-target-go {
  color: var(--am-text-3);
  font-size: 13px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target:active {
  background: var(--am-surface-2);
}
html body.gm-sidebar-layout > .am-search-root :is(.am-search-close, .am-search-target, .am-search-link):focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}

/* Category links (cloned from the header nav). */
html body.gm-sidebar-layout > .am-search-root .am-search-links {
  display: grid;
  gap: var(--am-s-3);
  padding: 0 4px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-label {
  margin: 0;
  color: var(--am-text-3);
  font: 650 var(--am-fs-2xs)/1.2 var(--am-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body.gm-sidebar-layout > .am-search-root .am-search-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-s-2);
}
html body.gm-sidebar-layout > .am-search-root .am-search-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-1);
  color: var(--am-text-2);
  font: 600 var(--am-fs-sm)/1 var(--am-font);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-search-root .am-search-link i {
  width: 16px;
  color: var(--am-text-3);
  font-size: 13px;
  text-align: center;
}
html body.gm-sidebar-layout > .am-search-root .am-search-link[href="/spor"] .fa-medal::before {
  content: "\f1e3";
}
html body.gm-sidebar-layout > .am-search-root .am-search-link:hover {
  color: var(--am-text-2);
  text-decoration: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-link:active {
  background: var(--am-surface-2);
}

@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout > .am-search-root .am-search-close:hover {
    background: var(--am-surface-2);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target:hover {
    background: var(--am-surface-2);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target:hover .am-search-target-go {
    color: var(--am-accent);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-link:hover {
    background: var(--am-surface-2);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target-k {
    display: inline-block;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target:not(:first-child) .am-search-target-k {
    display: none;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target:first-child .am-search-target-go {
    display: none;
  }
}

/* 601+: centred dialog. */
@media (min-width: 601px) {
  html body.gm-sidebar-layout > .am-search-root .am-search {
    inset: clamp(24px, 12vh, 120px) 0 auto;
    width: min(640px, calc(100% - 48px));
    max-height: calc(100% - clamp(24px, 12vh, 120px) - 24px);
    margin: 0 auto;
    padding: 12px 12px 20px;
    border-radius: var(--am-r-lg);
    background: var(--am-surface-1);
    box-shadow: var(--am-shadow-3);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-field {
    height: 56px;
    background-color: var(--am-surface-2);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-input {
    font-size: 19px;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target:first-child,
  html body.gm-sidebar-layout > .am-search-root .am-search-target:active,
  html body.gm-sidebar-layout > .am-search-root .am-search-link {
    background-color: var(--am-surface-2);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target-k,
  html body.gm-sidebar-layout > .am-search-root .am-search-close .am-search-esc {
    background-color: var(--am-surface-3);
  }
  /* The five category chips fit one row in the 640px panel (natural
     widths ~585px at these paddings, 604px available); narrower panels
     still wrap. */
  html body.gm-sidebar-layout > .am-search-root .am-search-links {
    padding: 0 6px;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-links-list {
    justify-content: space-between;
    gap: 6px;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-link {
    gap: 6px;
    padding: 0 12px 0 10px;
  }
}
@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout > .am-search-root .am-search-target:hover,
  html body.gm-sidebar-layout > .am-search-root .am-search-link:hover,
  html body.gm-sidebar-layout > .am-search-root .am-search-close:hover {
    background-color: var(--am-surface-3);
  }
  /* Keyboard users see "Esc" instead of the cross. */
  html body.gm-sidebar-layout > .am-search-root .am-search-close .am-search-esc {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 6px;
    color: var(--am-text-2);
    font: 600 11px/1 var(--am-font);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-close i {
    display: none;
  }
}

/* ======================================================================
   B. Home chip bar
   ====================================================================== */

/* Reserve the bar's slot until 25-lobby.js has inserted it. */
@media (scripting: enabled) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip):not([data-am-lobby]) > .gm-slider {
    margin-bottom: calc(var(--am-lobby-space) + var(--am-lobby-bar-h));
  }
}

html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby {
  position: relative;
  box-sizing: border-box;
  height: var(--am-lobby-bar-h);
  margin: calc(var(--am-lobby-space) - var(--am-section-gap)) calc(var(--am-gutter) * -1) 0;
  padding: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track {
  display: flex;
  align-items: center;
  gap: var(--am-s-2);
  box-sizing: border-box;
  height: 100%;
  padding: 4px var(--am-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--am-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track::-webkit-scrollbar {
  display: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track[data-am-x="mid"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track[data-am-x="end"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track[data-am-x="none"] {
  -webkit-mask-image: none;
  mask-image: none;
}

html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  box-sizing: border-box;
  height: var(--am-lobby-chip-h);
  margin: 0;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-1);
  box-shadow: none;
  color: var(--am-text-2);
  font: 600 var(--am-fs-base)/1 var(--am-font);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip[hidden] {
  display: none;
}
/* 44px touch target (40px chip). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip::after {
  content: "";
  position: absolute;
  inset: -2px 0;
  border-radius: inherit;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip i {
  width: 16px;
  color: var(--am-text-3);
  font-size: 14px;
  text-align: center;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip:hover {
  color: var(--am-text-2);
  text-decoration: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip[aria-current="true"] {
  background: var(--am-tint);
  color: var(--am-text);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip[aria-current="true"] i {
  color: var(--am-accent);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
/* Search chip: icon-only circle, shown only where the header has no
   search trigger: phones (<=600, everyone) and members at 901-1200 (see
   the trigger bands in the header comment). Everywhere else the header
   circle or pill is the one search entry, so the chip is hidden there. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip.am-lobby-search {
  width: var(--am-lobby-chip-h);
  padding: 0;
  background: var(--am-surface-1) var(--am-search-ico) center / 18px 18px no-repeat;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-sep {
  flex: none;
  align-self: center;
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--am-line-2);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip:hover {
    background-color: var(--am-surface-2);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip:hover i {
    color: var(--am-text-2);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip[aria-current="true"]:hover {
    background-color: var(--am-tint-2);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip[aria-current="true"]:hover i {
    color: var(--am-accent);
  }
}
/* A heading the chip moved keyboard focus to: no ring on the h2 itself. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head > h2[data-am-focus-target]:focus {
  outline: none;
}

@media (min-width: 901px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby {
    position: sticky;
    top: var(--gm-top);
    z-index: var(--am-lobby-z);
    margin-inline: -4px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track {
    padding: 8px 4px;
    scroll-padding-inline: 4px;
  }
  /* Stuck: header and chip band read as one block. The band is a
     page-colour fill to both viewport edges with the header's scrolled edge
     under it (the hairline, then a 24px shade standing in for the header's
     0 8px 24px shadow), painted by a filled border-image with outset (ink
     overflow only: no 100vw box, no horizontal scroll, no layout change,
     no hit area over the cards below). The hairline is --am-line-solid
     (opaque) because it is drawn over content. Meanwhile the header drops
     its own hairline and shadow (10-chrome.css) and turns opaque, so there
     is one edge, under the band. */
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby[data-am-stuck] {
    border-image: linear-gradient(var(--am-bg) calc(100% - 25px), var(--am-line-solid) calc(100% - 25px) calc(100% - 24px), rgb(0 0 0 / .24) calc(100% - 24px), rgb(0 0 0 / 0) 100%) fill 0 / 0 / 0 100vmax 25px;
  }
  html body.gm-sidebar-layout:has(main.gm-wire > nav.am-lobby[data-am-stuck]) header.topbar[data-am-scrolled="1"] {
    border-bottom-color: transparent;
    background: var(--am-bg);
    box-shadow: none;
  }
  /* The anchor offset clears the stuck bar too (see header). */
  html:has(> body.gm-sidebar-layout main.gm-wire > nav.am-lobby) {
    scroll-padding-top: calc(var(--gm-top) + var(--am-lobby-bar-h) + 20px);
  }
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip.am-lobby-search {
    display: none;
  }
}
@media (min-width: 901px) and (max-width: 1200.98px) {
  html body.gm-sidebar-layout[data-auth-logged-in="1"] main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip.am-lobby-search {
    display: inline-flex;
  }
}

/* ---------- Games first (>=901): first row above the tiles ---------- */
@media (min-width: 901px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > :is(.gm-slider, nav.am-lobby) {
    order: -2;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section:not(.gm-row-section ~ *) {
    order: -1;
    margin-top: calc(var(--am-s-6) - var(--am-section-gap));
  }
}

/* ======================================================================
   C. Desktop rails (>=901)
   ====================================================================== */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head > .am-rail-nav {
  display: none;
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[class] {
    --am-rail-n: 4;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-auto-columns: calc((100% - (var(--am-rail-n) - 1) * var(--am-home-gap, var(--am-card-gap))) / var(--am-rail-n));
    margin: calc(var(--am-rail-pad) * -1) calc(var(--am-rail-pad) * -1) calc(var(--am-rail-pad) * -2);
    padding: var(--am-rail-pad) var(--am-rail-pad) calc(var(--am-rail-pad) * 2);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--am-rail-pad);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--am-rail-fade)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--am-rail-fade)), transparent 100%);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[class]::-webkit-scrollbar {
    display: none;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[data-am-rail-x="mid"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-rail-fade), #000 calc(100% - var(--am-rail-fade)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-rail-fade), #000 calc(100% - var(--am-rail-fade)), transparent 100%);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[data-am-rail-x="end"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-rail-fade), #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-rail-fade), #000 100%);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[data-am-rail-x="none"],
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[class]:focus-within {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Head: title | ... | Tümü | prev next */
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head > .gm-row-all,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head > h2 + .am-rail-nav {
    margin-left: auto;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head > .am-rail-nav {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--am-s-2);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head > .am-rail-nav[hidden] {
    display: none;
  }
}
@media (min-width: 1024px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[class] {
    --am-rail-n: 5;
  }
}
@media (min-width: 1280px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[class] {
    --am-rail-n: 6;
  }
}
/* No JS = no arrows: keep a thin scrollbar so mouse users can still scroll. */
@media (min-width: 901px) and (scripting: none) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[class] {
    scrollbar-width: thin;
  }
}

html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .am-rail-btn {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--am-surface-1);
  box-shadow: none;
  color: var(--am-text-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .am-rail-btn::after {
  content: "";
  position: absolute;
  inset: -4px -2px;
  border-radius: inherit;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .am-rail-btn[aria-disabled="true"] {
  color: var(--am-text-3);
  opacity: .45;
  cursor: default;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .am-rail-btn:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .am-rail-btn:not([aria-disabled="true"]):hover {
    background: var(--am-surface-2);
    color: var(--am-text);
  }
}

/* ======================================================================
   Motion (opt-in): fades, the dialog's drop-in and press feedback.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn,
  html body.gm-sidebar-layout > .am-drawer-root .am-drawer-search,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .am-rail-btn,
  html body.gm-sidebar-layout > .am-search-root :is(.am-search-close, .am-search-target, .am-search-link) {
    transition: background-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease), opacity var(--am-dur) var(--am-ease), transform .12s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip i {
    transition: color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout header.topbar .auth-links > .am-search-btn:active,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip:active,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .am-rail-btn:not([aria-disabled="true"]):active,
  html body.gm-sidebar-layout > .am-search-root :is(.am-search-close, .am-search-link):active {
    transform: scale(.95);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target:active {
    transform: scale(.985);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-overlay {
    transition: opacity .2s var(--am-ease);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search {
    transform: translateY(12px);
    transition: opacity .2s var(--am-ease), transform .26s var(--am-ease);
  }
  html body.gm-sidebar-layout > .am-search-root.is-open .am-search {
    transform: none;
  }
}
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout > .am-search-root .am-search {
    transform: translateY(-8px) scale(.985);
  }
}

/* ---- 27-simplify.css ---- */
/*
 * Simplify (calmer phones): one-line announcement, home de-duplication,
 * collapsible footer link groups on phones. Pairs with 27-simplify.js.
 *
 * 1. Announcement bar (.gm-topbar-announce, shared chrome, every page)
 *    One line at every width (this file owns the text line; 10-chrome.css
 *    the strip, its colours and the close button).
 *    Geometry is NOT changed: the strip stays --gm-announce (30px) at every
 *    breakpoint, so body padding, header top, scroll-padding and the catalog
 *    sticky band (all read --gm-top) are untouched, and body.gm-no-announce
 *    keeps collapsing it to 0 (10-chrome.css owns those tokens).
 *    - Static (JS off, prefers-reduced-motion: reduce, or text that fits):
 *      one line, ellipsis, centred. Below 390px, under reduced motion or
 *      (scripting: none), the text is 10.5px so the domain
 *      ("aquabet233.com") still ends before the ellipsis at 360.
 *    - Marquee: 27-simplify.js measures the text; when it does not fit it
 *      appends ONE aria-hidden + inert copy of the text span ([data-am-dup])
 *      and sets [data-am-ann="scroll"] + --am-ann-dur on the bar. Both
 *      spans translate by -100% of their own (identical) width, so the loop
 *      is seamless. Only inside (prefers-reduced-motion: no-preference);
 *      paused on hover, focus-within (close button) and touch
 *      ([data-am-ann-paused]). The copy is display:none everywhere else, so
 *      screen readers and reduced motion get the original text once.
 *    Specificity: div.gm-topbar-announce (0,2,3)/(0,3,3) beats 10-chrome's
 *    (0,2,2)/(0,3,2) regardless of what that partial does with order.
 *
 * 2. Home (/): the trust strip (section.gm-trust: 7/24 Canlı Destek / Hızlı
 *    Ödeme / Güvenli Altyapı, repeated by the footer trust band) and the
 *    near-empty "Bizi Takip Et & Hızlı Erişim" block (section.gm-quicklinks-
 *    wrap, 2 pills: "/" and /promosyonlar) are removed at ALL widths (owner
 *    decision). Both are server-rendered, never toggled by JS (maps/home.json).
 *    main is a flex column with one gap (20-home.css), so dropping two flex
 *    items leaves the rhythm even; main's own bottom padding stays.
 *    Root (0,5,4) beats 20-home's R > .gm-trust (0,4,3).
 *
 * 3. Footer accordion, phones only (<=600px)
 *    27-simplify.js adds .am-footer-acc to footer.site-footer and, per titled
 *    group, an <h4 class="am-acc-h"><button class="am-acc-btn"
 *    aria-expanded aria-controls> heading:
 *      nav.gmf-links  "Bilgi & Politikalar" (label is 50-footer's ::before;
 *                     the button heading is the nav's first grid item)
 *      .gmf-sec       "Ödeme Yöntemleri" (h4.gmf-h; the new heading sits
 *                     right after it)
 *    Groups start collapsed ([data-am-acc-open="0"]). EVERY collapsed rule
 *    needs .am-footer-acc AND max-width:600px: without JS nothing collapses,
 *    and from 601px the original labels show and the buttons are
 *    display:none (no dead tab stops on desktop). Never collapsed: trust
 *    band, legal text, licence seals, RG badges, copyright, 18+ / Sorumlu
 *    Oyun pill and warning, and the "Sorumlu Oyun" and "Şartlar ve
 *    Koşullar" links (pinned by the JS, [data-am-acc-pin]). (The provider
 *    strip is not drawn on phones at all, see 50-footer.css.)
 *    Open payment group: the 13 chips wrap in balanced rows (the 601px
 *    look) instead of the no-JS sideways rail, which showed ~4 of 13.
 *    Closed link group: the two pinned links sit on one line, unwrapped.
 *    With the accordion on, the phone grid draws payments above links (DOM
 *    order), so the two buttons are tabbed and read in drawn order.
 *
 * 4. Phone quick wins (kept inside the sections above, all small):
 *    - announcement: 2 lines -> 1 line; 10.5px static text below 390px so
 *      the domain stays readable; marquee paused under drawer/modal;
 *    - footer accordion: payment + link groups tightened into one list
 *      (group margins 32px -> 28px / 0) between hairlines;
 *    - home: two stacked blocks gone (trust strip + quick links).
 *
 * Breakpoints: base / 390 (announce font) / 601. Motion only inside
 * (prefers-reduced-motion: no-preference). No !important, no display
 * !important, no transform/filter on html/body.
 */

/* ======================================================================
   1. Announcement bar
   ====================================================================== */
html body.gm-sidebar-layout div.gm-topbar-announce .gm-announce-track {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: none;
}
/* The loop copy exists only for the marquee. */
html body.gm-sidebar-layout div.gm-topbar-announce .gm-announce-track > [data-am-dup] {
  display: none;
}
/* Static-only contexts on narrow phones (reduced motion, JS off): 10.5px so
   the domain still ends before the ellipsis at 360 (it ends 4px short of the
   track at 11.5px). The marquee keeps 10-chrome's 11.5px, so the pre-JS
   paint and the running marquee share one size (no reflow at init). */
@media (max-width: 389.98px) and (prefers-reduced-motion: reduce), (max-width: 389.98px) and (scripting: none) {
  html body.gm-sidebar-layout div.gm-topbar-announce {
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"] {
    --am-ann-gap: 48px;
    --am-ann-fade: 10px;
    justify-content: flex-start;
  }
  /* The track grows into the strip; its left edge moves 10px out so the
     resting text keeps the gutter while scrolled text fades out there. */
  html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"] .gm-announce-track {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin-left: calc(var(--am-ann-fade) * -1);
    padding-left: var(--am-ann-fade);
    text-overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-ann-fade), #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-ann-fade), #000 calc(100% - 18px), transparent 100%);
  }
  html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"] .gm-announce-track > span {
    display: block;
    flex: 0 0 auto;
    padding-right: var(--am-ann-gap);
    animation: am-ann-marquee var(--am-ann-dur, 18s) linear 2s infinite;
  }
  html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"] .gm-announce-track > [data-am-dup] {
    display: block;
  }
  /* Paused on keyboard focus (close button) and touch ([data-am-ann-paused],
     resumed by 27-simplify.js 1.5s after the finger lifts), on hover where
     a real hover exists, and while the drawer (html.am-drawer-open,
     10-chrome.js) or a modal (html[data-am-modal], 55-overlays.js) covers
     the page: no motion behind an overlay. :hover is kept out of touch
     screens because a tap leaves it stuck until the next tap elsewhere,
     which would defeat the timed resume. The pause rules out-rank the
     animation shorthand above (0,4,4). */
  html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"]:is(:focus-within, [data-am-ann-paused]) .gm-announce-track > span,
  html:is(.am-drawer-open, [data-am-modal]) body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"] .gm-announce-track > span {
    animation-play-state: paused;
  }
  @media (hover: hover) {
    html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"]:hover .gm-announce-track > span {
      animation-play-state: paused;
    }
  }
}
@keyframes am-ann-marquee {
  to { transform: translate3d(-100%, 0, 0); }
}

/* ======================================================================
   2. Home: no trust strip, no quick-links block
   ====================================================================== */
html body.gm-sidebar-layout main.gm-wire.page-shell:has(> .gm-catstrip) > :is(section.gm-trust, section.gm-quicklinks-wrap) {
  display: none;
}

/* ======================================================================
   3. Footer accordion (phones)
   ====================================================================== */
/* Built by JS; hidden until the phone accordion is active. */
html body.gm-sidebar-layout footer.site-footer .am-acc-h {
  display: none;
}

@media (max-width: 600px) {
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc {
    --am-acc-line: var(--am-line);
  }
  /* The JS heading replaces the original labels. */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links::before {
    content: none;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec > .gmf-h:not(.am-acc-h) {
    display: none;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .am-acc-h {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .am-acc-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 2px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--am-text);
    font: 700 12px/1.3 var(--am-font);
    letter-spacing: .08em;
    text-align: start;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Chevron: a rotated corner, no icon font needed. */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .am-acc-btn::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: -4px 4px 0 0;
    border-right: 1.5px solid var(--am-text-2);
    border-bottom: 1.5px solid var(--am-text-2);
    transform: rotate(45deg);
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .am-acc-btn[aria-expanded="true"]::after {
    margin-top: 4px;
    border-color: var(--am-accent);
    transform: rotate(-135deg);
  }
  @media (hover: hover) {
    html body.gm-sidebar-layout footer.site-footer.am-footer-acc .am-acc-btn:hover {
      color: var(--am-accent);
    }
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .am-acc-btn:focus-visible {
    outline: 2px solid rgb(var(--am-accent-rgb) / .8);
    outline-offset: -2px;
  }

  /* The two groups follow DOM order (.gmf-sec, then nav.gmf-links), so the
     accordion buttons are read and tabbed in the order they are drawn.
     50-footer's phone grid draws links above payments; with the buttons in
     place that order is swapped here (the rest of the stack is unchanged). */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-shell {
    grid-template-areas:
      "trust"
      "legal"
      "lic"
      "rgrow"
      "pay"
      "links"
      "prov"
      "cr"
      "bottom";
  }
  /* Two stacked rows between hairlines (top of each group, bottom of the
     last one). Link rows carry no per-row hairline (50-footer.css). */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec:has(> .am-acc-h) {
    margin-top: 28px;
    border-top: 1px solid var(--am-acc-line);
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links:has(> .am-acc-h) {
    margin-top: 0;
    border-top: 1px solid var(--am-acc-line);
    border-bottom: 1px solid var(--am-acc-line);
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links[data-am-acc-open="1"] {
    padding-bottom: 8px;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec[data-am-acc-open="1"] {
    padding-bottom: 16px;
  }

  /* Open payment group: every method in view. 50-footer's phone rail
     (one sideways row, ~4 of 13 chips visible, PayFix cut at the edge)
     stays for the no-JS footer; inside the accordion the chips wrap with
     text-wrap: balance, the same inline chips as from 601px. */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec .gmf-pay-marquee {
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec .gmf-pay-track {
    display: block;
    width: auto;
    margin: 0 0 -8px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-align: start;
    text-wrap: balance;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec .gmf-pay-track > .gmf-logo {
    margin: 0 8px 8px 0;
    vertical-align: top;
  }

  /* Closed link group: only the two pinned links show. They get their own
     two content-sized columns on one line, instead of two cells of the
     3-column link grid, where "Şartlar ve Koşullar" wrapped at 390. */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links[data-am-acc-open="0"] {
    grid-template-columns: repeat(2, max-content);
    column-gap: 24px;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links[data-am-acc-open="0"] > a[data-am-acc-pin] {
    white-space: nowrap;
  }

  /* Collapsed content. The responsible-gambling and terms links
     ([data-am-acc-pin], set by 27-simplify.js) stay visible in the closed
     link group, so they are one tap away on every phone page. */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links[data-am-acc-open="0"] > a:not([data-am-acc-pin]),
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec[data-am-acc-open="0"] > :not(.am-acc-h, .gmf-h) {
    display: none;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .am-acc-btn::after {
    transition: transform .2s var(--am-ease), margin-top .2s var(--am-ease), border-color .2s var(--am-ease);
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links[data-am-acc-open="1"] > a:not([data-am-acc-pin]),
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec[data-am-acc-open="1"] > :not(.am-acc-h, .gmf-h) {
    animation: am-acc-in .22s var(--am-ease) both;
  }
}
@keyframes am-acc-in {
  from { opacity: 0; transform: translate3d(0, -4px, 0); }
}

/* ---- 30-catalog.css ---- */
/*
 * Catalog pages: /slot (aqua-slot.php + aqua-slot.css) and /livecasino
 * (aqua-livecasino.php + aqua-livecasino.css).
 *
 * Cascade notes (see maps/catalog.json):
 *  - Both pages render inline <style> blocks in <body>, AFTER this layer, so
 *    every rule that competes with them carries an id (#slot-games, #slotGrid,
 *    #lcGrid, #lcProviders, ...) on top of the html body.gm-sidebar-layout
 *    prefix. Their !important rules (slot/live aspect-ratio, cover fit,
 *    load-more colours) are beaten with !important at higher specificity.
 *  - JS owns display on .slot-card, .lc-card, #slotNoResults, #lcEmpty, the
 *    load-more wraps, modal rows and [hidden] nodes: no display !important on
 *    any of them. Card heights stay deterministic (aspect-ratio) for the
 *    gm_slot_scroll_v1 restore.
 *  - No transform/filter/contain/isolation/z-index on main.page-shell,
 *    section.game-section or #slot-games: the fixed provider modal lives
 *    inside them.
 *  - The live page dissolves its section (display:contents) and lays main out
 *    as a grid via :has(), so the title leads and the toolbar sits between
 *    title and grid exactly like /slot. Without :has() the DOM order stays.
 *
 * Breakpoints: base = phones, 601, 901, 1201. Every property set here is set
 * deliberately at these steps, neutralising the legacy 520/600/750/1100/1150/
 * 1300/1400 bands (all lower specificity).
 *
 * Design language v2 (00-tokens.css header): pills, search, toggle and
 * load-more are filled surfaces with a transparent 1px border (the 36/44px
 * hit-area maths below counts that border, so it stays); cards have no
 * border and no glow, hover lifts the caption tone (--am-card-bg-hover)
 * and shows the scrim + play disc; the desktop toolbar is a flat surface-1
 * panel; active pills are a flat cyan tint (--am-tint-2).
 */

/* ---------------------------------------------------------------------------
   Local tokens
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout {
  --am-cat-gap: var(--am-card-gap); /* 10 / 12 / 14px, shared with the home rows (12-cards.css) */
  /* One minimum card width for both grids, so /slot, /livecasino and the
     home rails show the same card size at the same width (it was 150/156
     vs 170px: 7 vs 6 columns at 1280-1439). */
  --am-cat-min: 170px;
  --am-cat-band: var(--am-bg); /* opaque: bright art must not show through */
  --am-cat-sticky-top: var(--gm-top);  /* flush under the fixed header */
  --am-cat-tile: var(--am-surface-2);
  --am-cat-crop: 1.3;          /* max crop factor (portrait art) before it letterboxes */
  --am-cat-panel-pad: 12px;
  --am-cat-snap-pad: 36px;     /* rail snap offset = left fade (28px) + gap; mirrored in 30-catalog.js */
  /* Card caption (slot + live): two fixed rows under the square cover. */
  --am-cat-cap-1: 29px;        /* name: 10px + 18px line + 1px */
  --am-cat-cap-2: 27px;        /* provider / type line: 16px line + 11px */
  --am-cat-cap-pad-1: 10px 12px 1px;
  --am-cat-cap-pad-2: 0 12px 11px;
  --am-cat-shimmer: linear-gradient(100deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .055) 45%, rgb(255 255 255 / .09) 50%, rgb(255 255 255 / .055) 55%, rgb(255 255 255 / 0) 70%);
}

/* ---------------------------------------------------------------------------
   Container: same edges as header/footer (content box = min(100% - 2
   gutters, --am-container), centred). Overrides .page-shell 24/18/14px.
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--am-container) + 2 * var(--am-gutter));
  min-width: 0;
  margin: 0 auto;
  padding: 16px var(--am-gutter) calc(var(--am-section-gap) + 8px);
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) {
    padding-top: 24px;
  }
}

/* ---------------------------------------------------------------------------
   Promo slider on the catalog pages, desktop (>=901): games above the fold.
   15-slider.css draws the slider across the full container at the art's
   1038/358 ratio, i.e. 455px tall at 1440. That put the first card at
   y=819 at 1440x900 (live 685), and at 1366x768 no card showed at all.
   Here the frame keeps the container width but never gets taller than
   the art's 358px design height. From ~1087px the frame is wider than the
   art, so every slide is contained (baked-in copy is never cropped) and
   the side bands show the same art blurred and dimmed (--am-slide-art,
   set per slide by 15-slider.js; with JS off they are the surface-1
   frame). The gap to the title is 24px, the same gap home leaves between
   slider and chip bar. First card top: 681 at 1440x900 and 1920x1080
   (live 685); 681 at 1366x768, so ~87px of the first row shows. Phones and
   tablets are unchanged.
   The height comes from container units, not max-height: a max-height on
   the 1038/358 ratio box is transferred to its width, which shrank the
   frame to 1038px instead of capping its height. Browsers without
   container units keep the full-size slider.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) {
  html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) > .gm-slider {
    --am-slider-after: var(--am-s-6);
  }
}
@media (min-width: 901px) {
  @supports (width: 1cqi) {
    html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) > .gm-slider {
      container-type: inline-size;
    }
    html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) > .gm-slider .gm-slider-viewport {
      aspect-ratio: auto;
      height: min(358px, 100cqi * 358 / 1038);
    }
    /* Feathered art edges: the contained art (width = frame height x its
       own ratio, --am-slide-r from 15-slider.js) fades into the blurred
       band over up to 40px instead of ending on a hard seam. The fade is
       never wider than the band, so it is 0 while the art fills the frame
       (below ~1087px). Only the art's decorative outer edge is faded. */
    html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) > .gm-slider .gm-slide > img {
      --am-art-w: min(100cqi, min(358px, 100cqi * 358 / 1038) * var(--am-slide-r, 2.8994));
      --am-art-fade: min(40px, max(0px, (100cqi - var(--am-art-w)) / 2));
      -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - var(--am-art-w) / 2), #000 calc(50% - var(--am-art-w) / 2 + var(--am-art-fade)), #000 calc(50% + var(--am-art-w) / 2 - var(--am-art-fade)), transparent calc(50% + var(--am-art-w) / 2));
      mask-image: linear-gradient(90deg, transparent calc(50% - var(--am-art-w) / 2), #000 calc(50% - var(--am-art-w) / 2 + var(--am-art-fade)), #000 calc(50% + var(--am-art-w) / 2 - var(--am-art-fade)), transparent calc(50% + var(--am-art-w) / 2));
    }
  }
  html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) > .gm-slider .gm-slide::before {
    content: "";
    position: absolute;
    inset: -40px;
    background: var(--am-slide-art, none) center / cover no-repeat;
    filter: blur(32px) saturate(1.1) brightness(.6);
    pointer-events: none;
  }
  html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) > .gm-slider .gm-slide > :is(img, picture) {
    position: relative;
    z-index: 1;
  }
  html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) > .gm-slider .gm-slide img {
    object-fit: contain;
  }
}

/* ---------------------------------------------------------------------------
   Section shell + page title (both pages)
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout main.page-shell > section.game-section.surface {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html body.gm-sidebar-layout main.page-shell > section.game-section > .section-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  min-width: 0;
}

/* "Tüm Slotlar" / "Canlı Masalar" are the page titles: same tier as the
   40-content page titles (/vip, /promosyonlar, legal: --am-fs-title, 800,
   -.03em, no accent bar; v2 dropped the bar on section titles too). */
html body.gm-sidebar-layout main.page-shell > section.game-section > .section-header > .section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  color: var(--am-text);
  font-family: var(--am-font);
  font-size: var(--am-fs-title);
  font-weight: var(--am-title-weight);
  line-height: 1.05;
  letter-spacing: var(--am-title-track);
}
html body.gm-sidebar-layout main.page-shell > section.game-section > .section-header > .section-title::before {
  content: none;
}

/* "Canlı Casino" cross-link on /slot: the shared view-all pill (12-cards.css
   tokens) with a chevron and a 44px hit area. */
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--am-viewall-h);
  padding: var(--am-viewall-pad);
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-viewall-bg);
  color: var(--am-text-2);
  font: 600 13px/1 var(--am-font);
  text-decoration: none;
  white-space: nowrap;
}
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link::after {
  content: "";
  position: absolute;
  inset: var(--am-viewall-hit) -2px;
}
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link > i {
  font-size: 10px;
  color: currentColor;
}
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link > i.fa-arrow-right::before {
  content: "\f054"; /* chevron-right */
}

/* Live table counter: a static chip, not a link. */
html body.gm-sidebar-layout #lcCount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-1);
  color: var(--am-text-2);
  font: 600 13px/1 var(--am-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  cursor: default;
}
html body.gm-sidebar-layout #lcCount::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--am-danger);
  box-shadow: none;
}
html body.gm-sidebar-layout #lcCount > i {
  display: none;
}

/* ---------------------------------------------------------------------------
   Live page layout: title -> toolbar -> grid (needs :has()).
   main becomes a two-column grid; the section box dissolves so its header,
   grid, states and load-more become rows of main. Rows are explicit, so the
   order never depends on the server markup order.
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > * {
  grid-column: 1 / -1;
  min-width: 0;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section {
  display: contents;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > .gm-slider { grid-row: 1; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > .section-header { grid-row: 2; grid-column: 1 / -1; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders { grid-row: 3; grid-column: 1; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle { grid-row: 3; grid-column: 2; align-self: start; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > .lc-search { grid-row: 4; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > #lcGrid { grid-row: 5; grid-column: 1 / -1; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > .gm-catalog-error { grid-row: 6; grid-column: 1 / -1; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > #lcEmpty { grid-row: 7; grid-column: 1 / -1; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > #lcLoadMoreWrap { grid-row: 8; grid-column: 1 / -1; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > .lc-cta { grid-row: 9; }

/* ---------------------------------------------------------------------------
   Toolbar (phones + tablets): one sticky pill rail, search full width below.
   /slot: .slot-toolbar dissolves so the pill row can stick inside the tall
   section. /livecasino: #lcProviders is the rail itself.
   The band sticks flush under the fixed header (its 8px top padding is a
   real, hit-testable box, so nothing behind it can be tapped) and its
   background bleeds to both viewport edges (box-shadow spread, clipped).
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slot-games .slot-toolbar {
  display: contents;
}

html body.gm-sidebar-layout #slot-games .slot-toolbar-filters,
html body.gm-sidebar-layout main.page-shell > #lcProviders {
  position: sticky;
  top: var(--am-cat-sticky-top);
  z-index: 30;
  flex: none;
  min-width: 0;
  margin: -8px 0 10px;
  background: var(--am-cat-band);
  box-shadow: 0 0 0 100vmax var(--am-cat-band);
  clip-path: inset(0 -100vmax 0 -100vmax);
  transition: none;
}
html body.gm-sidebar-layout #slot-games .slot-toolbar-filters {
  padding-top: 8px;
}
html body.gm-sidebar-layout #slot-games .slot-toolbar-filters[data-am-stuck],
html body.gm-sidebar-layout main.page-shell > #lcProviders[data-am-stuck] {
  box-shadow: 0 0 0 100vmax var(--am-cat-band), 0 1px 0 100vmax var(--am-line-2);
  clip-path: inset(0 -100vmax -1px -100vmax);
}
/* Grid ended above the band (30-catalog.js, [data-am-unstick]): the band
   (and the live picker chip stuck beside it) slides up under the fixed
   header (z 100 > 30) and leaves the load-more button and the closing
   .lc-cta card free; hidden from hit-testing and focus once tucked. It
   returns as soon as the grid reaches under it again. Only sticky bands
   get the flag, so desktop (static toolbar) never matches. */
html body.gm-sidebar-layout #slot-games .slot-toolbar-filters[data-am-unstick],
html body.gm-sidebar-layout main.page-shell > #lcProviders[data-am-unstick],
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders[data-am-unstick]) > #lcFilterToggle {
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-100% - 16px));
}

/* The scrolling pill row: edge to edge of the content box (sticky children
   measure from the scroller's content box, so it has no inline padding;
   pill focus rings are drawn inset instead). */
html body.gm-sidebar-layout #slot-games #slotFilterPills,
html body.gm-sidebar-layout main.page-shell > #lcProviders {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-inline: 0;
  padding: 6px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Snapped pills start right of the left fade, never under it. */
  scroll-padding-inline: var(--am-cat-snap-pad) 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html body.gm-sidebar-layout main.page-shell > #lcProviders {
  padding-top: 14px; /* 8px band top + 6px rail */
}
html body.gm-sidebar-layout #slot-games #slotFilterPills::-webkit-scrollbar,
html body.gm-sidebar-layout main.page-shell > #lcProviders::-webkit-scrollbar {
  display: none;
}

/* Edge fades: sticky overlays inside the row, painted in the band colour.
   Right fade by default; the left one appears once JS reports a scroll. */
html body.gm-sidebar-layout main.page-shell > #lcProviders::after,
html body.gm-sidebar-layout #slot-games #slotFilterPills::before,
html body.gm-sidebar-layout main.page-shell > #lcProviders::before {
  content: "";
  position: sticky;
  z-index: 2;
  flex: 0 0 28px;
  align-self: stretch;
  margin-block: -6px;
  pointer-events: none;
}
html body.gm-sidebar-layout main.page-shell > #lcProviders::before,
html body.gm-sidebar-layout main.page-shell > #lcProviders::after {
  margin-top: -14px;
}
html body.gm-sidebar-layout main.page-shell > #lcProviders::after {
  right: 0;
  margin-left: -8px; /* cancels the flex gap: the fade sits after the last pill */
  background: linear-gradient(to left, var(--am-cat-band) 20%, rgb(var(--am-bg-rgb) / 0));
}
html body.gm-sidebar-layout #slot-games #slotFilterPills::before,
html body.gm-sidebar-layout main.page-shell > #lcProviders::before {
  left: 0;
  margin-right: -36px; /* zero net width (28px + 8px gap) */
  background: linear-gradient(to right, var(--am-cat-band) 20%, rgb(var(--am-bg-rgb) / 0));
  opacity: 0;
}
/* Same selector chains as the opacity:0 rules above (an :is() list would be
   less specific and never win). */
html body.gm-sidebar-layout #slot-games #slotFilterPills:is([data-am-scroll="middle"], [data-am-scroll="end"])::before,
html body.gm-sidebar-layout main.page-shell > #lcProviders:is([data-am-scroll="middle"], [data-am-scroll="end"])::before {
  opacity: 1;
}
html body.gm-sidebar-layout main.page-shell > #lcProviders:is([data-am-scroll="end"], [data-am-scroll="none"])::after {
  opacity: 0;
}
/* From 601px the rails are wide and pointer users rarely swipe them: a
   28px fade let the last pill read as cut mid-word ("CreedRo", "EGT D")
   rather than as more to scroll. 64px fades the cut pill out over most of
   a word. The /slot picker's fade is widened with it (picker section). */
@media (min-width: 601px) {
  html body.gm-sidebar-layout main.page-shell > #lcProviders::after {
    flex-basis: 64px;
    background: linear-gradient(to left, var(--am-cat-band) 12%, rgb(var(--am-bg-rgb) / 0));
  }
}

/* Every pill reachable in the rail (legacy caps: slot n+7, live n+11). */
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill,
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill {
  display: inline-flex;
}
html body.gm-sidebar-layout main.page-shell > #lcFilterToggle {
  display: none; /* no :has(): plain rail, every pill reachable */
}

/* Live (<=900, with :has()): the existing "Tüm sağlayıcıları göster" toggle
   becomes a 36px icon chip pinned next to the rail (column 2 of the toolbar
   row, sticky at the pills' offset). Expanded, the rail turns into a wrapped
   list in place and stops sticking; 30-catalog.js collapses it again after a
   pick. >=901 re-places it (see the desktop toolbar). */
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle {
  position: sticky;
  top: calc(var(--am-cat-sticky-top) + 14px);
  z-index: 31;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 6px 0 0 8px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2);
  color: var(--am-text-2);
  font: 600 13px/1 var(--am-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 44px hit area: -5px from the 34px padding box (1px border). */
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle::after {
  content: "";
  position: absolute;
  inset: -5px;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle > i {
  margin: 0;
  color: var(--am-accent);
  font-size: 13px;
  transform: none;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle > i::before {
  content: "\f009"; /* table-cells-large, same glyph as the slot picker */
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle.is-expanded > i::before {
  content: "\f077"; /* chevron-up: collapse */
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle.is-expanded {
  position: relative;
  top: auto;
  border-color: transparent;
  background: var(--am-tint-2);
  color: var(--am-text);
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: -3px;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders.is-expanded {
  position: static;
  flex-wrap: wrap;
  overflow: visible;
  background: none;
  box-shadow: none;
  clip-path: none;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders.is-expanded::before,
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders.is-expanded::after {
  content: none;
}
/* Landscape phones (short viewports): the fixed announce + header + bottom
   bar already take ~150px of ~390px; a sticky 56px band on top left a
   scrolling window shorter than one card. The band scrolls with the page
   there (30-catalog.js only flags data-am-stuck while it is sticky). */
@media (max-width: 900px) and (max-height: 500px) {
  html body.gm-sidebar-layout #slot-games .slot-toolbar-filters,
  html body.gm-sidebar-layout main.page-shell > #lcProviders {
    position: static;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle {
    position: relative;
    top: auto;
  }
}

/* "Tüm Sağlayıcılar" stays pinned at the rail's right end (icon only until a
   modal-only provider is picked, then it shows that provider's name). */
/* The 7px band-coloured ring masks pills scrolling under the chip's rounded
   corners (corner pixel sits 24.7px from the 18px corner centre); the fade
   sits fully outside the chip and only shows while pills are hidden under
   it. */
html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn {
  position: sticky;
  right: 0;
  z-index: 3;
  margin-left: auto;
  background: var(--am-surface-2);
  box-shadow: 0 0 0 7px var(--am-cat-band);
  scroll-snap-align: none;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn::before {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  right: 100%;
  width: 36px;
  background: linear-gradient(to left, var(--am-cat-band) 30%, rgb(var(--am-bg-rgb) / 0));
  pointer-events: none;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills:is([data-am-scroll="none"], [data-am-scroll="end"]) > .slot-pill.slot-picker-btn::before {
  opacity: 0;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn:not(.is-active) {
  width: 36px;
  padding: 0;
}
/* Icon-only chip (phones): 44px wide hit area too. It sits flush with the
   rail's end (the scroller clips anything to its right), so it grows to the
   left only, over the fade where the pills underneath are hidden anyway. */
html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn:not(.is-active)::after {
  inset: -5px 0 -5px -8px;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn:not(.is-active) > .pill-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn.is-active {
  max-width: 46%;
  border-color: transparent;
  background: linear-gradient(var(--am-tint-2), var(--am-tint-2)), var(--am-surface-2);
  color: var(--am-text);
}

@media (min-width: 601px) {
  /* 64px fade before the pinned picker, same as the live rail's end. */
  html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn::before {
    width: 64px;
    background: linear-gradient(to left, var(--am-cat-band) 15%, rgb(var(--am-bg-rgb) / 0));
  }
  /* Tablets and up have room for the picker's label. */
  html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn,
  html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn:not(.is-active) {
    width: auto;
    max-width: 260px;
    padding: 0 14px;
  }
  html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn:not(.is-active) > .pill-label {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip-path: none;
  }
  html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn:not(.is-active)::after {
    inset: -5px 0;
  }
}

/* Search (both pages, same field). */
html body.gm-sidebar-layout #slot-games .slot-search,
html body.gm-sidebar-layout main.page-shell > .lc-search {
  position: relative;
  flex: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 0 18px;
}
html body.gm-sidebar-layout #slot-games .slot-search > i,
html body.gm-sidebar-layout main.page-shell > .lc-search > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--am-text-3);
  font-size: 14px;
  pointer-events: none;
}
html body.gm-sidebar-layout #slot-games .slot-search input,
html body.gm-sidebar-layout main.page-shell > .lc-search input {
  display: block;
  width: 100%;
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 0 16px 0 44px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2);
  color: var(--am-text);
  font: 500 16px/1.2 var(--am-font);
  outline: none;
  box-shadow: none;
}
html body.gm-sidebar-layout #slot-games .slot-search input::placeholder,
html body.gm-sidebar-layout main.page-shell > .lc-search input::placeholder {
  color: var(--am-text-3);
  font-size: 15px;
  opacity: 1;
}
html body.gm-sidebar-layout #slot-games .slot-search input:focus,
html body.gm-sidebar-layout main.page-shell > .lc-search input:focus {
  border-color: rgb(var(--am-accent-rgb) / .6);
  background: var(--am-surface-2);
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--am-accent-rgb) / .16);
}
html body.gm-sidebar-layout #slot-games .slot-search:focus-within > i,
html body.gm-sidebar-layout main.page-shell > .lc-search:focus-within > i {
  color: var(--am-accent);
}

/* ---------------------------------------------------------------------------
   Pills (slot .is-active / live .active) + counts
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill,
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill {
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  height: 36px;
  max-width: none;
  margin: 0;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2);
  color: var(--am-text-2);
  font: 600 13px/1 var(--am-font);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
/* 44px hit area on a 36px pill: the pseudo is measured from the padding
   box (34px inside the 1px border), so -5px. It stays inside the rail's
   6px vertical padding (the scroller clips beyond it). */
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill::after,
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill::after {
  content: "";
  position: absolute;
  inset: -5px 0;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill.is-active,
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill.active {
  border-color: transparent;
  background: linear-gradient(var(--am-tint-2), var(--am-tint-2)), var(--am-surface-2);
  color: #fff;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill:focus-visible,
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: -3px;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill > i,
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill > i {
  flex: 0 0 auto;
  margin: 0;
  color: var(--am-accent);
  font-size: 13px;
}
/* Own 18px line box: the pill's 13px/1 would clip g/y/p/ç/ş descenders
   under the ellipsis overflow. */
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill .pill-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Live: the cycled icons (dice, bolt, crown...) carry no meaning; keep only
   the "Tüm Oyunlar" grip. .fa-spade is FA Pro and renders blank anyway. */
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill:not([data-filter="all"]) > i {
  display: none;
}
html body.gm-sidebar-layout #slot-games .fa-grid-2::before {
  content: "\f009"; /* table-cells-large (FA Free) for the Pro-only grid-2 */
}
html body.gm-sidebar-layout main.page-shell > #lcProviders .fa-spade::before {
  content: "\f522"; /* dice */
}
/* Twin toolbars: the "all" pill uses /slot's layer-group glyph on both
   pages (live ships fa-grip). */
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill[data-filter="all"] > i::before {
  content: "\f5fd"; /* layer-group */
}

html body.gm-sidebar-layout #slot-games #slotFilterPills .pill-count,
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill-count {
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 7px;
  border-radius: var(--am-r-pill);
  background: rgb(255 255 255 / .06);
  color: var(--am-text-2);   /* text-3 on the chip was 4.1-4.3:1 at 11px */
  font: 600 11px/1 var(--am-font);
  font-variant-numeric: tabular-nums;
  opacity: 1;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill.is-active .pill-count,
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill.active .lc-pill-count {
  background: rgb(var(--am-accent-rgb) / .18);
  color: var(--am-accent);
}
html body.gm-sidebar-layout #slot-games #slotFilterPills > .slot-pill.slot-picker-btn {
  border-style: solid;
}

@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill:not(.is-active):hover,
  html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill:not(.active):hover {
    background: var(--am-surface-3);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link:hover {
    background: var(--am-viewall-bg-hover);
    color: var(--am-text);
  }
}

/* ---------------------------------------------------------------------------
   Toolbar, desktop (>=901): one solid panel, one row on both pages:
   [pill rail ... | all-providers control | search].
   /slot: the real .slot-toolbar box; the "Tüm Sağlayıcılar" picker is pinned
   at the rail's end. /livecasino: main::before draws the panel behind grid
   row 3; #lcFilterToggle plays the picker's role and expands the rail into a
   full-width wrapped grid (row 4). Fades use the panel colour.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) {
  html body.gm-sidebar-layout #slot-games .slot-toolbar {
    --am-cat-band: var(--am-surface-1);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 6px var(--am-cat-panel-pad);
    border: 0;
    border-radius: var(--am-r-lg);
    background: var(--am-surface-1);
  }
  html body.gm-sidebar-layout #slot-games .slot-toolbar-filters {
    position: static;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
  }
  html body.gm-sidebar-layout #slot-games .slot-search {
    flex: 0 0 clamp(240px, 26vw, 340px);
    width: auto;
    margin: 0;
  }
  html body.gm-sidebar-layout #slot-games .slot-search input,
  html body.gm-sidebar-layout main.page-shell > .lc-search input {
    min-height: 40px;
    height: 40px;
  }

  /* Live (fallback without :has(): pills wrap, toggle + search stack). */
  html body.gm-sidebar-layout main.page-shell > #lcProviders {
    position: static;
    flex-wrap: wrap;
    margin: 0 0 8px;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    clip-path: none;
  }
  html body.gm-sidebar-layout main.page-shell > #lcProviders::before,
  html body.gm-sidebar-layout main.page-shell > #lcProviders::after {
    content: none;
  }
  html body.gm-sidebar-layout main.page-shell > #lcProviders:not(.is-expanded) .lc-pill:nth-child(n + 11) {
    display: none;
  }
  html body.gm-sidebar-layout main.page-shell > #lcFilterToggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0 0 12px;
    padding: 0 14px 0 12px;
    border: 1px solid transparent;
    border-radius: var(--am-r-pill);
    background: transparent;
    color: var(--am-text-2);
    font: 600 13px/1 var(--am-font);
    cursor: pointer;
    justify-self: start;
  }
  html body.gm-sidebar-layout main.page-shell > #lcFilterToggle > i {
    font-size: 11px;
    color: var(--am-accent);
  }
  html body.gm-sidebar-layout main.page-shell > #lcFilterToggle.is-expanded > i {
    transform: rotate(180deg);
  }
  html body.gm-sidebar-layout main.page-shell > .lc-search {
    max-width: 340px;
    margin: 0 0 20px;
  }

  /* Live with :has(): collapsed = one scrolling rail with all 42 providers;
     the toggle ("Tüm sağlayıcıları göster") expands it into a wrapped grid. */
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders)::before {
    content: "";
    grid-row: 3;
    grid-column: 1 / -1;
    align-self: stretch;
    margin: 0;
    border: 0;
    border-radius: var(--am-r-lg);
    background: var(--am-surface-1);
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders {
    --am-cat-band: var(--am-surface-1);
    grid-column: 1;
    margin: 7px 0 7px 13px;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders:not(.is-expanded) {
    flex-wrap: nowrap;
    padding: 6px 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders:not(.is-expanded)::before,
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders:not(.is-expanded)::after {
    content: "";
    margin-top: -6px;
  }
  /* Expanded: the toggle leads a header row next to the search and every
     provider wraps across the full panel width below it. */
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders.is-expanded)::before {
    grid-row: 3 / 5;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders.is-expanded {
    grid-row: 4;
    grid-column: 1 / -1;
    margin: 0 13px 13px;
    padding: 2px 0 0;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle.is-expanded {
    grid-column: 1 / 3;
    justify-self: start;
    margin-left: 13px;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders .lc-pill {
    display: inline-flex;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle {
    position: relative;
    top: auto;
    z-index: auto;
    grid-row: 3;
    grid-column: 2;
    align-self: start;
    margin: 13px 0 13px 10px;
    border-color: transparent;
    background: var(--am-surface-2);
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle > i::before {
    content: "\f009"; /* table-cells-large, same glyph as the slot picker */
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle.is-expanded > i::before {
    content: "\f077"; /* chevron-up: collapse */
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle > i,
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle.is-expanded > i {
    font-size: 13px;
    transform: none;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle.is-expanded {
    border-color: transparent;
    background: var(--am-tint-2);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > .lc-search {
    grid-row: 3;
    grid-column: 3;
    align-self: start;
    width: clamp(240px, 26vw, 340px);
    max-width: none;
    margin: 11px 13px 11px 12px;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > #lcGrid {
    margin-top: 20px;
  }
  /* Labelled from 901 like the /slot picker (twin toolbars): the rail
     keeps ~360px at 901 and scrolls. */
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle {
    justify-content: center;
    width: auto;
    padding: 0 14px 0 12px;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle > span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  @media (hover: hover) and (pointer: fine) {
    html body.gm-sidebar-layout main.page-shell > #lcFilterToggle:hover {
      color: var(--am-text);
    }
    html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle:not(.is-expanded):hover {
      background: var(--am-surface-3);
    }
  }
}


/* ---------------------------------------------------------------------------
   Provider picker (/slot): centred dialog, bottom sheet on phones
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slotProviderModal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgb(2 9 15 / .78);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-lg) var(--am-r-lg) 0 0;
  background: var(--am-surface-1);
  box-shadow: var(--am-shadow-3);
  font-family: var(--am-font);
}
/* Grab handle (sheet only). */
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-panel::before {
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--am-line-2);
}
/* Only the option list may shrink/scroll; head and search keep their size
   (the long list would otherwise squash them inside the capped panel). */
html body.gm-sidebar-layout #slotProviderModal :is(.slot-provider-modal-head, .slot-provider-modal-search) {
  flex: 0 0 auto;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 12px 18px;
  border-bottom: 1px solid var(--am-line);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--am-text);
  font: 750 18px/1.2 var(--am-font);
  letter-spacing: -.015em;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-head h3 > i {
  color: var(--am-accent);
  font-size: 15px;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--am-surface-2);
  color: var(--am-text-2);
  font-size: 15px;
  cursor: pointer;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-close:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin: 14px 16px 6px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2);
  color: var(--am-text-3);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search:focus-within {
  border-color: rgb(var(--am-accent-rgb) / .6);
  box-shadow: 0 0 0 3px rgb(var(--am-accent-rgb) / .16);
  color: var(--am-accent);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--am-text);
  font: 500 16px/1.2 var(--am-font);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search input::placeholder {
  color: var(--am-text-3);
  font-size: 15px;
  opacity: 1;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  padding: 8px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px 0 16px;
  border: 1px solid transparent;
  border-radius: var(--am-r-md);
  background: var(--am-surface-2);
  color: var(--am-text);
  font: 600 14px/20px var(--am-font);
  text-align: left;
  cursor: pointer;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt-count {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: var(--am-r-pill);
  background: rgb(255 255 255 / .06);
  color: var(--am-text-3);
  font: 600 11.5px/1 var(--am-font);
  font-variant-numeric: tabular-nums;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(var(--am-tint-2), var(--am-tint-2)), var(--am-surface-2);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt[aria-selected="true"] .slot-provider-opt-count {
  background: rgb(var(--am-accent-rgb) / .18);
  color: var(--am-accent);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .8);
  outline-offset: 1px;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt-empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  color: var(--am-text-3);
  font: 500 14px/1.4 var(--am-font);
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt:not([aria-selected="true"]):hover {
    background: var(--am-surface-3);
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-close:hover {
    background: var(--am-surface-3);
    color: var(--am-text);
  }
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout #slotProviderModal {
    align-items: center;
    padding: 24px;
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-panel {
    width: min(680px, 100%);
    max-height: min(720px, 86vh);
    max-height: min(720px, 86dvh);
    padding-bottom: 0;
    border-bottom: 0;
    border-radius: var(--am-r-lg);
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-panel::before {
    content: none;
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-head {
    padding: 16px 16px 14px 20px;
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 20px 20px;
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search {
    margin: 16px 20px 8px;
  }
}
/* While the sheet is open the support launcher must not sit on top of it. */
html body.gm-sidebar-layout.slot-modal-open :is(.gm-live-support-fab, [data-destek-widget]) {
  visibility: hidden;
}

/* ---------------------------------------------------------------------------
   Recently played rail (/slot, localStorage)
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slotRecentWrap {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--am-text);
  font: 800 17px/1.3 var(--am-font);
  letter-spacing: -.015em;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-title > i {
  color: var(--am-accent);
  font-size: 13px;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-clear {
  position: relative;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-1);
  color: var(--am-text-2);
  font: 600 12px/1 var(--am-font);
  cursor: pointer;
}
/* 44px hit area on the 34px "Temizle" pill (-6px from the 32px padding box). */
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-clear::after {
  content: "";
  position: absolute;
  inset: -6px -4px;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-clear:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-strip {
  display: flex;
  gap: 10px;
  margin-inline: -4px;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-strip::-webkit-scrollbar {
  display: none;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-strip:not([data-am-scroll="none"]):not([data-am-scroll="end"]) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-card {
  flex: 0 0 auto;
  width: 96px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--am-card-bg);
  color: var(--am-text-2);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: var(--am-cat-tile);
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-name {
  display: block;
  padding: 7px 8px 8px;
  overflow: hidden;
  color: var(--am-text-2);
  font: 600 12px/1.25 var(--am-font);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-card:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout #slotRecentWrap .slot-recent-card:hover {
    background: var(--am-card-bg-hover);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout #slotRecentWrap .slot-recent-clear:hover {
    background: var(--am-surface-2);
    color: var(--am-text);
  }
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout #slotRecentWrap .slot-recent-card {
    width: 112px;
  }
}

/* ---------------------------------------------------------------------------
   Grids: fluid columns from one minimum card width (--am-cat-min), never
   fewer than two
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slot-games #slotGrid,
html body.gm-sidebar-layout main.page-shell #lcGrid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--am-cat-min), calc((100% - var(--am-cat-gap)) / 2)), 1fr));
  align-items: start;
  gap: var(--am-cat-gap);
  margin: 0;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Game card, shared frame (GAME CARD SPEC)
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slotGrid .slot-card,
html body.gm-sidebar-layout #lcGrid .lc-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-card-bg);
  box-shadow: none;
  transform: none;
  transition: none;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout #slotGrid .slot-card:focus-visible,
html body.gm-sidebar-layout #lcGrid .lc-card:focus-visible {
  box-shadow: var(--am-focus);
  outline: none;
}

/* Cover fit: every cover tile is square. q is the visible box ratio:
   - landscape art (ar > 1): q = ar, i.e. the whole picture, letterboxed top
     and bottom on the solid tile (titles are often printed edge to edge, so
     wide art is never cropped);
   - portrait art: cropped by at most --am-cat-crop (cover), letterboxed left
     and right only beyond that: q = min(1, ar * crop).
   One expression: q = max(ar, clamp(ar / crop, 1, ar * crop)). */
html body.gm-sidebar-layout #slotGrid .slot-card-media,
html body.gm-sidebar-layout #lcGrid .lc-card {
  --am-cat-q: max(var(--ar, 1), clamp(calc(var(--ar, 1) / var(--am-cat-crop)), 1, calc(var(--ar, 1) * var(--am-cat-crop))));
}

/* ---------------------------------------------------------------------------
   Slot card: square cover + caption (name / provider), the same structure
   and metrics as the live card below. The overlay covers the cover only and
   carries the scrim + play disc on hover / focus. Row heights are fixed, so
   every card in a row has the same height (scroll restore stays stable) even
   when a card has no provider label.
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slotGrid .slot-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--am-cat-cap-1) var(--am-cat-cap-2);
  align-content: start;
  aspect-ratio: auto !important;
  padding: 0;
  contain-intrinsic-size: auto 229px; /* content box: square cover (~172-177px) + 56px caption */
}
html body.gm-sidebar-layout #slotGrid .slot-card-media {
  position: relative;
  inset: auto;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--am-cat-tile) !important;
}
/* Skeleton: a soft sweep on the tile until the image paints over it. */
html body.gm-sidebar-layout #slotGrid .slot-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--am-cat-shimmer);
  background-size: 250% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  filter: none;
  transform: none;
}
html body.gm-sidebar-layout #slotGrid .slot-card-media > img,
html body.gm-sidebar-layout #slotGrid .slot-card-media > picture {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  display: block;
  width: calc(min(1, var(--am-cat-q)) * 100%);
  height: calc(min(1, 1 / var(--am-cat-q)) * 100%);
  margin: auto;
}
html body.gm-sidebar-layout #slotGrid .slot-card-media > picture > img {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Letterboxed covers ([data-am-band], 30-catalog.js: landscape art, or
   portrait art past the crop limit; about a third of the live catalog).
   The bands show the same art blurred and dimmed, not the flat tile, so
   the card reads as one full picture next to its full-bleed neighbours.
   The art comes from --cov, the url the template already puts on every
   cover. The image itself stays whole and sharp on top (z 1). Only marked
   covers paint the blur, so full-bleed covers cost nothing extra. */
html body.gm-sidebar-layout #slotGrid .slot-card-media[data-am-band]::before {
  inset: -16px;
  background: var(--cov, none) center / cover no-repeat;
  filter: blur(14px) saturate(1.15) brightness(.6);
}
/* 50% 40%: portrait art keeps its title, the studio logo at the very
   bottom (also in the art) is what gets cropped first. Landscape art is
   never cropped (its box has the image's own ratio). */
html body.gm-sidebar-layout #slotGrid .slot-card-media img {
  object-fit: cover !important;
  object-position: 50% 40% !important;
}

/* Caption: name (row 2) + provider (row 3). Both ignore pointer events, so a
   tap on the caption still reaches the card's own handler. */
html body.gm-sidebar-layout #slotGrid .slot-card-footer {
  position: static;
  inset: auto;
  grid-row: 2;
  grid-column: 1;
  display: block;
  min-width: 0;
  margin: 0;
  padding: var(--am-cat-cap-pad-1);
  overflow: hidden;
  background: none;
  color: var(--am-text);
  font: 650 13px/18px var(--am-font);
  letter-spacing: -.005em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  pointer-events: none;
}
html body.gm-sidebar-layout #slotGrid .slot-card-provider {
  position: static;
  inset: auto;
  grid-row: 3;
  grid-column: 1;
  z-index: auto;
  display: block;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: var(--am-cat-cap-pad-2);
  overflow: hidden;
  border-radius: 0;
  background: none;
  color: var(--am-text-3);
  font: 500 12px/16px var(--am-font);
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 1;
  pointer-events: none;
}
html body.gm-sidebar-layout #slotGrid .slot-card-hot {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 58px);
  height: 22px;
  padding: 0 8px;
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-pill);
  background: rgb(2 11 18 / .7);
  color: var(--am-text);
  font: 600 11px/1 var(--am-font);
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
html body.gm-sidebar-layout #slotGrid .slot-card-hot > i {
  color: var(--am-warn);
  font-size: 10px;
}
/* Overlay = the cover square only: scrim + centred play disc. The name it
   repeats is already in the caption. */
html body.gm-sidebar-layout #slotGrid .slot-card-overlay {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--am-card-scrim);
  opacity: 0;
}
html body.gm-sidebar-layout #slotGrid .slot-card-name {
  display: none;
}
html body.gm-sidebar-layout #slotGrid .slot-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 48px;
  height: 48px;
  min-height: 0;
  margin: -24px 0 0 -24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--am-grad);
  color: var(--am-on-accent);
  font-size: 0;
  line-height: 0;
  box-shadow: var(--am-card-play-shadow);
  cursor: pointer;
}
html body.gm-sidebar-layout #slotGrid .slot-card-play > i {
  margin-left: 3px;
  font-size: 16px;
  line-height: 1;
}

/* Hover (fine pointers) + keyboard focus (card, heart or play button)
   reveal the same overlay. */
html body.gm-sidebar-layout #slotGrid .slot-card:is(:focus-visible, :has(:focus-visible)) .slot-card-overlay {
  opacity: 1;
}
html body.gm-sidebar-layout #slotGrid .slot-card-play:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
/* Keyboard focus on the play button rings the whole card, like the home
   cards and the (focusable) live cards. With :has() the inner ring is
   dropped so there is one ring; without it the play ring above remains.
   (The heart keeps its own ring, as on /livecasino.) */
@supports selector(:has(*)) {
  html body.gm-sidebar-layout #slotGrid .slot-card:has(.slot-card-play:focus-visible) {
    box-shadow: var(--am-focus);
  }
  html body.gm-sidebar-layout #slotGrid .slot-card-play:focus-visible {
    box-shadow: var(--am-card-play-shadow);
  }
}
/* Hover: caption tone lift + overlay, no ring or glow. */
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout #slotGrid .slot-card:hover {
    background: var(--am-card-bg-hover);
  }
  html body.gm-sidebar-layout #slotGrid .slot-card:hover .slot-card-overlay {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
   Live card: square cover + caption (name / live dot + provider), the same
   two rows as the slot card. The card is a grid; badges/body/meta dissolve
   (display:contents) so every piece is placed by class, never by child
   order (SSR and JS cards differ).
   The "CANLI" pill is no longer drawn on the cover: most live covers carry
   the studio's logo in the top-left corner (Pragmatic's PLAY disc, the
   CreedRoomz wordmark), and the translucent pill collided with it on every
   width. Every table on this page is live, and the page head already shows
   the red-dot "n Masa" chip. The cue moves into the caption as the same
   6px red dot before the provider. The pill text stays in the DOM, visually
   hidden.
   The table type ("Rulet", "Blackjack", JS cards: "Canlı Masa") is not
   drawn either. At ~171px the "type · provider" line cut the provider,
   the useful part, on nearly every card. The type is in the game name and
   the art, and slot cards also show only the provider. Each card's own
   aria-label names the game, so nothing is lost for screen readers.
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #lcGrid .lc-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto var(--am-cat-cap-1) var(--am-cat-cap-2);
  grid-template-areas: "cover cover" "name name" "prov prov";
  align-content: start;
  justify-content: stretch;
  aspect-ratio: auto !important;
  padding: 0;
  /* Like the slot cards (theme aqua-slot.css): off-screen cards skip
     rendering, so their skeleton sweeps (lazy covers that never load while
     off-screen) stop costing main-thread style/paint work after every grid
     load. The card already clips (overflow:hidden), so paint containment
     changes nothing visible; its own focus shadow is outside the contained
     contents. 229px content box = the measured card at 390-1440 (v2 has
     no border); 'auto' keeps each card's real size once it has rendered. */
  content-visibility: auto;
  contain-intrinsic-size: auto 229px;
}
/* Cover tile: in-flow square that sizes row 1 and carries the skeleton. */
html body.gm-sidebar-layout #lcGrid .lc-card::after {
  content: "";
  grid-area: cover;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--am-cat-tile);
  background-image: var(--am-cat-shimmer);
  background-size: 250% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
/* Cover image (bare img on SSR, picture on JS cards): positioned inside the
   square with width-relative margins only, so the caption never shifts it. */
html body.gm-sidebar-layout #lcGrid .lc-card > img.lc-card-img,
html body.gm-sidebar-layout #lcGrid .lc-card > picture {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 1;
  display: block;
  width: calc(min(1, var(--am-cat-q)) * 100%);
  height: auto;
  aspect-ratio: var(--am-cat-q);
  margin: calc((1 - min(1, 1 / var(--am-cat-q))) * 50%) 0 0 calc((1 - min(1, var(--am-cat-q))) * 50%);
}
html body.gm-sidebar-layout #lcGrid .lc-card > picture > img.lc-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
html body.gm-sidebar-layout #lcGrid .lc-card .lc-card-img {
  object-fit: cover !important;
  object-position: center top;
}
/* Hover scrim, cover area only. */
html body.gm-sidebar-layout #lcGrid .lc-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: var(--am-card-scrim);
  opacity: 0;
  pointer-events: none;
}
html body.gm-sidebar-layout #lcGrid .lc-card-badges,
html body.gm-sidebar-layout #lcGrid .lc-card-body,
html body.gm-sidebar-layout #lcGrid .lc-card-meta {
  display: contents;
}
/* Visually hidden (see the section note): off the art, still in the DOM. */
html body.gm-sidebar-layout #lcGrid .lc-badge-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  pointer-events: none;
}
html body.gm-sidebar-layout #lcGrid .lc-card-name {
  grid-area: name;
  z-index: 3;
  min-width: 0;
  margin: 0;
  padding: var(--am-cat-cap-pad-1);
  overflow: hidden;
  background: var(--am-card-bg);   /* masks the 1.04 hover zoom of the cover */
  color: var(--am-text);
  font: 650 13px/18px var(--am-font);
  letter-spacing: -.005em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}
html body.gm-sidebar-layout #lcGrid .lc-card-sub {
  display: none;
}
html body.gm-sidebar-layout #lcGrid .lc-badge-provider {
  grid-area: prov;
  z-index: 3;
  position: static;
  min-width: 0;
  max-width: none;
  padding: var(--am-cat-cap-pad-2);
  overflow: hidden;
  border-radius: 0;
  background: none;
  color: var(--am-text-3);
  font: 500 12px/16px var(--am-font);
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Live cue: the page head's red dot, 6px, centred on the 16px line. */
html body.gm-sidebar-layout #lcGrid .lc-badge-provider::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--am-danger);
  vertical-align: middle;
}
/* Play affordance: a square layer over the cover with a centred 48px disc. */
html body.gm-sidebar-layout #lcGrid .lc-play-btn {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--am-on-accent);
  font-size: 0;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
}
html body.gm-sidebar-layout #lcGrid .lc-play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: var(--am-grad);
  box-shadow: var(--am-card-play-shadow);
}
html body.gm-sidebar-layout #lcGrid .lc-play-btn > i {
  position: relative;
  margin-left: 3px;
  font-size: 16px;
  line-height: 1;
}
html body.gm-sidebar-layout #lcGrid .lc-card:is(:focus-visible, :has(:focus-visible))::before,
html body.gm-sidebar-layout #lcGrid .lc-card:is(:focus-visible, :has(:focus-visible)) .lc-play-btn {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout #lcGrid .lc-card:hover,
  html body.gm-sidebar-layout #lcGrid .lc-card:hover .lc-card-name {
    background: var(--am-card-bg-hover);
  }
  html body.gm-sidebar-layout #lcGrid .lc-card:hover::before,
  html body.gm-sidebar-layout #lcGrid .lc-card:hover .lc-play-btn {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
   Favourite heart (catalog cards; same spec as the home rows). Colours come
   from the shared --am-card-chip-* tokens (12-cards.css), so the active chip
   is the high-contrast one home uses (cyan tint over dark glass).
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--am-card-chip-line);
  border-radius: 50%;
  background: var(--am-card-chip-bg);
  box-shadow: var(--am-card-chip-shadow);
  color: var(--am-text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav.active {
  border-color: var(--am-card-chip-on-line);
  background: var(--am-card-chip-on);
  box-shadow: var(--am-card-chip-on-shadow);
  color: var(--am-accent);
}
html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav:hover {
    border-color: var(--am-card-chip-line);
    background: var(--am-card-chip-bg-hover);
    color: var(--am-accent);
  }
  html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav.active:hover {
    border-color: var(--am-card-chip-on-line-hover);
    background: var(--am-card-chip-on-hover);
  }
}

/* ---------------------------------------------------------------------------
   Loading: grid dims its cards and shows a thin progress line
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slot-games #slotGrid.is-loading,
html body.gm-sidebar-layout main.page-shell #lcGrid.is-loading {
  opacity: 1;
  pointer-events: none;
}
html body.gm-sidebar-layout #slotGrid.is-loading > .slot-card,
html body.gm-sidebar-layout #lcGrid.is-loading > .lc-card {
  opacity: .42;
}
html body.gm-sidebar-layout #slotGrid.is-loading::before,
html body.gm-sidebar-layout #lcGrid.is-loading::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  z-index: 6;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--am-accent-rgb) / 0), var(--am-accent) 50%, rgb(var(--am-accent-rgb) / 0));
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

/* Load more: one 48px pill for both pages (v2: a filled surface-2 secondary
   button, hover surface-3; the cyan fill is kept for primary CTAs), icon
   drawn in CSS because the inline <i> is wiped by textContent on the first
   click. */
html body.gm-sidebar-layout #slot-games #slotLoadMoreWrap,
html body.gm-sidebar-layout main.page-shell #lcLoadMoreWrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 4px;
}
html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: min(240px, 100%);
  min-height: 48px;
  margin: 0;
  padding: 0 28px;
  border: 1px solid transparent !important;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2) !important;
  color: var(--am-text) !important;
  font: 600 15px/1 var(--am-font);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: none;
}
html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore) > i {
  display: none;
}
html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore)::before {
  content: "\f067"; /* plus */
  display: inline-block;
  width: 16px;
  color: var(--am-accent);
  font: 900 13px/1 "Font Awesome 6 Free";
  text-align: center;
}
html body.gm-sidebar-layout .gm-catalog-error:not([hidden]) + #slotLoadMoreWrap > #slotLoadMore::before,
html body.gm-sidebar-layout .gm-catalog-error:not([hidden]) ~ #lcLoadMoreWrap > #lcLoadMore::before {
  content: "\f2f9"; /* rotate-right: retry */
}
html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore)[disabled] {
  cursor: progress;
  opacity: .85;
  box-shadow: none;
  transform: none;
}
html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore)[disabled]::before {
  content: "";
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid var(--am-accent);
  border-right-color: transparent;
  border-radius: 50%;
}
html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore):focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore):not([disabled]):hover {
    border-color: transparent !important;
    background: var(--am-surface-3) !important;
    color: #fff !important;
    box-shadow: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Empty + error states
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slot-games .slot-empty,
html body.gm-sidebar-layout main.page-shell #lcEmpty {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 44px 20px !important;
  border: 0;
  border-radius: var(--am-r-lg);
  background: var(--am-surface-1);
  color: var(--am-text-2) !important;
  font: 500 14px/1.5 var(--am-font);
  text-align: center;
}
html body.gm-sidebar-layout #slot-games .slot-empty > i,
html body.gm-sidebar-layout main.page-shell #lcEmpty > i {
  display: grid !important;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px !important;
  border: 0;
  border-radius: 50%;
  background: var(--am-tint);
  color: var(--am-accent) !important;
  font-size: 21px !important;
}
html body.gm-sidebar-layout #slot-games .slot-empty p,
html body.gm-sidebar-layout main.page-shell #lcEmpty p {
  max-width: 36ch;
  margin: 0 auto;
  color: var(--am-text-2);
}
html body.gm-sidebar-layout #slotGrid > .slot-empty {
  margin: 0;
}

html body.gm-sidebar-layout main.page-shell .game-section > p.gm-catalog-error {
  position: relative;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 12px 16px 12px 44px !important;
  border: 0;
  border-radius: var(--am-r-md);
  background: rgb(248 113 113 / .1);
  color: #fecaca !important;
  font: 500 14px/1.45 var(--am-font);
  text-align: left !important;
}
html body.gm-sidebar-layout main.page-shell .game-section > p.gm-catalog-error::before {
  content: "\f06a"; /* circle-exclamation */
  position: absolute;
  left: 16px;
  top: 13px;
  color: var(--am-danger);
  font: 900 15px/1 "Font Awesome 6 Free";
}

/* ---------------------------------------------------------------------------
   Live closing CTA band
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout main.page-shell > section.lc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin: var(--am-section-gap) 0 0;
  padding: 24px 20px;
  border: 0;
  border-radius: var(--am-r-lg);
  background: var(--am-surface-1);
  box-shadow: none;
}
html body.gm-sidebar-layout main.page-shell > section.lc-cta .lc-cta-copy {
  flex: 1 1 360px;
  min-width: 0;
}
html body.gm-sidebar-layout main.page-shell > section.lc-cta .lc-cta-copy h2 {
  margin: 0 0 8px;
  color: var(--am-text);
  font: 800 var(--am-fs-section)/1.15 var(--am-font);
  letter-spacing: var(--am-section-track);
}
html body.gm-sidebar-layout main.page-shell > section.lc-cta .lc-cta-copy p {
  max-width: 560px;
  margin: 0;
  color: var(--am-text-2);
  font: 400 14px/1.55 var(--am-font);
}
html body.gm-sidebar-layout main.page-shell > section.lc-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  min-height: 48px;
  padding: 0 28px;
  font-size: 15px;
  text-decoration: none;
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout main.page-shell > section.lc-cta {
    padding: 32px 36px;
  }
  html body.gm-sidebar-layout main.page-shell > section.lc-cta .btn-primary {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   Motion (opt-in only; the theme's reduced-motion guard stays authoritative)
   ------------------------------------------------------------------------ */
@keyframes am-cat-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@keyframes am-cat-progress {
  from { background-position: -60% 0; }
  to { background-position: 160% 0; }
}
@keyframes am-cat-spin {
  to { transform: rotate(360deg); }
}
@keyframes am-cat-sheet {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes am-cat-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Colour/border feedback on controls. */
  html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill,
  html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill,
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt {
    transition: background-color var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout #slot-games .slot-search input,
  html body.gm-sidebar-layout main.page-shell > .lc-search input,
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search,
  html body.gm-sidebar-layout #slotRecentWrap .slot-recent-card {
    transition: border-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore) {
    transition: background var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore)::before {
    transition: color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout :is(#slotFilterPills, #lcProviders)::before {
    transition: opacity var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.page-shell > #lcFilterToggle > i {
    transition: transform var(--am-dur) var(--am-ease);
  }
  /* Band tuck/return (phones + tablets only, where the band sticks): slide,
     then hide once out. The toggle keeps its colour easing (60-motion). */
  @media (max-width: 900px) {
    html body.gm-sidebar-layout #slot-games .slot-toolbar-filters,
    html body.gm-sidebar-layout main.page-shell > #lcProviders {
      transition: transform .22s var(--am-ease), visibility 0s linear 0s;
    }
    html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle {
      transition: transform .22s var(--am-ease), visibility 0s linear 0s, color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease);
    }
    html body.gm-sidebar-layout #slot-games .slot-toolbar-filters[data-am-unstick],
    html body.gm-sidebar-layout main.page-shell > #lcProviders[data-am-unstick] {
      transition: transform .22s var(--am-ease), visibility 0s linear .22s;
    }
    html body.gm-sidebar-layout main.page-shell:has(> #lcProviders[data-am-unstick]) > #lcFilterToggle {
      transition: transform .22s var(--am-ease), visibility 0s linear .22s, color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease);
    }
  }

  /* Skeleton sweep: finite, and stopped by 30-catalog.js once the image loads. */
  html body.gm-sidebar-layout #slotGrid .slot-card-media:not([data-am-loaded])::before,
  html body.gm-sidebar-layout #lcGrid .lc-card:not([data-am-loaded])::after {
    animation: am-cat-shimmer 1.5s var(--am-ease) 5;
  }
  html body.gm-sidebar-layout #slotGrid.is-loading::before,
  html body.gm-sidebar-layout #lcGrid.is-loading::before {
    animation: am-cat-progress 1.1s ease-in-out 12;
  }
  html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore)[disabled]::before {
    animation: am-cat-spin .8s linear 25;
  }
  html body.gm-sidebar-layout #slotGrid > .slot-card,
  html body.gm-sidebar-layout #lcGrid > .lc-card {
    transition: transform var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease), opacity .15s linear;
  }
  html body.gm-sidebar-layout #lcGrid .lc-card-name {
    transition: background-color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout #slotGrid .slot-card-media > :is(img, picture),
  html body.gm-sidebar-layout #lcGrid .lc-card > :is(img, picture) {
    transition: transform .35s var(--am-ease);
  }
  html body.gm-sidebar-layout #slotGrid .slot-card-overlay,
  html body.gm-sidebar-layout #lcGrid .lc-card::before,
  html body.gm-sidebar-layout #lcGrid .lc-play-btn {
    transition: opacity var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout #slotGrid .slot-card-play,
  html body.gm-sidebar-layout #lcGrid .lc-play-btn::before {
    transform: scale(.86);
    transition: transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout #slotGrid .slot-card:is(:focus-visible, :has(:focus-visible)) .slot-card-play,
  html body.gm-sidebar-layout #lcGrid .lc-card:is(:focus-visible, :has(:focus-visible)) .lc-play-btn::before {
    transform: none;
  }
  html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav {
    transition: color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav.active > .fa-solid {
    animation: am-cat-pop .32s var(--am-ease) 1;
  }
  html body.gm-sidebar-layout #slotProviderModal:not([hidden]) .slot-provider-modal-panel {
    animation: am-cat-sheet .22s var(--am-ease) 1;
  }

  @media (hover: hover) and (pointer: fine) {
    html body.gm-sidebar-layout #slotGrid .slot-card:hover,
    html body.gm-sidebar-layout #lcGrid .lc-card:hover {
      transform: translateY(-3px);
    }
    html body.gm-sidebar-layout #slotGrid .slot-card:hover .slot-card-media > :is(img, picture),
    html body.gm-sidebar-layout #lcGrid .lc-card:hover > :is(img, picture) {
      transform: scale(1.04);
    }
    html body.gm-sidebar-layout #slotGrid .slot-card:hover .slot-card-play,
    html body.gm-sidebar-layout #lcGrid .lc-card:hover .lc-play-btn::before {
      transform: none;
    }
  }
  /* Press feedback (touch and mouse) is 60-motion.css's. */
}

/* ---- 40-content.css ---- */
/*
 * Aquabet modern layer — secondary storefront pages ("content" area).
 * Pages: /promosyonlar (hero, grid, text fallback cards, detail modal),
 * /vip, /turnuvalar, /canli-destek, the legal/info pages (div.legal-page),
 * 404 (main.gm-404) and /sifremi-unuttum (div.gm-reset).
 *
 * Page roots (none of them exists on member pages, so every rule here is
 * positively scoped to one of them):
 *   PROMO  main.page-shell.promotions-page-only
 *   INFO   :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid))
 *          (home shares main.page-shell.gm-wire; :has() keeps it out. Without
 *          :has() support the cards are still styled, only the page head and
 *          container fall back to the home/theme rules; the :is() wrapper keeps
 *          selector lists that also hold PROMO/LEGAL valid there, because
 *          :is() parses forgivingly while :has() alone does not.)
 *   RESET  main.page-shell:has(> .gm-reset)
 *   LEGAL  div.legal-page (a direct body child, no <main>)
 *   404    main.gm-404
 *
 * Competitors: each page's own <style> block sits INSIDE <body> (after this
 * layer) at up to (0,3,0) plus two !important rules (promo hero h2
 * font-size, promo img aspect-ratio); aqua-promosyonlar.css forces the CTA
 * gradient with !important (0,2,1); the legal pages' aqua-profile-legacy.css
 * is @layer'ed, so any unlayered rule here wins regardless of specificity.
 * Inline style="" on the vip/destek intro <p> needs !important.
 *
 * JS contracts kept: no display on .gm-promo-modal / #gmPromoHero /
 * .gm-reset .msg|.step*, nor on .promotions-cta for members (they hide it
 * via [data-auth-logged-in="1"]; guests get inline-block, see the CTA); .promo-desc stays hidden; the promo dialog never
 * fills the backdrop (backdrop click = e.target===modal); no transform,
 * position or z-index on main/section (the promo modal is position:fixed
 * inside main and must stack against #authModal at the root).
 *
 * Breakpoints: base = phones, 601, 901, 1201 (layer steps); the promo grid
 * uses 720/1180 on purpose because the banner <source> switches at 719px.
 * Every responsive property is restated at each step, which neutralises the
 * legacy 560/600/900 (pages, theme, legacy layer) and 720/1180 (promo) bands.
 *
 * Design language v2 (00-tokens.css header): page titles --am-fs-title
 * (32 -> 48px, 800, -.03em); section titles --am-fs-section without the
 * accent bar; cards, TOC, legal sections, 404 and reset cards are flat
 * surface-1 fills with no outline, no gradient, no shadow; chips and ghost
 * buttons are filled surfaces; the one cyan CTA per page keeps the soft
 * --am-cta-shadow; dividers inside a card stay as --am-line hairlines.
 */

/* ---------------------------------------------------------------------------
 * Area tokens
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout {
  --am-content-top: 24px;          /* first content below the fixed header */
  --am-content-head-gap: 28px;     /* page head -> first block */
  --am-content-bottom: 40px;       /* last block -> footer */
  /* long-form line length: ~72ch of 16px Inter, in rem so paragraphs (15-16px)
     and the 14px info boxes share one right edge */
  --am-content-measure: 45.5rem;
  --am-content-card-pad: 20px;
  --am-promo-ratio: 2.94 / 1;      /* live banners are 2.89-2.98:1 (one 1.78:1) */
  /* Darker than the card surface: a loading tile, and a recessed frame
     around the one contained 16:9 banner instead of light side bands. */
  --am-promo-placeholder: rgb(4 15 23);
  --am-content-chip-h: 44px;       /* thumb target for TOC chips/rows */
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout {
    --am-content-top: 40px;
    --am-content-head-gap: 32px;
    --am-content-bottom: 64px;
    --am-content-card-pad: 24px;
  }
}

@media (min-width: 1201px) {
  html body.gm-sidebar-layout {
    --am-content-top: 48px;
    --am-content-head-gap: 40px;
    --am-content-bottom: 80px;
  }
}

/* ---------------------------------------------------------------------------
 * Shared container: same left/right edges as header and footer
 * (content box = min(100% - 2 gutters, --am-container), centred).
 * Overrides .page-shell padding 24/18/14px (theme 900/600 bands),
 * .gm-wire > * max-width 1180px and .legal-page 900px (legacy).
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout :is(main.page-shell.promotions-page-only, main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid), main.page-shell:has(> .gm-reset)),
html body.gm-sidebar-layout div.legal-page {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--am-container) + 2 * var(--am-gutter));
  min-width: 0;
  margin: 0 auto;
  padding: var(--am-content-top) var(--am-gutter) var(--am-content-bottom);
}

html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > * {
  max-width: none;
  margin-inline: 0;
}

/* ---------------------------------------------------------------------------
 * Page head pattern
 * kicker (pill, optional) / title Inter 800 --am-fs-title / muted subtitle /
 * optional action, left-aligned on the container edge.
 * ------------------------------------------------------------------------- */

/* Kicker pill: promo "EN YÜKSEK", legal badge. A label, not an action or
   a state, so it is a neutral surface-1 chip with muted text (5.9:1);
   only its icon keeps the brand cyan (icons may be cyan, 00-tokens). */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-kicker,
html body.gm-sidebar-layout div.legal-page .legal-page-header .legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 28px;
  margin: 0 0 16px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-1);
  color: var(--am-text-3);
  font: 700 var(--am-fs-2xs)/1 var(--am-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-kicker > i,
html body.gm-sidebar-layout div.legal-page .legal-page-header .legal-badge i {
  color: var(--am-accent);
  font-size: 11px;
}

/* Title */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero h2,
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-section > .gm-row-head h2,
html body.gm-sidebar-layout div.legal-page .legal-page-header h1 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--am-text);
  -webkit-text-fill-color: currentColor;
  font-family: var(--am-font);
  font-size: var(--am-fs-title) !important;  /* beats the promo block's h2 !important */
  font-weight: var(--am-title-weight);
  line-height: 1.05;
  letter-spacing: var(--am-title-track);
  text-transform: none;
  text-shadow: none;
}

/* Subtitle (vip/destek intro <p> is inline-styled) */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-subtitle,
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-section > p {
  max-width: 62ch !important;
  margin: 14px 0 0 !important;
  color: var(--am-text-2) !important;
  font: 400 var(--am-fs-md)/1.6 var(--am-font) !important;
  letter-spacing: 0;
}

@media (min-width: 901px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-subtitle,
  html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-section > p {
    font-size: var(--am-fs-lg) !important;
  }
}

/* ---------------------------------------------------------------------------
 * VIP / Turnuvalar / Destek: section + head row
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section {
  margin: 0;
  padding: 0;
}

html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-section > .gm-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0;
}

/* "Tüm Ayrıcalıklar" / "Bonuslar" view-all pill with chevron: the shared
   view-all tokens (12-cards.css). ::after draws the chevron, so the 44px
   hit area is ::before. */
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-head .gm-row-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--am-viewall-h);
  padding: var(--am-viewall-pad);
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-viewall-bg);
  color: var(--am-text-2);
  font: 600 var(--am-fs-sm)/1 var(--am-font);
  text-decoration: none;
  white-space: nowrap;
}
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-head .gm-row-all i {
  display: none;
}
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-head .gm-row-all::before {
  content: "";
  position: absolute;
  inset: var(--am-viewall-hit) -2px;
}
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-head .gm-row-all::after {
  content: "\f054";
  content: "\f054" / "";   /* decorative: kept out of the link's accessible name */
  font: 900 10px/1 "Font Awesome 6 Free";
}
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-head .gm-row-all:hover {
  border-color: transparent;
  background: var(--am-viewall-bg-hover);
  color: var(--am-text);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * VIP / Turnuvalar / Destek: grids
 * Phones: VIP tiers + tournaments become a scroll-snap rail that bleeds to
 * the screen edge (negative gutter margins, so no page overflow); support
 * channels stack (each is an action) and pair up from 540px. 601+: 2
 * columns; all three 4 from 1201 (one rule for the card family: at 901-1200
 * a 4-up row breaks the support e-mail line and wraps tournament names and
 * prize lines, so VIP stays 2x2 there too).
 * All grid rules sit on the INFO root: the rail bleed is only safe inside
 * its gutter padding. Without :has() none of them match and the page's own
 * 4/2/1 grid applies inside the theme padding (no overflow).
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section > :is(.gm-vip-grid, .gm-tour-grid, .gm-support-grid) {
  display: grid;
  gap: 12px;
  margin: var(--am-content-head-gap) 0 0;
}

html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section > :is(.gm-vip-grid, .gm-tour-grid) {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: clamp(232px, 74%, 300px);
  margin-inline: calc(-1 * var(--am-gutter));
  margin-top: calc(var(--am-content-head-gap) - 4px);
  padding: 4px var(--am-gutter) 12px;   /* room for the 1px lift/shadow inside the scroller */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--am-gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--am-gutter), #000 calc(100% - var(--am-gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--am-gutter), #000 calc(100% - var(--am-gutter)), transparent);
}
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section > :is(.gm-vip-grid, .gm-tour-grid)::-webkit-scrollbar {
  display: none;
}
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section > :is(.gm-vip-grid, .gm-tour-grid) > * {
  scroll-snap-align: start;
}

html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section > .gm-support-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* 540-600 (large phones / foldables): channels pair up instead of four
   568px-wide single cards; the head stacks like 601+ (see the card block). */
@media (min-width: 540px) {
  html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section > .gm-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section > :is(.gm-vip-grid, .gm-tour-grid, .gm-support-grid) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 20px;
    margin: var(--am-content-head-gap) 0 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (min-width: 1201px) {
  html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section > :is(.gm-vip-grid, .gm-tour-grid, .gm-support-grid) {
    --am-content-card-pad: 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ---------------------------------------------------------------------------
 * VIP / Turnuvalar / Destek: card family
 * Fixes the invalid rgba(var(--gm-raised-rgb),.88) surfaces (computed: no
 * background, no border). Layout per card: icon tile + tag on one row,
 * (level label) + name, hairline, check list, (action). v2: flat surface-1,
 * no outline/shadow; featured = one tone up (surface-2), no cyan ring.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card) {
  --am-tier-rgb: var(--am-accent-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: var(--am-content-card-pad);
  border: 0;
  border-radius: var(--am-r-lg);
  background: var(--am-surface-1);
  box-shadow: none;
  color: var(--am-text);
  transform: none;
}

/* No top accent bar (v1 drew a 2px tier/cyan gradient line here): the
   VIP tier colour already lives in the icon tile and the "SEVİYE n" label,
   and featured cards are marked by tone (surface-2) and their tag. */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card.featured, .gm-support-card.featured)::before {
  content: none;
}

/* Featured card emphasis */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card).featured {
  border-color: transparent;
  background: var(--am-surface-2);
  box-shadow: none;
}

/* Tag pill ("Popüler" / "Öne Çıkan" / "Önerilen"): aligned with the icon
   row. A neutral surface-3 chip with full-contrast text: the solid cyan
   pill competed with the card's one real CTA (/canli-destek "Sohbeti
   Başlat"), and cyan is kept for action and state. */
html body.gm-sidebar-layout main.page-shell .gm-vip-card .gm-vip-tag,
html body.gm-sidebar-layout main.page-shell :is(.gm-tour-card, .gm-support-card) > .tag {
  position: absolute;
  top: calc(var(--am-content-card-pad) + 10px);
  right: var(--am-content-card-pad);
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-3);
  color: var(--am-text);
  font: 750 10.5px/1 var(--am-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none;
}

/* Icon tile (VIP/tournament icons via h3::before, support has span.ic) */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card) h3::before,
html body.gm-sidebar-layout main.page-shell .gm-support-card .head .ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgb(var(--am-tier-rgb) / .12);
  color: rgb(var(--am-tier-rgb));
  font: 900 18px/1 "Font Awesome 6 Free";
  box-shadow: none;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card .head .ic i {
  color: currentColor;
  font-size: 18px;
}

/* Name block */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card) h3,
html body.gm-sidebar-layout main.page-shell .gm-support-card .head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--am-line);
}
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card) h3,
html body.gm-sidebar-layout main.page-shell .gm-support-card .head h3 {
  color: var(--am-text);
  font: 800 var(--am-fs-xl)/1.2 var(--am-font);
  letter-spacing: -.02em;
}
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card) h3::before {
  order: -2;
  margin-bottom: 14px;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card .head h3 {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

/* Phones (1 column, full width): support head as a row to save height;
   the tag still fits beside the name. From 540 (2 columns) it stacks like
   VIP/tournaments. */
html body.gm-sidebar-layout main.page-shell .gm-support-card .head {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card .head h3 {
  margin: 0;
}
@media (min-width: 540px) {
  html body.gm-sidebar-layout main.page-shell .gm-support-card .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  html body.gm-sidebar-layout main.page-shell .gm-support-card .head h3 {
    margin: 14px 0 0;
  }
}

/* Check list */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card) ul {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card) li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  color: var(--am-text-2);
  font: 500 var(--am-fs-base)/1.45 var(--am-font);
  overflow-wrap: anywhere;
}
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card) li i {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgb(var(--am-tier-rgb) / .12);
  color: rgb(var(--am-tier-rgb));
  font-size: 9px;
}

/* VIP: tier accents (hard-coded order Bronze, Silver, Gold, Diamond in
   aqua-vip.php), tier icon and a "SEVİYE n" label. */
html body.gm-sidebar-layout main.page-shell .gm-vip-grid {
  counter-reset: am-vip-tier;
}
html body.gm-sidebar-layout main.page-shell .gm-vip-card {
  counter-increment: am-vip-tier;
}
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(1) { --am-tier-rgb: 222 153 99; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(2) { --am-tier-rgb: 203 216 228; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(3) { --am-tier-rgb: 244 201 93; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(4) { --am-tier-rgb: 103 232 249; }
/* Icons are decorative ('/ ""' keeps them out of the heading's accessible
   name; the plain declaration is the fallback where that syntax is not
   parsed). "SEVİYE n" stays announced on purpose. */
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(1) h3::before { content: "\f5a2"; content: "\f5a2" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(2) h3::before { content: "\f559"; content: "\f559" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(3) h3::before { content: "\f521"; content: "\f521" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(n+4) h3::before { content: "\f3a5"; content: "\f3a5" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card h3::after {
  content: "SEVİYE " counter(am-vip-tier);
  order: -1;
  margin-bottom: 4px;
  color: rgb(var(--am-tier-rgb));
  font: 700 var(--am-fs-2xs)/1.2 var(--am-font);
  letter-spacing: .12em;
}

/* Turnuvalar: trophy tile, prize pool line as a highlight row */
html body.gm-sidebar-layout main.page-shell .gm-tour-card h3::before {
  content: "\f091";
  content: "\f091" / "";
}
html body.gm-sidebar-layout main.page-shell .gm-tour-card li:first-child {
  margin-bottom: 4px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--am-tint);
  color: var(--am-text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Destek: recommended channel = primary CTA, others ghost */
html body.gm-sidebar-layout main.page-shell .gm-support-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;   /* primary CTA height of the layer (404, reset, load more) */
  margin: 4px 0 0;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-2);
  color: var(--am-text);
  font: 650 var(--am-fs-base)/1 var(--am-font);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card .btn:hover {
  border-color: transparent;
  background: var(--am-surface-3);
  color: #fff;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card.featured .btn {
  border-color: transparent;
  background: var(--am-grad);
  color: var(--am-on-accent);
  font-weight: 750;
  box-shadow: var(--am-cta-shadow);
}
html body.gm-sidebar-layout main.page-shell .gm-support-card.featured .btn:hover {
  background: var(--am-grad-hover);
  color: var(--am-on-accent);
  box-shadow: var(--am-cta-shadow-hover);
}
/* Card hover: one tone up (the featured card is already surface-2). */
html body.gm-sidebar-layout main.page-shell .gm-support-card:hover {
  transform: none;
  border-color: transparent;
  background: var(--am-surface-2);
  box-shadow: none;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card.featured:hover {
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Promosyonlar: hero (page head + CTA)
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero {
  margin: 0 0 var(--am-content-head-gap);
  padding: 0;
  text-align: left;
}

/* "PROMOSYONLAR" is upper-case in the template: show it as title case like
   the other page titles (lang="tr" keeps the Turkish casing rules). */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero h2 {
  text-transform: lowercase;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero h2::first-letter {
  text-transform: uppercase;
}

/* Same type as every other primary CTA: 15px / 700, sentence case, no
   tracking. The template copy is upper-case ("MÜŞTERİ HİZMETLERİNE
   BAĞLAN"), so it is lower-cased and ::first-letter restores the capital
   (html lang="tr", so İ -> i and I -> ı map correctly): "Müşteri
   hizmetlerine bağlan". ::first-letter needs a block container, so guests
   get inline-block (one text line, centred by line-height) instead of the
   theme's inline-flex; members keep the theme's display:none, which this
   rule never matches. */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-cta {
  gap: 8px;
  min-height: 48px;
  margin: 24px 0 0;
  padding: 0 22px;
  border: 0 !important;
  border-radius: var(--am-r-pill);
  background: var(--am-grad) !important;
  color: var(--am-on-accent) !important;
  font: 700 var(--am-fs-md)/1 var(--am-font);
  letter-spacing: 0;
  text-transform: lowercase;
  box-shadow: var(--am-cta-shadow);
  filter: none;
  transform: none;
}
html body.gm-sidebar-layout:not([data-auth-logged-in="1"]) main.page-shell.promotions-page-only .promotions-hero .promotions-cta {
  display: inline-block;
  line-height: 48px;
  text-align: center;
  white-space: nowrap;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-cta::first-letter {
  text-transform: uppercase;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-cta:hover {
  background: var(--am-grad-hover) !important;
  box-shadow: var(--am-cta-shadow-hover);
}

/* ---------------------------------------------------------------------------
 * Promosyonlar: grid + banner cards
 * 1 column on phones, 2 from 720px, 3 from 1180px. The media box reserves
 * the banner ratio (kills the 2px -> 190px layout shift of lazy images) and
 * the image is contained, so the 1.78:1 banner is letterboxed, not cropped.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: none;
  }
}

@media (min-width: 1180px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: none;
  }
}

html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-surface-1);
  box-shadow: none;
  cursor: pointer;
  transform: none;
  -webkit-tap-highlight-color: transparent;
}

html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media {
  display: block;
  aspect-ratio: var(--am-promo-ratio);
  overflow: hidden;
  border-radius: 0;
  background: var(--am-promo-placeholder);
  line-height: 0;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
}

/* Odd-ratio banner (40-content.js: more than 15% off the frame; today the
   1671x941 "2.000 TL Slot Bonusu" upload). Still contained, never cropped,
   but the bands show the same art blurred and dimmed instead of the flat
   placeholder, and with side bands ("x") the art's left/right edges fade
   into them over 20px instead of ending on a hard seam. The real fix is a
   ~1280x432 re-upload (owner). */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media[data-am-band] {
  position: relative;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media[data-am-band]::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--am-promo-art, none) center / cover no-repeat;
  filter: blur(20px) saturate(1.15) brightness(.6);
  pointer-events: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media[data-am-band] img {
  position: relative;
  z-index: 1;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media[data-am-band="x"] img {
  --am-promo-half: calc(50% * var(--am-promo-r, 2.94) / 2.94);
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - var(--am-promo-half)), #000 calc(50% - var(--am-promo-half) + 20px), #000 calc(50% + var(--am-promo-half) - 20px), transparent calc(50% + var(--am-promo-half)));
  mask-image: linear-gradient(90deg, transparent calc(50% - var(--am-promo-half)), #000 calc(50% - var(--am-promo-half) + 20px), #000 calc(50% + var(--am-promo-half) - 20px), transparent calc(50% + var(--am-promo-half)));
}

/* Text fallback card (no banner): same ratio, icon tile, Inter, chevron.
   Rows 1fr/auto/auto/1fr centre the title (+ optional text) vertically
   whether or not the description <span> is empty. */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 0;
  box-sizing: border-box;
  aspect-ratio: var(--am-promo-ratio);
  min-height: 0;
  padding: 14px 18px;
  overflow: hidden;
  border-radius: 0;
  background: var(--am-surface-1);
  color: var(--am-text);
  text-decoration: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback > i {
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1 / -1;
  width: 52px;
  height: 52px;
  margin: 0;
  border: 0;
  border-radius: 14px;
  background: var(--am-tint);
  color: var(--am-accent);
  font-size: 22px;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback > strong {
  grid-column: 2;
  grid-row: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--am-text);
  font: 750 var(--am-fs-lg)/1.25 var(--am-font);
  letter-spacing: -.01em;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback > span {
  grid-column: 2;
  grid-row: 3;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--am-text-2);
  font: 400 var(--am-fs-sm)/1.45 var(--am-font);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback > span:empty {
  display: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback::after {
  content: "\f054";
  content: "\f054" / "";
  grid-column: 3;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--am-surface-2);
  color: var(--am-text-2);
  font: 900 11px/1 "Font Awesome 6 Free";
}

/* Hover (fine pointers) and keyboard focus. v2: no ring or glow; the
   banner lift + zoom (motion block) and, on text cards, a tone lift. */
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:hover .promo-card-fallback {
    background: var(--am-surface-2);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:hover .promo-card-fallback::after {
    background: var(--am-surface-3);
    color: var(--am-text);
  }
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
/* Tap feedback that also works under reduced motion (the tap highlight is
   off and hover is fine-pointer only; v1 used a cyan border here). */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:active {
  opacity: .86;
}

@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card {
    transition: transform var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback,
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback::after {
    transition: background-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media img {
    transition: transform .35s var(--am-ease);
  }
  @media (hover: hover) and (pointer: fine) {
    html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:hover {
      transform: translateY(-3px);
    }
    html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:hover .promotion-card__media img {
      transform: scale(1.03);
      filter: none;
    }
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:focus-visible {
    transform: translateY(-3px);
  }
  /* Press feedback is 60-motion.css's. */
}

/* ---------------------------------------------------------------------------
 * Promosyonlar: detail modal (#gmPromoModal and #gmPromoModalFallback)
 * z-index 1990 keeps it BELOW #authModal (10000, see the stack in the
 * 55-overlays.css header): "HEMEN KATIL" now opens
 * the login dialog on top (main, and with it this modal, is inert then).
 * Phones: bottom sheet; 601+: centred dialog. The dialog is the scroll
 * container: close button and CTA are sticky inside it.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal {
  z-index: 1990;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgb(2 9 15 / .82);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-dialog {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  max-height: 92vh;
  max-height: 92dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--am-r-lg) var(--am-r-lg) 0 0;
  background: var(--am-surface-1);
  box-shadow: var(--am-shadow-3);
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--am-accent-rgb) / .3) transparent;
}

html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-close {
  position: sticky;
  top: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 10px 10px -54px auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(2 11 18 / .72);
  color: var(--am-text);
  font: 400 26px/1 var(--am-font);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / .35);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-close:hover {
  background: rgb(2 11 18 / .9);
  color: #fff;
}

/* display is set inline by the page script: never touch it here */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-hero {
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: auto 2.94 / 1;
  object-fit: contain;
  border-bottom: 0;
  background: var(--am-promo-placeholder);
}

html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body {
  padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  color: var(--am-text-2);
  font: 400 var(--am-fs-md)/1.65 var(--am-font);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body h3 {
  margin: 0 0 12px;
  padding-right: 48px;
  color: var(--am-text);
  font: 800 var(--am-fs-xl)/1.25 var(--am-font);
  letter-spacing: -.02em;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body :is(p, li, span, div) {
  font-family: var(--am-font);
  font-size: var(--am-fs-md);
  line-height: 1.65;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body p {
  margin: 0 0 12px;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body :is(ul, ol) {
  margin: 0 0 12px;
  padding-left: 1.25em;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body li {
  margin: 0 0 6px;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body li::marker {
  color: var(--am-accent);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body :is(strong, b) {
  color: var(--am-text);
  font-weight: 650;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body a {
  color: var(--am-accent);
}

/* Sticky CTA. A sticky box is its own stacking context, so its own
   background would paint UNDER negative-z children: the pill is therefore
   drawn by ::after and the text-hiding fade behind it by ::before (both
   z -1, tree order), and the button's background is cleared.
   Type and case as every other primary CTA (15px / 700, sentence case, no
   tracking): the template copy is "HEMEN KATIL" and the page's own block
   adds uppercase + .6px, so the label is lower-cased and ::first-letter
   restores the capital (html lang="tr": I -> ı), "Hemen katıl", like the
   hero's "Müşteri hizmetlerine bağlan". ::first-letter needs a block
   container, so the button is a centred one-line block instead of the
   page's inline-flex (no JS sets its display; members see it too). */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta {
  position: sticky;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 20px 0 0;
  padding: 0 24px;
  border: 0 !important;
  border-radius: var(--am-r-pill);
  background: transparent !important;
  color: var(--am-on-accent) !important;
  font: 700 var(--am-fs-md)/48px var(--am-font);
  letter-spacing: 0;
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
  box-shadow: none;
  filter: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::first-letter {
  text-transform: uppercase;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::before,
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::before {
  inset: -20px -20px calc(-16px - env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgb(var(--am-surface-1-rgb) / 0), var(--am-surface-1) 20px);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::after {
  inset: 0;
  border-radius: inherit;
  background: var(--am-grad);
  box-shadow: var(--am-cta-shadow);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta:hover {
  filter: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta:hover::after {
  background: var(--am-grad-hover);
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal {
    align-items: center;
    padding: 24px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-dialog {
    max-width: 600px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    border-bottom: 0;
    border-radius: var(--am-r-lg);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body {
    padding: 24px 28px 20px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body h3 {
    font-size: var(--am-fs-2xl);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta {
    bottom: 20px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::before {
    inset: -20px -28px -20px;
  }
}

@media (min-width: 901px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* Short viewports (landscape phones, short laptop windows): at 844x390 the
   full-width 2.94:1 hero plus the sticky CTA left ~44px for the offer text.
   Cap the hero (contained, so the art is never cropped) and tighten the
   frame so several lines of text show when the dialog opens. */
@media (max-height: 560px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-hero {
    max-height: 34vh;
    max-height: 34dvh;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body {
    padding-top: 16px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body h3 {
    margin-bottom: 8px;
    font-size: var(--am-fs-xl);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta {
    min-height: 44px;
    margin-top: 16px;
  }
}
@media (min-width: 601px) and (max-height: 560px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal {
    padding: 12px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body {
    padding-bottom: 12px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta {
    bottom: 12px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::before {
    inset: -14px -28px -12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal.is-open .gm-promo-dialog {
    animation: am-content-sheet .26s var(--am-ease) both;
  }
  @media (min-width: 601px) {
    html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal.is-open .gm-promo-dialog {
      animation-name: am-content-pop;
      animation-duration: .2s;
    }
  }
}
@keyframes am-content-sheet {
  from { transform: translateY(32px); opacity: 0; }
}
@keyframes am-content-pop {
  from { transform: translateY(8px) scale(.985); opacity: 0; }
}

/* ---------------------------------------------------------------------------
 * Legal / info pages (div.legal-page, body.gm-arwen-page)
 * Long-form: Inter 15.5/16px, 1.75 leading, ~72ch measure. Phones: TOC as
 * a chip rail; 601-1200: TOC card; 1201+: sticky TOC column (sections are
 * siblings of the TOC, so it is a pure grid placement, no markup change).
 * Resets the legacy GilroyArwen/Rajdhani/Cinzel faces, gold gradient h1,
 * 3px section top bars and centred header.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout div.legal-page .legal-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 var(--am-content-head-gap);
  padding: 0;
  border: 0;
  text-align: left;
}
html body.gm-sidebar-layout div.legal-page .legal-page-header::after {
  content: none;
}
html body.gm-sidebar-layout div.legal-page .legal-page-header .legal-badge {
  order: -1;
}

/* TOC */
html body.gm-sidebar-layout div.legal-page .legal-toc {
  position: relative;
  margin: 0 0 var(--am-content-head-gap);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html body.gm-sidebar-layout div.legal-page .legal-toc::before {
  content: none;
}
html body.gm-sidebar-layout div.legal-page .legal-toc h3 {
  margin: 0 0 10px;
  color: var(--am-text-3);
  font: 700 var(--am-fs-2xs)/1.2 var(--am-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
html body.gm-sidebar-layout div.legal-page .legal-toc ol {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--am-gutter));
  padding: 6px var(--am-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--am-gutter);
  scrollbar-width: none;
  list-style: none;
  columns: auto;
  counter-reset: am-toc;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--am-gutter), #000 calc(100% - var(--am-gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--am-gutter), #000 calc(100% - var(--am-gutter)), transparent);
}
html body.gm-sidebar-layout div.legal-page .legal-toc ol::-webkit-scrollbar {
  display: none;
}
html body.gm-sidebar-layout div.legal-page .legal-toc ol li {
  flex: none;
  margin: 0;
  padding: 0;
  counter-increment: am-toc;
  scroll-snap-align: start;
  break-inside: avoid;
}
html body.gm-sidebar-layout div.legal-page .legal-toc ol li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--am-content-chip-h);
  padding: 0 14px 0 6px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-1);
  color: var(--am-text-2);
  font: 600 var(--am-fs-sm)/1.2 var(--am-font);
  text-decoration: none;
  white-space: nowrap;
}
html body.gm-sidebar-layout div.legal-page .legal-toc ol li a::before {
  content: counter(am-toc);
  content: counter(am-toc) / "";   /* visual badge; the h2s carry the numbers */
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--am-tint);
  color: var(--am-accent);
  font: 700 var(--am-fs-2xs)/1 var(--am-font);
  font-variant-numeric: tabular-nums;
}
html body.gm-sidebar-layout div.legal-page .legal-toc ol li a:hover {
  border-color: transparent;
  background: var(--am-surface-2);
  color: var(--am-text);
}
/* Inside the scrolling rail an outset ring is clipped (top) and faded by
   the edge mask (left): draw it inset. */
html body.gm-sidebar-layout div.legal-page .legal-toc ol li a:focus-visible {
  outline-offset: -2px;
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout div.legal-page .legal-toc {
    padding: 20px 20px 16px;
    border: 0;
    border-radius: var(--am-r-lg);
    background: var(--am-surface-1);
  }
  html body.gm-sidebar-layout div.legal-page .legal-toc h3 {
    margin: 0 0 10px 10px;
  }
  html body.gm-sidebar-layout div.legal-page .legal-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 16px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html body.gm-sidebar-layout div.legal-page .legal-toc ol li a {
    display: flex;
    min-height: var(--am-content-chip-h);
    padding: 6px 10px 6px 6px;
    border-color: transparent;
    border-radius: var(--am-r-sm);
    background: transparent;
    white-space: normal;
  }
  html body.gm-sidebar-layout div.legal-page .legal-toc ol li a:hover {
    border-color: transparent;
    background: var(--am-surface-2);
  }
  html body.gm-sidebar-layout div.legal-page .legal-toc ol li a:focus-visible {
    outline-offset: 2px;
  }
}

/* Sections */
/* Phones: open sections divided by hairlines (no nested card padding, the
   text gets the full container width); 601+: flat surface-1 cards (v2: no
   outline, no gradient). */
html body.gm-sidebar-layout div.legal-page .legal-section {
  position: relative;
  margin: 0;
  padding: 24px 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--am-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  /* Lands --gm-top + 20px (the single html scroll-padding, 10-chrome.css). */
}
html body.gm-sidebar-layout div.legal-page .legal-section::before {
  content: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section > :last-child {
  margin-bottom: 0;
}

/* Section title: v2 size/weight, no accent bar (as on home and catalog). */
html body.gm-sidebar-layout div.legal-page .legal-section h2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  color: var(--am-text);
  font: 800 var(--am-fs-section)/1.2 var(--am-font);
  letter-spacing: var(--am-section-track);
  text-transform: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section h2::before {
  content: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section h3 {
  margin: 24px 0 8px;
  color: var(--am-text);
  font: 700 var(--am-fs-lg)/1.35 var(--am-font);
  letter-spacing: -.01em;
  text-transform: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section h4 {
  margin: 0 0 6px;
  color: var(--am-text);
  font: 700 var(--am-fs-md)/1.35 var(--am-font);
  letter-spacing: -.01em;
}

html body.gm-sidebar-layout div.legal-page .legal-section :is(p, li) {
  color: var(--am-text-2);
  font: 400 15px/1.75 var(--am-font);
  letter-spacing: 0;
}
html body.gm-sidebar-layout div.legal-page .legal-section > :is(p, ul, ol, h3) {
  max-width: var(--am-content-measure);
}
html body.gm-sidebar-layout div.legal-page .legal-section p {
  margin: 0 0 14px;
}
html body.gm-sidebar-layout div.legal-page .legal-section :is(ul, ol) {
  margin: 0 0 16px;
  padding-left: 1.3em;
}
html body.gm-sidebar-layout div.legal-page .legal-section li {
  margin: 0 0 8px;
  padding-left: 4px;
}
html body.gm-sidebar-layout div.legal-page .legal-section li::marker {
  color: var(--am-accent);
  font-weight: 700;
}
html body.gm-sidebar-layout div.legal-page .legal-section :is(strong, b) {
  color: var(--gm-cyan-soft, #b8f4ff);
  font-weight: 650;
}
html body.gm-sidebar-layout div.legal-page .legal-section a {
  border: 0;
  color: var(--am-accent);
  text-decoration: underline;
  text-decoration-color: rgb(var(--am-accent-rgb) / .4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html body.gm-sidebar-layout div.legal-page .legal-section a:hover {
  text-decoration-color: currentColor;
}

/* Info / warning boxes */
html body.gm-sidebar-layout div.legal-page .legal-section :is(.legal-info-box, .legal-warning-box) {
  --am-box-rgb: var(--am-accent-rgb);
  max-width: var(--am-content-measure);
  margin: 18px 0;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid rgb(var(--am-box-rgb) / .9);
  border-radius: 12px;
  background: rgb(var(--am-box-rgb) / .08);
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-warning-box {
  --am-box-rgb: 251 191 36;
}
html body.gm-sidebar-layout div.legal-page .legal-section :is(.legal-info-box, .legal-warning-box) p {
  margin: 0 0 6px;
  color: var(--am-text);
  font-size: 14.5px;
  line-height: 1.65;
}
html body.gm-sidebar-layout div.legal-page .legal-section :is(.legal-info-box, .legal-warning-box) > :last-child {
  margin-bottom: 0;
}
html body.gm-sidebar-layout div.legal-page .legal-section :is(.legal-info-box, .legal-warning-box) i {
  margin-right: 8px;
  color: rgb(var(--am-box-rgb));
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-warning-box :is(strong, b) {
  color: #fde68a;
}

/* Tables: scroll inside the card on phones, full width from 601 */
html body.gm-sidebar-layout div.legal-page .legal-section table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 18px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  font: 400 var(--am-fs-sm)/1.55 var(--am-font);
}
html body.gm-sidebar-layout div.legal-page .legal-section table th {
  padding: 11px 14px;
  border: 0;
  border-bottom: 0;
  background: var(--am-surface-2);
  color: var(--am-text);
  font: 650 var(--am-fs-xs)/1.35 var(--am-font);
  letter-spacing: .02em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}
html body.gm-sidebar-layout div.legal-page .legal-section table td {
  min-width: 120px;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid var(--am-line);
  background: transparent;
  color: var(--am-text-2);
  font: 400 var(--am-fs-sm)/1.55 var(--am-font);
  vertical-align: top;
}
html body.gm-sidebar-layout div.legal-page .legal-section table tbody tr:first-child td {
  border-top: 0;
}
html body.gm-sidebar-layout div.legal-page .legal-section table tr:nth-child(even) td {
  background: rgb(255 255 255 / .018);
}
/* Phones: the 5-column tables scroll inside the 358px column. Edge glows
   show that more columns follow: the two "cover" gradients scroll with the
   content (local) and hide the matching glow at either end; the glows stay
   on the scroller edges (scroll). Page colour covers (no card below 601);
   a light glow because a dark shadow is invisible on this background.
   The opaque header row hides them there, the body rows show them. */
@media (max-width: 600px) {
  html body.gm-sidebar-layout div.legal-page .legal-section table {
    background:
      linear-gradient(90deg, var(--am-bg) 40%, rgb(var(--am-bg-rgb) / 0)) left / 28px 100% no-repeat local,
      linear-gradient(270deg, var(--am-bg) 40%, rgb(var(--am-bg-rgb) / 0)) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(var(--am-accent-rgb) / .2), rgb(var(--am-accent-rgb) / 0)) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(var(--am-accent-rgb) / .2), rgb(var(--am-accent-rgb) / 0)) right / 14px 100% no-repeat scroll,
      var(--am-bg);
  }
}

/* 601+: real full-width tables. Header cells wrap (the 5-column payment
   tables are ~690px with nowrap headers, wider than a 601-767 card), and
   overflow-wrap:anywhere lets min-content shrink so a table can never
   push past the card (it only breaks words when a column has no room). */
@media (min-width: 601px) {
  html body.gm-sidebar-layout div.legal-page .legal-section table {
    display: table;
    overflow: hidden;
  }
  html body.gm-sidebar-layout div.legal-page .legal-section table :is(th, td) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  html body.gm-sidebar-layout div.legal-page .legal-section table th {
    white-space: normal;
  }
}

/* İletişim: contact cards */
html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 18px 0;
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-card {
  padding: 20px;
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-surface-2);
  text-align: left;
  transform: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-card:hover {
  border-color: transparent;
  transform: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-card > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--am-tint);
  color: var(--am-accent);
  font-size: 18px;
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-card p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.65;
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Footer note */
html body.gm-sidebar-layout div.legal-page .legal-footer-note {
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--am-line);
  text-align: left;
}
html body.gm-sidebar-layout div.legal-page .legal-footer-note p {
  margin: 0;
  color: var(--am-text-3);
  font: 500 var(--am-fs-xs)/1.5 var(--am-font);
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout div.legal-page .legal-section {
    margin: 0 0 20px;
    padding: 32px 32px 28px;
    border: 0;
    border-radius: var(--am-r-lg);
    background: var(--am-surface-1);
    scroll-margin-top: 4px;   /* + the 20px html offset: card top lands --gm-top + 24px */
  }
  html body.gm-sidebar-layout div.legal-page .legal-section :is(p, li) {
    font-size: 15.5px;
  }
}

@media (min-width: 901px) {
  html body.gm-sidebar-layout div.legal-page .legal-section {
    padding: 40px 44px 36px;
  }
  html body.gm-sidebar-layout div.legal-page .legal-section :is(p, li) {
    font-size: 16px;
  }
  html body.gm-sidebar-layout div.legal-page .legal-toc ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 1201+: sticky TOC column. row-gap stays 0 (the TOC spans many implicit
   rows); spacing comes from the section margins. The section column runs to
   the container edge (lines up with header/footer); the text inside keeps
   the --am-content-measure, tables use the card width. */
@media (min-width: 1201px) {
  html body.gm-sidebar-layout div.legal-page {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
  html body.gm-sidebar-layout div.legal-page > .legal-page-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  html body.gm-sidebar-layout div.legal-page > .legal-toc {
    grid-column: 1;
    grid-row: 2 / span 80;
    position: sticky;
    top: calc(var(--gm-top) + 24px);
    max-height: calc(100vh - var(--gm-top) - 48px);
    margin: 0;
    padding: 18px 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  html body.gm-sidebar-layout div.legal-page .legal-toc ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  html body.gm-sidebar-layout div.legal-page .legal-toc ol li a {
    min-height: 40px;   /* pointer column; keeps long TOCs inside the viewport */
  }
  html body.gm-sidebar-layout div.legal-page > :is(.legal-section, .legal-footer-note) {
    grid-column: 2;
  }
}

/* ---------------------------------------------------------------------------
 * 404 (main.gm-404): centred flat card, plain "404" numeral, shared buttons
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.gm-404 {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: min(560px, 100% - 2 * var(--am-gutter));
  max-width: none;
  margin: var(--am-content-top) auto var(--am-content-bottom);
  padding: 40px 24px 32px;
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-lg);
  background: var(--am-surface-1);
  box-shadow: none;
  text-align: center;
}
html body.gm-sidebar-layout main.gm-404 > :not(a) {
  flex: 0 0 100%;
}
/* Plain text colour: the cyan gradient numeral was decoration, and the
   page's one cyan element is now its primary button. */
html body.gm-sidebar-layout main.gm-404 .code {
  margin: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--am-text);
  -webkit-text-fill-color: currentColor;
  font: 800 clamp(88px, 22vw, 136px)/.95 var(--am-font);
  letter-spacing: -.06em;
  text-shadow: none;
  filter: none;
}
html body.gm-sidebar-layout main.gm-404 h1 {
  margin: 12px 0 0;
  color: var(--am-text);
  font: 800 var(--am-fs-section)/1.2 var(--am-font);
  letter-spacing: var(--am-section-track);
  text-transform: none;
}
html body.gm-sidebar-layout main.gm-404 p {
  max-width: 40ch;
  margin: 0 auto 12px;
  color: var(--am-text-2);
  font: 400 var(--am-fs-md)/1.6 var(--am-font);
}
html body.gm-sidebar-layout main.gm-404 .btn {
  display: inline-flex;
  flex: 1 1 140px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-grad);
  color: var(--am-on-accent);
  font: 700 var(--am-fs-md)/1 var(--am-font);
  text-decoration: none;
  box-shadow: var(--am-cta-shadow);
}
html body.gm-sidebar-layout main.gm-404 .btn:hover {
  background: var(--am-grad-hover);
}
html body.gm-sidebar-layout main.gm-404 .btn.ghost {
  border: 0;
  background: var(--am-surface-2);
  color: var(--am-text);
  box-shadow: none;
}
html body.gm-sidebar-layout main.gm-404 .btn.ghost:hover {
  background: var(--am-surface-3);
  color: #fff;
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout main.gm-404 {
    margin-top: calc(var(--am-content-top) + 16px);
    padding: 56px 48px 48px;
  }
  html body.gm-sidebar-layout main.gm-404 .btn {
    flex: 0 0 auto;
    min-width: 168px;
  }
}

/* ---------------------------------------------------------------------------
 * /sifremi-unuttum (div.gm-reset): auth-modal look (48px inputs, r12,
 * primary gradient button). .msg / .step1 / .step2 visibility stays with
 * the page's classes (.ok/.err/.sent).
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell .gm-reset {
  box-sizing: border-box;
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 20px 24px;
  border: 0;
  border-radius: var(--am-r-lg);
  background: var(--am-surface-1);
  box-shadow: none;
}
html body.gm-sidebar-layout main.page-shell .gm-reset::before {
  content: "\f084";
  content: "\f084" / "";
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 0 18px;
  border: 0;
  border-radius: 16px;
  background: var(--am-tint);
  color: var(--am-accent);
  font: 900 20px/1 "Font Awesome 6 Free";
}
html body.gm-sidebar-layout main.page-shell .gm-reset h1 {
  margin: 0 0 8px;
  color: var(--am-text);
  font: 800 var(--am-fs-section)/1.2 var(--am-font);
  letter-spacing: var(--am-section-track);
}
html body.gm-sidebar-layout main.page-shell .gm-reset .sub {
  margin: 0 0 22px;
  color: var(--am-text-2);
  font: 400 var(--am-fs-base)/1.6 var(--am-font);
}
html body.gm-sidebar-layout main.page-shell .gm-reset label {
  display: block;
  margin: 16px 0 8px;
  color: var(--am-text-2);
  font: 600 var(--am-fs-sm)/1.3 var(--am-font);
}
html body.gm-sidebar-layout main.page-shell .gm-reset form > div > label:first-child {
  margin-top: 0;
}
html body.gm-sidebar-layout main.page-shell .gm-reset input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--am-field-line);   /* 3:1 edge at rest (00-tokens) */
  border-radius: 12px;
  background: var(--am-bg);          /* a filled well on the card */
  color: var(--am-text);
  font: 400 16px/1 var(--am-font);   /* >=16px: no iOS focus zoom */
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
html body.gm-sidebar-layout main.page-shell .gm-reset input::placeholder {
  color: var(--am-text-3);
  opacity: 1;
}
html body.gm-sidebar-layout main.page-shell .gm-reset input:hover {
  border-color: var(--am-field-line-hover);
}
html body.gm-sidebar-layout main.page-shell .gm-reset input:focus,
html body.gm-sidebar-layout main.page-shell .gm-reset input:focus-visible {
  outline: none;
  border-color: rgb(var(--am-accent-rgb) / .6);
  box-shadow: 0 0 0 3px rgb(var(--am-accent-rgb) / .16);
}
html body.gm-sidebar-layout main.page-shell .gm-reset .btn {
  width: 100%;
  min-height: 48px;
  margin: 22px 0 0;
  padding: 0 20px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-grad);
  color: var(--am-on-accent);
  font: 750 var(--am-fs-md)/1 var(--am-font);
  box-shadow: var(--am-cta-shadow);
  cursor: pointer;
}
html body.gm-sidebar-layout main.page-shell .gm-reset .btn:hover:not(:disabled) {
  background: var(--am-grad-hover);
}
html body.gm-sidebar-layout main.page-shell .gm-reset .btn:disabled {
  opacity: .55;
  cursor: default;
}
html body.gm-sidebar-layout main.page-shell .gm-reset .msg {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  font: 500 var(--am-fs-base)/1.5 var(--am-font);
}
html body.gm-sidebar-layout main.page-shell .gm-reset .msg.ok {
  border: 0;
  background: rgb(52 211 153 / .12);
  color: #a7f3d0;
}
html body.gm-sidebar-layout main.page-shell .gm-reset .msg.err {
  border: 0;
  background: rgb(248 113 113 / .12);
  color: #fecaca;
}
html body.gm-sidebar-layout main.page-shell .gm-reset .back {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 12px 0 0;
  color: var(--am-text-2);
  font: 600 var(--am-fs-base)/1 var(--am-font);
  text-align: center;
  text-decoration: none;
}
html body.gm-sidebar-layout main.page-shell .gm-reset .back:hover {
  color: var(--am-accent);
}

@media (min-width: 601px) {
  html body.gm-sidebar-layout main.page-shell .gm-reset {
    margin-top: 8px;
    padding: 40px 40px 32px;
  }
}

/* ---------------------------------------------------------------------------
 * Motion (colour/border transitions only; lifts are in the promo block)
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) .gm-row-head .gm-row-all,
  html body.gm-sidebar-layout main.page-shell :is(.gm-support-card, .gm-support-card .btn, .gm-reset input, .gm-reset .btn, .gm-reset .back),
  html body.gm-sidebar-layout main.page-shell.promotions-page-only :is(.promotions-cta, .gm-promo-close, .gm-promo-cta),
  html body.gm-sidebar-layout main.gm-404 .btn,
  html body.gm-sidebar-layout div.legal-page .legal-toc a {
    transition: color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease);
  }
}

/* ---- 50-footer.css ---- */
/*
 * Footer (footer.site-footer.gmf, inc/aqua/_footer.php). Shared chrome, so it
 * restyles member pages too; markup is identical logged in and out.
 *
 * Layout is a CSS grid on the EXISTING children of .gmf-shell (no markup
 * change). .gmf-copy is display:contents so its copyright line and legal
 * paragraph can sit in different cells:
 *   trust band   .gmf-trust (5 cards)
 *   brand col    .gmf-copy > p (logo painted by ::before) + licence seals
 *                (.gmf-license-row) + RG badges (.gmf-responsible-row)
 *   links col    nav.gmf-links (label from ::before)
 *   payments     .gmf-sec (one chip style for logos and text tokens); from
 *                1201 it sits under the links in the wide right column
 *   providers    .gmf-prov-marquee (from 601px; animated only >=901 +
 *                no-preference)
 *   bottom bar   .gmf-cr (copyright) + .gmf-bottom (RG pill + warning)
 *
 * Payment chips wrap with text-wrap: balance from 601 (inline-flex chips
 * in a block track), so 13 chips never leave a lone chip on the last row.
 * Browsers without balance fall back to plain greedy wrapping.
 *
 * Cascade notes:
 *  - the provider-marquee <style> sits INSIDE the footer (after this layer),
 *    max (0,2,0): every rule here is (0,3,2)+ so it still wins;
 *  - the licence/RG rows, their links and badge <img>s carry inline style=""
 *    (display/gap/margin/height/opacity): only those properties use
 *    !important here. Never display:...!important on .gmf-license (the MGL
 *    <img onerror> hides it with an inline display:none).
 *  - de-duplicated RG signals: the 18+ badge is shown once (.gmf-18 inside
 *    the bottom pill), so the second 18+ svg link and the "SORUMLU OYUN"
 *    caption are hidden; BeGambleAware, the licence seals, the legal text and
 *    the warning all stay visible.
 *
 * Breakpoints: base = phones, 601, 901, 1201. Every property set here is set
 * unconditionally first, so the legacy 600/640 footer bands never mix in.
 *
 * Design language v2 (00-tokens.css header): the footer is one flat band a
 * tone below the page (--am-ft-bg) with a single hairline on top; trust
 * cards, seals, payment chips, the RG pill and social buttons are filled
 * surface-1 tiles without outlines (hover = surface-2); link rows have no
 * underlines; the provider strip is separated by spacing only. Link-group
 * collapsing on phones is 27-simplify's (it only changes layout there).
 */
html body.gm-sidebar-layout .site-footer {
  --am-ft-bg: #02080d;
  --am-ft-legal: #87a1b1;
  --am-ft-tile: var(--am-surface-1);
  --am-ft-tile-hover: var(--am-surface-2);
  --am-ft-chip: var(--am-ft-tile);
  --am-ft-col-gap: 32px;
  position: relative;
  margin-top: 0;
  background: var(--am-ft-bg);
  border-top: 1px solid var(--am-line);
  color: var(--am-text-2);
  font-family: var(--am-font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---- Shell grid ------------------------------------------------------- */
html body.gm-sidebar-layout .site-footer .gmf-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "trust"
    "legal"
    "lic"
    "rgrow"
    "links"
    "pay"
    "prov"
    "cr"
    "bottom";
  align-items: start;
  column-gap: var(--am-ft-col-gap);
  row-gap: 0;
  box-sizing: border-box;
  width: 100%;
  /* Same box as header row and content: min(100% - 2 gutters, container). */
  max-width: calc(var(--am-container) + 2 * var(--am-gutter));
  margin: 0 auto;
  /* Phones/tablets: body padding-bottom already clears the docked bottom
     bar; this keeps the last line clear of the floating support button /
     SeedyChat launcher (bottom 90px, 48/58px tall: see 55-overlays.css). */
  padding: 32px var(--am-gutter) 100px;
  text-align: start;
}
html body.gm-sidebar-layout .site-footer .gmf-copy { display: contents; }

html body.gm-sidebar-layout .site-footer .gmf-trust { grid-area: trust; }
html body.gm-sidebar-layout .site-footer .gmf-copy > p { grid-area: legal; }
html body.gm-sidebar-layout .site-footer .gmf-license-row:not(.gmf-responsible-row) { grid-area: lic; }
html body.gm-sidebar-layout .site-footer .gmf-responsible-row { grid-area: rgrow; }
html body.gm-sidebar-layout .site-footer .gmf-links { grid-area: links; }
html body.gm-sidebar-layout .site-footer .gmf-sec { grid-area: pay; }
html body.gm-sidebar-layout .site-footer .gmf-prov-marquee { grid-area: prov; }
html body.gm-sidebar-layout .site-footer .gmf-cr { grid-area: cr; }
html body.gm-sidebar-layout .site-footer .gmf-bottom { grid-area: bottom; }

/* Shared column heading look (.gmf-h + generated link-column label). */
html body.gm-sidebar-layout .site-footer .gmf-h,
html body.gm-sidebar-layout .site-footer .gmf-links::before {
  margin: 0 0 12px;
  color: var(--am-text);
  font: 700 12px/1.3 var(--am-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- Trust band --------------------------------------------------------- */
html body.gm-sidebar-layout .site-footer .gmf-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
}
html body.gm-sidebar-layout .site-footer .gmf-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-ft-tile);
  color: var(--am-text);
  font: 600 12.5px/1.3 var(--am-font);
  letter-spacing: -.005em;
  text-align: start;
}
html body.gm-sidebar-layout .site-footer .gmf-trust-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Icon chip: the layer's rounded-square icon tile (home trust strip, VIP,
   Turnuvalar, Destek), scaled to 34/36px. */
html body.gm-sidebar-layout .site-footer .gmf-trust-item i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--am-r-sm);
  background: var(--am-tint);
  color: var(--am-accent);
  font-size: 14px;
}

/* ---- Brand / legal column ---------------------------------------------- */
html body.gm-sidebar-layout .site-footer .gmf-copy > p {
  max-width: 62ch;
  margin: 0;
  color: var(--am-ft-legal);
  font: 400 12.5px/1.6 var(--am-font);
  text-align: start;
}
/* The logo file is the header's own (/assets/aqua/aquabet-logo.png, locked in
   _boot.php), so it is already cached. Cropped to the artwork's content box. */
html body.gm-sidebar-layout .site-footer .gmf-copy > p::before {
  content: "";
  display: block;
  width: 156px;
  height: 40px;
  margin: 0 0 14px;
  background: url("/assets/aqua/aquabet-logo.png?v=20260920") no-repeat -5px 50% / 164px auto;
}

/* Licence seals + RG badges: inline style="" attributes need !important. */
html body.gm-sidebar-layout .site-footer .gmf-license-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px 12px !important;
  margin: 20px 0 0 !important;
}
html body.gm-sidebar-layout .site-footer .gmf-responsible-row { margin-top: 12px !important; }
html body.gm-sidebar-layout .site-footer .gmf-license-row a {
  align-items: center !important;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--am-r-sm);
  background: var(--am-ft-tile);
  transition: none;
}
html body.gm-sidebar-layout .site-footer .gmf-license-row:not(.gmf-responsible-row) a { padding: 0 10px; }
html body.gm-sidebar-layout .site-footer .gmf-license-row a:hover {
  background: var(--am-ft-tile-hover);
}
html body.gm-sidebar-layout .site-footer .gmf-license-row img {
  height: 36px !important;
  width: auto !important;
  opacity: 1 !important;
}
html body.gm-sidebar-layout .site-footer .gmf-responsible-row img { height: 18px !important; }
/* Reserve the badge widths before the lazy images load (no layout shift). */
html body.gm-sidebar-layout .site-footer .gmf-license-row img { object-fit: contain; }
html body.gm-sidebar-layout .site-footer .gmf-license-row img[src*="vaultmark"] { aspect-ratio: 4 / 1; }
html body.gm-sidebar-layout .site-footer .gmf-license-row img[src*="MglLogo"] { aspect-ratio: 1 / 1; }
html body.gm-sidebar-layout .site-footer .gmf-license-row img[src*="begambleaware"] { aspect-ratio: 152 / 21; }
/* Second 18+ mark (svg link, same href as BeGambleAware): shown once via .gmf-18. */
html body.gm-sidebar-layout .site-footer .gmf-responsible-row a:has(> img[src*="18plus"]) { display: none !important; }

/* ---- Link column -------------------------------------------------------- */
html body.gm-sidebar-layout .site-footer .gmf-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 0;
  justify-content: stretch;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
}
html body.gm-sidebar-layout .site-footer .gmf-links::before {
  content: "Bilgi & Politikalar";
  grid-column: 1 / -1;
  margin-bottom: 4px;
}
html body.gm-sidebar-layout .site-footer .gmf-links a {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border-bottom: 0;
  color: var(--am-text-2);
  font: 500 14px/1.3 var(--am-font);
  text-decoration: none;
  transition: none;
}
html body.gm-sidebar-layout .site-footer .gmf-links a:hover {
  color: var(--am-text);
  text-decoration: none;
}
/* 390-600: three columns at 13px (9 links = 3 rows instead of 5, ~90px
   shorter footer). A label that still wraps ("Şartlar ve Koşullar" at 390)
   stays inside its 44px row. */
@media (min-width: 390px) and (max-width: 600px) {
  html body.gm-sidebar-layout .site-footer .gmf-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
  }
  html body.gm-sidebar-layout .site-footer .gmf-links a {
    font-size: 13px;
  }
}

/* ---- Payments ------------------------------------------------------------ */
html body.gm-sidebar-layout .site-footer .gmf-sec {
  min-width: 0;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
}
/* Phones: one horizontal snap row with a right-edge fade. */
html body.gm-sidebar-layout .site-footer .gmf-pay-marquee {
  margin: 0 calc(var(--am-gutter) * -1);
  padding: 0 var(--am-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--am-gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
html body.gm-sidebar-layout .site-footer .gmf-pay-marquee::-webkit-scrollbar { display: none; }
html body.gm-sidebar-layout .site-footer .gmf-pay-track {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 0 40px 0 0;
}
html body.gm-sidebar-layout .site-footer .gmf-logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--am-r-sm);
  background: var(--am-ft-chip);
  color: var(--am-text-2);
  font: 650 13px/1 var(--am-font);
  letter-spacing: 0;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: none;
}
html body.gm-sidebar-layout .site-footer .gmf-logo:hover {
  background: var(--am-ft-tile-hover);
  color: var(--am-text);
}
html body.gm-sidebar-layout .site-footer .gmf-logo > i {
  color: var(--am-text-2);
  font-size: 13px;
}
html body.gm-sidebar-layout .site-footer .gmf-logo-img {
  display: block;
  width: auto;
  height: 18px;
  max-width: none;
  object-fit: contain;
  /* simple-icons marks in brand colours: render them as one mono set */
  filter: brightness(0) invert(1);
  opacity: .86;
}
/* The Visa mark is a small wordmark inside a 24x24 box: crop to it. */
html body.gm-sidebar-layout .site-footer .gmf-logo-img[src*="/pay/visa"] {
  width: 42px;
  height: 18px;
  object-fit: cover;
}
html body.gm-sidebar-layout .site-footer .gmf-logo-img[src*="/pay/mastercard"] { height: 22px; }
/* Icon-only marks (alt="") get a visible text token like the others. */
html body.gm-sidebar-layout .site-footer .gmf-logo:has(> img[src*="/pay/mastercard"])::after { content: "Mastercard"; }
html body.gm-sidebar-layout .site-footer .gmf-logo:has(> img[src*="/pay/tether"])::after { content: "Tether"; }
html body.gm-sidebar-layout .site-footer .gmf-logo:has(> img[src*="/pay/bitcoin"])::after { content: "Bitcoin"; }
html body.gm-sidebar-layout .site-footer .gmf-logo:has(> img[src*="/pay/paysafe"])::after { content: "Paysafe"; }

/* ---- Provider strip -------------------------------------------------------
   Default (phones, tablets, reduced motion): a static, swipeable rail.
   55-overlays.js marks the second (loop) copy [data-am-dup]; it is hidden
   whenever the strip is not animating. */
html body.gm-sidebar-layout .site-footer .gmf-prov-marquee {
  margin: 32px calc(var(--am-gutter) * -1) 0;
  padding: 16px var(--am-gutter);
  border-block: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--am-gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
html body.gm-sidebar-layout .site-footer .gmf-prov-marquee::-webkit-scrollbar { display: none; }
html body.gm-sidebar-layout .site-footer .gmf-prov-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding-right: 48px;
  animation: none;
}
html body.gm-sidebar-layout .site-footer .gmf-prov-track > [data-am-dup] { display: none; }
/* Fixed-width cells: logo centres sit on an even rhythm whatever the
   artwork's own width (the marquee's -50% loop stays exact: no flex gap). */
html body.gm-sidebar-layout .site-footer .gmf-prov {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 120px;
  height: 40px;
  padding: 0 10px;
  scroll-snap-align: start;
}
html body.gm-sidebar-layout .site-footer .gmf-prov img {
  display: block;
  width: auto;
  height: 28px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(var(--am-ft-prov-lift, 1.8));
  opacity: .72;
  transition: none;
}
/* Dark artwork (EGT badge, KA tile) vanishes at the shared lift. */
html body.gm-sidebar-layout .site-footer .gmf-prov img:is([src*="/egt."], [src*="/kagaming."]) { --am-ft-prov-lift: 2.6; }
/* Text-logo SVGs share a 220x48 viewBox with the wordmark left-aligned and
   the right third empty (widest mark ends at 143/220): crop that whitespace
   (shows 0-161 units) so they centre in the cell like the raster marks. */
html body.gm-sidebar-layout .site-footer .gmf-prov img[src*=".svg"]:not([src*="pragmatic"]) {
  width: 94px;
  object-fit: cover;
  object-position: 0 50%;
}
@media (hover: hover) {
  html body.gm-sidebar-layout .site-footer .gmf-prov:hover img {
    filter: none;
    opacity: 1;
  }
}
/* Phones (<=600): no provider strip. At this width it showed about three
   grey logos, 30-60px wide, on near-black (KA Gaming nearly invisible), so
   it read as smudges. The trust band directly above already makes the
   point. Its lazy logos are then never fetched on phones either. Tablets
   and up keep the strip. */
@media (max-width: 600px) {
  html body.gm-sidebar-layout .site-footer .gmf-prov-marquee {
    display: none;
  }
}
/* Mouse users get a thin scrollbar on the static rails (a hidden one only
   suits touch swiping); the animated marquee is overflow:hidden anyway. */
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout .site-footer :is(.gmf-prov-marquee, .gmf-pay-marquee) {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--am-accent-rgb) / .28) transparent;
  }
  html body.gm-sidebar-layout .site-footer :is(.gmf-prov-marquee, .gmf-pay-marquee)::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  html body.gm-sidebar-layout .site-footer :is(.gmf-prov-marquee, .gmf-pay-marquee)::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgb(var(--am-accent-rgb) / .28);
  }
}

/* ---- Bottom bar: copyright + responsible gaming ----------------------- */
html body.gm-sidebar-layout .site-footer .gmf-cr {
  display: block;
  margin: 24px 0 0;
  color: var(--am-text-2);
  font: 500 13px/1.5 var(--am-font);
}
html body.gm-sidebar-layout .site-footer .gmf-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 16px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}
/* 18+ and "Sorumlu Oyun" merged into one pill. */
html body.gm-sidebar-layout .site-footer .gmf-rg {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 4px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-ft-tile);
}
html body.gm-sidebar-layout .site-footer .gmf-18 {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--am-grad);
  color: var(--am-on-accent);
  font: 800 12px/1 var(--am-font);
  letter-spacing: -.03em;
}
html body.gm-sidebar-layout .site-footer .gmf-rg-txt { display: none; }
html body.gm-sidebar-layout .site-footer .gmf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--am-text);
  font: 600 12.5px/1 var(--am-font);
  white-space: nowrap;
}
html body.gm-sidebar-layout .site-footer .gmf-badge i { color: var(--am-accent); font-size: 12px; }
html body.gm-sidebar-layout .site-footer .gmf-warn {
  flex: 1 1 220px;
  max-width: none;
  color: var(--am-ft-legal);
  font: 400 12.5px/1.5 var(--am-font);
  text-align: start;
}
html body.gm-sidebar-layout .site-footer .gmf-social { display: flex; gap: 8px; }
html body.gm-sidebar-layout .site-footer .gmf-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--am-ft-tile);
  color: var(--am-text-2);
  text-decoration: none;
}
html body.gm-sidebar-layout .site-footer .gmf-social a:hover { background: var(--am-ft-tile-hover); color: var(--am-text); }

/* ---- Tablet: 601-900 ----------------------------------------------------
   Brand text left, seals right; links and payments as full-width bands. */
@media (min-width: 601px) {
  html body.gm-sidebar-layout .site-footer .gmf-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas:
      "trust trust"
      "legal lic"
      "legal rgrow"
      "legal ."
      "links links"
      "pay pay"
      "prov prov"
      "cr cr"
      "bottom bottom";
    padding: 40px var(--am-gutter) 100px;
  }
  html body.gm-sidebar-layout .site-footer .gmf-trust {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 36px;
  }
  /* Stacked cards up to 1200: icons share one row and labels start on one
     line, so a 2-line label (narrow tablets) never shifts its neighbours. */
  html body.gm-sidebar-layout .site-footer .gmf-trust-item {
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-height: 92px;
    padding: 14px 10px 12px;
    text-align: center;
  }
  html body.gm-sidebar-layout .site-footer .gmf-trust-item:last-child:nth-child(odd) { grid-column: auto; }
  html body.gm-sidebar-layout .site-footer .gmf-license-row:not(.gmf-responsible-row) { margin-top: 0 !important; }
  html body.gm-sidebar-layout .site-footer .gmf-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
  html body.gm-sidebar-layout .site-footer :is(.gmf-links, .gmf-sec) { margin-top: 36px; }
  /* Payments wrap from here on (no rail): inline-flex chips in a block
     track so text-wrap: balance evens the rows (font-size 0 drops the
     source whitespace; the chips set their own font). */
  html body.gm-sidebar-layout .site-footer .gmf-pay-marquee {
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html body.gm-sidebar-layout .site-footer .gmf-pay-track {
    display: block;
    width: auto;
    margin: 0 0 -8px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-align: start;
    text-wrap: balance;
  }
  html body.gm-sidebar-layout .site-footer .gmf-pay-track > .gmf-logo {
    margin: 0 8px 8px 0;
    vertical-align: top;
  }
  html body.gm-sidebar-layout .site-footer .gmf-prov-marquee { margin-top: 36px; }
}

/* ---- Desktop: >=901 ------------------------------------------------------
   901-1200: brand | links, payments band. >=1201: brand | links | payments. */
@media (min-width: 901px) {
  html body.gm-sidebar-layout .site-footer { --am-ft-col-gap: 48px; }
  html body.gm-sidebar-layout .site-footer .gmf-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
      "trust trust"
      "legal links"
      "lic links"
      "rgrow links"
      ". links"
      "pay pay"
      "prov prov"
      "cr cr"
      "bottom bottom";
    /* Room for the floating support pill / chat launcher at page end. */
    padding: 44px var(--am-gutter) 96px;
  }
  /* Member shells (body > .dash-shell) are full width: the footer content
     follows their edges like the header row (--am-chrome-member-x and the
     reasoning live in 10-chrome.css). */
  html body.gm-sidebar-layout:has(> .dash-shell) .site-footer .gmf-shell {
    max-width: none;
    padding-inline: var(--am-chrome-member-x, 24px);
  }
  html body.gm-sidebar-layout .site-footer .gmf-trust { margin-bottom: 40px; }
  /* Still stacked (row cards would wrap "Bonus & Promosyonlar" here). */
  html body.gm-sidebar-layout .site-footer .gmf-trust-item {
    min-height: 96px;
    padding: 16px 10px 14px;
    font-size: 12.5px;
  }
  html body.gm-sidebar-layout .site-footer .gmf-trust-item i {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  html body.gm-sidebar-layout .site-footer .gmf-license-row:not(.gmf-responsible-row) { margin-top: 20px !important; }
  html body.gm-sidebar-layout .site-footer .gmf-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
  html body.gm-sidebar-layout .site-footer .gmf-links a { min-height: 38px; }
  html body.gm-sidebar-layout .site-footer .gmf-sec { margin-top: 40px; }
  html body.gm-sidebar-layout .site-footer .gmf-prov-marquee {
    margin: 40px 0 0;
    padding: 18px 0;
  }
  html body.gm-sidebar-layout .site-footer .gmf-prov-track { padding-right: 0; }
  html body.gm-sidebar-layout .site-footer .gmf-prov {
    width: 136px;
    padding: 0 14px;
  }
}

/* >=1201: brand | (links over payments). The wide right column keeps the 13
   payment chips to two balanced rows (a third column held them in five). */
@media (min-width: 1201px) {
  html body.gm-sidebar-layout .site-footer { --am-ft-col-gap: 56px; }
  html body.gm-sidebar-layout .site-footer .gmf-shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "trust trust"
      "legal links"
      "lic pay"
      "rgrow pay"
      ". pay"
      "prov prov"
      "cr bottom";
    padding-top: 48px;
  }
  html body.gm-sidebar-layout .site-footer .gmf-trust { gap: 12px; }
  /* Row cards from here: at 1201 the widest label (13px) still has ~6px
     to spare next to the 36px icon chip. */
  html body.gm-sidebar-layout .site-footer .gmf-trust-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    min-height: 64px;
    padding: 12px;
    font-size: 13px;
    text-align: start;
  }
  html body.gm-sidebar-layout .site-footer .gmf-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
  html body.gm-sidebar-layout .site-footer .gmf-sec { margin-top: 24px; }
  /* Bottom bar on one line: copyright left, warning + RG pill right. */
  html body.gm-sidebar-layout .site-footer .gmf-cr {
    align-self: center;
    margin-top: 24px;
  }
  html body.gm-sidebar-layout .site-footer .gmf-bottom {
    justify-content: flex-end;
    margin-top: 24px;
  }
  html body.gm-sidebar-layout .site-footer .gmf-warn {
    order: -1;
    flex: 0 1 auto;
    text-align: end;
  }
}

/* Provider marquee: only on wide screens and only when motion is welcome.
   Paused on hover, while anything in the footer has keyboard focus (the
   logos themselves are not focusable; WCAG 2.2.2) and while off-screen
   ([data-am-offscreen] from 55-overlays.js); the loop copy is visible only
   here. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout .site-footer .gmf-prov-marquee {
    overflow: hidden;
    scroll-snap-type: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  html body.gm-sidebar-layout .site-footer .gmf-prov-track { animation: am-ft-prov 150s linear infinite; }
  html body.gm-sidebar-layout .site-footer .gmf-prov-track > [data-am-dup] { display: inline-flex; }
  html body.gm-sidebar-layout .site-footer .gmf-prov-marquee:is(:hover, :focus-within, [data-am-offscreen]) .gmf-prov-track,
  html body.gm-sidebar-layout .site-footer:focus-within .gmf-prov-track {
    animation-play-state: paused;
  }
}
@keyframes am-ft-prov {
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---- Motion (opt-in) -----------------------------------------------------
   Hover colour fades only when motion is welcome (the base rules set
   transition: none, so reduced motion never depends on the theme guard). */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout .site-footer .gmf-license-row a {
    transition: background-color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout .site-footer .gmf-links a {
    transition: color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout .site-footer .gmf-logo {
    transition: background-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout .site-footer .gmf-prov img {
    transition: filter .2s var(--am-ease), opacity .2s var(--am-ease);
  }
}

/* ---- 55-overlays.css ---- */
/*
 * Overlays: auth modal (#authModal, guest only, _header.php), live-support
 * FAB (.gm-live-support-fab), support status toast (.gm-support-status,
 * created by seedychat-bridge.js), SeedyChat launcher branding and the
 * z-index plan. Shared chrome, so these apply on member pages too.
 *
 * z-index stack of the whole layer (low -> high). This is the one place it
 * is documented; the other partials point here.
 *       30  catalog sticky pill band (30-catalog; 31 for the live toggle)
 *      100  header.topbar, 101 announcement bar (10-chrome)
 *      130  bottom bar (10-chrome)
 *      500  /slot provider sheet (30-catalog)
 *      880  live-support FAB (unchanged)
 *     1500  mobile drawer (10-chrome)
 *     1990  promo detail modal (40-content): below the auth modal, so its
 *           "HEMEN KATIL" opens the login dialog on top
 *     9000  support status toast: above FAB/bar/drawer/promo, below the
 *           auth modal; steps aside (visibility) while the drawer is open
 *    10000  #authModal: above every page modal (promo was 9999 live)
 *   2147483000  SeedyChat (third party, fixed): hidden while a modal is open
 * Overlay order in short: drawer 1500 < promo modal 1990 < toast 9000 <
 * auth modal 10000. Tokens: --am-ov-z-toast, --am-ov-z-modal (below).
 *
 * Floating position: SeedyChat's launcher is pinned by the bridge at bottom
 * 90px (+ safe area) on <=768 and at right 12px on <=480 (shadow :host
 * !important), so the FAB, the toast and the launcher's --y all use
 * --am-ov-float-b (90px + safe area, never below --am-float-bottom) up to
 * 900 and --am-float-bottom from 901: the support button does not jump
 * when the widget becomes ready, and nothing sits on the bottom bar.
 *
 * JS contracts kept (aqua-home.js, _footer.php, seedychat-bridge.js):
 *  - #authModal visibility stays keyed to .active (theme display none/flex);
 *    open motion is a keyframe on .active, gated by reduced motion.
 *  - no display on .auth-panel ([hidden]), .auth-form-error / .auth-otp-field
 *    (inline style.display), .gm-live-support-fab (bridge hides it with
 *    display:none!important when SeedyChat is ready), .gm-support-status
 *    ([hidden] -> display:none!important) or [data-destek-widget].
 *  - the register-art swap stays on #authModal.is-register (theme); only
 *    background-size/-position longhands are set on .auth-stage.
 *  - inputs stay >= 16px (iOS zoom); native validation untouched.
 *  - "a modal is open" is html[data-am-modal], set by 55-overlays.js from
 *    the class attribute of #authModal / .gm-promo-modal (never a
 *    body-level :has() on .active / .is-open: see the SeedyChat block).
 *
 * Cascade: the bridge appends its <style> to <head> after this layer at
 * (0,1,0)-(0,1,1); member-chrome restyles the FAB/password toggle at
 * (0,1,0)-(0,2,1) incl. padding-right:48px!important on password inputs
 * (kept on purpose); the theme's #regGender/#regTc rules are (1,0,0). Every
 * rule here is (0,2,2)+ and every #authModal rule (1,2,2)+.
 *
 * Breakpoints: base = phones (full-height sheet), 601 (centred dialog with
 * art banner, register 2 columns), 901 (art side panel, glass backdrop).
 *
 * Design language v2 (00-tokens.css header): flat surface-1 dialog without
 * outline or cyan halo (a dark drop shadow lifts it); fields are filled
 * wells with a 3:1 edge at rest (--am-field-line), a brighter edge on
 * hover and cyan + ring on focus; the tab thumb is a flat surface-3
 * segment; the submit is the dialog's one CTA (--am-cta-shadow). FAB and
 * toast: filled surfaces, no outline, no glow on hover.
 */
html body.gm-sidebar-layout {
  --am-ov-x: 12px;
  --am-ov-fab-h: 48px;
  --am-ov-float-b: max(var(--am-float-bottom), calc(90px + env(safe-area-inset-bottom, 0px)));
  --am-ov-z-toast: 9000;
  --am-ov-z-modal: 10000;
  --am-ov-field-h: 48px;
  /* Auth workspace insets: top, sides, bottom (bottom lives on the
     scrolling .auth-panels so content scrolls to the dialog edge). */
  --am-ov-ws-t: 16px;
  --am-ov-ws-x: 16px;
  --am-ov-ws-b: calc(24px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 601px) {
  html body.gm-sidebar-layout {
    --am-ov-x: 16px;
    --am-ov-ws-t: 22px;
    --am-ov-ws-x: 32px;
    --am-ov-ws-b: 30px;
  }
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout {
    --am-ov-x: 24px;
    --am-ov-fab-h: 44px;
    --am-ov-float-b: var(--am-float-bottom);
    --am-ov-ws-t: 26px;
    --am-ov-ws-b: 28px;
  }
}
@media (min-width: 1201px) {
  html body.gm-sidebar-layout {
    --am-ov-ws-t: 28px;
    --am-ov-ws-x: 36px;
    --am-ov-ws-b: 32px;
  }
}

/* ==== Auth modal ========================================================= */

/* Overlay. Phones: solid scrim (no backdrop blur below 901px). */
html body.gm-sidebar-layout #authModal.auth-modal-overlay {
  z-index: var(--am-ov-z-modal);
  align-items: flex-end;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) 0 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgb(var(--am-bg-rgb) / .88);
  color-scheme: dark;
}

/* Dialog. Phones: full-height sheet, the workspace scrolls inside it. */
html body.gm-sidebar-layout #authModal .auth-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--am-surface-1);
  box-shadow: 0 -12px 40px rgb(0 0 0 / .45);
  color: var(--am-text);
  font-family: var(--am-font);
  outline: none;
}
/* Defensive: the nginx-injected Panter guard may write display:none onto
   every [role=dialog] (incl. div.auth-modal) after an aria-label="Kapat"
   click elsewhere; an open overlay must never be left empty. */
html body.gm-sidebar-layout #authModal.active > .auth-modal { display: grid !important; }

/* Art: compact banner on phones/tablets, side panel from 901px. */
html body.gm-sidebar-layout #authModal .auth-stage {
  position: relative;
  display: block;
  min-height: 0;
  height: 104px;
  border: 0;
  border-bottom: 0;
  background-color: var(--am-surface-2);
  background-size: cover;
  background-position: 50% 94%;
  background-repeat: no-repeat;
  box-shadow: none;
}
html body.gm-sidebar-layout #authModal .auth-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--am-surface-1-rgb) / 0) 50%, rgb(var(--am-surface-1-rgb) / .85));
  pointer-events: none;
}

/* Workspace: tabs stay put, only .auth-panels scrolls (so the tab row and
   the close chip stay aligned however long the form gets, e.g. with the
   OTP row and an error showing). .auth-panels is never toggled by JS. */
html body.gm-sidebar-layout #authModal .auth-workspace {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--am-ov-ws-t) var(--am-ov-ws-x) 0;
}
/* The scroller spans the full dialog width (focus rings never clip, the
   scrollbar sits on the dialog edge); a 14px fade at both ends shows that
   content continues under the tabs / below the fold. */
html body.gm-sidebar-layout #authModal .auth-panels {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0 calc(-1 * var(--am-ov-ws-x));
  padding: 0 var(--am-ov-ws-x) var(--am-ov-ws-b);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--am-accent-rgb) / .25) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

/* Close: 40px glass chip (44px hit area), always on screen because the
   dialog itself does not scroll. */
html body.gm-sidebar-layout #authModal .auth-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--am-bg-rgb) / .66);
  color: var(--am-text);
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 4px 12px rgb(0 0 0 / .3);
  cursor: pointer;
  transition: none;
}
html body.gm-sidebar-layout #authModal .auth-close-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}
html body.gm-sidebar-layout #authModal .auth-close-btn:hover {
  background: var(--am-surface-3);
}
html body.gm-sidebar-layout #authModal .auth-close-btn:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 2px;
}

/* Tabs: segmented control with a sliding thumb (.is-register on the
   overlay is toggled by activateAuthTab together with the tabs). */
html body.gm-sidebar-layout #authModal .auth-tabs {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  background: var(--am-bg);
}
html body.gm-sidebar-layout #authModal .auth-tabs::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 6px);
  border-radius: var(--am-r-pill);
  background: var(--am-surface-3);
  box-shadow: 0 2px 8px rgb(0 0 0 / .3);
  pointer-events: none;
}
html body.gm-sidebar-layout #authModal.is-register .auth-tabs::before { transform: translateX(calc(100% + 4px)); }
html body.gm-sidebar-layout #authModal .auth-tab-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: transparent;
  color: var(--am-text-2);
  font: 650 14px/1 var(--am-font);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}
html body.gm-sidebar-layout #authModal .auth-tab-btn i {
  margin: 0;
  color: inherit;
  font-size: 13px;
}
html body.gm-sidebar-layout #authModal .auth-tab-btn:hover { color: var(--am-text); }
html body.gm-sidebar-layout #authModal .auth-tab-btn.active {
  background: transparent;
  color: var(--am-text);
}
html body.gm-sidebar-layout #authModal .auth-tab-btn.active i { color: var(--am-accent); }
html body.gm-sidebar-layout #authModal .auth-tab-btn:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 1px;
}

/* Panel heading */
html body.gm-sidebar-layout #authModal .auth-panel-heading { margin: 20px 0 16px; }
html body.gm-sidebar-layout #authModal .auth-panel-heading h3 {
  margin: 0 0 6px;
  color: var(--am-text);
  font: 800 22px/1.2 var(--am-font);
  letter-spacing: var(--am-section-track);
}
html body.gm-sidebar-layout #authModal .auth-panel-heading p {
  margin: 0;
  color: var(--am-text-2);
  font: 400 13.5px/1.5 var(--am-font);
}

/* Form grid. Phones: one column, name pair side by side. */
html body.gm-sidebar-layout #authModal .auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
}
html body.gm-sidebar-layout #authModal .auth-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
html body.gm-sidebar-layout #authModal #registerFormMain > .auth-form-row:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.gm-sidebar-layout #authModal .auth-field {
  position: relative;
  min-width: 0;
  margin: 0;
}
html body.gm-sidebar-layout #authModal .auth-field > label {
  display: block;
  margin: 0 0 6px;
  color: var(--am-text);
  font: 600 13px/1.3 var(--am-font);
  letter-spacing: 0;
}

/* Inputs + select: 48px, radius 12, 16px text (also placeholders). */
html body.gm-sidebar-layout #authModal .auth-field :is(input:not([type="checkbox"]):not([type="hidden"]), select) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--am-ov-field-h);
  min-height: var(--am-ov-field-h);
  margin: 0;
  padding: 0 14px 0 42px;
  border: 1px solid var(--am-field-line);
  border-radius: 12px;
  background-color: var(--am-bg);
  color: var(--am-text);
  font: 400 16px/1.25 var(--am-font);
  letter-spacing: 0;
  box-shadow: none;
  outline: none;
  transition: none;
}
/* Same chain as the shared field rule above, (1,4,3), so the select-only
   overrides actually win (a bare `select` here would be (1,2,3)). */
html body.gm-sidebar-layout #authModal .auth-field select:not([type="checkbox"]):not([type="hidden"]) {
  padding-right: 40px;
  background-position: right 15px center;
  cursor: pointer;
}
/* Placeholder option ("Cinsiyet seç") muted like the input placeholders. */
html body.gm-sidebar-layout #authModal .auth-field select:not([type="checkbox"]):not([type="hidden"]):invalid { color: var(--am-text-3); }
html body.gm-sidebar-layout #authModal .auth-field select option {
  background: var(--am-surface-2);
  color: var(--am-text);
}
html body.gm-sidebar-layout #authModal .auth-field input[type="date"]:invalid::-webkit-datetime-edit { color: var(--am-text-3); }
html body.gm-sidebar-layout #authModal .auth-field input::placeholder {
  color: var(--am-text-3);
  font-size: inherit;
  opacity: 1;
}
html body.gm-sidebar-layout #authModal .auth-field :is(input:not([type="checkbox"]), select):hover { border-color: var(--am-field-line-hover); }
html body.gm-sidebar-layout #authModal .auth-field :is(input:not([type="checkbox"]), select):focus {
  border-color: rgb(var(--am-accent-rgb) / .7);
  background-color: var(--am-bg);
  box-shadow: 0 0 0 3px rgb(var(--am-accent-rgb) / .16);
  outline: none;
}
html body.gm-sidebar-layout #authModal .auth-field :is(input:not([type="checkbox"]), select):user-invalid { border-color: rgb(248 113 113 / .6); }
html body.gm-sidebar-layout #authModal .auth-field :is(input:not([type="checkbox"]), select):user-invalid:focus { box-shadow: 0 0 0 3px rgb(248 113 113 / .16); }

/* Field icons: centred on the 48px input (label height independent). */
html body.gm-sidebar-layout #authModal .auth-field > i,
html body.gm-sidebar-layout #authModal .auth-input-wrap > i {
  position: absolute;
  top: auto;
  bottom: calc(var(--am-ov-field-h) / 2);
  left: 14px;
  z-index: 2;
  width: 16px;
  color: var(--am-text-3);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  transform: translateY(50%);
  pointer-events: none;
  transition: none;
}
html body.gm-sidebar-layout #authModal .auth-field:focus-within > i,
html body.gm-sidebar-layout #authModal .auth-input-wrap:focus-within > i { color: var(--am-accent); }
html body.gm-sidebar-layout #authModal .auth-input-wrap { position: relative; display: block; }

/* Password show/hide (structure + icon swap owned by aqua-home.js). */
html body.gm-sidebar-layout #authModal .auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  bottom: auto;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--am-text-3);
  font-size: 15px;
  transform: translateY(-50%);
  cursor: pointer;
}
html body.gm-sidebar-layout #authModal .auth-password-toggle:hover {
  background: var(--am-surface-2);
  color: var(--am-text);
}
html body.gm-sidebar-layout #authModal .auth-password-toggle[aria-pressed="true"] { color: var(--am-accent); }
html body.gm-sidebar-layout #authModal .auth-password-toggle:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: -2px;
}

/* OTP (shown by clearing the inline display; help colour is inline too). */
html body.gm-sidebar-layout #authModal .auth-otp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}
html body.gm-sidebar-layout #authModal .auth-otp-send-btn {
  min-height: var(--am-ov-field-h);
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--am-tint);
  color: var(--am-accent);
  font: 650 13px/1 var(--am-font);
  white-space: nowrap;
  cursor: pointer;
}
html body.gm-sidebar-layout #authModal .auth-otp-send-btn:hover { background: var(--am-tint-2); }
html body.gm-sidebar-layout #authModal .auth-otp-help {
  margin: 6px 0 0;
  color: var(--am-text-3);
  font: 400 12.5px/1.45 var(--am-font);
}

/* Remember me / forgot / terms */
html body.gm-sidebar-layout #authModal .auth-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin: -2px 0 0;
  color: var(--am-text-2);
  font: 500 13px/1.4 var(--am-font);
}
html body.gm-sidebar-layout #authModal .auth-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--am-text-2);
  cursor: pointer;
}
/* Custom checkbox (appearance only; required/validity stay native). */
html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--am-field-line);
  border-radius: 6px;
  background: var(--am-bg);
  cursor: pointer;
  transition: none;
}
html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--am-on-accent);
  clip-path: polygon(12% 46%, 0 62%, 42% 100%, 100% 18%, 86% 4%, 41% 70%);
  transform: scale(0);
}
html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"]:hover { border-color: var(--am-line-accent); }
html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"]:checked {
  border-color: transparent;
  background: var(--am-grad);
}
html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"]:checked::before { transform: scale(1); }
html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"]:user-invalid { border-color: rgb(248 113 113 / .7); }
html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"]:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 2px;
}
html body.gm-sidebar-layout #authModal :is(.auth-forgot, .auth-check a) {
  color: var(--am-accent);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}
html body.gm-sidebar-layout #authModal .auth-forgot {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
html body.gm-sidebar-layout #authModal :is(.auth-forgot, .auth-check a):hover { text-decoration: underline; }

/* Error box (display toggled inline by _footer.php). */
html body.gm-sidebar-layout #authModal .auth-form-error {
  margin: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: rgb(248 113 113 / .12);
  color: #fecaca;
  font: 500 13.5px/1.45 var(--am-font);
}

/* Primary submit (label rewritten via innerHTML while sending). */
html body.gm-sidebar-layout #authModal .auth-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  min-height: 50px;
  margin: 2px 0 0;
  padding: 0 22px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-grad);
  color: var(--am-on-accent);
  font: 700 15px/1 var(--am-font);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--am-cta-shadow);
  filter: none;
  transform: none;
  cursor: pointer;
  transition: none;
}
html body.gm-sidebar-layout #authModal .auth-submit-btn i { font-size: 14px; }
html body.gm-sidebar-layout #authModal .auth-submit-btn:hover {
  background: var(--am-grad-hover);
  box-shadow: var(--am-cta-shadow-hover);
  filter: none;
  transform: none;
}
html body.gm-sidebar-layout #authModal .auth-submit-btn:disabled {
  opacity: .65;
  cursor: wait;
}
html body.gm-sidebar-layout #authModal .auth-submit-btn:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 3px;
}

/* Guest /hesabim: aqua-deposit-ocean.css restyles every input/select under
   .gm-account-page with (0,2,1) !important; restore the modal look there. */
html body.gm-sidebar-layout.gm-account-page #authModal .auth-field :is(input:not([type="checkbox"]):not([type="hidden"]), select) {
  border-color: var(--am-field-line) !important;
  background-color: var(--am-bg) !important;
  color: var(--am-text) !important;
}
html body.gm-sidebar-layout.gm-account-page #authModal .auth-field :is(input:not([type="checkbox"]), select):hover {
  border-color: var(--am-field-line-hover) !important;
}
html body.gm-sidebar-layout.gm-account-page #authModal .auth-field :is(input:not([type="checkbox"]), select):focus {
  border-color: rgb(var(--am-accent-rgb) / .7) !important;
  background-color: var(--am-bg) !important;
  box-shadow: 0 0 0 3px rgb(var(--am-accent-rgb) / .16) !important;
  outline: none !important;
}
html body.gm-sidebar-layout.gm-account-page #authModal .auth-field select {
  /* the deposit-ocean shorthand also wipes the theme's chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238fb4c8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
}
/* (1,6,3) !important: beats the (1,5,3) !important colour rule above. */
html body.gm-sidebar-layout.gm-account-page #authModal .auth-field select:not([type="checkbox"]):not([type="hidden"]):invalid { color: var(--am-text-3) !important; }
html body.gm-sidebar-layout.gm-account-page #authModal .auth-check input[type="checkbox"]:focus { box-shadow: none !important; }
html body.gm-sidebar-layout.gm-account-page #authModal .auth-check input[type="checkbox"]:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85) !important;
  outline-offset: 2px;
}

/* ---- Auth modal: tablet (601-900) -------------------------------------- */
@media (min-width: 601px) {
  html body.gm-sidebar-layout #authModal.auth-modal-overlay {
    align-items: center;
    padding: 24px;
  }
  html body.gm-sidebar-layout #authModal .auth-modal {
    width: min(580px, 100%);
    height: auto;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    border-bottom: 0;
    border-radius: 24px;
    box-shadow: 0 28px 70px -18px rgb(0 0 0 / .75);
  }
  html body.gm-sidebar-layout #authModal .auth-stage {
    height: 120px;
    background-position: 50% 93%;
  }
  html body.gm-sidebar-layout #authModal .auth-panel-heading { margin: 22px 0 18px; }
  html body.gm-sidebar-layout #authModal .auth-panel-heading h3 { font-size: 24px; }
  /* Register: two columns (rows, OTP, password, terms, error and submit
     span both); fits 768x900, 1024x768 and 1440x900 without inner scroll. */
  html body.gm-sidebar-layout #authModal #registerFormMain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
  html body.gm-sidebar-layout #authModal #registerFormMain > :is(.auth-form-row, .auth-otp-field, .auth-field-password, .auth-options, .auth-form-error, .auth-submit-btn) { grid-column: 1 / -1; }
  html body.gm-sidebar-layout #authModal .auth-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Live OTP adds a full-width row (shown by clearing its inline display):
     tighten the rhythm so register still fits 1440x900 without scrolling. */
  html body.gm-sidebar-layout #authModal #registerPanel:has(#registerOtpWrap:not([style*="none"])) .auth-panel-heading { margin: 16px 0 12px; }
  html body.gm-sidebar-layout #authModal #registerFormMain:has(> #registerOtpWrap:not([style*="none"])) { row-gap: 8px; }
}

/* Phones, login tab: a taller art banner on tall screens, capped at
   30dvh / 240px (register keeps the 104px banner and scrolls). It used to
   grow into all the height the short form left (314-494px), which put the
   autofocused fields and the submit button in the bottom half, under the
   on-screen keyboard; the spare height now sits below the form instead.
   Tall enough screens only; see the short rule. */
@media (max-width: 600px) and (min-height: 601px) {
  html body.gm-sidebar-layout #authModal:not(.is-register) .auth-modal { grid-template-rows: clamp(104px, 30dvh, 240px) minmax(0, 1fr); }
  html body.gm-sidebar-layout #authModal:not(.is-register) .auth-stage { height: auto; }
}

/* Landscape phones / short tablets: the art banner would eat the form, so
   it is dropped and the close button moves into the tab row (the shared
   tab-row placement below). */
@media (max-width: 900px) and (max-height: 600px) {
  html body.gm-sidebar-layout #authModal { --am-ov-ws-t: 16px; }
  html body.gm-sidebar-layout #authModal .auth-stage { display: none; }
}
/* Close chip in the tab row (short screens and >=901): vertically centred on
   the 54px tab bar, 2px outside the content edge; the tabs leave it room. */
@media (max-width: 900px) and (max-height: 600px), (min-width: 901px) {
  html body.gm-sidebar-layout #authModal .auth-tabs { margin-right: 54px; }
  html body.gm-sidebar-layout #authModal .auth-close-btn {
    top: calc(var(--am-ov-ws-t) + 7px);
    right: calc(var(--am-ov-ws-x) - 2px);
  }
}

/* ---- Auth modal: desktop (>=901) --------------------------------------- */
@media (min-width: 901px) {
  html body.gm-sidebar-layout #authModal.auth-modal-overlay { background: rgb(var(--am-bg-rgb) / .8); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body.gm-sidebar-layout #authModal.auth-modal-overlay {
      background: rgb(var(--am-bg-rgb) / .72);
      -webkit-backdrop-filter: blur(10px) saturate(1.1);
      backdrop-filter: blur(10px) saturate(1.1);
    }
  }
  html body.gm-sidebar-layout #authModal .auth-modal {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    width: min(900px, 100%);
    background: var(--am-surface-1);
  }
  html body.gm-sidebar-layout #authModal :is(.auth-stage, .auth-workspace) { grid-row: 1; }
  html body.gm-sidebar-layout #authModal .auth-stage {
    height: auto;
    border-bottom: 0;
    border-right: 0;
    background-position: 50% 50%;
  }
  html body.gm-sidebar-layout #authModal .auth-stage::after {
    background:
      linear-gradient(90deg, rgb(var(--am-surface-1-rgb) / 0) 60%, rgb(var(--am-surface-1-rgb) / .5)),
      linear-gradient(180deg, rgb(var(--am-surface-1-rgb) / .35), rgb(var(--am-surface-1-rgb) / 0) 30%);
  }
  /* Close sits in the tab row (placement: shared rule above). */
  html body.gm-sidebar-layout #authModal .auth-close-btn {
    background: var(--am-surface-2);
    box-shadow: none;
  }
  html body.gm-sidebar-layout #authModal .auth-panel-heading { margin: 20px 0 16px; }
}

@media (min-width: 1201px) {
  html body.gm-sidebar-layout #authModal .auth-modal {
    grid-template-columns: 340px minmax(0, 1fr);
    width: min(960px, 100%);
  }
}

/* ==== Live support FAB (AQUA fallback until SeedyChat is ready) =========
   Phones/tablets: 48px dark circle (cyan icon on a surface-3 fill, v2: no
   accent ring) at the launcher's spot above the docked bottom bar, so the
   bar's gradient "Para Yatır" stays the only gradient CTA in the thumb
   zone (solid fill, no backdrop blur below 901). Desktop: compact pill.
   Display is never set (bridge + theme own it). */
html body.gm-sidebar-layout .gm-live-support-fab {
  position: fixed;
  top: auto;
  /* centred on the 58px launcher's spot (5px = (58 - 48) / 2) */
  right: calc(var(--am-ov-x) + 5px);
  bottom: calc(var(--am-ov-float-b) + 5px);
  left: auto;
  z-index: 880;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  width: var(--am-ov-fab-h);
  height: var(--am-ov-fab-h);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--am-surface-3);
  color: var(--am-accent);
  box-shadow: 0 8px 20px rgb(0 0 0 / .45);
  font-family: var(--am-font);
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout .gm-live-support-fab-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  color: var(--am-accent);
  font-size: 19px;
}
html body.gm-sidebar-layout .gm-live-support-fab-copy { display: none; }
html body.gm-sidebar-layout .gm-live-support-fab:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .9);
  outline-offset: 3px;
}
@media (hover: hover) {
  html body.gm-sidebar-layout .gm-live-support-fab:hover {
    background: #1d3d54;
    box-shadow: 0 8px 20px rgb(0 0 0 / .45);
  }
}

@media (min-width: 901px) {
  html body.gm-sidebar-layout .gm-live-support-fab {
    right: var(--am-ov-x);
    bottom: var(--am-ov-float-b);
    width: auto;
    padding: 0 16px 0 6px;
    gap: 10px;
    border: 0;
    border-radius: var(--am-r-pill);
    background: rgb(var(--am-surface-3-rgb) / .96);
    color: var(--am-text);
    box-shadow: var(--am-shadow-2);
    transition: none;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body.gm-sidebar-layout .gm-live-support-fab {
      background: rgb(var(--am-surface-3-rgb) / .86);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
  html body.gm-sidebar-layout .gm-live-support-fab:hover {
    background: #1d3d54;
    box-shadow: var(--am-shadow-2);
    transform: none;
  }
  html body.gm-sidebar-layout .gm-live-support-fab-icon {
    width: 32px;
    height: 32px;
    background: var(--am-grad);
    color: var(--am-on-accent);
    font-size: 14px;
  }
  html body.gm-sidebar-layout .gm-live-support-fab-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }
  html body.gm-sidebar-layout .gm-live-support-fab-copy strong { display: none; }
  /* Markup says "CANLI DESTEK"; lang="tr" lowercases I -> ı correctly. */
  html body.gm-sidebar-layout .gm-live-support-fab-copy small {
    color: var(--am-text);
    font: 650 13.5px/1 var(--am-font);
    letter-spacing: 0;
    text-transform: lowercase;
    white-space: nowrap;
  }
  html body.gm-sidebar-layout .gm-live-support-fab-copy small::first-letter { text-transform: uppercase; }
}

/* ==== Support status toast (seedychat-bridge.js) ========================
   Sits above the FAB / launcher, below the auth modal. [hidden] keeps the
   bridge's display:none!important. */
html body.gm-sidebar-layout .gm-support-status {
  position: fixed;
  top: auto;
  right: var(--am-ov-x);
  /* above the FAB and the taller (58px) launcher, + 12px */
  bottom: calc(var(--am-ov-float-b) + 70px);
  left: auto;
  z-index: var(--am-ov-z-toast);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 2 * var(--am-ov-x)));
  max-width: none;
  margin: 0;
  padding: 14px 50px 14px 14px;
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-surface-2);
  color: var(--am-text);
  box-shadow: var(--am-shadow-2);
  font: 500 14px/1.45 var(--am-font);
  text-align: start;
}
html body.gm-sidebar-layout .gm-support-status::before {
  content: "\f590";
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: start;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--am-tint);
  color: var(--am-accent);
  font: 900 15px/1 "Font Awesome 6 Free";
}
html body.gm-sidebar-layout .gm-support-status p {
  grid-row: 1;
  grid-column: 2;
  margin: 0;
  color: var(--am-text);
  font: 500 14px/1.45 var(--am-font);
}
html body.gm-sidebar-layout .gm-support-status a {
  grid-row: 2;
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44px target; the negative margins keep the 28px visual row */
  min-height: 44px;
  margin: -4px 0 -12px;
  color: var(--am-accent);
  font: 650 13px/1 var(--am-font);
  text-decoration: none;
}
html body.gm-sidebar-layout .gm-support-status a::after {
  content: "\f061";
  font: 900 11px/1 "Font Awesome 6 Free";
}
html body.gm-sidebar-layout .gm-support-status a:hover { text-decoration: underline; text-underline-offset: 3px; }
html body.gm-sidebar-layout .gm-support-status button {
  position: absolute;
  top: 6px;
  right: 6px;
  float: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--am-text-2);
  font: 400 24px/1 var(--am-font);
  cursor: pointer;
}
/* 44px hit area around the 40px chip */
html body.gm-sidebar-layout .gm-support-status button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
}
html body.gm-sidebar-layout .gm-support-status button:hover {
  background: var(--am-surface-3);
  color: var(--am-text);
}
html body.gm-sidebar-layout .gm-support-status :is(a, button):focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 2px;
}
@media (min-width: 901px) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body.gm-sidebar-layout .gm-support-status {
      background: rgb(var(--am-surface-2-rgb) / .9);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }
  }
}
/* The mobile drawer (z 1500) must not be covered by a toast opened before
   it. Visibility only: [hidden] keeps the bridge's display contract. */
html.am-drawer-open body.gm-sidebar-layout .gm-support-status { visibility: hidden; }

/* ==== SeedyChat launcher (third-party shadow DOM) ========================
   Only the host custom properties the widget reads are set: --color
   (launcher background), --fg (icon), --radius (chat panel / teaser),
   --x / --y (launcher; panel and teaser sit at --y + 72px). Inside the
   shadow root, <=480px locks --x/--y to 12px and the bridge pins the
   launcher at bottom 90px on <=768px; 769-900 uses the same 90px via
   --am-ov-float-b (fixes the 769-900 overlap with the bar and matches the
   FAB), >=901 follows --am-float-bottom. Solid colours on purpose: a
   gradient would break if the widget ever reuses --color for a border or
   text colour (today it is only the launcher background).
   <=900: dark launcher with a cyan icon, like the FAB, so it does not
   compete with the bottom bar's gradient CTA; >=901 (no bar): brand cyan. */
html body.gm-sidebar-layout [data-destek-widget] {
  --color: #123349;
  --fg: #00e5ff;
  --radius: 20px;
  --x: var(--am-ov-x);
  --y: var(--am-ov-float-b);
}
@media (min-width: 901px) {
  html body.gm-sidebar-layout [data-destek-widget] {
    --color: #12c4ee;
    --fg: #02131c;
  }
}
/* While a modal surface is open, floating chat steps aside (it would paint
   above everything at z 2147483000). Visibility only, never display.
   (The slot provider sheet is handled in 30-catalog.css.)
   No body-level :has() here: a body:has(.x.active) / :has(.x.is-open)
   rule made EVERY active/is-open toggle on the page (slider dots, hearts,
   pills, member tabs) restyle the whole document (9-110ms per tap on long
   catalogs). 55-overlays.js mirrors "#authModal.active or any
   .gm-promo-modal.is-open" into html[data-am-modal] instead; the sibling
   branch covers the auth modal even before that script runs (both are body
   children, the widget host comes later). */
html[data-am-modal] body.gm-sidebar-layout [data-destek-widget],
html body.gm-sidebar-layout > #authModal.active ~ [data-destek-widget],
html.am-drawer-open body.gm-sidebar-layout [data-destek-widget] {
  visibility: hidden !important;
}

/* ==== Motion (opt-in) ===================================================
   Every transition of this partial lives here (base rules say none), so
   reduced motion never relies on the theme's global guard. Same selectors
   as the base rules, later in the file. */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout #authModal .auth-close-btn,
  html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"] {
    transition: background-color var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout #authModal .auth-tab-btn,
  html body.gm-sidebar-layout #authModal .auth-field > i,
  html body.gm-sidebar-layout #authModal .auth-input-wrap > i {
    transition: color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout #authModal .auth-field :is(input:not([type="checkbox"]):not([type="hidden"]), select) {
    transition: border-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout #authModal .auth-submit-btn {
    transition: background var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout #authModal .auth-submit-btn:active { transform: translateY(1px); }
  html body.gm-sidebar-layout #authModal.active { animation: am-ov-fade .2s ease-out both; }
  html body.gm-sidebar-layout #authModal.active > .auth-modal { animation: am-ov-sheet .34s var(--am-ease) both; }
  html body.gm-sidebar-layout #authModal .auth-tabs::before { transition: transform .28s var(--am-ease); }
  html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"]::before { transition: transform .14s var(--am-ease); }
  html body.gm-sidebar-layout .gm-support-status:not([hidden]) { animation: am-ov-rise .24s var(--am-ease) both; }
}
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout #authModal.active > .auth-modal { animation-name: am-ov-pop; animation-duration: .26s; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout .gm-live-support-fab {
    transition: background-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout .gm-live-support-fab:hover { transform: translateY(-1px); }
}
@keyframes am-ov-fade { from { opacity: 0; } }
@keyframes am-ov-sheet { from { opacity: .4; transform: translateY(40px); } }
@keyframes am-ov-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes am-ov-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---- 60-motion.css ---- */
/*
 * Motion: scroll reveal, hover light sweep, press feedback, and easing for
 * the hover transitions that had none. Pairs with 60-motion.js.
 *
 * Every animation and transition here sits inside
 * @media (prefers-reduced-motion: no-preference). Under "reduce", or with JS
 * off, nothing is hidden and nothing moves. The theme's own reduce guard
 * (aqua-theme.css, durations forced to .01ms !important) stays as a second
 * fallback. Only opacity and transforms are animated (the individual
 * translate/scale properties, plus transform on the pseudo-elements this
 * file owns). There is no filter, no layout property, no infinite
 * animation, and nothing on html or body.
 *
 * Why individual transform properties: the cards and buttons already
 * animate `transform` (hover lift translateY(-3px), :active nudges) and
 * `transition` in 20-home, 30-catalog, 40-content and 05-base. Using
 * `translate` (reveal) and `scale` (press) composes with those transforms
 * instead of replacing them. Driving both with @keyframes instead of
 * transitions means no partial's `transition` list is restated or
 * clobbered here, so later edits there keep working.
 *
 * 1. Scroll reveal: [data-am-rv] set by 60-motion.js
 *    The JS marks only elements that start BELOW the fold
 *    ([data-am-rv="wait"] = opacity 0) and flips them to "in" when they
 *    come within 40px of the viewport. "in" plays am-rv (opacity 0 -> 1,
 *    translate 0 12px -> 0, 380ms ease-out) after a stagger step
 *    [data-am-rv-d="1..6"] (40ms each, capped at 240ms). Both attributes
 *    are removed on animationend. Nothing that is in the viewport at load
 *    is ever marked, so there is no first-paint flash. A scroll jump of
 *    0.6 viewport or more (the /slot gm_slot_scroll_v1 restore on the way
 *    back from a game, Chrome's late restore, #hash and TOC links) shows
 *    what lands in view at once instead of fading it in from blank (2026-10-22;
 *    measured before: 10 restored cards blank, then staggered in over
 *    ~0.6s). Opacity 0 does not
 *    change display, size, hit-testing order or focusability, and a card
 *    revealed this way keeps the deterministic height that the
 *    gm_slot_scroll_v1 restore needs. Containers with fixed descendants
 *    (section.game-section, #slot-games, #promosyonlarTab and its
 *    #gmPromoModal) are never targets: an opacity below 1 or a translate
 *    would become their containing block or stacking context. The theme's
 *    .reveal/.is-visible pair is left alone.
 *    "wait" uses opacity !important because the target cards carry
 *    id-weighted rules (#slotGrid > .slot-card, (1,2,2)). While either
 *    attribute is present the element's own transitions are off
 *    (transition: none !important). The catalog cards transition opacity,
 *    and without this the wait -> in hand-off spawned a 0 -> 1 opacity
 *    transition next to am-rv. Chrome then refused to composite am-rv
 *    ("incompatible animations"), and every reveal ran on the main thread
 *    with a style pass per frame (measured: +24 style recalcs per 6-card
 *    batch at 4x CPU). The cost is that a hover in the first ~0.6s of a
 *    card's reveal switches instantly. Both rules exist only while the
 *    attributes do, and only on screens (print shows everything).
 *
 * 2. Hover light sweep, (hover: hover) and (pointer: fine) only
 *    A skewed white band crosses the element once, in 600ms. The ::after is
 *    generated only while hovered, so the 200+ catalog cards carry no extra
 *    boxes at rest. Pseudo-elements, checked against the computed styles
 *    of the theme and every partial:
 *      home a.gm-game            ::after  (the cover's ::before/::after are the scrim and play button)
 *      #slotGrid .slot-card-media ::after (its ::before is the skeleton, or
 *                                the blurred band fill on letterboxed covers; the
 *                                card's ::after is free too, but the cover
 *                                only matches the home and live cards, so
 *                                the caption text is never swept)
 *      #lcGrid > .lc-card        both are taken (overlay + skeleton), so it
 *                                goes on .lc-play-btn::after, the absolute,
 *                                cover-sized play layer (::before is its icon)
 *      primary buttons           ::after  (.btn-primary/.gm-btn-gold in the storefront roots and
 *                                #authModal, .auth-submit-btn, .promotions-cta, the 404 primary)
 *    Cards and the slot cover already clip (overflow hidden) and are
 *    positioned. The buttons get position:relative + overflow:clip (hidden
 *    as the fallback) + isolation:isolate, only on fine pointers. Clip is
 *    not a scroll container, so baselines are unchanged. On cards, z-index
 *    4 keeps the band under the favourite heart (z 5) and over the scrim,
 *    overlay and badges (z 2-3). Home cards get isolation:isolate so the
 *    band can never paint over a neighbour. On buttons the band is z -1
 *    inside the isolated host: over the fill, under the label and icon.
 *    Not swept: header "Kayıt Ol". Its ::after is the 44px touch hit area
 *    (10-chrome.css), so clipping it would shrink that target, and the
 *    ::before alone cannot be clipped to the pill.
 *
 * 3. Press feedback, touch and mouse
 *    :active plays am-press-in (scale 1 -> .97, 120ms). 60-motion.js marks
 *    elements whose press really started ([data-am-pressed], from the
 *    animationstart event), so the release am-press-out (.97 -> 1, 160ms)
 *    plays after a press and never on load. With JS off the press still
 *    works and the release snaps back. This is the only card press: the
 *    partials' older transform presses (scale .98 / .99) were removed in
 *    the final pass. The transform: none rules below use the partials' own
 *    selectors (same specificity, later in the cascade) to drop the hover
 *    / focus lift while pressed, so the lift and the scale never compound.
 *    A press on the favourite heart does not press its card
 *    (:has(.gm-fav:active); browsers without :has() scale the card too). The 05-base / 55-overlays translateY(1px)
 *    nudge on primary buttons composes with the scale and is kept.
 *    Targets: primary buttons, header auth buttons and burger, load-more,
 *    the live filter toggle, provider pills (/slot, /livecasino), "Tümü"
 *    pills, legal TOC links, bottom-bar items, home game cards and
 *    category tiles, catalog cards, recent strip cards and promotion cards.
 *
 * 4. Easing where it was missing
 *    A forced-:hover audit of every link/button in the storefront roots and
 *    chrome (1440px: /, /slot, /livecasino, /promosyonlar, /vip,
 *    /canli-destek, /hakkimizda, 404) found three hovers that change colour
 *    with no transition: the /slot "Canlı Casino" view-all link, the live
 *    provider toggle (#lcFilterToggle; only its chevron eased) and the
 *    recent strip's "Temizle". They get the layer's colour transition
 *    (var(--am-dur) var(--am-ease)). :where() keeps the rule at zero
 *    specificity, so a transition a partial adds later wins.
 *    Re-audit 2026-10-22 (forced :hover, every page above, after the
 *    lobby / simplify / flat v2 partials): one more, the legal body link
 *    underline (rule at the end of section 4). Not fixable here: primary
 *    CTAs swap --am-grad -> --am-grad-hover (gradient to gradient, which
 *    no browser interpolates; .lc-cta's primary also snaps filter:
 *    brightness(1.08) with it). Easing those needs the stops as registered
 *    @property colours in 00-tokens, or the owning partial's transition
 *    list; this file never restates another partial's list. The drawer,
 *    account dropdown, auth modal, promo modal, search dialog and provider
 *    sheet already animate and are not touched.
 */

/* ---------- Tokens ---------- */
html body.gm-sidebar-layout {
  --am-ease-out: cubic-bezier(.22, .61, .36, 1);
  --am-rv-dur: .38s;   /* the 12px rise is literal in @keyframes am-rv */
  --am-press-scale: .97;
  --am-press-in: .12s;
  --am-press-out: .16s;
  --am-sweep-dur: .6s;
  --am-sweep-ease: cubic-bezier(.45, 0, .25, 1);
  --am-sweep: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .16) 42%, rgb(255 255 255 / .26) 50%, rgb(255 255 255 / .16) 58%, rgb(255 255 255 / 0) 100%);
}

/* =====================================================================
   1. Scroll reveal
   ===================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout [data-am-rv] {
    transition: none !important;
  }
  html body.gm-sidebar-layout [data-am-rv="wait"] {
    opacity: 0 !important;
  }
  html body.gm-sidebar-layout [data-am-rv="in"] {
    animation: am-rv var(--am-rv-dur) var(--am-ease-out) backwards;
  }
  html body.gm-sidebar-layout [data-am-rv="in"][data-am-rv-d="1"] { animation-delay: 40ms; }
  html body.gm-sidebar-layout [data-am-rv="in"][data-am-rv-d="2"] { animation-delay: 80ms; }
  html body.gm-sidebar-layout [data-am-rv="in"][data-am-rv-d="3"] { animation-delay: 120ms; }
  html body.gm-sidebar-layout [data-am-rv="in"][data-am-rv-d="4"] { animation-delay: 160ms; }
  html body.gm-sidebar-layout [data-am-rv="in"][data-am-rv-d="5"] { animation-delay: 200ms; }
  html body.gm-sidebar-layout [data-am-rv="in"][data-am-rv-d="6"] { animation-delay: 240ms; }
}
@keyframes am-rv {
  from { opacity: 0; translate: 0 12px; }
}

/* =====================================================================
   2. Hover light sweep (fine pointers)
   ===================================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Button hosts: containing block + clip for the band. */
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404, #authModal) :is(.btn-primary, .gm-btn-gold),
  html body.gm-sidebar-layout #authModal .auth-submit-btn,
  html body.gm-sidebar-layout main.page-shell .promotions-cta,
  html body.gm-sidebar-layout main.gm-404 a.btn:not(.ghost) {
    position: relative;
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
  }
  html body.gm-sidebar-layout main.gm-wire .gm-row > .gm-game {
    isolation: isolate;
  }

  html body.gm-sidebar-layout main.gm-wire .gm-row > .gm-game:hover::after,
  html body.gm-sidebar-layout #slotGrid > .slot-card:hover > .slot-card-media::after,
  html body.gm-sidebar-layout #lcGrid > .lc-card:hover .lc-play-btn::after,
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404, #authModal) :is(.btn-primary, .gm-btn-gold):hover::after,
  html body.gm-sidebar-layout #authModal .auth-submit-btn:hover::after,
  html body.gm-sidebar-layout main.page-shell .promotions-cta:hover::after,
  html body.gm-sidebar-layout main.gm-404 a.btn:not(.ghost):hover::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 40%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--am-sweep);
    box-shadow: none;
    opacity: 1;
    pointer-events: none;
    transform: translateX(0) skewX(-18deg);
    animation: am-sweep var(--am-sweep-dur) var(--am-sweep-ease) 1 both;
  }
  /* Cards: over the scrim/overlay/badges (z 2-3), under the heart (z 5). */
  html body.gm-sidebar-layout main.gm-wire .gm-row > .gm-game:hover::after,
  html body.gm-sidebar-layout #slotGrid > .slot-card:hover > .slot-card-media::after {
    z-index: 4;
  }
  /* Buttons: a lighter band (the fill is already bright cyan), painted
     over the button's own fill but under its label and icon (z -1 inside
     the isolated host), so the text never washes out. */
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404, #authModal) :is(.btn-primary, .gm-btn-gold):hover::after,
  html body.gm-sidebar-layout #authModal .auth-submit-btn:hover::after,
  html body.gm-sidebar-layout main.page-shell .promotions-cta:hover::after,
  html body.gm-sidebar-layout main.gm-404 a.btn:not(.ghost):hover::after {
    z-index: -1;
    opacity: .85;
  }
}
/* Start at left -70% (band -70%..-30%), end at left +130% of the host
   (200% of the host = 500% of the 40% band). The skew moves the band's
   corners by tan(18deg) x h/2 = .16h: on the home cards (h = 1.27w, the
   tallest host) the top-right corner starts at -10% and the bottom-left
   one ends at 110%, so nothing is left on the card while it stays hovered
   (the old 115% end left a faint corner). */
@keyframes am-sweep {
  from { transform: translateX(0) skewX(-18deg); }
  to { transform: translateX(500%) skewX(-18deg); }
}

/* =====================================================================
   3. Press feedback
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404, #authModal) :is(.btn-primary, .gm-btn-gold):active,
  html body.gm-sidebar-layout #authModal .auth-submit-btn:active,
  html body.gm-sidebar-layout main.page-shell .promotions-cta:active,
  html body.gm-sidebar-layout main.gm-404 a.btn:active,
  html body.gm-sidebar-layout header.topbar .auth-links .auth-btn:active,
  html body.gm-sidebar-layout header.topbar .am-burger:active,
  html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore):not([disabled]):active,
  html body.gm-sidebar-layout main.page-shell > #lcFilterToggle:active,
  html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill:active,
  html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill:active,
  html body.gm-sidebar-layout main.gm-wire .gm-row-head .gm-row-all:active,
  html body.gm-sidebar-layout div.legal-page nav.legal-toc a:active,
  html body.gm-sidebar-layout nav.gm-bottombar .gm-bb:active,
  html body.gm-sidebar-layout main.gm-wire .gm-row > .gm-game:active,
  html body.gm-sidebar-layout main.gm-wire > .gm-catstrip > a:active,
  html body.gm-sidebar-layout #slotGrid > .slot-card:active,
  html body.gm-sidebar-layout #lcGrid > .lc-card:active,
  html body.gm-sidebar-layout #slotRecentWrap .slot-recent-card:active,
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:active {
    animation: am-press-in var(--am-press-in) var(--am-ease) both;
  }
  html body.gm-sidebar-layout [data-am-pressed]:not(:active) {
    animation: am-press-out var(--am-press-out) var(--am-ease) both;
  }

  /* The heart inside a card presses only itself. */
  html body.gm-sidebar-layout main.gm-wire .gm-row > .gm-game:active:has(.gm-fav:active),
  html body.gm-sidebar-layout #slotGrid > .slot-card:active:has(.gm-fav:active),
  html body.gm-sidebar-layout #lcGrid > .lc-card:active:has(.gm-fav:active) {
    animation: none;
  }

  /* Drop the hover / focus lift while pressed, so it never compounds with
     the scale. The selectors of 20-home.css / 30-catalog.css /
     40-content.css, later in the cascade; on cards with a heart, not while
     the heart itself is pressed (the card keeps its lift then). */
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:active,
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:active {
    transform: none;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:active:not(:has(.gm-fav:active)),
  html body.gm-sidebar-layout #slotGrid .slot-card:active:not(:has(.gm-fav:active)),
  html body.gm-sidebar-layout #lcGrid .lc-card:active:not(:has(.gm-fav:active)) {
    transform: none;
  }
}
@keyframes am-press-in {
  from { scale: 1; }
  to { scale: var(--am-press-scale); }
}
@keyframes am-press-out {
  from { scale: var(--am-press-scale); }
  to { scale: 1; }
}

/* =====================================================================
   4. Easing where an interactive hover had none
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :where(html body.gm-sidebar-layout) :where(#slot-games > .section-header > a.view-all-link, main.page-shell > #lcFilterToggle, #slotRecentWrap .slot-recent-clear) {
    transition: color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease);
  }
  /* Legal body links (/hakkimizda "İletişim"): 40-content turned the legacy
     border underline into text-decoration (rgb(accent / .4) -> currentColor
     on hover), but the only transition left is the legacy sheet's
     `.legal-section a { transition: border-color .15s }` (0,1,1), so the
     underline snapped (2026-10-22 audit). (0,2,2): above that legacy rule,
     below 40-content's (0,3,3) selector, so a transition added there wins. */
  :where(html body.gm-sidebar-layout) div.legal-page .legal-section a {
    transition: color var(--am-dur) var(--am-ease), text-decoration-color var(--am-dur) var(--am-ease);
  }
}