/* ---- 00-tokens.css ---- */
/*
 * Aquabet modern layer v3 ("Casibow green", ops/redesign/v3/SPEC.md §2)
 * — design tokens.
 * Loaded LAST in <head> (inc/aqua/_head.php) and kept UNLAYERED on purpose:
 * layered normal rules lose to every existing unlayered rule.
 *
 * Scoping (unchanged from v1/v2):
 * 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, ...).
 *  - Member pages get v3 colours only: their shared chrome is recoloured
 *    through these tokens (no sidebar, no layout change); member content
 *    keeps the theme's own palette (and its Inter text; the few repairs
 *    beyond colour are listed in 45-member.css).
 *
 * New tokens are --am-* (nothing outside this layer consumes them). The
 * theme's legacy aliases (--panel, --line, --gold, ...) are re-pointed only
 * on the storefront roots + chrome (see bottom), so member content keeps
 * its look.
 *
 * Breakpoints (v3, SPEC §3.1; every partial and the JS matchMedia use these):
 *   <=380 small phones · <=575 phones · <=767 large phones · 768-991 tablets
 *   (all <=991.98px: mobile chrome = header row + bottom dock + drawer)
 *   >=992 desktop chrome · >=1200 · >=1400 · >=1700.
 *   Max bounds are written .98 (max-width: 991.98px) so no width falls
 *   between two bands. The promo banner <source> switch (719/720) and a few
 *   component-local steps (1024/1280/1366) are not shell bands.
 *
 * Design language v3 (supersedes the v2 "flat, tone not lines" rules):
 *  - Canvas: a flat near-black green (--am-bg #010d08, no glow layer).
 *    Surfaces step up in dark greens: --am-surface-0 (inset wells, panel
 *    gradient end) < -1 (panels, cards) < -2 (tiles inside panels,
 *    placeholders, dropdowns) < -3 (hover fill).
 *  - Edges are white hairlines at 6-12% (--am-line, -2, -3, -ctl) with a
 *    lit top edge (--am-sheen: inset 0 1px 0 white .04-.18) and deep black
 *    drop shadows (--am-shadow-*). Cards and panels DO carry a 1px hairline
 *    again. Text inputs keep the v2 accessibility rule: a 3:1 edge at rest
 *    (--am-field-line, white .36 = 3.3:1 on surface-1, WCAG 1.4.11).
 *  - Green is for action and state only: the 160deg CTA gradient
 *    (--am-grad, #10b461 -> #037035 -> #025328) with WHITE text
 *    (--am-on-accent), solid #025328 (--am-accent-deep) for active tabs and
 *    chips, #10b461 (--am-accent) for links/accent text and #34d87a
 *    (--am-accent-bright) for icons, eyebrows, live dots and the second word
 *    of two-tone titles. Soft green glows are allowed on CTA, active and
 *    hover (--am-glow, --am-cta-shadow, --am-active-shadow); never blue or
 *    cyan anywhere.
 *  - Radii: 4/6/8/9/10/11/12/14/16/18/22/24/999 (--am-r-*); 999 stays for
 *    chips and pills only, buttons are r10.
 *  - Type: Rubik ("AM Rubik", 01-fonts.css) 400/500/600/700 (800 only for
 *    page band titles); "AM Inter" stays second in the stack because Rubik
 *    has no U+20BA (₺) glyph.
 *  - Motion: --am-ease cubic-bezier(.2,.9,.2,1), .18/.22/.3s; hover lifts
 *    translateY(-1px) on items and buttons, -3px on game cards. Every
 *    transition/animation stays under prefers-reduced-motion: no-preference.
 *
 * Layout tokens: --am-container, --am-gutter and --am-section-gap keep the
 * v2 values until the v3 shell lands (SPEC §7 step 3: container 1680px,
 * gutter 16px, section gap 40px) so the v2 layout does not move before the
 * sidebar exists. The new shell tokens (--am-sb-*, --am-rail-w,
 * --am-drawer-w, --am-inset*) are declared here with their v3 values.
 */
html body.gm-sidebar-layout {
  /* ---- Canvas, surfaces, text (SPEC §2.1) ------------------------------ */
  --am-bg: #010d08;
  --am-bg-rgb: 1 13 8;
  --am-surface-0: #040d08;
  --am-surface-0-rgb: 4 13 8;
  --am-surface-1: #071a10;
  --am-surface-1-rgb: 7 26 16;
  --am-surface-2: #0c2418;
  --am-surface-2-rgb: 12 36 24;
  --am-surface-3: #122e20;
  --am-surface-3-rgb: 18 46 32;
  --am-surface-hdr: #030a06;
  --am-surface-sb:
    radial-gradient(480px 220px at 50% 0%, rgb(2 83 40 / .12), transparent 60%),
    linear-gradient(180deg, #03110a 0%, #010502 100%);
  --am-surface-sb-logo: linear-gradient(180deg, #03110a, #010502);
  --am-ft-bg: #04120b;
  /* A `background` shorthand layer (position / size included). */
  --am-ft-dots: radial-gradient(circle at 1px 1px, rgb(255 255 255 / .045) 1px, transparent 1.4px) 0 0 / 20px 20px;
  --am-overlay: rgb(1 13 8 / .82);

  --am-text: #ffffff;
  --am-text-body: rgb(255 255 255 / .88);
  --am-text-2: rgb(255 255 255 / .72);
  --am-text-3: rgb(255 255 255 / .56);      /* >= 5:1 on surface-1 */
  --am-text-label: #8b9e94;
  --am-text-label-rgb: 139 158 148;

  /* ---- Greens and status (SPEC §2.2) ----------------------------------- */
  --am-accent: #10b461;
  --am-accent-rgb: 16 180 97;
  --am-accent-bright: #34d87a;
  --am-accent-bright-rgb: 52 216 122;
  --am-accent-2: #037035;
  --am-accent-2-rgb: 3 112 53;
  --am-accent-deep: #025328;
  --am-accent-deep-rgb: 2 83 40;
  --am-green-900: #013d1e;
  --am-green-950: #012a14;
  --am-promo-1: #0b4423;
  --am-promo-2: #052613;
  --am-promo-3: #031409;
  --am-on-accent: #ffffff;                  /* text on green CTAs is white */
  --am-on-bright: #02170d;                  /* text/icons on #34d87a / #10b461 fills */
  --am-tint: rgb(2 83 40 / .18);
  --am-tint-2: rgb(2 83 40 / .35);
  --am-tint-bright: rgb(16 180 97 / .10);
  --am-success: #13e398;
  --am-danger: #ff5365;
  --am-danger-text: #f87171;
  --am-warn: #efb025;
  /* VIP landing only (SPEC §8 Q8: not used by the default card restyle). */
  --am-gold-1: #f3dca6;
  --am-gold-2: #d8ab4e;
  --am-gold-3: #b5872f;

  /* ---- Lines and strokes (SPEC §2.3) ----------------------------------- */
  --am-line: rgb(255 255 255 / .065);
  --am-line-2: rgb(255 255 255 / .085);
  --am-line-3: rgb(255 255 255 / .13);
  --am-line-ctl: rgb(255 255 255 / .10);
  --am-line-accent: rgb(16 180 97 / .34);
  --am-line-hover: rgb(52 216 122 / .48);
  --am-line-green: rgb(16 180 97 / .28);
  --am-line-cta: rgb(52 216 122 / .52);
  --am-line-hdr: rgb(255 255 255 / .06);
  /* --am-line composited over --am-bg: for a hairline painted over
     scrolling content. */
  --am-line-solid: #101c17;
  /* Text-field edge at rest: 3.3:1 against --am-surface-1 (SPEC §6: the
     reference's 10% edge fails WCAG 1.4.11). Focus: --am-field-focus-*. */
  --am-field-line: rgb(255 255 255 / .36);
  --am-field-line-hover: rgb(255 255 255 / .48);

  /* ---- Gradients (SPEC §2.4: optical glassmorphism) -------------------- */
  --am-grad: linear-gradient(160deg, #12c068 0%, #057a3b 48%, #025328 100%);
  /* Hover keeps the fill; the lift is border #10b461 + --am-cta-shadow-hover
     + translateY(-1px) (modal CTA adds brightness(1.08)). */
  --am-grad-hover: var(--am-grad);
  --am-grad-2: linear-gradient(165deg, #067f3d 0%, #025328 100%);
  --am-grad-glossy: linear-gradient(180deg, #34d87a, #037035 60%, #025328);
  --am-grad-active: linear-gradient(135deg, rgb(5 122 59 / .92) 0%, rgb(2 83 40 / .92) 100%);
  --am-grad-active-solid: linear-gradient(135deg, #057a3b, #025328);
  --am-grad-item: linear-gradient(145deg, rgb(255 255 255 / .065) 0%, rgb(16 180 97 / .025) 50%, rgb(255 255 255 / .02) 100%);
  --am-grad-ghost: linear-gradient(145deg, rgb(255 255 255 / .095) 0%, rgb(255 255 255 / .03) 100%);
  --am-grad-ghost-hover: linear-gradient(145deg, rgb(255 255 255 / .15) 0%, rgb(16 180 97 / .08) 100%);
  --am-grad-chip: linear-gradient(145deg, rgb(255 255 255 / .075) 0%, rgb(255 255 255 / .02) 100%);
  --am-grad-chip-hover: linear-gradient(145deg, rgb(16 180 97 / .26) 0%, rgb(2 83 40 / .20) 100%);
  --am-grad-field: linear-gradient(180deg, rgb(255 255 255 / .065), rgb(255 255 255 / .02));
  --am-grad-panel:
    radial-gradient(720px 260px at 12% -18%, rgb(16 180 97 / .15), transparent 65%),
    linear-gradient(145deg, rgb(255 255 255 / .048) 0%, rgb(9 29 18 / .52) 45%, rgb(3 11 7 / .64) 100%);
  --am-grad-titled:
    radial-gradient(560px 240px at 0% 0%, rgb(16 180 97 / .13), transparent 68%),
    linear-gradient(145deg, rgb(255 255 255 / .05) 0%, rgb(10 31 20 / .46) 45%, rgb(3 11 7 / .58) 100%);
  --am-grad-titled-glow: radial-gradient(120% 95% at 0% 0%, rgb(16 180 97 / .20) 0%, rgb(2 83 40 / .12) 48%, transparent 74%);
  --am-grad-titled-glow-live: radial-gradient(120% 95% at 0% 0%, rgb(52 216 122 / .20) 0%, rgb(3 112 53 / .12) 48%, transparent 74%);
  --am-grad-band: linear-gradient(145deg, rgb(255 255 255 / .045) 0%, rgb(9 22 16 / .78) 38%, rgb(4 13 8 / .86) 100%);
  --am-grad-card: linear-gradient(155deg, rgb(255 255 255 / .05) 0%, #071a10 38%, #040d08 100%);
  --am-grad-notice: linear-gradient(90deg, #012a14 0%, #024b25 50%, #012a14 100%);
  --am-grad-overlay: linear-gradient(165deg, rgb(9 32 20 / .94), rgb(3 10 6 / .97));
  --am-grad-line: linear-gradient(135deg, #34d87a 0%, #10b461 50%, #025328 100%);
  /* 2px top edge, centred at 76-84% of the box width. */
  --am-hairline-top: linear-gradient(90deg, transparent, rgb(52 216 122 / .65), transparent);
  /* v1/v2 name, still valid as a background value. */
  --am-grad-soft: var(--am-tint);

  /* ---- Radii (SPEC §2.5: soft organic curves) -------------------------- */
  --am-r-4: 10px;
  --am-r-6: 12px;
  --am-r-xs: 12px;
  --am-r-9: 14px;
  --am-r-sm: 14px;
  --am-r-11: 16px;
  --am-r-12: 18px;
  --am-r-md: 20px;
  --am-r-lg: 24px;
  --am-r-18: 24px;
  --am-r-xl: 28px;
  --am-r-24: 28px;
  --am-r-pill: 999px;

  /* ---- Shadows, focus, motion (SPEC §2.6) ------------------------------ */
  --am-sheen: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .025);
  --am-sheen-panel: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 0 0 1px rgb(255 255 255 / .02);
  --am-sheen-active: inset 0 1px 0 rgb(255 255 255 / .18);
  --am-sheen-cta: inset 0 1px 0 rgb(255 255 255 / .24);
  --am-shadow-1: 0 10px 26px -4px rgb(0 0 0 / .42), inset 0 1px 0 rgb(255 255 255 / .08);
  --am-shadow-2: 0 18px 42px -6px rgb(0 0 0 / .42), inset 0 1px 0 rgb(255 255 255 / .10), inset 0 0 0 1px rgb(255 255 255 / .02);
  --am-shadow-3: 0 24px 70px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .10);
  --am-shadow-pop: 0 20px 44px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .10);
  --am-shadow-popover: 0 14px 40px rgb(0 0 0 / .45);
  --am-shadow-hero: 0 18px 44px rgb(0 0 0 / .5);
  --am-shadow-hover: 0 18px 36px -4px rgb(0 0 0 / .52);
  --am-shadow-chrome: 0 20px 48px rgb(0 0 0 / .46), inset -1px 0 0 rgb(255 255 255 / .05);   /* sidebar */
  --am-shadow-hdr: 0 10px 30px rgb(0 0 0 / .48);
  --am-shadow-bar: 0 -10px 26px rgb(0 0 0 / .5);
  --am-shadow-dock: 0 18px 40px rgb(0 0 0 / .52);
  --am-shadow-drawer: 24px 0 60px rgb(0 0 0 / .55);
  --am-glow: 0 0 24px rgb(16 180 97 / .22);    /* card hover, with --am-shadow-hover */
  --am-cta-shadow: 0 8px 22px rgb(2 83 40 / .45), inset 0 1px 0 rgb(255 255 255 / .24);
  --am-cta-shadow-hover: 0 12px 28px rgb(16 180 97 / .38), inset 0 1px 0 rgb(255 255 255 / .28);
  --am-active-shadow: 0 8px 22px rgb(2 83 40 / .38), inset 0 1px 0 rgb(255 255 255 / .16);
  --am-focus: 0 0 0 2px var(--am-bg), 0 0 0 4px rgb(16 180 97 / .8);
  --am-field-focus-line: rgb(16 180 97 / .55);
  --am-field-focus-ring: 0 0 0 3px rgb(16 180 97 / .14);
  --am-field-focus-bg: rgb(2 83 40 / .10);

  --am-ease: cubic-bezier(.16, 1, .3, 1);
  --am-ease-out: cubic-bezier(.22, 1, .36, 1);
  --am-dur: .26s;     /* links, sidebar width */
  --am-dur-2: .34s;   /* cards, chips */
  --am-dur-3: .44s;   /* colour, background, shadow on items */

  /* ---- Spacing (4px grid; the reference also uses 6/10/14/18/22 literally) */
  --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 (SPEC §2.7) ---------------------------------------------- */
  /* v2 values kept until the v3 shell (step 3); see the header. */
  --am-container: 1320px;
  --am-gutter: 16px;
  --am-section-gap: 32px;
  /* v3 shell: the sidebar width is the only source of the column offset. */
  --am-sb-w: 0px;
  --am-sb-expanded: 260px;
  --am-rail-w: 78px;
  --am-drawer-w: min(340px, 84vw);
  --am-inset: 8px;          /* sections (hero is 0) */
  --am-inset-tail: 12px;    /* tail blocks (page bands use --am-inset since 2026-11-04) */

  /* ---- Type (SPEC §2.8) ------------------------------------------------ */
  --am-font: "AM Rubik", "AM Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --am-font-num: var(--am-font);   /* v2 Rajdhani retired */
  --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 -> 28 from ~1280. Component
     tasks replace these with the SPEC §2.8 roles. */
  --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;

  /* Floating UI (FAB, toasts) sits this far above the bottom edge. The
     real values are 10-chrome.css's (bottom bar + 12px; 72px >=992, SPEC
     §2.7); this is only the fallback when that partial is absent. */
  --am-float-bottom: 24px;
}

/* Legacy aliases re-pointed to the v3 palette: storefront roots + chrome,
   and (owner decision 7: member pages get the green colours) the member
   content: body > .dash-shell (/hesabim, /profile/*), the member drawer
   toggle, and the security page cards (.hg-* / .cp-*). The theme computes
   --gold, --text, ... once on :root/body from the cyan --gm-* palette
   (aqua-colors.css; aqua-deposit-ocean.css restates part of it plus its
   --account-* set on :root), so the --gm-* source names, the derived
   aliases and --account-* are re-pointed here; theme rules that paint with
   them inside these roots turn green instead of cyan. The member sheets'
   literal cyan is answered in 45-member.css. */
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, .dash-shell, .mobile-sidebar-toggle, .hg-card, .cp-card, .hg-head, .cp-head, .hg-crumb, .cp-crumb) {
  --gm-canvas: var(--am-bg);
  --gm-canvas-rgb: var(--am-bg-rgb);
  --gm-surface: var(--am-surface-1);
  --gm-surface-rgb: var(--am-surface-1-rgb);
  --gm-raised: var(--am-surface-2);
  --gm-raised-rgb: var(--am-surface-2-rgb);
  --gm-leaf: var(--am-accent-2);
  --gm-leaf-rgb: var(--am-accent-2-rgb);
  --gm-accent: var(--am-accent);
  --gm-accent-rgb: var(--am-accent-rgb);
  --gm-muted: var(--am-text-label);
  --gm-muted-rgb: var(--am-text-label-rgb);
  --gm-soft: #dfeee6;
  --gm-soft-rgb: 223 238 230;
  --gm-text: var(--am-text);
  --gm-text-rgb: 255 255 255;
  --gm-gold: var(--am-accent-bright);
  --gm-gold-rgb: var(--am-accent-bright-rgb);
  --gm-pine: var(--am-accent-deep);
  --gm-pine-rgb: var(--am-accent-deep-rgb);
  --gm-ocean: var(--am-accent-deep);
  --gm-ocean-rgb: var(--am-accent-deep-rgb);
  --gm-cyan-bright: var(--am-accent-bright);
  --gm-cyan-bright-rgb: var(--am-accent-bright-rgb);
  --gm-cyan-soft: var(--am-accent-bright);
  --gm-cyan-soft-rgb: var(--am-accent-bright-rgb);

  --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);
  --secondary: var(--am-surface-1);
  --header: var(--am-surface-1);
  --neutral: var(--am-bg);
  --line: var(--am-line-2);
  --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);
  --gold: var(--am-accent);
  --gold-soft: var(--am-accent-bright);
  --gold-text: var(--am-accent-bright);
  --gold-bright: var(--am-accent-bright);
  --gold-dark: var(--am-accent-deep);
  --primary: var(--am-accent);
  --tertiary: var(--am-accent-bright);
  --amethyst: var(--am-accent-2);
  --amethyst-strong: var(--am-surface-2);
  --figma-purple: var(--am-surface-2);
  --lavender: var(--am-accent-bright);
  --green-emerald: var(--am-accent);
  --green-deep: var(--am-accent-2);
  --emerald: var(--am-accent);
  --emerald-strong: var(--am-accent-2);
  --mint: #dfeee6;

  --account-bg: var(--am-bg);
  --account-bg-2: var(--am-surface-0);
  --account-panel: var(--am-surface-1);
  --account-panel-2: var(--am-surface-2);
  --account-line-strong: rgb(var(--am-accent-rgb) / .28);
  --account-muted: var(--am-text-label);
  --account-purple: var(--am-accent);
  --account-purple-2: var(--am-accent-2);
  --account-gold: var(--am-accent-bright);
  --account-gold-2: var(--am-accent);
  --account-green: var(--am-accent);
}

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

@media (min-width: 992px) {
  html body.gm-sidebar-layout {
    --am-inset: 44px;
    --am-inset-tail: 48px;
  }
}

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

/* ---- 01-fonts.css ---- */
/*
 * Fonts (v3).
 *
 * "AM Rubik": Rubik variable (wght 300-900), self-hosted under
 * /assets/aqua/fonts/rubik/ as two woff2 subsets (latin + latin-ext, the
 * Google Fonts css2 split for family=Rubik:wght@300..900). Primary face of
 * the layer (--am-font, 00-tokens.css). Weights used: 400/500/600/700
 * (800 only for page band titles). Turkish İ ı Ş ş Ğ ğ Ç ç Ö ö Ü ü are
 * covered (ı U+0131 in latin; İ Ş ğ in latin-ext). Rubik has no U+20BA (₺)
 * glyph: the latin-ext range still lists it, the browser finds no glyph
 * and falls back per character to "AM Inter", the second family in the
 * stack. No preload (that needs PHP), so font-display: swap.
 * Licence: Rubik, Copyright 2015 The Rubik Project Authors
 * (https://github.com/googlefonts/rubik), SIL Open Font License 1.1; the
 * full text ships next to the files (fonts/rubik/OFL.txt).
 *
 * "AM Inter": the self-hosted Inter variable files (already shipped and
 * cached under /assets/aqua/fonts) declared once with the full weight axis.
 * Same URLs and unicode-range as google-fonts-inter.css; latin + latin-ext
 * keep Turkish glyphs and ₺. Kept as the fallback for ₺ and for anything
 * Rubik lacks.
 */
@font-face {
  font-family: "AM Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/aqua/fonts/rubik/rubik-latin-ext-var.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "AM Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/aqua/fonts/rubik/rubik-latin-var.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;
}
@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 (v3): page canvas, typography defaults, focus, selection, shared
 * primary button.
 * 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.
 *
 * v3: flat #010d08 canvas, Rubik ("AM Rubik") without the Inter-only
 * font-feature-settings, green focus outline and selection, neutral
 * scrollbar (white .1, SPEC §5), primary button = --am-grad + white text +
 * r10 (the pill shape stays for chips only).
 *
 * 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(255 255 255 / .1) 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: normal;
}

: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).
   v3: the 160deg green CTA gradient with white text, r10 (no pill), the
   green CTA shadow with its lit top edge. Border stays 0 so the box keeps
   its v2 size; hover deepens the shadow and lifts 1px (motion opt-in). */
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-sm);
  font-family: var(--am-font);
  font-weight: 700;
  letter-spacing: .02em;
  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), filter 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 {
    transform: translateY(-1px);
  }
}
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);
}

/* ---- 06-scrollbars.css ---- */
/*
 * Scrollbars (v3, owner request 2026-10-31: "sağdaki scroll rengini adam
 * akıllı yap"). Every visible scrollbar on _head.php pages is brand green:
 * the page bar on the right and the inner scrollers listed in §2.
 *
 * Why two paths:
 *  - The legacy theme (aqua-theme.css) sets `* { scrollbar-width: thin;
 *    scrollbar-color: #0096c7 transparent }` plus global cyan
 *    ::-webkit-scrollbar rules, and 05-base puts white .1 on body. Since
 *    Chromium 121 a non-auto scrollbar-width/-color on an element DISABLES
 *    its ::-webkit-scrollbar styling, so the cyan standard colours won.
 *  - Standard path (no condition): html, body and the inner scrollers get
 *    scrollbar-width thin + a green scrollbar-color. This is the only path
 *    in Firefox (no ::-webkit-scrollbar) and the one touch devices keep
 *    (their bars are native overlays; custom ones would stay painted).
 *  - Pseudo-element path: @supports selector(::-webkit-scrollbar) and a
 *    mouse (hover: hover, pointer: fine): the standard properties are reset
 *    to auto on the same elements, which turns ::-webkit-scrollbar back on
 *    in Chromium/Edge/Opera and Safari, and the bars get their full skin
 *    (gradient thumb, inset look, hover/active states).
 *  - Viewport bar: Chromium takes its custom style from <body> first, then
 *    <html>, so both are reset and both get the identical skin. Tokens live
 *    on body.gm-sidebar-layout, so the html rules use literal values
 *    (#010d08 = --am-bg, #10b461 / #34d87a / #037035 / #025328 = the ramp).
 *
 * Scope: html:has(> body.gm-sidebar-layout) / html body.gm-sidebar-layout
 * (all _head.php pages, member pages included: page bar colour only, no
 * layout). /sports and the payment forms have no gm-sidebar-layout and keep
 * their own bars. Content scrollers are scoped to the storefront roots;
 * overlay and footer scrollers are shared chrome.
 *
 * Load order: this file comes before 25-lobby … 55-overlays, so where a
 * later partial already sets scrollbar-* on the same element the selector
 * here starts with `html:root` (+0,1,0) to out-rank it (noted per rule).
 *
 * Hidden bars stay hidden (not undone here): aside#amSidebar (desktop
 * sidebar and phone drawer, 11-sidebar; it only gets a dormant green
 * colour), home rails .gm-row and .gm-wins-view (20-home), lobby chips
 * .am-lobby-track (25-lobby), nav.am-lobby-tabs, #slotFilterPills,
 * #lcProviders (also the expanded phone list), #slotRecentStrip
 * (30-catalog) and the footer provider strip on touch (50-footer).
 * The one hidden bar re-shown: the >=1200 sticky legal TOC, for mouse users
 * only, and only when it overflows (short windows).
 *
 * Gutter (final round): >=992 storefront pages reserve the page bar's
 * gutter (scrollbar-gutter: stable on html), so scroll locks no longer
 * shift the layout sideways (§1).
 *
 * No html/body bans touched (transform, filter, contain, will-change,
 * backdrop-filter, overflow-x). No motion: scrollbar parts do not animate.
 */

/* ==== 1. Page scrollbar: standard path ================================= */
html:has(> body.gm-sidebar-layout) {
  scrollbar-width: thin;
  scrollbar-color: #10b461 #010d08;
}
/* Same weight as 05-base's body rule (white .1), later in the bundle. */
html body.gm-sidebar-layout {
  scrollbar-width: thin;
  scrollbar-color: #10b461 #010d08;
}
/* Scroll locks (final round): >=992 storefront pages keep the page bar's
   gutter at all times, so a lock that hides the bar no longer pulls the
   header, chips and FAB 10px right and back (measured in Chromium 152:
   the /slot provider sheet, body.slot-modal-open + overflow hidden). The
   search dialog and the drawer already reserve it while open (25-lobby,
   11-sidebar). <=991 stays auto: the full-screen search sheet must reach
   the edge, and touch scrollbars overlay the page anyway. A page too short
   to scroll keeps an empty 10px strip of canvas colour. */
@media (min-width: 992px) {
  html:has(> body.gm-sidebar-layout > :is(main.page-shell, div.legal-page, main.gm-404)) {
    scrollbar-gutter: stable;
  }
}

/* ==== 2. Inner scrollers: standard path ================================ */
/* Search sheet / dialog (25-lobby), promo modal overlay (40-content) and
   legal tables (phones, 40-content): only the legacy `*` rule applied. */
html body.gm-sidebar-layout > .am-search-root .am-search,
html body.gm-sidebar-layout main.page-shell #gmPromoModal,
html body.gm-sidebar-layout div.legal-page .legal-section table,
/* Auth modal column (55-overlays, 1,2,2 -> 1,3,2). */
html:root body.gm-sidebar-layout #authModal .auth-workspace,
/* Slot provider picker list (30-catalog, 1,2,2 -> 1,3,3). */
html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list,
/* Promo detail dialog (40-content, 0,5,3 -> 1,3,3). */
html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--am-accent-rgb) / .6) transparent;
}
/* Sidebar / drawer: its bar stays hidden (11-sidebar, scrollbar-width
   none); colour only, so nothing cyan is left if it is ever shown. */
html body.gm-sidebar-layout > aside#amSidebar {
  scrollbar-color: rgb(var(--am-accent-rgb) / .6) transparent;
}

/* Mouse users: the footer provider strip (50-footer shows a thin bar for
   them, accent .28) and the >=1200 sticky legal TOC (40-content hides it). */
@media (hover: hover) and (pointer: fine) {
  html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--am-accent-rgb) / .6) transparent;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  html:root body.gm-sidebar-layout div.legal-page > .legal-toc {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--am-accent-rgb) / .6) transparent;
  }
}

/* ==== 3. WebKit / Blink with a mouse: full skin ======================== */
@supports selector(::-webkit-scrollbar) {
  @media (hover: hover) and (pointer: fine) {
    /* ---- 3a. Page bar: reset to auto so ::-webkit-scrollbar applies ---- */
    html:has(> body.gm-sidebar-layout),
    html body.gm-sidebar-layout {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar,
    html body.gm-sidebar-layout::-webkit-scrollbar {
      display: block;
      width: 10px;
      height: 10px;
      background: #010d08;
    }
    /* Track = the canvas with a faint inner hairline toward the content. */
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar-track,
    html body.gm-sidebar-layout::-webkit-scrollbar-track {
      border: 0;
      border-radius: 0;
      background: #010d08;
      box-shadow: inset 1px 0 0 rgb(255 255 255 / .05), inset 2px 0 6px rgb(0 0 0 / .45);
    }
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar-track:horizontal,
    html body.gm-sidebar-layout::-webkit-scrollbar-track:horizontal {
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), inset 0 2px 6px rgb(0 0 0 / .45);
    }
    /* Thumb: green ramp pill, inset by a 2px transparent border (the track
       shows through, so it reads as set into the canvas) with a lit top
       edge. Under the pointer it widens (border 1px) and brightens; while
       dragged it deepens. */
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar-thumb,
    html body.gm-sidebar-layout::-webkit-scrollbar-thumb {
      min-width: 48px;
      min-height: 48px;
      border: 2px solid transparent;
      border-radius: 999px;
      background: linear-gradient(180deg, #10b461 0%, #037035 100%) padding-box;
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .22);
    }
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar-thumb:horizontal,
    html body.gm-sidebar-layout::-webkit-scrollbar-thumb:horizontal {
      background: linear-gradient(90deg, #10b461 0%, #037035 100%) padding-box;
    }
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar-thumb:hover,
    html body.gm-sidebar-layout::-webkit-scrollbar-thumb:hover {
      border-width: 1px;
      background: linear-gradient(180deg, #34d87a 0%, #10b461 100%) padding-box;
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 0 0 1px rgb(52 216 122 / .25);
    }
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar-thumb:active,
    html body.gm-sidebar-layout::-webkit-scrollbar-thumb:active {
      border-width: 1px;
      background: linear-gradient(180deg, #10b461 0%, #025328 100%) padding-box;
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .14);
    }
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar-corner,
    html body.gm-sidebar-layout::-webkit-scrollbar-corner {
      background: transparent;
    }
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar-button,
    html body.gm-sidebar-layout::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }

    /* ---- 3b. Inner scrollers: 6px pills on a transparent track ---------- */
    html body.gm-sidebar-layout > .am-search-root .am-search,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal,
    html body.gm-sidebar-layout div.legal-page .legal-section table,
    html:root body.gm-sidebar-layout #authModal .auth-workspace,
    html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog,
    html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
    html body.gm-sidebar-layout > .am-search-root .am-search::-webkit-scrollbar,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal::-webkit-scrollbar,
    html body.gm-sidebar-layout div.legal-page .legal-section table::-webkit-scrollbar,
    html:root body.gm-sidebar-layout #authModal .auth-workspace::-webkit-scrollbar,
    html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list::-webkit-scrollbar,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog::-webkit-scrollbar,
    html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar {
      display: block;
      width: 6px;
      height: 6px;
      background: transparent;
    }
    html body.gm-sidebar-layout > .am-search-root .am-search::-webkit-scrollbar-track,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal::-webkit-scrollbar-track,
    html body.gm-sidebar-layout div.legal-page .legal-section table::-webkit-scrollbar-track,
    html:root body.gm-sidebar-layout #authModal .auth-workspace::-webkit-scrollbar-track,
    html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list::-webkit-scrollbar-track,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog::-webkit-scrollbar-track,
    html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar-track {
      border: 0;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
    }
    /* Keep the thumb off the rounded corners of the panels (r12-r18). */
    html body.gm-sidebar-layout > .am-search-root .am-search::-webkit-scrollbar-track:vertical,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal::-webkit-scrollbar-track:vertical,
    html:root body.gm-sidebar-layout #authModal .auth-workspace::-webkit-scrollbar-track:vertical,
    html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list::-webkit-scrollbar-track:vertical,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog::-webkit-scrollbar-track:vertical {
      margin: 10px 0;
    }
    html body.gm-sidebar-layout div.legal-page .legal-section table::-webkit-scrollbar-track:horizontal {
      margin: 0 10px;
    }
    html body.gm-sidebar-layout > .am-search-root .am-search::-webkit-scrollbar-thumb,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal::-webkit-scrollbar-thumb,
    html body.gm-sidebar-layout div.legal-page .legal-section table::-webkit-scrollbar-thumb,
    html:root body.gm-sidebar-layout #authModal .auth-workspace::-webkit-scrollbar-thumb,
    html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list::-webkit-scrollbar-thumb,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog::-webkit-scrollbar-thumb,
    html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar-thumb {
      min-width: 32px;
      min-height: 32px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(180deg, rgb(var(--am-accent-rgb) / .78) 0%, rgb(var(--am-accent-2-rgb) / .78) 100%);
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .16);
    }
    html body.gm-sidebar-layout div.legal-page .legal-section table::-webkit-scrollbar-thumb:horizontal,
    html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar-thumb:horizontal {
      background: linear-gradient(90deg, rgb(var(--am-accent-rgb) / .78) 0%, rgb(var(--am-accent-2-rgb) / .78) 100%);
    }
    html body.gm-sidebar-layout > .am-search-root .am-search::-webkit-scrollbar-thumb:hover,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal::-webkit-scrollbar-thumb:hover,
    html body.gm-sidebar-layout div.legal-page .legal-section table::-webkit-scrollbar-thumb:hover,
    html:root body.gm-sidebar-layout #authModal .auth-workspace::-webkit-scrollbar-thumb:hover,
    html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list::-webkit-scrollbar-thumb:hover,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog::-webkit-scrollbar-thumb:hover,
    html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--am-accent-bright) 0%, var(--am-accent) 100%);
    }
    html body.gm-sidebar-layout > .am-search-root .am-search::-webkit-scrollbar-thumb:active,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal::-webkit-scrollbar-thumb:active,
    html body.gm-sidebar-layout div.legal-page .legal-section table::-webkit-scrollbar-thumb:active,
    html:root body.gm-sidebar-layout #authModal .auth-workspace::-webkit-scrollbar-thumb:active,
    html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list::-webkit-scrollbar-thumb:active,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog::-webkit-scrollbar-thumb:active,
    html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar-thumb:active {
      background: linear-gradient(180deg, var(--am-accent) 0%, var(--am-accent-deep) 100%);
    }
    html body.gm-sidebar-layout > .am-search-root .am-search::-webkit-scrollbar-corner,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal::-webkit-scrollbar-corner,
    html body.gm-sidebar-layout div.legal-page .legal-section table::-webkit-scrollbar-corner,
    html:root body.gm-sidebar-layout #authModal .auth-workspace::-webkit-scrollbar-corner,
    html body.gm-sidebar-layout main.page-shell #slotProviderModal .slot-provider-modal-list::-webkit-scrollbar-corner,
    html body.gm-sidebar-layout main.page-shell #gmPromoModal .gm-promo-dialog::-webkit-scrollbar-corner,
    html:root body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar-corner {
      background: transparent;
    }
  }

  /* <992 windows with a mouse: a slimmer page bar. */
  @media (hover: hover) and (pointer: fine) and (max-width: 991.98px) {
    html:has(> body.gm-sidebar-layout)::-webkit-scrollbar,
    html body.gm-sidebar-layout::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  }

  /* >=1200 sticky legal TOC (40-content hides its bar; mouse users get the
     6px pill when the list is taller than the window). */
  @media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
    html:root body.gm-sidebar-layout div.legal-page > .legal-toc {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
    html:root body.gm-sidebar-layout div.legal-page > .legal-toc::-webkit-scrollbar {
      display: block;
      width: 6px;
      background: transparent;
    }
    html:root body.gm-sidebar-layout div.legal-page > .legal-toc::-webkit-scrollbar-track {
      margin: 12px 0;
      background: transparent;
    }
    html:root body.gm-sidebar-layout div.legal-page > .legal-toc::-webkit-scrollbar-thumb {
      min-height: 32px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(180deg, rgb(var(--am-accent-rgb) / .78) 0%, rgb(var(--am-accent-2-rgb) / .78) 100%);
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .16);
    }
    html:root body.gm-sidebar-layout div.legal-page > .legal-toc::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--am-accent-bright) 0%, var(--am-accent) 100%);
    }
    html:root body.gm-sidebar-layout div.legal-page > .legal-toc::-webkit-scrollbar-thumb:active {
      background: linear-gradient(180deg, var(--am-accent) 0%, var(--am-accent-deep) 100%);
    }
  }
}

/* ---- 10-chrome.css ---- */
/*
 * Chrome: announcement marquee, header (guest + member cluster), header
 * tab group, account dropdown, the v2 hamburger, bottom dock, .bg-aurora,
 * and the chrome geometry tokens. The site-menu aside (desktop sidebar,
 * rail, drawer) and the storefront body offset are 11-sidebar.css/.js.
 *
 * v3 status (SPEC §7 steps 1-4 done here): green tokens, v3 bands (mobile
 * chrome <=991.98px, desktop >=992px), and the v3 shell (§3.3-§3.4,
 * §4.4, §4.5, §4.19). Two geometries share these selectors:
 *  - Storefront (SF = html body.gm-sidebar-layout:has(> :is(main.page-
 *    shell, div.legal-page, main.gm-404)), section "v3 storefront shell"
 *    at the end): marquee 34px (30 <=767) and header 53px, both
 *    position:absolute from x = --am-sb-w, scrolling away with the page;
 *    body padding-top stays --gm-top. >=992: header tab group (Slot
 *    Oyunları / Canlı Casino / Spor by CSS order; Bonus Talep and
 *    Promosyonlar hidden only while the aside exists), 38px auth buttons,
 *    the logo pinned into the sidebar (11-sidebar.css). <=991: logo + auth
 *    row (no hamburger), the 79px dock (75 <=380) with a raised 56px
 *    centre disc; 10-chrome.js adds Menü / Ara to it (nav[data-am-bb]).
 *  - Member pages (/hesabim, /profile/*, cark.php) and the no-:has()
 *    fallback keep the v2 geometry and component look, recoloured by the
 *    v3 tokens only (owner decision 7): fixed 30px strip + fixed 56/64px
 *    header with logo + desktop nav, hamburger (opens the aside drawer),
 *    the 64px v2 dock. Shared skins applied everywhere: the marquee
 *    notice look (gradient, bullhorn, 22px close) and the FAB
 *    (55-overlays.css).
 *
 * 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 576 /
 *    992 / 1024 / 1200), which neutralises the legacy 380/600/640/900/980/
 *    1200/1600 chrome bands for those properties. The few theme <=900
 *    rules the layer does not set at every width are restated for
 *    901-991.98 (block "Theme <=900 band", below the geometry tokens).
 *  - Nothing here forces display with !important; [hidden] (dropdown)
 *    keeps winning via the theme's [hidden]{display:none!important}.
 *  - Member shells (body > .dash-shell) are full width: from 992px 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 here; the member content's colours are
 *    45-member.css (+ the alias block in 00-tokens.css).
 *  - Guest auth buttons, the hamburger and the announce close carry
 *    transparent pseudo-element hit areas (44px touch targets).
 *  - The v2 drawer (.am-drawer-root, built by the old 10-chrome.js) is
 *    retired with its rules; header[data-am-scrolled] stays for member
 *    pages only.
 */

/* ---- Geometry tokens ------------------------------------------------------
   Real chrome heights. body padding-top/bottom and the html scroll-padding
   (the single in-page scroll offset, below) read these, so they must match
   the boxes below. Base = member pages and the no-:has() fallback (v2
   geometry): a 30px strip, a 56px header and the 64px dock (+ safe area,
   counted once). The storefront restates them in the v3 shell section at
   the end (marquee 34 / 30 <=767, header 53, dock 79 / 75 <=380). */
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 576px). */
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: 992px) {
  html body.gm-sidebar-layout {
    --gm-announce: 30px;
    --gm-header: 64px;
    --gm-bottom: 0px;
    --am-float-bottom: 72px;
    --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: 1200px) {
  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;
  }
}

/* ---- Theme <=900 band, restated for 901-991.98 ---------------------------
   aqua-theme.css switches to its mobile chrome at 900/901; the layer's
   mobile chrome now runs to 991.98px. Theme <=900 rules that the layer does
   not already set at every width are restated here for 901-991.98 only, at
   the theme's own weight (:where(), no !important), so the whole <=991.98
   band behaves like <=900. The 901 edge is the theme's, not a v3 band.
    - body padding-bottom: room for the fixed bottom bar (theme: body
      { padding-bottom: var(--gm-bottom) } at <=900). */
@media (min-width: 901px) and (max-width: 991.98px) {
  :where(html body.gm-sidebar-layout) {
    padding-bottom: var(--gm-bottom);
  }
}

/* ---- Ambient background ---------------------------------------------------
   Static, zero-repaint emerald ambient light pools behind the glass panels. */
html body.gm-sidebar-layout > .bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(960px 520px at 24% -6%, rgb(16 180 97 / .11), transparent 68%),
    radial-gradient(840px 460px at 88% 16%, rgb(3 112 53 / .09), transparent 70%),
    radial-gradient(760px 440px at 50% 94%, rgb(2 83 40 / .08), transparent 72%),
    var(--am-bg);
  animation: none;
}

/* ---- Announcement bar -----------------------------------------------------
   Strip above the header: box, colours, the static bullhorn and the close
   button live here; the text line itself (one line at every width, static
   ellipsis or JS marquee) is 27-simplify.css. v3 notice skin at every
   width and on every page (SPEC §4.4): the green notice gradient with a
   lit bottom edge, 600 12.5/18 white text, a 16px bullhorn at the left
   (::before, outside the moving track; the inline <i> in the text is
   hidden) and a visible 22px close circle with a transparent 44px hit
   area. Geometry here is the v2 one (fixed, 30px, member pages); the
   storefront makes it absolute and 34px (section "v3 storefront shell").
   z-index 101 lets the close target reach into the header's 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;
  gap: 10px;
  box-sizing: border-box;
  height: var(--gm-announce);
  margin: 0;
  padding: 0 40px 0 var(--am-gutter);
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgb(var(--am-accent-bright-rgb) / .5);
  background: var(--am-grad-notice);
  box-shadow: 0 2px 10px rgb(0 0 0 / .35);
  color: var(--am-text);
  font: 600 12.5px/18px var(--am-font);
  letter-spacing: .01em;
  text-align: center;
}
html body.gm-sidebar-layout.gm-no-announce .gm-topbar-announce {
  display: none;
}
html body.gm-sidebar-layout .gm-topbar-announce::before {
  content: "\f0a1";
  content: "\f0a1" / "";
  flex: none;
  width: 16px;
  color: var(--am-text);
  font: 900 16px/1 "Font Awesome 6 Free";
  opacity: .9;
  text-align: center;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-track i {
  display: none;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-track strong {
  color: var(--am-text);
  font-weight: 700;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close {
  position: absolute;
  top: calc((var(--gm-announce) - 22px) / 2);
  right: 10px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .14);
  box-shadow: none;
  color: var(--am-text);
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 44px touch target around the 22px circle; it grows 1px less to the
   right than the 10px gap, so the absolute storefront strip never adds
   scrollable overflow at the viewport edge. */
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close::before {
  content: "";
  position: absolute;
  inset: -11px -10px -11px -12px;
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close i {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  line-height: 1;
}
@media (hover: hover) {
  html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close:hover {
    background: rgb(255 255 255 / .26);
  }
}
html body.gm-sidebar-layout .gm-topbar-announce .gm-announce-close:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}

/* Member pages from 992px: the close circle ends on the header's content
   edge (--am-chrome-ann-x: 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: 992px) {
  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) + 30px);
  }
  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: var(--am-chrome-ann-x);
  }
}

/* ---- Header shell ---------------------------------------------------------
   Full-bleed fixed bar (no floating card). Solid below 992px (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.
   <=991.98: [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 up to its own 1200px band edge), not the 1320px container. From
   992px (desktop chrome) 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 992px the mobile chrome keeps the normal
   gutter (the theme still stacks the shells only below 901px; member
   content is not ours). Only the chrome changes here; member content is
   untouched. The upper bound mirrors aqua-hesabim.css (max-width: 1200px),
   so it is not a v3 band. */
html body.gm-sidebar-layout {
  --am-chrome-member-x: 24px;
}
@media (min-width: 992px) and (max-width: 1200px) {
  html body.gm-sidebar-layout.gm-account-page {
    --am-chrome-member-x: 20px;
  }
}
@media (min-width: 992px) {
  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: var(--am-chrome-logo-h) !important;
  max-height: none !important;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: 0% 50%;
  flex: none;
  filter: none !important;
  transition: none;
}

/* ---- Hamburger (injected by 10-chrome.js, <=991.98 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 <=991.98 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 >=992). */
@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 992) 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: 11px;
  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: 576px) {
  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: 992px) {
  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: 1200px) {
  html body.gm-sidebar-layout header.topbar .main-text-nav {
    gap: 4px;
  }
}

/* ---- Bottom tab bar (<=991.98) --------------------------------------------
   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 an accent 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 11px/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: 576px) {
  html body.gm-sidebar-layout nav.gm-bottombar .gm-bb {
    font-size: 11px;
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout nav.gm-bottombar {
    display: none;
  }
}

/* ==========================================================================
   v3 storefront shell (SF, SPEC §3.3-§3.4, §4.4, §4.5, §4.19)
   SF = html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page,
   main.gm-404)) (0,3,3)+, so every rule here out-ranks the v2 rules above
   (written for member pages and the no-:has() fallback). The aside, the
   body offset and the pinned logo are 11-sidebar.css.
   ========================================================================== */

/* ---- Tokens ----
   Marquee 30px (<=767) / 34px, header 53px (52 row + 1px edge) at every
   width; both scroll away, so the html scroll offset is a plain 20px.
   Dock 79px + safe area (75 <=380), 0 from 992. Floating UI 12px above the
   dock, 72px from 992 (FAB, SPEC §2.7). */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) {
  --gm-announce: 30px;
  --gm-header: 53px;
  --gm-bottom: calc(79px + env(safe-area-inset-bottom, 0px));
  --am-float-bottom: calc(var(--gm-bottom) + 12px);
  --am-chrome-btn-h: 34px;
  --am-chrome-logo-h: 26.88px;      /* 120px wide (500/112 crop) */
}
html:has(> body.gm-sidebar-layout > :is(main.page-shell, div.legal-page, main.gm-404)) {
  --gm-announce: 30px;
  --gm-header: 53px;
  scroll-padding-top: 20px;
}
@media (max-width: 380.98px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) {
    --gm-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 768px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)),
  html:has(> body.gm-sidebar-layout > :is(main.page-shell, div.legal-page, main.gm-404)) {
    --gm-announce: 34px;
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) {
    --gm-bottom: 0px;
    --am-float-bottom: 72px;
    --am-chrome-btn-h: 38px;
    --am-chrome-logo-h: 35px;       /* rail: unpinned logo in the header */
  }
}
html body.gm-sidebar-layout.gm-no-announce:has(> :is(main.page-shell, div.legal-page, main.gm-404)),
html:has(> body.gm-sidebar-layout.gm-no-announce > :is(main.page-shell, div.legal-page, main.gm-404)) {
  --gm-announce: 0px;
}

/* ---- Marquee: absolute, from the column start ---- */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) .gm-topbar-announce {
  position: absolute;
  top: 0;
  right: 0;
  left: var(--am-sb-w);
  padding: 0 44px 0 16px;
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) .gm-topbar-announce {
    padding: 0 44px;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) .gm-topbar-announce .gm-announce-close {
    right: 10px;
  }
}

/* ---- Header: absolute, scrolls away ----
   Seamless ambient top bar that blends into the page canvas without a hard
   cut-off box. z 100 stays (the pinned logo lives in this stacking context,
   above the desktop aside at 99). */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar,
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar.scrolled {
  position: absolute;
  top: var(--gm-announce);
  right: 0;
  bottom: auto;
  left: var(--am-sb-w);
  z-index: 100;
  box-sizing: border-box;
  height: var(--gm-header);
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / .055);
  border-radius: 0;
  background: linear-gradient(180deg, rgb(6 22 14 / .76) 0%, rgb(1 13 8 / .22) 100%);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Row: [logo] [tab group] ... [auth]; content box = min(column, 1680) - 32. */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .topbar-row {
  display: flex;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--am-container);
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .am-burger {
  display: none;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .topbar-row > .gm-brand-cluster {
  flex: 0 1 auto;
  min-width: 72px;
  margin: 0 12px 0 0;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .gm-brand-cluster .brand {
  padding: 0;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .topbar-row > .auth-links {
  flex: none;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

/* ---- Tab group (>=992, SPEC §4.5) ----
   The theme's nav: Slot Oyunları · Canlı Casino · Spor by CSS order (DOM:
   Slot, Spor, Canlı Casino, Bonus Talep, Promosyonlar). Bonus Talep and
   Promosyonlar are hidden only while the aside (11-sidebar.js) exists; the
   no-JS nav stays complete. 992-1199: icon-only tabs (title tooltip). */
@media (min-width: 992px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav {
    display: flex;
    align-items: center;
    flex: none;
    gap: 4px;
    box-sizing: border-box;
    height: 40px;
    min-width: 0;
    margin: 0 0 0 28px;
    padding: 3px;
    overflow: visible;
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: var(--am-r-pill);
    background: linear-gradient(145deg, rgb(255 255 255 / .065), rgb(255 255 255 / .02));
    box-shadow: var(--am-sheen);
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    order: 4;
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--am-r-pill);
    background: transparent;
    box-shadow: none;
    color: rgb(255 255 255 / .72);
    font: 700 13px/13px var(--am-font);
    letter-spacing: .01em;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/slot"] { order: 1; }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"] { order: 2; }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/spor"] { order: 3; }
  html body.gm-sidebar-layout:has(> aside#amSidebar):has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link:is([href="/bonustaleps"], [href="/promosyonlar"]) {
    display: none;
  }
  /* 20px icon box (fa-fw): fa-dice is 20px wide and overflowed a 16px box
     into the label gap. */
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link i {
    display: inline-block;
    width: 20px;
    color: var(--am-text);
    font-size: 16px;
    line-height: 1;
    opacity: .7;
    text-align: center;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link.active {
    background: var(--am-accent-deep);
    box-shadow: inset 0 0 0 1px rgb(var(--am-accent-rgb) / .35);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link.active i {
    color: var(--am-text);
    opacity: 1;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link:focus-visible {
    outline: none;
    box-shadow: var(--am-focus);
  }
}
@media (min-width: 992px) and (hover: hover) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link:hover {
    background: rgb(255 255 255 / .05);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link:hover i {
    color: var(--am-accent);
    opacity: 1;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link.active:hover {
    background: var(--am-accent-deep);
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link {
    padding: 0 7px;   /* 34px icon tabs: group 114 (M) */
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link span {
    display: none;
  }
}
/* Rail: the unpinned logo leads the row (35px tall); as on the reference
   the logo keeps an 18px margin and the tab group its own 28px. */
@media (min-width: 992px) {
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .topbar-row > .gm-brand-cluster {
    margin-right: 18px;
  }
}

/* ---- Guest auth (SPEC §4.5) ----
   <=991: 31px (32 <=380), 11.5px, text only. >=992: 38px, min 108px, 13px
   with a 13px icon (glyphs swapped to right-to-bracket / user-plus).
   Giriş Yap = ghost gradient + .12 edge (+ blur from 992); Kayıt Ol = the
   CTA gradient. !important mirrors member-chrome (see header). The
   transparent ::after keeps a 44px hit area inside the 52px row. */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn {
  gap: 5px;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--am-r-pill);
  font: 700 11.5px/1 var(--am-font);
  letter-spacing: .01em;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn::after {
  inset: -7px -3px;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-login {
  border-color: rgb(255 255 255 / .14) !important;
  background: rgb(255 255 255 / .055) !important;
  color: var(--am-text) !important;
  box-shadow: none;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-register {
  border-color: var(--am-line-cta) !important;
  border-radius: var(--am-r-pill);
  background: var(--am-grad) !important;
  color: var(--am-on-accent) !important;
  box-shadow: 0 6px 16px rgb(2 83 40 / .45), inset 0 1px 0 rgb(255 255 255 / .2);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn .fa-user-shield::before {
  content: "\f2f6";
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn .fa-crown::before {
  content: "\f234";
}
@media (max-width: 380.98px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    font-size: 11px;
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn {
    min-width: 108px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px;
    letter-spacing: .02em;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn::after {
    inset: -3px -3px;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn i {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-login {
    border-color: rgb(255 255 255 / .13) !important;
    background: var(--am-grad-ghost) !important;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-register {
    border-radius: var(--am-r-pill);
    box-shadow: var(--am-cta-shadow);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-login {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }
}
@media (hover: hover) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-login:hover {
    border-color: rgb(var(--am-accent-rgb) / .55) !important;
    background: var(--am-grad-ghost-hover) !important;
    color: var(--am-text) !important;
    box-shadow: 0 6px 16px rgb(0 0 0 / .3);
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-register:hover {
    border-color: var(--am-accent) !important;
    background: var(--am-grad) !important;
    box-shadow: var(--am-cta-shadow-hover);
  }
}

/* ---- Member cluster (simulated: balance, Para Yatır, Para Çek, account)
   Balance pill on surface-1 with a .08 edge; Para Yatır = the Kayıt Ol
   CTA, Para Çek and the account toggle = the Giriş Yap ghost; r10 boxes
   (34px <=991, 38px from 992 via --am-chrome-btn-h). */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .gm-header-balance {
  box-sizing: border-box;
  border: 1px solid var(--am-line-2) !important;
  border-radius: var(--am-r-pill);
  background: var(--am-surface-1);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .gm-header-balance-main {
  font-size: 13px;
  font-weight: 700;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .gm-header-balance-bonus {
  color: rgb(255 255 255 / .56);
  font-size: 11px;
  font-weight: 500;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .auth-btn {
  box-sizing: border-box;
  border: 1px solid var(--am-line-3);
  border-radius: var(--am-r-pill);
  background: var(--am-grad-ghost);
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn {
  border-color: var(--am-line-cta);
  background: var(--am-grad);
  color: var(--am-on-accent);
  box-shadow: var(--am-cta-shadow);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .gm-account-menu.open .auth-btn.gm-header-account-btn,
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .auth-btn.gm-header-account-btn[aria-expanded="true"] {
  border-color: var(--am-line-hover);
  background: var(--am-grad-ghost-hover);
  color: var(--am-accent);
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .gm-header-balance {
    max-width: 180px;
    padding: 0 14px;
  }
}
@media (hover: hover) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .auth-btn:hover {
    border-color: rgb(var(--am-accent-rgb) / .55);
    background: var(--am-grad-ghost-hover);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-member .auth-btn.gm-header-deposit-btn:hover {
    border-color: var(--am-accent);
    background: var(--am-grad);
    color: var(--am-on-accent);
    box-shadow: var(--am-cta-shadow-hover);
  }
}
/* Account dropdown: overlay gradient, green .5 edge, pop shadow. */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .gm-account-menu .gm-account-dropdown {
  border: 1px solid rgb(var(--am-accent-deep-rgb) / .5);
  border-radius: var(--am-r-12);
  background: var(--am-grad-overlay);
  box-shadow: var(--am-shadow-pop);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .gm-account-dropdown .gm-account-dropdown-item:not(.gm-account-dropdown-logout) {
  color: rgb(255 255 255 / .82);
  font-size: 13.5px;
}
@media (hover: hover) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .gm-account-dropdown .gm-account-dropdown-item:not(.gm-account-dropdown-logout):hover {
    background: rgb(var(--am-accent-deep-rgb) / .22);
    color: var(--am-accent);
  }
}

/* ---- Dock (<=991.98, SPEC §4.19) ----
   The nav is the bar (flat #010d08, green .75 top edge); nav::before
   paints the floating dock (min(100% - 8px, 560px), centred, r22) behind
   five equal 68px items (76px wide at 390). Centre "Para Yatır": raised
   14px, a 56px gradient disc with a canvas ring, the label under it.
   10-chrome.js inserts "Menü" first and "Ara" last and sets
   [data-am-bb="v3"], which hides "Canlı Casino" and "Bonuslar" (both in
   the drawer); without JS the original five links stay. z 1700: above
   the drawer (1500) and the phone search sheet (1600). */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1700;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: 68px;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  height: var(--gm-bottom);
  margin: 0;
  padding: 5px calc(max(4px, (100% - 560px) / 2) + 1px) calc(5px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgb(1 13 8 / 0) 0%, rgb(1 13 8 / .84) 100%);
  box-shadow: none;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar::before {
  content: "";
  position: absolute;
  top: 4px;
  right: max(4px, (100% - 560px) / 2);
  left: max(4px, (100% - 560px) / 2);
  z-index: -1;
  box-sizing: border-box;
  height: 70px;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--am-r-xl);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .12), rgb(16 180 97 / .04)),
    rgb(4 15 9 / .76);
  box-shadow: var(--am-shadow-dock), inset 0 1px 0 rgb(255 255 255 / .20), inset 0 -1px 0 rgb(0 0 0 / .25);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  pointer-events: none;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar[data-am-bb="v3"] > a.gm-bb:is([href="/livecasino"], [href="/promosyonlar"]) {
  display: none;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  height: 68px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgb(255 255 255 / .72);
  font: 400 11px/11px var(--am-font);
  letter-spacing: .2px;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb::before {
  content: none;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--am-text);
  font-size: 20px;
  line-height: 1;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb span {
  line-height: 13px;   /* the span clips: 11px shaved the p of "Spor" */
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb:is([aria-current="page"], [aria-expanded="true"]) {
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb:is([aria-current="page"], [aria-expanded="true"]) i {
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb.gm-bb-center {
  justify-content: flex-start;
  gap: 0;
  padding: 6px 0 0;
  color: rgb(255 255 255 / .72);
  font-weight: 400;
  transform: translateY(-14px);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb.gm-bb-center i {
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border: 3px solid var(--am-bg);
  border-radius: var(--am-r-pill);
  background:
    radial-gradient(circle at 30% 28%, rgb(var(--am-accent-bright-rgb) / .45), transparent 46%),
    var(--am-grad);
  box-shadow: 0 0 0 4px rgb(var(--am-accent-2-rgb) / .5), 0 10px 22px rgb(2 83 40 / .5), inset 0 1px 0 rgb(255 255 255 / .28);
  color: var(--am-on-accent);
  font-size: 24px;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb.gm-bb-center span {
  position: absolute;
  top: 68px;
  right: 0;
  left: 0;
  overflow: visible;
  text-align: center;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb.gm-bb-center[aria-current="page"] {
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb:focus-visible i {
  border-radius: var(--am-r-sm);
  box-shadow: var(--am-focus);
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb.gm-bb-center:focus-visible i {
  border-radius: var(--am-r-pill);
  box-shadow: 0 0 0 4px rgb(var(--am-accent-2-rgb) / .5), 0 0 0 6px rgb(var(--am-accent-rgb) / .9);
}
@media (hover: hover) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb:hover {
    color: var(--am-text);
  }
}
@media (max-width: 380.98px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar {
    grid-template-rows: 64px;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar::before {
    height: 66px;
    border-radius: 20px;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb {
    height: 64px;
    letter-spacing: 0;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb.gm-bb-center {
    transform: translateY(-12px);
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar .gm-bb.gm-bb-center span {
    top: 64px;
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) nav.gm-bottombar {
    display: none;
  }
}

/* ---- Shell motion: rail toggle offsets (with 11-sidebar.css) ---- */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  html[data-am-sb-anim] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) :is(header.topbar, .gm-topbar-announce) {
    transition: left var(--am-dur) var(--am-ease);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar {
    transition: none;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links .auth-btn {
    transition: background-color var(--am-dur-2) var(--am-ease), border-color var(--am-dur-2) var(--am-ease), color var(--am-dur-2) var(--am-ease), box-shadow var(--am-dur-2) var(--am-ease), transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link i {
    transition: color var(--am-dur) var(--am-ease), opacity var(--am-dur) var(--am-ease);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links :is(.auth-btn.btn-register, .auth-btn.gm-header-deposit-btn):hover {
    transform: translateY(-1px);
  }
}

/* ---- 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;
  }
}
@keyframes am-chrome-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ---- 11-sidebar.css ---- */
/*
 * v3 (2026-10-30, SPEC §7 step 3): storefront shell + site-menu aside
 * (SPEC §3.2-§3.4, §4.1-§4.3). Pairs with 11-sidebar.js, which builds
 * aside#amSidebar (a body child right after the header) + .am-sb-catcher
 * and .am-sb-tip (at the end of <body>).
 *
 * SF (storefront) below = html body.gm-sidebar-layout:has(> :is(main.page-
 * shell, div.legal-page, main.gm-404)), (0,3,3)+. Those roots never exist on
 * member pages (/hesabim, /profile/*, cark.php), game.php or /sports, so:
 *  - SF >=992: --am-sb-w = 260px (78px with html[data-am-sb="rail"]); body
 *    padding-left reserves it from the first paint; the marquee and the
 *    header (10-chrome.css) start at x = --am-sb-w and scroll away; only
 *    the aside stays. --am-container becomes the v3 1680px cap on SF.
 *  - First paint (before 11-sidebar.js runs at the end of <body>): the
 *    empty sidebar frame is painted on body > .bg-aurora (already a fixed,
 *    full-viewport z -1 layer on every page) instead of body::before as
 *    SPEC §3.3 suggested: the theme's aqua-magic.css forces
 *    body.gm-arwen-page::before { opacity:0 !important; background:none
 *    !important } on /hakkimizda, /sifremi-unuttum, 404 and other arwen
 *    pages. The header logo (.gm-brand-cluster) is pinned (position:fixed,
 *    260x61 at 0,0) into the sidebar's logo row, so nothing moves when the
 *    aside arrives. Rail: the logo is unpinned and returns to the header
 *    row (10-chrome.css sizes it). JS off ((scripting: none)): no
 *    reservation, no pin, the header nav keeps all five links.
 *  - <=991.98 (and member pages at every width): the aside is the
 *    off-canvas drawer, min(340px, 84vw), translateX(-100% - 33px) closed,
 *    .45s, z 1500, no dim (a transparent tap-catcher closes it), body
 *    locked (html.am-drawer-open: overflow hidden + touch-action none).
 *    Member pages >=992: hidden (no sidebar there, SPEC §3.2).
 * z (stack in 55-overlays.css): desktop aside 99, i.e. under the header
 * (100): the pinned logo lives inside header.topbar's stacking context,
 * so the aside must sit below it for the logo to paint over the logo row
 * (D: SPEC §3.5 says 1200; nothing else overlaps x < --am-sb-w at >=992).
 * Rail tooltips are a body-level fixed element at 1201. Drawer 1500,
 * catcher 1499, under the storefront dock (1700, its "Menü" closes it).
 * Rules: every selector is prefixed html body.gm-sidebar-layout; new
 * elements are am-sb-*; no display !important; no transform / filter /
 * contain / will-change / backdrop-filter / overflow-x on html or body;
 * all motion inside (prefers-reduced-motion: no-preference); the
 * transitions of the rail toggle run only under html[data-am-sb-anim]
 * (set by the JS for one toggle), never at boot ([data-am-sb-boot]).
 */

/* ==== Shell geometry (storefront >= 992) ================================= */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) {
  --am-container: 1680px;
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) {
    --am-sb-w: var(--am-sb-expanded);
    padding-left: var(--am-sb-w);
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) {
    --am-sb-w: var(--am-rail-w);
  }
  /* First-paint frame: the aside's own fill and right edge, painted on the
     fixed .bg-aurora layer (sized by --am-sb-w; zero-sized when it is 0). */
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > .bg-aurora {
    background:
      linear-gradient(rgb(255 255 255 / .055), rgb(255 255 255 / .055)) calc(var(--am-sb-w) - 1px) 0 / 1px 100% no-repeat,
      radial-gradient(480px 220px at 50% 0%, rgb(2 83 40 / .16), transparent 60%) 0 0 / var(--am-sb-w) 100% no-repeat,
      linear-gradient(180deg, #03110a 0%, #010502 100%) 0 0 / var(--am-sb-w) 100% no-repeat,
      radial-gradient(960px 520px at 34% -6%, rgb(16 180 97 / .11), transparent 68%),
      radial-gradient(840px 460px at 88% 16%, rgb(3 112 53 / .09), transparent 70%),
      radial-gradient(760px 440px at 56% 94%, rgb(2 83 40 / .08), transparent 72%),
      var(--am-bg);
  }
  /* Pinned logo: the header brand sits in the sidebar logo row (expanded
     sidebar only). z 1 inside header.topbar's stacking context (100). */
  html:not([data-am-sb="rail"]) body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .topbar-row > .gm-brand-cluster {
    --am-chrome-logo-h: 37px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--am-sb-expanded);
    min-width: 0;
    height: 61px;
    margin: 0;
    padding: 0 16px;
  }
}
@media (min-width: 992px) and (scripting: none) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)),
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) {
    --am-sb-w: 0px;
  }
  html:not([data-am-sb="rail"]) body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .topbar-row > .gm-brand-cluster {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    padding: 0;
  }
}

/* ==== Aside: drawer by default (phones, tablets, member pages) =========== */
html.am-drawer-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}
html.am-drawer-open body.gm-sidebar-layout {
  touch-action: none;
}
html body.gm-sidebar-layout > aside#amSidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1500;
  display: block;
  box-sizing: border-box;
  width: var(--am-drawer-w);
  max-width: 100%;
  margin: 0;
  padding: 0 0 120px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border: 0;
  border-right: 1px solid rgb(255 255 255 / .06);
  border-radius: 0 22px 22px 0;
  background: var(--am-surface-sb);
  box-shadow: var(--am-shadow-drawer);
  color: var(--am-text);
  font: 400 14px/1.5 var(--am-font);
  letter-spacing: 0;
  text-align: left;
  touch-action: pan-y;
  transform: translateX(calc(-100% - 33px));
  visibility: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > aside#amSidebar::-webkit-scrollbar {
  display: none;
}
html[data-am-drawer-open] body.gm-sidebar-layout > aside#amSidebar {
  transform: none;
  visibility: visible;
}
html body.gm-sidebar-layout > .am-sb-catcher {
  position: fixed;
  inset: 0;
  z-index: 1499;
  display: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 991.98px) {
  html[data-am-drawer-open] body.gm-sidebar-layout > .am-sb-catcher {
    display: block;
  }
}
html body.gm-sidebar-layout > aside#amSidebar :is(a, button) {
  font-family: var(--am-font);
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > aside#amSidebar :is(a, button):focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 2px;
}

/* 1. Logo row (sticky). The clone shows in the drawer; on the desktop
   storefront the pinned header logo covers this row. */
html body.gm-sidebar-layout > aside#amSidebar .am-sb-logo {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 61px;
  padding: 0 16px;
  border-bottom: 1px solid var(--am-line);
  background: var(--am-surface-sb-logo);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-logo-img {
  display: block;
  width: 165px;
  max-width: 100%;
  height: 42px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: 50% 50%;
}

/* 2. Head row: "Menü" toggle + chips. */
html body.gm-sidebar-layout > aside#amSidebar .am-sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  height: 56px;
  margin: 0 0 6px;
  padding: 0 14px;
  border-bottom: 1px solid rgb(255 255 255 / .06);
  border-radius: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .045), transparent);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  box-sizing: border-box;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / .09);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  color: var(--am-text);
  font: 700 13.5px/21px var(--am-font);
  letter-spacing: .03em;
  cursor: pointer;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-toggle i {
  width: 16px;
  color: #5ff5a3;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-toggle-t {
  padding-left: 10px;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-chips {
  display: flex;
  align-items: center;
  gap: 8px;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-chip {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .28);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(16 180 97 / .18), rgb(6 46 24 / .55));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 4px 10px rgb(0 0 0 / .24);
  color: #7bf7b4;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* 3-5. Body: search field, promo card, bonus card. */
html body.gm-sidebar-layout > aside#amSidebar .am-sb-body {
  display: flow-root;
  padding: 0 8px;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: calc(100% - 20px);
  height: 44px;
  margin: 8px 10px 10px;
  padding: 0 11px 0 14px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .22);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)),
    linear-gradient(135deg, rgb(6 38 20 / .65), rgb(3 20 10 / .75));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), 0 8px 18px -6px rgb(0 0 0 / .35);
  color: var(--am-text);
  font: 500 12.5px/1 var(--am-font);
  text-align: left;
  cursor: pointer;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-search i {
  flex: none;
  width: 16px;
  color: #5ff5a3;
  font-size: 14px;
  text-align: center;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-search-t {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(255 255 255 / .78);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-search-kbd {
  flex: none;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .28);
  background: rgb(16 180 97 / .16);
  color: #7bf7b4;
  font: 700 9.5px/1.2 var(--am-font);
  letter-spacing: .05em;
}

html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  margin: 6px 10px 10px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .38);
  border-radius: 20px;
  background:
    radial-gradient(240px 150px at 88% 18%, rgb(16 180 97 / .28), transparent 62%),
    radial-gradient(180px 120px at 10% 110%, rgb(16 180 97 / .12), transparent 60%),
    linear-gradient(135deg, var(--am-promo-1) 0%, var(--am-promo-2) 55%, var(--am-promo-3) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 14px 32px rgb(0 0 0 / .44);
  color: var(--am-text);
  text-decoration: none;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 50%;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgb(2 18 10 / .94) 0%, rgb(2 18 10 / .64) 36%, rgb(2 18 10 / .14) 68%, transparent 88%),
    linear-gradient(90deg, rgb(2 18 10 / .62) 0%, rgb(2 18 10 / .18) 45%, transparent 76%);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .38);
  background: rgb(4 26 14 / .76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #7bf7b4;
  font: 700 9.5px/1.2 var(--am-font);
  letter-spacing: .05em;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ce38b;
  box-shadow: 0 0 8px #3ce38b;
  animation: am-sb-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes am-sb-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: auto;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo-t {
  color: var(--am-text);
  font: 800 16px/1.12 var(--am-font);
  letter-spacing: .01em;
  text-shadow: 0 4px 14px rgb(0 0 0 / .55);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .48);
  border-radius: var(--am-r-pill);
  background: linear-gradient(135deg, #19c367 0%, #0b7a3e 100%);
  box-shadow: 0 6px 16px rgb(2 83 40 / .45), inset 0 1px 0 rgb(255 255 255 / .24);
  color: #fff;
  font: 700 11px/1.4 var(--am-font);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo-btn i {
  font-size: 9px;
}

html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  box-sizing: border-box;
  min-height: 62px;
  margin: 0 10px 12px;
  padding: 11px 13px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .32);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .08) 0%, rgb(255 255 255 / 0) 48%),
    linear-gradient(135deg, rgb(10 68 35 / .78) 0%, rgb(4 32 16 / .86) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 10px 24px -6px rgb(0 0 0 / .38);
  color: var(--am-text);
  text-decoration: none;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus-ico {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .45);
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / .24), transparent 60%),
    linear-gradient(145deg, rgb(25 224 122 / .30), rgb(6 56 28 / .75));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 6px 14px rgb(0 0 0 / .28);
  color: #5ff5a3;
  font-size: 16px;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus-txt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus-t {
  color: #fff;
  font: 700 13px/1.2 var(--am-font);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus-pill {
  padding: 1.5px 6px;
  border-radius: 999px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .38);
  background: rgb(16 180 97 / .22);
  color: #7bf7b4;
  font: 700 9px/1.2 var(--am-font);
  letter-spacing: .04em;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus-s {
  overflow: hidden;
  color: rgb(255 255 255 / .62);
  font: 500 11px/1.25 var(--am-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus-go {
  flex: none;
  color: #5ff5a3;
  font-size: 12px;
}

/* 6-8. Titled sections and items. */
html body.gm-sidebar-layout > aside#amSidebar .am-sb-nav,
html body.gm-sidebar-layout > aside#amSidebar .am-sb-group {
  margin: 0;
  padding: 0;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-nav {
  display: flex;
  flex-direction: column;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-sec {
  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  height: 18px;
  margin: 15px 18px 7px;
  padding: 0;
  overflow: hidden;
  color: rgb(255 255 255 / .82);
  font: 700 11px/18px var(--am-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgb(0 0 0 / .4);
  white-space: nowrap;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-sec::before {
  content: "";
  flex: none;
  width: 3px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5ff5a3, #10b461);
  box-shadow: 0 0 8px rgb(25 224 122 / .65);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-sec::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--am-accent-rgb) / .32), transparent);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 10px;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  box-sizing: border-box;
  height: 46px;
  margin: 0;
  padding: 0 11px 0 9px;
  border: 1px solid rgb(255 255 255 / .055);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .045) 0%, rgb(255 255 255 / .012) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
  color: rgb(255 255 255 / .92);
  text-decoration: none;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .22);
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / .16), transparent 60%),
    linear-gradient(145deg, rgb(16 180 97 / .18), rgb(5 38 19 / .62));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 4px 10px rgb(0 0 0 / .22);
  color: #6df2a8;
  font-size: 14px;
  line-height: 1;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), background .24s ease, border-color .24s ease, color .24s ease, box-shadow .24s ease;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[data-sb-tone="gold"] .am-sb-ico {
  border-color: rgb(245 196 81 / .35);
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / .20), transparent 60%),
    linear-gradient(145deg, rgb(245 196 81 / .24), rgb(62 42 8 / .65));
  color: #ffd875;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[data-sb-tone="cyan"] .am-sb-ico {
  border-color: rgb(56 214 235 / .35);
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / .20), transparent 60%),
    linear-gradient(145deg, rgb(56 214 235 / .22), rgb(8 46 58 / .65));
  color: #7be8f8;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-lbl {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font: 600 13.5px/20px var(--am-font);
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .30);
  background: rgb(16 180 97 / .16);
  color: #7bf7b4;
  font: 700 9px/1.2 var(--am-font);
  letter-spacing: .04em;
  text-transform: uppercase;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-badge[data-tone="gold"] {
  border-color: rgb(245 196 81 / .38);
  background: rgb(245 196 81 / .16);
  color: #ffe08a;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-badge[data-tone="cyan"] {
  border-color: rgb(56 214 235 / .38);
  background: rgb(56 214 235 / .15);
  color: #8cf0ff;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-chev {
  flex: none;
  color: rgb(255 255 255 / .45);
  font-size: 11px;
  opacity: .85;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"] {
  border-color: rgb(var(--am-accent-bright-rgb) / .45);
  background:
    linear-gradient(145deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / 0) 50%),
    linear-gradient(135deg, rgb(18 132 68 / .62) 0%, rgb(6 52 26 / .82) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .20), 0 10px 24px -6px rgb(0 0 0 / .45), 0 0 18px rgb(16 180 97 / .22);
  color: #fff;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"] .am-sb-ico {
  border-color: rgb(var(--am-accent-bright-rgb) / .65);
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / .28), transparent 60%),
    linear-gradient(145deg, rgb(25 224 122 / .42), rgb(8 78 39 / .85));
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 0 14px rgb(25 224 122 / .35);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"] .am-sb-chev {
  color: #5ff5a3;
  opacity: 1;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -1px;
  width: 3px;
  height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5ff5a3, #10b461);
  box-shadow: 0 0 12px rgb(25 224 122 / .85);
}

/* 9. Social card (only built when the footer has social links). */
html body.gm-sidebar-layout > aside#amSidebar .am-sb-social {
  margin: 14px 10px 10px;
  padding: 12px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .20);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .055), rgb(255 255 255 / .015)),
    linear-gradient(135deg, rgb(6 38 20 / .65), rgb(3 20 10 / .78));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), 0 10px 24px -6px rgb(0 0 0 / .36);
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-social .am-sb-sec {
  margin: 0 0 10px;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-social-row {
  display: flex;
  gap: 8px;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-social-a {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  border: 1px solid rgb(255 255 255 / .10);
  border-radius: 13px;
  background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  color: rgb(255 255 255 / .92);
  text-decoration: none;
}
html body.gm-sidebar-layout > aside#amSidebar .am-sb-social-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgb(16 180 97 / .14);
  color: #6df2a8;
  font-size: 16px;
}

/* Hover (real pointers): crisp emerald glass glow, zero dimming. */
@media (hover: hover) {
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-item:hover {
    border-color: rgb(var(--am-accent-bright-rgb) / .42);
    background:
      linear-gradient(145deg, rgb(255 255 255 / .085) 0%, rgb(255 255 255 / 0) 55%),
      linear-gradient(135deg, rgb(14 96 50 / .52) 0%, rgb(5 36 18 / .72) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 12px 24px -6px rgb(0 0 0 / .38), 0 0 16px rgb(16 180 97 / .18);
    color: #fff;
    opacity: 1;
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-item:hover .am-sb-ico {
    transform: scale(1.06);
    border-color: rgb(var(--am-accent-bright-rgb) / .55);
    background:
      radial-gradient(circle at 30% 25%, rgb(255 255 255 / .26), transparent 60%),
      linear-gradient(145deg, rgb(25 224 122 / .36), rgb(7 66 33 / .82));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 0 14px rgb(25 224 122 / .30);
    color: #fff;
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-item:hover .am-sb-chev {
    color: #5ff5a3;
    opacity: 1;
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"]:hover {
    background:
      linear-gradient(145deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 50%),
      linear-gradient(135deg, rgb(20 148 76 / .68) 0%, rgb(7 58 29 / .86) 100%);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-chip:hover {
    border-color: rgb(var(--am-accent-bright-rgb) / .58);
    background: linear-gradient(145deg, rgb(25 224 122 / .32), rgb(8 64 33 / .72));
    color: #fff;
    box-shadow: 0 0 14px rgb(16 180 97 / .28);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-toggle:hover {
    border-color: rgb(var(--am-accent-bright-rgb) / .38);
    background: linear-gradient(145deg, rgb(16 180 97 / .18), rgb(6 44 22 / .55));
    color: #fff;
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-search:hover {
    border-color: rgb(var(--am-accent-bright-rgb) / .46);
    background:
      linear-gradient(145deg, rgb(255 255 255 / .10), rgb(255 255 255 / .03)),
      linear-gradient(135deg, rgb(10 56 30 / .75), rgb(4 28 14 / .82));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 10px 22px -6px rgb(0 0 0 / .42), 0 0 16px rgb(16 180 97 / .18);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo:hover {
    border-color: rgb(var(--am-accent-bright-rgb) / .65);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 18px 40px rgb(0 0 0 / .52), 0 0 24px rgb(16 180 97 / .28);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-promo:hover .am-sb-promo-art {
    transform: scale(1.05);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus:hover {
    border-color: rgb(var(--am-accent-bright-rgb) / .62);
    background:
      linear-gradient(145deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 48%),
      linear-gradient(135deg, rgb(14 88 46 / .86) 0%, rgb(6 44 22 / .92) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 14px 28px -6px rgb(0 0 0 / .45), 0 0 18px rgb(16 180 97 / .24);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-bonus:hover .am-sb-bonus-go {
    color: #fff;
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-social-a:hover {
    border-color: rgb(var(--am-accent-bright-rgb) / .48);
    background: linear-gradient(145deg, rgb(16 180 97 / .22), rgb(6 44 22 / .65));
    color: #fff;
    box-shadow: 0 8px 18px -4px rgb(0 0 0 / .36), 0 0 14px rgb(16 180 97 / .22);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-social-a:hover .am-sb-social-ico {
    background: rgb(25 224 122 / .28);
    color: #fff;
  }
}

/* ==== Drawer details (<= 991.98) ========================================= */
@media (max-width: 991.98px) {
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-head {
    background: none;
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-chips {
    gap: 12px;
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-search {
    height: 38px;
    border-color: transparent;
    border-radius: var(--am-r-12);
    background: var(--am-grad-item);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-search-t {
    color: rgb(255 255 255 / .45);
  }
}

/* ==== Desktop sidebar (storefront >= 992) ================================ */
@media (min-width: 992px) {
  html body.gm-sidebar-layout > aside#amSidebar {
    display: none;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar {
    z-index: 99;
    display: block;
    width: var(--am-sb-w);
    border-right-color: rgb(255 255 255 / .055);
    border-radius: 0;
    box-shadow: var(--am-shadow-chrome);
    transform: none;
    visibility: visible;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-logo-img {
    visibility: hidden;
  }

  /* ---- Rail (78px, SPEC §4.2) ---- */
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar {
    padding: 10px 0 120px;
    border-right-color: var(--am-line);
    box-shadow: 12px 0 34px rgb(0 0 0 / .35);
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar :is(.am-sb-logo, .am-sb-chips, .am-sb-search, .am-sb-promo, .am-sb-bonus, .am-sb-social) {
    display: none;
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-head {
    justify-content: center;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-toggle {
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-color: var(--am-line-green);
    background: var(--am-grad-band);
    box-shadow: 0 10px 20px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .03);
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar :is(.am-sb-toggle-t, .am-sb-lbl) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-body {
    padding: 0;
  }
  /* Section headings become 37x1 dividers (text kept for the group name). */
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-sec {
    width: 37px;
    height: 1px;
    margin: 12px auto 4px;
    background: var(--am-line-2);
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-shadow: none;
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-sec::before,
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-sec::after {
    display: none;
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-list {
    align-items: center;
    gap: 10px;
    padding: 0;
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-item {
    justify-content: center;
    gap: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    box-shadow: 0 14px 34px rgb(0 0 0 / .35), var(--am-sheen);
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-item[aria-current="page"] {
    box-shadow: 0 16px 28px rgb(0 0 0 / .36), 0 0 0 1px rgb(var(--am-accent-rgb) / .2);
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-ico {
    width: 24px;
    height: 24px;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 18px;
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-badge,
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-chev,
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar .am-sb-item[aria-current="page"]::before {
    display: none;
  }

  /* Rail tooltip (one fixed element, positioned by 11-sidebar.js). */
  html body.gm-sidebar-layout > .am-sb-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1201;
    box-sizing: border-box;
    max-width: 240px;
    padding: 7px 11px;
    overflow: hidden;
    border: 1px solid rgb(var(--am-accent-deep-rgb) / .38);
    border-radius: var(--am-r-sm);
    background:
      radial-gradient(280px 100px at 12% 0%, rgb(2 83 40 / .16), transparent 64%),
      rgb(4 13 8 / .96);
    box-shadow: 0 14px 28px rgb(0 0 0 / .42);
    color: var(--am-text);
    font: 500 12px/1.4 var(--am-font);
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
  }
  html[data-am-sb="rail"] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > .am-sb-tip[data-am-on] {
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 991.98px) {
  html body.gm-sidebar-layout > .am-sb-tip {
    display: none;
  }
}

/* ==== Motion (opt-in) ====================================================== */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout > aside#amSidebar :is(.am-sb-item, .am-sb-chip, .am-sb-toggle, .am-sb-search, .am-sb-promo, .am-sb-bonus, .am-sb-social-a) {
    transition: background-color var(--am-dur-3) var(--am-ease), border-color var(--am-dur-3) var(--am-ease), color var(--am-dur-3) var(--am-ease), box-shadow var(--am-dur-3) var(--am-ease), opacity var(--am-dur) var(--am-ease), transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout > aside#amSidebar :is(.am-sb-chev, .am-sb-bonus-go) {
    transition: color var(--am-dur-2) var(--am-ease), transform var(--am-dur-2) var(--am-ease);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"] {
    transform: translateY(-1px);
  }
  html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"] .am-sb-chev {
    transform: translateX(2px);
  }
  html body.gm-sidebar-layout > aside#amSidebar :is(.am-sb-item, .am-sb-promo, .am-sb-bonus):active {
    transform: translateY(1px);
  }
  html body.gm-sidebar-layout > .am-sb-tip {
    transition: opacity var(--am-dur) var(--am-ease), visibility 0s linear var(--am-dur);
  }
  html body.gm-sidebar-layout > .am-sb-tip[data-am-on] {
    transition: opacity var(--am-dur) var(--am-ease), visibility 0s;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout > aside#amSidebar :is(.am-sb-item, .am-sb-chip, .am-sb-promo, .am-sb-bonus):hover {
    transform: translateY(-1px);
  }
  html body.gm-sidebar-layout > aside#amSidebar :is(.am-sb-item, .am-sb-bonus):hover :is(.am-sb-chev, .am-sb-bonus-go) {
    transform: translateX(2px);
  }
}
/* Drawer slide (phones/tablets). */
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout > aside#amSidebar {
    transition: transform .45s cubic-bezier(.2, .9, .2, 1), visibility 0s linear .45s;
  }
  html[data-am-drawer-open] body.gm-sidebar-layout > aside#amSidebar {
    transition: transform .45s cubic-bezier(.2, .9, .2, 1), visibility 0s;
  }
}
/* Rail toggle: width / offsets animate for the one user toggle only. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  html[data-am-sb-anim] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) {
    transition: padding-left var(--am-dur) var(--am-ease);
  }
  html[data-am-sb-anim] body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > aside#amSidebar {
    transition: width var(--am-dur) var(--am-ease), padding var(--am-dur) var(--am-ease);
  }
}
html[data-am-sb-boot] body.gm-sidebar-layout,
html[data-am-sb-boot] body.gm-sidebar-layout > :is(aside#amSidebar, header.topbar, .gm-topbar-announce) {
  transition: none !important;
}

/* ---- 12-cards.css ---- */
/*
 * v3 (2026-10-30, SPEC §7 step 5): Casibow-green card tokens (SPEC §4.10,
 * §4.13 fav chip). v2's flat card (no border, tone lift, radial scrim +
 * play disc on hover) is retired on the home cards; the scrim token stays
 * for the catalog's focus-only disc.
 *
 * Shared card 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
 * Only custom properties live here (no selectors that match anything), so
 * each family keeps its own rules, geometry and cascade notes. Nothing
 * outside this layer reads --am-card-*, so declaring them on the body
 * prefix is safe on member pages too.
 *
 * Card (v3): hairline frame (--am-card-line), #0c2418 placeholder fill,
 * hover = translateY(--am-card-lift) + --am-card-line-hover border.
 * 2026-10-31 (owner: "biraz modern ol"), home cards only: r12 (was r10,
 * now the catalog's and the provider tiles' radius), a soft resting drop
 * shadow, and a richer hover: lift -4px, the green border plus a soft
 * green glow ring (--am-card-ring rgb(16 180 97 / .35) + a 26px glow,
 * --am-card-shadow-hover), cover zoom (--am-card-zoom 1.06), a soft dark
 * pool (--am-card-scrim-hover) under a 42px green play disc
 * (--am-card-play-*) and one light sweep (--am-card-sweep). The rules
 * and the motion gating live in 20-home.css; nothing else reads these.
 *
 * Favourite chip (.gm-fav, SPEC §4.10): 28px circle, 6px from the top-right
 * corner, rgba(0,0,0,.5) with a 13px white heart; active = --am-grad fill
 * with a white heart and the CTA rim. The hit area stays 44px through each
 * family's transparent ::before (inset -8px on the 28px chip).
 *
 * Final round (2026-10-30): the never-consumed v2/v3 tokens are retired
 * (--am-card-gap, -bg-hover, -shadow-hover, -play-shadow, the "view all"
 * pill set --am-viewall-* and the section-head set --am-sechead-*: each
 * partial writes those values itself). No breakpoints.
 */
html body.gm-sidebar-layout {
  --am-card-r: var(--am-r-12);                 /* home card 18px (= catalog card, provider tile) */
  --am-card-bg: var(--am-surface-2);           /* #0c2418 placeholder / cover fill */
  --am-card-line: rgb(255 255 255 / .09);      /* soft glass rim */
  --am-card-line-hover: var(--am-line-hover);  /* 1px green .52 */
  --am-card-lift: -4px;
  --am-card-shadow: 0 10px 24px -4px rgb(0 0 0 / .42), inset 0 1px 0 rgb(255 255 255 / .12);
  --am-card-ring: rgb(52 216 122 / .38);
  --am-card-shadow-hover: 0 0 0 1px var(--am-card-ring), 0 18px 36px -4px rgb(0 0 0 / .56), 0 0 28px rgb(16 180 97 / .25), inset 0 1px 0 rgb(255 255 255 / .22);
  --am-card-zoom: 1.055;
  --am-card-scrim-hover: radial-gradient(circle closest-side at 50% 42%, rgb(var(--am-bg-rgb) / .34), rgb(var(--am-bg-rgb) / 0));   /* a soft pool behind the disc; the title stays bright */
  --am-card-play-size: 42px;
  --am-card-play-bg: var(--am-grad);
  --am-card-play-shadow: 0 8px 22px rgb(2 83 40 / .55), 0 0 0 5px rgb(16 180 97 / .18), inset 0 1px 0 rgb(255 255 255 / .28);
  --am-card-sweep: linear-gradient(105deg, rgb(255 255 255 / 0) 28%, rgb(255 255 255 / .09) 42%, rgb(255 255 255 / .22) 50%, rgb(255 255 255 / .09) 58%, rgb(255 255 255 / 0) 72%);

  /* Favourite chip. */
  --am-card-fav-size: 28px;
  --am-card-fav-inset: 6px;
  --am-card-fav-icon: 13px;
  --am-card-chip-bg: linear-gradient(145deg, rgb(255 255 255 / .18), rgb(0 0 0 / .48));
  --am-card-chip-bg-hover: linear-gradient(145deg, rgb(255 255 255 / .24), rgb(0 0 0 / .62));
  --am-card-chip-line: transparent;
  --am-card-chip-shadow: none;
  --am-card-chip-on: var(--am-grad);
  --am-card-chip-on-hover: var(--am-grad);
  --am-card-chip-on-line: var(--am-line-cta);
  --am-card-chip-on-line-hover: var(--am-accent);
  --am-card-chip-on-shadow: 0 4px 12px rgb(2 83 40 / .45);

  /* Focus-only play disc of the catalog cards (SPEC §4.13) and its pool. */
  --am-card-scrim: radial-gradient(circle closest-side at 50% 50%, rgb(var(--am-bg-rgb) / .42) 0%, rgb(var(--am-bg-rgb) / .16) 55%, rgb(var(--am-bg-rgb) / 0) 100%);
}

/* ---- 15-slider.css ---- */
/*
 * v3 (2026-10-30, SPEC §7 step 5, §4.6): Casibow-green hero frame. The v2
 * look (bare rounded image, 6px pill dots in a row reserved UNDER the
 * image, arrows beside the dots on desktop pointers) is retired:
 *  - frame on the viewport: r14 (r12 <=991), 1px rgba(2,83,40,.3),
 *    #071a10 fill, 0 18px 44px rgba(0,0,0,.5); full width of its page
 *    column (the page partial places it: home is full-bleed <=991);
 *  - aspect: the art's own 1038/358 (D: the reference frame is 1920/624;
 *    ours never crops the baked CTAs), on the content box, so the 1px
 *    border does not shift the art's ratio;
 *  - pager INSIDE the image (bottom 12, 9 <=991, 6 <=575, centred): a
 *    dark pill (rgba(4,13,8,.5), padding 6 10, gap 6) of 18x3 lines, the
 *    active one 26x3 --am-grad-line with a soft green glow; <=575 a
 *    smaller pill (padding 4 8) of 14x3 lines (active 20) on a 24px pitch;
 *  - prev/next arrows at every width (15-slider.js): 38x38 (32 <=991, 28
 *    <=575 on a lighter glass), left/right 12 (8), vertically centred,
 *    r10, dark glass with a white .14 rim, 18px chevrons; hover green.
 *    The phone art is only ~136px tall: the smaller controls cover less
 *    of the baked headline and icon row.
 *
 * Promo slider: the shared .gm-slider component (aqua-slider.js), one look
 * on every storefront page that renders it (home; /slot and /livecasino
 * hide it in v3, owner decision 4, 30-catalog.css).
 *
 * 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 partial (20-home: full column width at
 * >=992, full-bleed below). The theme's 1038px cap is dropped.
 *
 * 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 the intrinsic 1038/358 ratio (the CTA art is baked
 *    into the images): never a fixed height.
 *  - The pager (.gm-slide-lines/.gm-slide-line, one button per slide,
 *    .active + aria-current) is created by the script inside the viewport;
 *    the viewport is now positioned, so the pager sits on the image.
 *    Each 3px line keeps a 24x24 hit area (a transparent ::before on a
 *    24px pitch, WCAG 2.5.8), so the lines stay tappable.
 *  - .gm-slider-status (sr-only, theme) resolves against .gm-slider.
 *  - The viewport's pointer handlers ignore buttons, so the pager and the
 *    arrows never start a drag.
 *
 * Breakpoints: base (<=991) / 576 / 992 (every property is set at base, so
 * the theme's 600 band never mixes in; <=575 only resizes the controls).
 * Motion only inside (prefers-reduced-motion: no-preference).
 */

/* ---------- Tokens ---------- */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider {
  --am-slider-r: 18px;
  --am-slider-after: 16px;           /* to the next block (SPEC §4.6) */
  --am-slider-pager-b: 9px;
  --am-slider-nav: 32px;
  --am-slider-nav-x: 8px;
  --am-slider-line: 18px;
  --am-slider-line-on: 26px;
  --am-slider-line-gap: 6px;
  --am-slider-pager-pad: 6px 10px;
}
/* Phones (<=575): the 2.9:1 art is ~136px tall, so the controls shrink and
   step back: 28px glass arrows, a smaller pager pill at the foot
   (14px lines on a 24px pitch so each keeps a 24x24 hit area). */
@media (max-width: 575.98px) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider {
    --am-slider-pager-b: 6px;
    --am-slider-nav: 28px;          /* x stays 8: the 44px hit area ends at the frame edge */
    --am-slider-line: 14px;
    --am-slider-line-on: 20px;
    --am-slider-line-gap: 10px;
    --am-slider-pager-pad: 4px 8px;
  }
}
@media (min-width: 992px) {
  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-pager-b: 12px;
    --am-slider-nav: 38px;
    --am-slider-nav-x: 12px;
  }
}

/* ---------- Frame ----------
   The section is a bare positioned box (the arrows resolve against it);
   the frame (radius, rim, fill, shadow) is the viewport, which is also the
   rounded clip of the track the script drags. */
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 .gm-slider-viewport {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  box-sizing: content-box;
  aspect-ratio: 1038 / 358;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--am-accent-deep-rgb) / .3);
  border-radius: var(--am-slider-r);
  background: var(--am-surface-1);
  box-shadow: var(--am-shadow-hero);
}
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;
}
/* Slide images match the 1038/358 (~2.9:1) frame and fill the rounded
   viewport edge-to-edge without blurry side bands. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide img,
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide img[data-am-fit="cover"] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* v1 drew a hairline ring here (::after over the slides); the v3 rim is
   the viewport border, so the pseudo-element stays 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), var(--am-shadow-hero);
}

/* ---------- Pager (inside the image) ----------
   One nowrap row; max-width keeps an unusually long slide list inside the
   frame (overflow clipped, 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: var(--am-slider-pager-b);
  left: 0;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--am-slider-line-gap);
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 2 * var(--am-slider-nav) - 4 * var(--am-slider-nav-x));
  height: auto;
  margin: 0 auto;
  padding: var(--am-slider-pager-pad);
  overflow: clip;
  overflow-clip-margin: 10px;
  border: 0;
  border-radius: var(--am-r-pill);
  background: rgb(4 13 8 / .5);
  pointer-events: none;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line {
  position: relative;
  display: block;
  flex: none;
  box-sizing: border-box;
  width: var(--am-slider-line);
  min-width: 0;
  height: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgb(255 255 255 / .34);
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  transition: none;
}
/* 24x24 hit area per line (WCAG 2.5.8): line + gap = a 24px pitch, the
   areas meet and never overlap (the active line's is wider). */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line::before {
  content: "";
  position: absolute;
  inset: -10.5px calc(var(--am-slider-line-gap) / -2);
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line::after {
  content: none;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line.active {
  width: var(--am-slider-line-on);
  background: var(--am-grad-line);
  box-shadow: 0 0 14px rgb(var(--am-accent-rgb) / .45);
}
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) / .9);
  outline-offset: 3px;
}
@media (hover: hover) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .gm-slide-line:not(.active):hover {
    background: rgb(255 255 255 / .7);
  }
}

/* ---------- Prev/next arrows (15-slider.js, every width) ---------- */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav {
  position: absolute;
  top: 50%;
  bottom: auto;
  z-index: 4;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--am-slider-nav);
  height: var(--am-slider-nav);
  margin: calc(var(--am-slider-nav) / -2) 0 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 50%;
  background: rgb(4 13 8 / .58);
  box-shadow: 0 4px 12px rgb(0 0 0 / .35);
  color: rgb(255 255 255 / .86);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav i {
  font-size: inherit;
  line-height: 1;
}
/* 44px touch target around the 32px (28px) phone arrow. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav::after {
  content: "";
  position: absolute;
  inset: calc((44px - var(--am-slider-nav)) / -2);
  border-radius: inherit;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-prev {
  right: auto;
  left: var(--am-slider-nav-x);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-next {
  right: var(--am-slider-nav-x);
  left: auto;
}
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);
}
@media (hover: hover) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav:hover {
    border-color: rgb(var(--am-accent-rgb) / .6);
    background: rgb(var(--am-accent-deep-rgb) / .5);
    color: var(--am-text);
  }
}
@media (max-width: 991.98px) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav {
    font-size: 15px;
  }
}
@media (max-width: 575.98px) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .gm-slider .am-slider-nav {
    border-color: rgb(255 255 255 / .1);
    background: rgb(4 13 8 / .35);
    box-shadow: none;
    font-size: 13px;
  }
}

/* ---------- 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-grad-panel);
}
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: 700;
  line-height: 1.15;
  letter-spacing: .01em;
}
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: 576px) {
  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: 992px) {
  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) ----------
   The active line grows (width/background .22s) and the arrows ease their
   colours; the slide cross-fade is the theme's (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 {
    transition: width var(--am-dur-2) var(--am-ease), background-color var(--am-dur-2) var(--am-ease), box-shadow var(--am-dur-2) 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 ---- */
/*
 * v3 (2026-10-30, SPEC §7 step 5): Casibow-green home composition (SPEC
 * §4.7, §4.9, §4.10, §4.24). Retired v2 parts: the gap-spaced flat column,
 * the bare emblem tiles with lift + zoom, the phone rail / 576-991 grid /
 * desktop rail-with-arrows split, the flat cards with the radial scrim +
 * play disc, the 'Tümü' pill heads.
 *
 * Home page content (/, aqua-home.php): column + rhythm, category tiles,
 * winners panel, titled game panels and the home game card. Header,
 * sidebar, footer, dock and FAB belong to the chrome partials; the hero
 * component (frame, pager, arrows) is 15-slider.css/.js, the search + chip
 * row (nav.am-lobby, built by 25-lobby.js) is 25-lobby.css (its margins
 * are set here, with the rest of the rhythm), the card tokens 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 .gm-game-cover background.
 *
 * Column (SPEC §3.3, §4.24): main is min(100%, --am-container) wide and
 * centred in the content column (x = --am-sb-w ... vw at >=992), no
 * padding. Hero full width (full-bleed <=991), every other block
 * margin-inline --am-inset (44 / 8). DOM order is the drawn order (25-lobby
 * inserts the chip row before the first panel; the v2 games-first reorder
 * is retired), so the rhythm is plain margins, gap before each block:
 *                     >=992   <=991
 *   hero -> tiles      32      40     (the tiles' margin; the slider's is 0)
 *   -> winners          32      14     (only with server data)
 *   -> search + chips   40      30     (25-lobby.js)
 *   -> first panel      28      16
 *   -> next panels      22      18
 *   -> footer           40      40     (the footer's margin-top, 50-footer)
 *
 * Tiles (§4.7, owner decision 2): reference-style dark-green 2:1 card
 * built in CSS (a::before panel, inset 17% 0 0 0), the Aquabet emblem
 * (original colours) bottom-right overflowing the panel top, a two-line
 * label + "Keşfet" pill from 20-home.js (span.am-cat-label, aria-hidden),
 * and a periodic shine (span.am-cat-fx::after, clipped to the panel,
 * no-preference only). D: emblem 104% of the tile height (SPEC 112%) and
 * the label sized from the tile (7.5cqi, 12-27px; the tile is an
 * inline-size container) instead of 1.4vw (min 14), so our square
 * emblems (56% of a 2:1 tile at 112%) never cover the label on the
 * 155-163px tiles at 992-1024. Hover: emblem brightness 1.08, no lift.
 *
 * Titled panels (§4.9): every section.gm-row-section (Popüler, Canlı
 * Casino; members' Favorilerim / Son Oynananlar) is a flex-wrap panel:
 * head column (flex 1 1 --am-panel-head-w, glow, two-tone uppercase h2,
 * outlined CTA, then the rail arrows + progress line) + a card rail (flex
 * 999 1 380px). Below 612px panel width the rail wraps under the head, and
 * a container query turns the head into one row (title left, CTA right; no
 * arrows: swipe + loop). 20-home.js wraps the h2's last word in
 * span.am-hl and the words before it in a nowrap span.am-hl-lead
 * ("POPÜLER SLOT / OYUNLARI" breaks like the reference) and relabels the
 * CTA ("Tüm Slotlar" / "Tüm Masalar" / "Tümü"). Final round: every head
 * (and 22-extras' providers head) shares one width, --am-panel-head-w =
 * the widest head's min-content (the Canlı title with its live dot; 230px
 * up to ~1100, 252px @1440), so the rails of all stacked panels start at
 * the same x (they stepped 546 / 556 / 545 @1440 before).
 *
 * Sliding rails (2026-10-31, owner: "oyunlar kayacak, kenarlar fadeli";
 * D: deviates from §4.9's 2-row grid): ONE row of cards at every width
 * (12 admin-curated games, so the rail always has real overflow), cards
 * clamp(118px, 12.5vw, 148px) wide (slots 148x188 / live 148x148 on
 * desktop, 118x150 / 118x118 on phones). The rail is a [data-am-rail] of
 * the RAIL CONTRACT (20-home.js header; the generic rules below serve
 * 22-extras' tracks too). Later the same day (owner: "oto dönsün,
 * üstüne gelince dursun, biraz modern ol"): LOOP mode, an endless
 * compositor loop (aria-hidden inert clones appended, every item moved by
 * its own `translate`, ~28 / 25 px/s, 24 / 21 on phones), soft stop on
 * hover, scrub by drag / swipe / horizontal wheel, arrows page round the
 * loop, both edge fades always on (48px >=768, 32px below and on narrow
 * side-by-side rails: panel < 760px, i.e. 768-~1110), the progress line
 * runs round its track as a loop indicator. Under prefers-reduced-motion:
 * reduce (and when nothing overflows) NATIVE mode: a plain horizontal
 * scroller with proximity snap, fades ramped with the scroll position,
 * arrows disabled at the ends. 36px glass prev/next buttons (40px on
 * touch screens) + the indicator sit in the head (side-by-side layout
 * only); the head reserves that row before the deferred JS inserts it
 * (scripting: enabled), so nothing shifts.
 *
 * Home card (§4.10, owner "biraz modern ol"): r12, 1px white .06,
 * #0c2418, soft drop shadow, own cover ratio (--ar: slots 330/420, live
 * 300/300). Hover (fine pointers; clones via [data-am-hover]): lift -4px,
 * green border + soft green glow ring (rgb(16 180 97 / .35) + 26px glow),
 * cover zoom 1.06, a green play disc (above the title, on a soft dark pool) fading
 * in, and one light sweep across the card. Keyboard focus shows the ring
 * + scrim + disc. Under reduced motion the colour, ring, scrim and disc
 * still change, nothing moves. Favourite 28px chip, 44px hit area.
 *
 * Contracts kept: aqua-favs.js (Favorilerim sections hidden with inline
 * style.display: no display !important on sections or cards; the cards'
 * inline handlePlay handlers are never rebound), the cover's
 * aspect-ratio:var(--ar) !important (theme), 60-motion reveal/press.
 * Breakpoints: base (<=991) / 576 (chip row, 25-lobby) / 768 (rail fade
 * 32 -> 48, loop speed) / 992 / container am-panel 610px (stacked head)
 * and 760px (narrow rail: fade 32) / pointer: coarse (40px arrows).
 * Motion only inside (prefers-reduced-motion: no-preference); the loop
 * itself is JS (Web Animations) and never built under reduce.
 */

/* ---------- Local tokens ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
  --am-home-tiles-gap: 7px;
  --am-home-gap-tiles: 40px;
  --am-home-gap-wins: 14px;
  --am-home-gap-lobby: 30px;
  --am-home-gap-panel: 16px;
  --am-home-gap-panel-2: 18px;
  --am-home-rail-col: clamp(118px, 12.5vw, 148px);
  --am-home-rail-gap: clamp(10px, .85vw, 12px);
  --am-cat-emblem-h: 104%;
  /* Titled-panel head column, shared with 22-extras' providers panel so
     every panel's rail starts at the same x (final round 2026-10-31).
     The width is the widest head's min-content, written in the same units
     that size it: 2 x padding + the "CANLI CASİNO" title with its live dot
     (9px + 7.65em; "POPÜLER SLOT" is 7.61em) + 1px, never below 230px
     (230 up to ~1100, 239 @1200, 247 @1280, 252 @1440, 253 from 1467).
     min-width:auto stays as the safety net for a longer title. */
  --am-panel-pad: clamp(14px, 1.5vw, 22px);
  --am-panel-title-fs: clamp(18px, .9vw + 14.5px, 26px);
  --am-panel-head-w: max(230px, calc(2 * var(--am-panel-pad) + 10px + 7.66 * var(--am-panel-title-fs)));
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
    --am-home-tiles-gap: 8px;
    --am-home-gap-tiles: 32px;
    --am-home-gap-wins: 32px;
    --am-home-gap-lobby: 40px;
    --am-home-gap-panel: 28px;
    --am-home-gap-panel-2: 22px;
  }
}
/* ---------- Column + vertical rhythm ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  width: min(100%, var(--am-container));
  min-width: 0;
  max-width: none;
  margin: 0 auto;
  padding: 0;       /* the footer band's own 40px margin-top is the last gap (50-footer.css) */
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > * {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 var(--am-inset);
}
/* main is a flex column, so margins add: the hero sits inside --am-inset
   with a top gap so its rounded frame is clearly visible all around. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-slider {
  margin: 10px var(--am-inset) 0;
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-slider {
    margin: 16px var(--am-inset) 0;
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip {
  margin-top: var(--am-home-gap-tiles);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins {
  margin-top: var(--am-home-gap-wins);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby {
  margin-top: var(--am-home-gap-lobby);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section {
  margin-top: var(--am-home-gap-panel);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section ~ .gm-row-section {
  margin-top: var(--am-home-gap-panel-2);
}

/* ---------- Category tiles (Slot / Canlı Casino / Spor / Bonuslar) ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  justify-items: stretch;
  margin-top: 18px;
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip picture,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip img:not(.am-cat-custom-art) {
  display: none !important;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-height: 86px;
  margin: 0;
  padding: 14px 16px;
  aspect-ratio: auto;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .28);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / 0) 46%),
    linear-gradient(125deg, rgb(4 24 12 / .90) 0%, rgb(7 44 23 / .86) 55%, rgb(13 84 44 / .82) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 12px 28px -6px rgb(0 0 0 / .42);
  color: var(--am-text);
  filter: none;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, box-shadow .28s ease;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a::before {
  display: none;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover {
    transform: translate3d(0, -3px, 0);
    border-color: rgb(var(--am-accent-bright-rgb) / .64);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 18px 36px -6px rgb(0 0 0 / .52), 0 0 24px rgb(16 180 97 / .22);
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-wm {
  position: absolute;
  right: -8px;
  bottom: -14px;
  z-index: 0;
  font-size: 74px;
  line-height: 1;
  color: rgb(var(--am-accent-bright-rgb) / .07);
  transform: rotate(-14deg);
  pointer-events: none;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .35s ease;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover .am-cat-wm {
    transform: rotate(-6deg) scale(1.08);
    color: rgb(var(--am-accent-bright-rgb) / .12);
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-orb {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .42);
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / .24), transparent 58%),
    linear-gradient(145deg, rgb(22 198 108 / .32), rgb(6 56 28 / .72));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 8px 18px rgb(0 0 0 / .32), 0 0 16px rgb(16 180 97 / .20);
  color: #5ff5a3;
  font-size: 19px;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover .am-cat-orb {
    transform: scale(1.06);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .36), 0 10px 22px rgb(0 0 0 / .38), 0 0 22px rgb(16 180 97 / .36);
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-label {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 3px;
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .32);
  background: rgb(16 180 97 / .14);
  color: #7bf7b4;
  font: 700 9.5px/1.25 var(--am-font);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ce38b;
  box-shadow: 0 0 8px #3ce38b;
  animation: am-cat-pulse 1.8s ease-in-out infinite;
}
@keyframes am-cat-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-title {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.15;
  white-space: nowrap;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-l1,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-l2 {
  display: inline;
  color: var(--am-text);
  font: 800 clamp(14.5px, 1.1vw, 17.5px)/1.15 var(--am-font);
  letter-spacing: -.01em;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgb(0 0 0 / .35);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-l2 {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(255 255 255 / .64);
  font: 500 11px/1.3 var(--am-font);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-arrow {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .14);
  background: rgb(255 255 255 / .06);
  color: rgb(255 255 255 / .82);
  font-size: 11px;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover .am-cat-arrow {
    transform: translateX(3px);
    border-color: rgb(var(--am-accent-bright-rgb) / .55);
    background: rgb(16 180 97 / .25);
    color: #fff;
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a[data-has-custom-art="1"] .am-cat-wm {
  display: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-art-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 68px;
  max-width: 96px;
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip img.am-cat-custom-art {
  display: block !important;
  height: 68px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / .48));
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), filter .32s ease;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover img.am-cat-custom-art {
    transform: translateY(-3px) scale(1.07);
    filter: drop-shadow(0 12px 20px rgb(16 180 97 / .32));
  }
}
@media (max-width: 575.98px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a {
    gap: 10px;
    min-height: 78px;
    padding: 12px 13px;
    border-radius: 16px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-orb {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 17px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-sub,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-arrow {
    display: none;
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-fx::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0;
  width: 45%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .10) 26%, rgb(255 255 255 / .42) 50%, rgb(255 255 255 / .10) 74%, transparent);
  opacity: .45;
  transform: translateX(-220%) rotate(-20deg);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:focus-visible {
  outline: none;
  box-shadow: var(--am-focus), var(--am-sheen);
}

/* ---------- Quick feature strip (Bonus Talep / Turnuvalar / VIP / Yatırım) ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / .08);
  background:
    linear-gradient(145deg, rgb(255 255 255 / .055), rgb(255 255 255 / .015)),
    rgb(6 26 15 / .72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), 0 8px 20px -6px rgb(0 0 0 / .34);
  color: var(--am-text);
  text-decoration: none;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), border-color .24s ease, background-color .24s ease, box-shadow .24s ease;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard:hover {
    transform: translateY(-2px);
    border-color: rgb(var(--am-accent-bright-rgb) / .45);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 14px 26px -6px rgb(0 0 0 / .44), 0 0 18px rgb(16 180 97 / .14);
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-ico {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .28);
  background: rgb(16 180 97 / .14);
  color: #5ff5a3;
  font-size: 15px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-t {
  color: #fff;
  font: 700 13px/1.2 var(--am-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgb(16 180 97 / .20);
  color: #7bf7b4;
  font: 700 9.5px/1.3 var(--am-font);
  letter-spacing: .03em;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-s {
  color: rgb(255 255 255 / .56);
  font: 500 11px/1.25 var(--am-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-go {
  flex: 0 0 auto;
  color: rgb(255 255 255 / .42);
  font-size: 11px;
  transition: transform .22s ease, color .22s ease;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard:hover .am-qcard-go {
    transform: translateX(2px);
    color: var(--am-accent-bright);
  }
}
@media (max-width: 575.98px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard {
    padding: 10px 11px;
    gap: 9px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-badge,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .am-quick-strip .am-qcard-go {
    display: none;
  }
}

/* ---------- Recent winners (renders only with server data) ----------
   --am-grad-panel r18 panel; head = 3x16 glowing bar + uppercase title
   (the template's trophy icon gives way to the bar). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins {
  overflow: hidden;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-18);
  background: var(--am-grad-panel);
  box-shadow: var(--am-shadow-2);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 0;
  color: var(--am-text);
  font: 700 14px/1 var(--am-font);
  letter-spacing: .05em;
  text-transform: uppercase;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-head::before {
  content: "";
  flex: none;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--am-accent-bright), var(--am-accent-deep));
  box-shadow: 0 0 10px rgb(var(--am-accent-bright-rgb) / .55);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-head i {
  display: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-view {
  padding: 12px 0 16px;
  -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: 8px;
  margin-right: 32px;
  color: var(--am-text-2);
  font: 400 13px/1.4 var(--am-font);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-win i {
  color: var(--am-accent-bright);
}
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-bright);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Phones and tablets: 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 (max-width: 991.98px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-wins .gm-wins-head {
    padding: 14px 14px 0;
  }
  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: 14px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #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;
  }
}

/* ---------- Titled game panels ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section {
  container: am-panel / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .065);
  border-radius: 26px;
  background: var(--am-grad-titled);
  box-shadow: var(--am-shadow-2);
}
/* Head column: glow, centred title + CTA. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head {
  display: flex;
  flex: 1 1 var(--am-panel-head-w);   /* one width for every panel (local tokens) */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 14px clamp(12px, 1.4vw, 18px);
  box-sizing: border-box;
  min-width: auto;   /* safety net: a longer title still sizes its own head */
  min-height: 0;
  margin: 0;
  padding: var(--am-panel-pad);
  background: var(--am-grad-titled-glow);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section.gm-masa-section > .gm-row-head {
  background: var(--am-grad-titled-glow-live);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2 {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--am-text);
  font: 700 var(--am-panel-title-fs)/1.08 var(--am-font);
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2::before,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2::after {
  content: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2 .am-hl {
  color: var(--am-accent);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2 .am-hl-lead,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2[data-am-hl-one] {
  white-space: nowrap;   /* short two-word titles stay on one line ("CANLI CASİNO") */
}
/* A heading the chip row moved keyboard focus to: no ring on the h2. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2:focus {
  outline: none;
}
/* Outlined CTA (relabelled by 20-home.js). */
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: 10px;
  box-sizing: border-box;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0 14px 0 16px;
  border: 1px solid var(--am-line-accent);
  border-radius: var(--am-r-pill);
  background: linear-gradient(145deg, rgb(255 255 255 / .10) 0%, rgb(16 180 97 / .18) 100%);
  box-shadow: var(--am-sheen), 0 6px 16px rgb(0 0 0 / .24);
  color: var(--am-text);
  font: 600 12px/1 var(--am-font);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* 44px touch target around the 34.5px button. */
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: -5px -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;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all .fa-angle-right::before {
  content: "\f054";   /* chevron-right, the reference's glyph */
}
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);
  text-decoration: none;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all:hover {
    border-color: rgb(var(--am-accent-rgb) / .6);
    background: var(--am-accent-deep);
  }
}
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);
}

/* Arrow host hidden: rails are scrolled / dragged manually without arrow buttons. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head > .am-rail-nav {
  display: none !important;
}

/* Card rail: ONE row, column flow, scrolls on x (layout only; the
   scroller skin is the RAIL CONTRACT block below, [data-am-rail] from
   20-home.js). Side-by-side: 16px top/bottom and end, 4px start (focus
   ring); the row is centred when the head is taller (live panel). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row {
  display: grid;
  flex: 999 1 380px;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: auto;
  grid-auto-columns: var(--am-home-rail-col);
  align-items: start;
  align-content: center;
  justify-content: start;
  gap: var(--am-home-rail-gap);
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 16px 16px 16px 4px;
}
/* Without JS (no [data-am-rail]): the same skin with a fixed right fade,
   native proximity snap, and a thin scrollbar for mice on desktop. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row:not([data-am-rail]) {
  --am-rail-fade: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--am-rail-fade);
  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%);
}
@media (min-width: 768px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row:not([data-am-rail]) {
    --am-rail-fade: 48px;
  }
}
@media (max-width: 991.98px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row:not([data-am-rail])::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row:not([data-am-rail]) {
    scrollbar-width: thin;
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row > .gm-game {
  scroll-snap-align: start;
}
/* A drag never presses the card it started on (60-motion press-in). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row[data-am-drag] > .gm-game:active {
  animation: none;
  transform: none;
}
/* Narrow panel (phones): head = one row over a full-width rail. */
@container am-panel (max-width: 610px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head {
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px 12px;
    padding: 14px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head h2 {
    flex: 0 1 auto;
    font-size: 18px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all {
    gap: 6px;
    height: 32px;
    padding: 0 8px 0 10px;
    font-size: 11px;
  }
  /* Cards line up with the 14px head padding (4px top: focus ring). */
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row {
    padding: 4px 14px 14px;
  }
}
/* Narrow side-by-side rail (992-~1110, tablets): the 48px fades would
   cover a quarter of a ~400-520px rail, so they stay 32px until the rail
   is ~520px wide (panel 760). 20-home.js reads the value on resize. */
@container am-panel (width > 610px) and (width < 760px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row {
    --am-rail-fade: 32px;
  }
}

/* ---------- Rails: RAIL CONTRACT skin (20-home.js) ----------
   Any [data-am-rail] in the storefront roots: the home panel rails above
   and 22-extras' tracks. Scroller skin only; the track's owner sets its
   layout (display, gap, padding, item size) and may override
   --am-rail-fade. Mask: both edges, widths from the inline --am-rail-fl /
   --am-rail-fr that 20-home.js writes (defaults before it runs: no left
   fade, full right fade). Scrollbar hidden (the loop, swipe, drag and
   arrows replace it).
   NATIVE mode (reduced motion, data-am-rail-loop="off", nothing to
   overflow): a real scroller with proximity snap, scroll-padding = the
   fade, fades ramped with the scroll position by the JS.
   LOOP mode ([data-am-rail-x="loop"]): a clip box, not a scroller. The
   items (originals + aria-hidden inert clones) move by their own
   `translate` on the compositor, so the rail never scrolls: overflow clip
   (hidden where clip is unsupported; the JS folds a focus scroll back
   into the loop), no snap, touch-action pan-y (a horizontal swipe reaches
   the scrub, the page still scrolls vertically) and both fades at full
   width. !important on overflow / snap: a track's owner may declare its
   own overflow for the native mode (22-extras' providers rail). */
/* The fade widths change while a native rail scrolls (every 4px of the
   first and last 32-48px). Registered as NON-inherited lengths, a write
   re-styles the rail element only; as plain custom properties every write
   re-styled the whole card subtree (measured on home @1440, 4x CPU
   throttle: ~19ms per write). Without @property support they stay
   ordinary inherited properties, same look. */
@property --am-rail-fl {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --am-rail-fr {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail] {
  --am-rail-fade: 32px;
  --am-rail-fr: var(--am-rail-fade);   /* before 20-home.js writes it: full right fade */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--am-rail-fade);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-rail-fl, 0px), #000 calc(100% - var(--am-rail-fr, var(--am-rail-fade))), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-rail-fl, 0px), #000 calc(100% - var(--am-rail-fr, var(--am-rail-fade))), transparent 100%);
}
@media (min-width: 768px) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail] {
    --am-rail-fade: 48px;
  }
}
/* With motion allowed the rail will loop (both fades); until the JS has
   laid it out (one frame after boot) it shows them already, so the left
   fade never pops in. */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail] {
    --am-rail-fl: var(--am-rail-fade);
  }
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail]::-webkit-scrollbar {
  display: none;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail] > * {
  scroll-snap-align: start;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-drag] {
  scroll-snap-type: none;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-rail-x="loop"] {
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior-x: auto;
  scroll-snap-type: none !important;
  touch-action: pan-y;
}
/* Seam: clone set n is shifted by n x the JS's --am-rail-seam (inline on
   the rail, at most 0.5px either way), so one turn is a whole number of
   px and every copy is drawn at its original's sub-pixel offset: the wrap
   is pixel-identical at fractional card pitches (1280 / 991). Relative
   `left` moves the box without touching the track (a margin would narrow
   a grid item); the items are positioned (home cards, provider tiles).
   Four sets cover every rail in use (one set on all of them today). */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-rail-x="loop"] > [data-am-clone] {
  left: var(--am-rail-seam, 0px);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-rail-x="loop"] > [data-am-clone="2"] {
  left: calc(2 * var(--am-rail-seam, 0px));
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-rail-x="loop"] > [data-am-clone="3"] {
  left: calc(3 * var(--am-rail-seam, 0px));
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-rail-x="loop"] > [data-am-clone="4"] {
  left: calc(4 * var(--am-rail-seam, 0px));
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-rail-on] {
    cursor: grab;
  }
  /* Over an (inert, so never :hover) clone: the link cursor its original
     would show. */
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-rail-on][data-am-over] {
    cursor: pointer;
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-drag] {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail][data-am-drag] > * {
    pointer-events: none;
  }
}

/* Arrows (button.am-rail-btn, inserted into any data-am-rail-arrows host):
   36px glass circles (white .09 -> .03 sheet, white .14 hairline, lit top
   edge, 10px backdrop blur; the reference's round nav language), green
   CTA fill + glow on hover, 44px hit area. Native mode only: dimmed and
   aria-disabled (still focusable) at the ends; the loop has no ends.
   Loop / progress indicator (span.am-rail-prog, only where the host
   provides one): a 4px inset track and a green bar. Native: the bar is
   the visible share and follows the scroll. Loop: the bar is the visible
   share of one turn and runs round the track once per turn on the
   compositor (20-home.js animates its `translate`); its ::before ghost,
   one track-width to the left (--am-rail-track, set by the JS), draws the
   part that has wrapped, so the bar leaves on the right and comes back on
   the left without a jump. A host whose rail has nothing to scroll
   ([data-am-rail-x="none"]) keeps its space, hidden.
   Touch screens (tablets 768-991 and up): 40px circles (--am-rail-btn,
   also the arrow host's height), the hit area stays 44px. */
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) {
  --am-rail-btn: 36px;
}
@media (pointer: coarse) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) {
    --am-rail-btn: 40px;
  }
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-btn {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: var(--am-rail-btn);
  height: var(--am-rail-btn, 36px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 6px 16px rgb(0 0 0 / .3);
  color: rgb(255 255 255 / .86);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-btn::after {
  content: "";
  position: absolute;
  inset: calc((var(--am-rail-btn) - 44px) / 2);   /* 44px hit area */
  border-radius: 50%;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-btn[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
}
@media (hover: hover) {
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-btn:not([aria-disabled="true"]):hover {
    border-color: var(--am-line-cta);
    background: var(--am-grad);
    box-shadow: var(--am-cta-shadow);
    color: var(--am-on-accent);
  }
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-btn:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-prog {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 28px;
  height: 4px;
  margin: 0 0 0 8px;
  overflow: hidden;
  border-radius: var(--am-r-pill);
  background: rgb(255 255 255 / .07);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / .45);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-prog-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--am-accent), var(--am-accent-bright));
  box-shadow: 0 0 10px rgb(var(--am-accent-bright-rgb) / .45);
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail-x="loop"] .am-rail-prog-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--am-rail-track, 10000px));
  width: 100%;
  border-radius: inherit;
  background: inherit;
  box-shadow: inherit;
}
html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) [data-am-rail-nav-on][data-am-rail-x="none"] {
  visibility: hidden;
}

/* ---------- Home game card ----------
   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.
   Tokens: 12-cards.css (--am-card-*). Layers inside the card (isolated):
   cover art (zooms), cover::before hover scrim (z1), cover::after play
   disc (z2), card::after light sweep (z4), heart (z5).
   A clone (20-home.js loop) is inert, so it never matches :hover or
   :active; the JS sets [data-am-hover] on the clone (and on its heart)
   under the pointer, and every hover rule here reads
   :is(:hover, [data-am-hover]).
   No rule inside the card may use `inherit` on a non-inherited property
   (e.g. border-radius): it makes every restyle of the moving card (each
   loop timing write: soft stop / start, scrub, arrow page) restyle its
   whole subtree, ~2.3x the work. The sweep takes --am-card-r instead. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--am-card-line);
  border-radius: var(--am-card-r);
  background: var(--am-card-bg);
  box-shadow: var(--am-card-shadow);
  color: inherit;
  text-decoration: none;
  transform: none;
  transition: none;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:hover {
  border-color: var(--am-card-line);
  transform: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover {
  position: relative;
  border: 0;
  border-radius: 0;
  background: var(--am-card-bg) !important;
  box-shadow: none;
  transform: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover img {
  transform: none;
  transition: none;
  -webkit-user-drag: none;
}
/* Hover scrim + play disc (hidden at rest; the theme's v2 pseudos are
   replaced). The disc is the Font Awesome play glyph on the CTA gradient. */
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: 1;
  background: var(--am-card-scrim-hover);
  opacity: 0;
  pointer-events: none;
  animation: 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: 42%;   /* above the baked-in game title */
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--am-card-play-size);
  height: var(--am-card-play-size);
  margin: calc(var(--am-card-play-size) / -2) 0 0 calc(var(--am-card-play-size) / -2);
  padding: 0 0 0 3px;   /* optical centre of the triangle */
  border: 1px solid var(--am-line-cta);
  border-radius: 50%;
  background: var(--am-card-play-bg);
  box-shadow: var(--am-card-play-shadow);
  color: var(--am-on-accent);
  font: 900 15px/1 "Font Awesome 6 Free";
  opacity: 0;
  transform: scale(.72);
  pointer-events: none;
  animation: none;
}
/* Light sweep: parked off the left edge; crosses on hover (motion only). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: var(--am-card-r);   /* not inherit: see the note above */
  background: var(--am-card-sweep);
  opacity: 0;
  transform: translateX(-115%);
  pointer-events: none;
  animation: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:focus-visible {
  outline: none;
  border-color: var(--am-card-line-hover);
  box-shadow: var(--am-focus), var(--am-card-shadow-hover);
}
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;
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:is(:hover, [data-am-hover]) {
    border-color: var(--am-card-line-hover);
    box-shadow: var(--am-card-shadow-hover);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:is(:hover, [data-am-hover]) .gm-game-cover::before,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:is(:hover, [data-am-hover]) .gm-game-cover::after {
    opacity: 1;
    transform: none;
  }
  /* Over the heart, the disc steps back: the heart is the target. */
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:is(:hover, [data-am-hover]):has(.gm-fav:is(:hover, [data-am-hover])) .gm-game-cover::after {
    opacity: .55;
    transform: scale(.9);
  }
}

/* Favourite heart: 28px chip, 44px hit area (::before, -8px). Colours are
   the shared --am-card-chip-* tokens (12-cards.css); on home cards the
   chip also gets a faint hairline and drop shadow so it reads on light
   art. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav {
  position: absolute;
  top: var(--am-card-fav-inset);
  right: var(--am-card-fav-inset);
  left: auto;
  z-index: 5;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--am-card-fav-size);
  height: var(--am-card-fav-size);
  margin: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 50%;
  background: var(--am-card-chip-bg);
  box-shadow: 0 2px 8px rgb(0 0 0 / .35);
  color: var(--am-text);
  font-size: var(--am-card-fav-icon);
  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: -8px;
  border-radius: 50%;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav:hover {
  border-color: rgb(255 255 255 / .12);
  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-on-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:is(:hover, [data-am-hover]) {
    border-color: rgb(var(--am-accent-rgb) / .5);
    background: var(--am-card-chip-bg-hover);
    color: var(--am-accent-bright);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-fav.active:is(:hover, [data-am-hover]) {
    border-color: var(--am-card-chip-on-line-hover);
    background: var(--am-card-chip-on-hover);
    color: var(--am-on-accent);
  }
}

/* ---------- 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 var(--am-dur-2) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a::before {
    transition: border-color var(--am-dur-2) var(--am-ease), box-shadow var(--am-dur-2) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip img {
    transition: filter var(--am-dur-2) var(--am-ease), transform var(--am-dur-3) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip .am-cat-fx::after {
    opacity: 1;
    animation: am-cat-shine 5.5s ease-in-out infinite;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:nth-child(2) .am-cat-fx::after { animation-delay: .5s; }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:nth-child(3) .am-cat-fx::after { animation-delay: 1s; }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:nth-child(4) .am-cat-fx::after { animation-delay: 1.5s; }
  /* Home card: lift + border + glow ring (.38s), cover zoom (.56s), scrim
     and disc fade (disc also scales up), sweep crosses once per hover
     (it snaps back off-card when the hover ends). */
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game {
    transition: transform .38s var(--am-ease), border-color var(--am-dur-2) var(--am-ease), box-shadow .38s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover img {
    transition: transform .56s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover::before {
    transition: opacity .3s var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game .gm-game-cover::after {
    transition: opacity .28s var(--am-ease), transform .38s 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), 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 i {
    transition: transform var(--am-dur) var(--am-ease);
  }
  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;
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-btn {
    transition: border-color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease), opacity 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) .am-rail-btn i {
    transition: transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-btn:not([aria-disabled="true"]):active {
    transform: scale(.92);
  }
  @media (hover: hover) and (pointer: fine) {
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover {
      transform: translateY(-3px);
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip > a:hover img {
      transform: translateY(-3px) scale(1.04);
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:is(:hover, [data-am-hover]) {
      transform: translateY(var(--am-card-lift));
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:is(:hover, [data-am-hover]) .gm-game-cover img {
      transform: scale(var(--am-card-zoom));
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) .gm-row > .gm-game:is(:hover, [data-am-hover])::after {
      opacity: 1;
      transform: translateX(115%);
      transition: transform .8s cubic-bezier(.3, .7, .2, 1) .05s, opacity .1s linear;
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section > .gm-row-head .gm-row-all:hover {
      transform: translateY(-1px);
    }
    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 :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-prev:not([aria-disabled="true"]):hover i {
      transform: translateX(-1px);
    }
    html body.gm-sidebar-layout :is(main.page-shell, div.legal-page, main.gm-404) .am-rail-next:not([aria-disabled="true"]):hover i {
      transform: translateX(1px);
    }
  }
  /* Press feedback (touch and mouse) is 60-motion.css's. */
}
@keyframes am-cat-shine {
  0%, 62% { transform: translateX(-220%) rotate(-20deg); }
  92%, 100% { transform: translateX(320%) rotate(-20deg); }
}
@keyframes am-home-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---- 22-extras.css ---- */
/*
 * 22-extras (2026-10-31, owner request "sen kendinde bir şeyler ekle";
 * reworked 2026-10-31 for "sağlayıcı arkası logolar ... biraz modern ol"):
 * Aquabet's own home extras and live accents. SPEC §4.21 (P2 game finder,
 * VIP strip), §4.9 (titled-panel language), §4.24 (home rhythm).
 *
 * Home blocks (built by 22-extras.js after DOMContentLoaded, home only,
 * inserted after the last titled game panel, in this order):
 *  1. section.am-gf "Ne oynasam?" game finder: kicker + two-tone title +
 *     one line + "Şansımı Dene" (dice icon; "Tekrar Çevir" after the
 *     first result, the only spin control) on the left; on the right an
 *     aria-hidden reel of thumbnails cloned from the home cards (cover
 *     <picture>/<img> only) with a centre window, and a result card (cover,
 *     name, provider from the game id + the footer's provider list, "Oyna"
 *     = the original card's own click). The result card is a grid stack:
 *     the idle hint and the card share one cell, so the panel never
 *     changes height when a result appears (no layout shift).
 *  2. section.am-vipbar "VIP Kulübü" card: a grid (emblem | copy |
 *     "İncele" over a benefits row of four icon chips; phones: emblem +
 *     copy, chips 2 x 2, then a full-width "İncele"; the chips go 4 in a
 *     row once the card is >= 700px). Hairline green top
 *     edge, soft green corner glow, a faint crown watermark (phones).
 *  3. section.am-pv "Sağlayıcılar" carousel (the reference's provider
 *     carousel pattern): a head row (icon tile + title left; "Tümünü Gör"
 *     pill + two round arrows right, white .12-.14 hairlines as in SPEC
 *     §2.3) over a [data-am-rail] track of logo tiles (164 x 106, 124 x 84
 *     <=767; r12, #091610 -> #040d08 fill, 1px white .08 with a lit top
 *     edge). Logos are white at rest (brightness 0 + invert, the
 *     reference's look); filled badges/boxes use a greyscale lift instead
 *     ([data-am-ink], set per logo by 22-extras.js). Hover / keyboard
 *     focus: the logo's own colours ([data-am-hue] c; n = its own hues on
 *     a dark ground for black-lettered logos), green .5 border, a 2px lift
 *     and a soft inner green glow. Every filter state is written as the
 *     same five-function list, so the change is interpolated, not a jump.
 *     The logo box is the logo's measured content box (inline custom
 *     properties from 22-extras.js, see there), so marks sit centred.
 *     Fade mask, drift / loop, drag, snap, arrows and hidden scrollbar
 *     come from the shared RAIL CONTRACT (20-home.js / 20-home.css key off
 *     [data-am-rail]); this file lays out the head, the track and the
 *     tiles, and restyles the contract's arrows inside this head only.
 *     The track sizes nothing from its children's count, so the loop
 *     engine's appended copies ([data-am-clone]) need no rule here.
 *     Tile gap 20px >= 992 (the reference's 184px pitch), 16px 768-991,
 *     10px on phones. No rule inside a tile uses `inherit` on a
 *     non-inherited property (the loop engine's timing writes would then
 *     restyle each moving tile's whole subtree; 20-home.css card note).
 *     One "Sağlayıcılar" row per page: while this carousel is on the home
 *     page, the footer's provider strip and its generated header
 *     (50-footer.css, same logos in another tile style) are not shown.
 *
 * Live accents (CSS only, no layout shift: absolutely positioned or
 * present from the first paint). Every loop animates transform / opacity
 * only, so it runs on the compositor:
 *  - green "canlı" dot AFTER the home Canlı Casino panel title (h2::after,
 *    with a ping ring h2::before), absolutely positioned 10px past the
 *    end of the shrink-wrapped title: it takes no width, so the head
 *    column (and the rail start) is the same as without it. 20-home.css
 *    sets content:none there, these rules are one class heavier;
 *  - green dot on the header Canlı Casino tab (storefront >=992, where the
 *    tab group is shown; ::after, absolute, over the icon's top-right, its
 *    ping ring ::before);
 *  - a soft breathing glow on the sidebar's active item (::after glow
 *    layer) and its marker bar (::before, bright green, breathing
 *    opacity), only while the sidebar is on screen (desktop mode, or the
 *    drawer open).
 *
 * Root (written out in full, called R in comments):
 *   html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip)   (0,3,3)
 * Rhythm (gap before each block):   >=992  <=991
 *   last game panel -> finder          40     40
 *   finder -> VIP card                 22     18
 *   VIP card -> providers              28     22
 *   providers -> footer                40     40   (footer's own margin)
 * Breakpoints: 576 / 768 / 992 media; container am-gf 440 / 580, am-gfr
 * 400, am-vip 700 / 900, am-pv 400.
 *
 * Contracts: no bare element selectors; no rule on html/body; nothing in
 * the original DOM is moved, replaced or rebound (the finder clones covers
 * and calls the original card's .click(), so handlePlay / the guest login
 * prompt run exactly as on the card). Every animation and transition is
 * inside prefers-reduced-motion: no-preference. Buttons and links are
 * >=44px hit areas.
 */

/* ---------- Local tokens + rhythm ---------- */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
  --am-x-gap-finder: 40px;
  --am-x-gap-tail: 18px;
  --am-x-gap-pv: 22px;
  --am-x-thumb-w: 72px;
  --am-x-thumb-h: 96px;
  --am-x-thumb-gap: 10px;
  /* Provider tiles; --am-x-pv-k scales the logo boxes (desktop = 1). */
  --am-x-pv-w: 124px;
  --am-x-pv-h: 84px;
  --am-x-pv-gap: 10px;
  --am-x-pv-k: .76;
}
@media (min-width: 768px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
    --am-x-pv-w: 164px;
    --am-x-pv-h: 106px;
    --am-x-pv-gap: 16px;
    --am-x-pv-k: 1;
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) {
    --am-x-gap-tail: 22px;
    --am-x-gap-pv: 28px;
    --am-x-pv-gap: 20px;   /* the reference's 184px tile pitch */
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf {
  margin-top: var(--am-x-gap-finder);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar {
  margin-top: var(--am-x-gap-tail);
}
/* The carousel has no frame of its own: a little more air above it. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv {
  margin-top: var(--am-x-gap-pv);
}
/* No finder (fewer than 4 games): the VIP card opens the tail group. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section + section.am-vipbar {
  margin-top: var(--am-x-gap-finder);
}

/* ==== 1. Game finder ===================================================== */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf {
  container: am-gf / inline-size;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding: 20px 16px 18px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .065);
  border-radius: 26px;
  background:
    radial-gradient(85% 130% at 8% 0%, rgb(var(--am-accent-deep-rgb) / .38), transparent 62%),
    radial-gradient(70% 110% at 100% 100%, rgb(var(--am-accent-rgb) / .12), transparent 65%),
    linear-gradient(145deg, rgb(255 255 255 / .05) 0%, rgb(10 31 20 / .52) 45%, rgb(3 11 7 / .64) 100%);
  box-shadow: var(--am-shadow-2);
  color: var(--am-text);
  font-family: var(--am-font);
}
/* Green hairline on the top edge (SPEC §2.4 --am-hairline-top). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  z-index: -1;
  height: 2px;
  background: var(--am-hairline-top);
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-body {
  min-width: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-emblem {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--am-r-12);
  background: linear-gradient(180deg, var(--am-accent-bright), var(--am-accent));
  box-shadow: 0 10px 22px rgb(var(--am-accent-rgb) / .22), inset 0 1px 0 rgb(255 255 255 / .35);
  color: var(--am-on-bright);
  font-size: 19px;
  line-height: 1;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-kicker {
  color: var(--am-accent-bright);
  font: 600 11px/16.5px var(--am-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-title {
  margin: 0 0 8px;
  padding: 0;
  color: var(--am-text);
  font: 700 clamp(21px, .9vw + 15px, 28px)/1.14 var(--am-font);
  letter-spacing: -.01em;
  text-transform: none;
  text-wrap: balance;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-title .am-hl {
  color: var(--am-accent);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-text {
  max-width: 48ch;
  margin: 0 0 18px;
  color: var(--am-text-2);
  font: 400 14px/21px var(--am-font);
}
/* "Şansımı Dene": the secondary green pill (SPEC §2.4 --am-grad-2). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 26px;
  border: 1px solid rgb(var(--am-accent-rgb) / .5);
  border-radius: var(--am-r-pill);
  background: var(--am-grad-2);
  box-shadow: 0 12px 26px rgb(var(--am-accent-deep-rgb) / .5), inset 0 1px 0 rgb(255 255 255 / .16);
  color: var(--am-on-accent);
  font: 700 15px/1 var(--am-font);
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-go i {
  font-size: 17px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-go[aria-disabled="true"] {
  cursor: progress;
  opacity: .82;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-go:not([aria-disabled="true"]):hover {
    border-color: var(--am-accent);
    box-shadow: 0 14px 30px rgb(var(--am-accent-deep-rgb) / .6), inset 0 1px 0 rgb(255 255 255 / .2);
  }
}

/* Right column: reel + result card. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-stage {
  display: grid;
  gap: 12px;
  min-width: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-reel {
  position: relative;
  min-width: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-view {
  box-sizing: border-box;
  padding: 8px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-view::-webkit-scrollbar {
  display: none;
}
/* While the reel runs, only the script scrolls it. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf[data-am-gf="spin"] .am-gf-view {
  overflow-x: hidden;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-track {
  display: flex;
  gap: var(--am-x-thumb-gap);
  box-sizing: content-box;
  width: max-content;
  /* Any thumb (first and last included) can sit under the centre window. */
  padding: 0 calc(50% - var(--am-x-thumb-w) / 2);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-thumb {
  display: block;
  flex: none;
  box-sizing: border-box;
  width: var(--am-x-thumb-w);
  height: var(--am-x-thumb-h);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--am-r-12);
  background: linear-gradient(160deg, #123321, #04140c);
  box-shadow: 0 8px 16px rgb(0 0 0 / .4);
  opacity: .55;
  cursor: pointer;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-thumb[data-am-on] {
  border-color: rgb(var(--am-accent-bright-rgb) / .55);
  opacity: 1;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf :is(.am-gf-thumb, .am-gf-cover) :is(picture, img) {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
/* Centre window (decorative, over the reel, never scrolls with it). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-window {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  box-sizing: border-box;
  width: calc(var(--am-x-thumb-w) + 12px);
  margin-left: calc((var(--am-x-thumb-w) + 12px) / -2);
  border: 2px solid rgb(var(--am-accent-bright-rgb) / .7);
  border-radius: 15px;
  box-shadow: 0 0 26px rgb(var(--am-accent-bright-rgb) / .28), inset 0 0 20px rgb(var(--am-accent-bright-rgb) / .1);
  pointer-events: none;
}

/* Result: idle hint and result card stacked in one grid cell, so the box
   keeps the larger of the two heights in every state. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-result {
  container: am-gfr / inline-size;
  display: grid;
  grid-template-areas: "stack";
  box-sizing: border-box;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-md);
  background: rgb(var(--am-surface-0-rgb) / .55);
  box-shadow: var(--am-sheen-panel);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf :is(.am-gf-idle, .am-gf-card) {
  grid-area: stack;
  min-width: 0;
}
/* Idle: a dashed placeholder with a short how-to (dashed until a result). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf:is([data-am-gf="idle"], [data-am-gf="spin"]) .am-gf-result {
  border-style: dashed;
  border-color: rgb(255 255 255 / .12);
  background: rgb(var(--am-surface-0-rgb) / .35);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-idle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 4px;
  text-align: left;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-idle-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(var(--am-accent-rgb) / .32);
  border-radius: 50%;
  background: rgb(var(--am-accent-deep-rgb) / .35);
  color: var(--am-accent-bright);
  font-size: 16px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-idle-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-wrap: pretty;   /* no one-word last line */
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-idle-txt b {
  color: var(--am-text);
  font: 600 13.5px/1.35 var(--am-font);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-idle-txt span {
  color: var(--am-text-3);
  font: 400 12.5px/1.45 var(--am-font);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas: "cover meta" "acts acts";
  align-items: center;
  gap: 10px 12px;
  visibility: hidden;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf:is([data-am-gf="done"], [data-am-gf="again"]) .am-gf-card {
  visibility: visible;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf:is([data-am-gf="done"], [data-am-gf="again"]) .am-gf-idle {
  visibility: hidden;
}
/* A re-spin keeps the last card on screen, dimmed. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf[data-am-gf="again"] .am-gf-card {
  opacity: .45;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-cover {
  grid-area: cover;
  display: block;
  width: 48px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--am-line);
  border-radius: var(--am-r-9);
  background: var(--am-surface-2);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--am-text);
  font: 600 15px/1.3 var(--am-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-prov {
  overflow: hidden;
  color: var(--am-text-3);
  font: 500 12px/1.4 var(--am-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-prov[hidden] {
  display: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-acts {
  grid-area: acts;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border-radius: var(--am-r-pill);
  font: 700 14px/1 var(--am-font);
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-play,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-play:hover {
  border: 1px solid var(--am-line-cta);
  background: var(--am-grad);
  box-shadow: var(--am-cta-shadow);
  color: var(--am-on-accent);
  text-decoration: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf :is(.am-gf-play, .am-gf-go):focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-play:hover {
    border-color: var(--am-accent);
    box-shadow: var(--am-cta-shadow-hover);
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Result card on one row once it has room (cover | meta | actions). */
@container am-gfr (min-width: 400px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-card {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    grid-template-areas: "cover meta acts";
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-cover {
    width: 54px;
    height: 72px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-acts {
    grid-template-columns: auto;
  }
}
@container am-gf (min-width: 440px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-go {
    width: auto;
  }
}
/* Two columns: copy left, reel + result right. */
@container am-gf (min-width: 580px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(20px, 3cqi, 32px);
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf {
    padding: 26px 26px 24px;
  }
}


/* ==== 2. VIP card ======================================================== */
/* Grid of four children (22-extras.js): emblem, copy, benefits, "İncele".
   Phones (< 576): emblem + copy, the chips, "İncele" full width.
   >= 576: emblem | copy | "İncele" over the chips (container am-vip:
   2 x 2 below 700px, one row of 4 from 700px, larger chips from 900px). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar {
  container: am-vip / inline-size;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "ico txt"
    "perks perks"
    "go go";
  align-items: center;
  gap: 14px 12px;
  box-sizing: border-box;
  padding: 16px 14px 14px;
  overflow: hidden;
  overflow: clip;
  border: 1px solid rgb(255 255 255 / .065);
  border-radius: 26px;
  background:
    radial-gradient(520px 210px at 0% 0%, rgb(var(--am-accent-deep-rgb) / .42), transparent 72%),
    radial-gradient(380px 220px at 100% 100%, rgb(var(--am-accent-rgb) / .10), transparent 72%),
    linear-gradient(145deg, rgb(255 255 255 / .05) 0%, rgb(9 29 18 / .52) 45%, rgb(3 11 7 / .64) 100%);
  box-shadow: var(--am-shadow-2);
  color: var(--am-text);
  font-family: var(--am-font);
}
/* Green hairline on the top edge (SPEC §2.4 --am-hairline-top). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  z-index: -1;
  height: 1px;
  background: var(--am-hairline-top);
  pointer-events: none;
}
/* Crown watermark (decorative, very faint): phones only, in the empty
   corner beside the short title (the >=576 one-row head has "İncele"
   there). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar::after {
  content: "\f521";
  position: absolute;
  top: -26px;
  right: 4px;
  z-index: -1;
  color: var(--am-text);
  font: 900 112px/1 "Font Awesome 6 Free";
  opacity: .04;
  transform: rotate(-12deg);
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-ico {
  grid-area: ico;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border-radius: var(--am-r-12);
  background: linear-gradient(180deg, var(--am-accent-bright), var(--am-accent));
  box-shadow: 0 10px 22px rgb(var(--am-accent-rgb) / .24), inset 0 1px 0 rgb(255 255 255 / .35);
  color: var(--am-on-bright);
  font-size: 19px;
  line-height: 1;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-txt {
  grid-area: txt;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-title {
  margin: 0;
  padding: 0;
  color: var(--am-text);
  font: 700 17px/1.25 var(--am-font);
  letter-spacing: .005em;
  text-transform: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-title .am-hl {
  color: var(--am-accent);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-sub {
  margin: 0;
  color: var(--am-text-2);
  font: 400 13px/1.45 var(--am-font);
}
/* Benefits row: static chips (not interactive, so no hover state). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perks {
  grid-area: perks;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-12);
  background: var(--am-grad-chip);
  box-shadow: var(--am-sheen);
  list-style: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perk::marker {
  content: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perk-ico {
  display: grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(var(--am-accent-rgb) / .3);
  border-radius: var(--am-r-sm);
  background: linear-gradient(180deg, rgb(var(--am-accent-deep-rgb) / .7), rgb(var(--am-accent-deep-rgb) / .28));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1);
  color: var(--am-accent-bright);
  font-size: 14px;
  line-height: 1;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perk-txt {
  min-width: 0;
  color: rgb(255 255 255 / .92);
  font: 600 13px/1.25 var(--am-font);
  letter-spacing: .005em;
}
/* "İncele": outlined, 1px #10b461 (SPEC §4.21). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-go,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-go:hover {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 42px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--am-line-accent);
  border-radius: var(--am-r-pill);
  background: linear-gradient(145deg, rgb(255 255 255 / .09) 0%, rgb(16 180 97 / .18) 100%);
  box-shadow: var(--am-sheen);
  color: var(--am-text);
  font: 600 13px/1 var(--am-font);
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-go i {
  font-size: 12px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-go:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-go:hover {
    background: var(--am-accent-deep);
  }
}
/* Chips: 2 x 2 until four fit on one row without wrapping a label
   (card >= 700px), larger from 900px. */
@container am-vip (min-width: 700px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
}
@container am-vip (min-width: 900px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perk {
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px 10px 10px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perk-ico {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-perk-txt {
    font-size: 14px;
  }
}
@media (min-width: 576px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "ico txt go"
      "perks perks perks";
    gap: 16px 14px;
    padding: 18px;
  }
  /* One-row head: "İncele" holds the top-right corner, no watermark. */
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar::after {
    content: none;
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar {
    gap: 18px 16px;
    padding: 20px 22px 22px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-ico {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-title {
    font-size: 19px;
  }
}

/* ==== 3. Providers carousel ============================================== */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv {
  container: am-pv / inline-size;
  position: relative;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--am-text);
  font-family: var(--am-font);
}
/* Head row: icon + title | "Tümünü Gör" + arrows. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  min-height: var(--am-rail-btn, 36px);
  margin: 0;
  padding: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--am-text);
  font: 600 16px/1.2 var(--am-font);
  letter-spacing: .005em;
  text-transform: none;
  white-space: nowrap;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-title-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-title-ico {
  display: grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(var(--am-accent-rgb) / .3);
  border-radius: var(--am-r-sm);
  background: radial-gradient(circle at 50% 28%, rgb(var(--am-accent-rgb) / .3), rgb(var(--am-accent-deep-rgb) / .2) 72%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 0 18px rgb(var(--am-accent-rgb) / .14);
  color: var(--am-accent-bright);
  font-size: 14px;
  line-height: 1;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
/* "Tümünü Gör": pill, white .14 hairline (SPEC §2.3 --am-line-3 note). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-all,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-all:hover {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--am-rail-btn, 36px);
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--am-r-pill);
  background: var(--am-grad-ghost);
  box-shadow: var(--am-sheen);
  color: var(--am-text);
  font: 600 13px/1 var(--am-font);
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* 44px touch target around the 36px pill. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-all::after {
  content: "";
  position: absolute;
  inset: calc((var(--am-rail-btn, 36px) - 44px) / 2) -2px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-all:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-all:hover {
    border-color: var(--am-line-hover);
    background: var(--am-grad-chip-hover);
  }
}
/* Arrow host hidden: provider rail is scrolled / dragged without arrow buttons. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-nav {
  display: none !important;
}
/* Narrow heads (phones): a tighter pill and title tile keep one row. */
@container am-pv (max-width: 400px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-head {
    gap: 10px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-title {
    gap: 8px;
    font-size: 15px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-title-ico {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-all,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-all:hover {
    padding: 0 12px;
    font-size: 12px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tools {
    gap: 6px;
  }
}
/* The track ([data-am-rail]: the contract adds the fades, scrolling or
   the loop). Layout only here: one row of fixed tiles, clean without boxes. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--am-x-pv-gap);
  box-sizing: border-box;
  min-width: 0;
  margin: 2px 0 0;
  padding: 6px 0 10px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-rail:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .8);
  outline-offset: -2px;
}
/* Tile: a link (provider lobby filter) or a plain span, transparent (no box). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: var(--am-x-pv-w);
  height: var(--am-x-pv-h);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-12);
  background: none;
  box-shadow: none;
  color: var(--am-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile::before,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile::after {
  content: none;
  display: none;
}
/* Logo box: the measured content box (22-extras.js inline custom
   properties + [data-am-crop]); its width scales with --am-x-pv-k. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-logo {
  position: relative;
  display: block;
  flex: none;
  box-sizing: border-box;
  width: calc(var(--am-pv-lw, 80) * var(--am-x-pv-k) * 1px);
  height: auto;
  aspect-ratio: var(--am-pv-ar, 2);
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-logo > img {
  position: absolute;
  top: var(--am-pv-y, 0%);
  left: var(--am-pv-x, 0%);
  display: block;
  width: var(--am-pv-iw, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: fill;
  opacity: .9;
  -webkit-user-drag: none;
  user-select: none;
}
/* Plain box (logo not in the table, or its file changed): contain in a
   fixed box, sized by shape (data-am-logo from 22-extras.js). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-logo:not([data-am-crop]) {
  display: grid;
  place-items: center;
  width: calc(96px * var(--am-x-pv-k));
  height: calc(44px * var(--am-x-pv-k));
  aspect-ratio: auto;
  overflow: visible;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-logo:not([data-am-crop]) > img {
  position: static;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-logo:not([data-am-crop]) > img[data-am-logo="wide"] {
  max-height: 72%;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-logo:not([data-am-crop]) > img[data-am-logo="sq"] {
  max-width: 56%;
}
/* Name fallback, shown only when the logo failed to load. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-name {
  display: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile[data-am-pv-broken] .am-pv-logo {
  display: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile[data-am-pv-broken] .am-pv-name {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
  color: var(--am-text-2);
  font: 600 13px/1.3 var(--am-font);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ink at rest. One function list everywhere (grayscale, brightness,
   contrast, invert, hue-rotate), so every rest -> hover change is
   interpolated: w = white silhouette, g = greyscale lift (badges), k =
   inverted grey (KA Gaming). The lifts put the badges' lit parts near the
   white logos (brightest logo pixel ~230 like theirs, mean lit pixel
   >= ~170 measured @1440), without washing out the letters inside the
   boxes (Fazi) or the cut-outs (EGT). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile[data-am-ink="w"] img {
  filter: grayscale(0) brightness(0) contrast(1) invert(1) hue-rotate(0deg);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile:is([data-am-ink="g"], :not([data-am-ink])) img {
  filter: grayscale(1) brightness(var(--am-x-pv-lift, 2.2)) contrast(1.2) invert(0) hue-rotate(0deg);
}
/* EGT: a dark red disc with cut-out letters, lit almost white. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile img[src*="/egt."] {
  --am-x-pv-lift: 3.2;
}
/* Dark grey marks (7Mojos' 7, Big Time's badge). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile :is(img[src*="/7mojos."], img[src*="/bigtimegaming."]) {
  --am-x-pv-lift: 2.4;
}
/* Retro Games: light grey art; more lift turns its slot icon into a
   plain white box. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile img[src*="/retrogaming."] {
  --am-x-pv-lift: 1.5;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile[data-am-ink="k"] img {
  filter: grayscale(1) brightness(.6) contrast(1.3) invert(1) hue-rotate(0deg);
}
/* Hover (mouse) and keyboard focus: own colours; n = own hues on a dark
   ground (black lettering would vanish on the tile). Green .5 border,
   lit edge + inner glow (::after). The 2px lift is in the motion block
   (transform: the loop engine moves the items with `translate`, so the
   two never fight). The loop's copies are inert (never :hover): the
   engine marks the hovered copy [data-am-hover] instead. */
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile:is(:hover, [data-am-hover]) {
    border-color: transparent;
    box-shadow: none;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile:is(:hover, [data-am-hover]) img {
    filter: grayscale(0) brightness(1) contrast(1) invert(0) hue-rotate(0deg);
    opacity: 1;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile[data-am-hue="n"]:is(:hover, [data-am-hover]) img {
    filter: grayscale(0) brightness(1) contrast(1) invert(1) hue-rotate(180deg);
  }
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile:focus-visible img {
  filter: grayscale(0) brightness(1) contrast(1) invert(0) hue-rotate(0deg);
  opacity: 1;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile[data-am-hue="n"]:focus-visible img {
  filter: grayscale(0) brightness(1) contrast(1) invert(1) hue-rotate(180deg);
}
/* One "Sağlayıcılar" row per page: while this carousel is on the home
   page, the footer's provider strip (the same logos in its own plated
   tiles) and its generated header (50-footer.css) step aside. The footer
   grid has no row gaps, so their empty rows take no room. 55-overlays.js
   sees the hidden strip as off-screen and keeps its marquee paused. */
html body.gm-sidebar-layout:has(> main.gm-wire > section.am-pv) footer.site-footer .gmf-prov-marquee {
  display: none;
}
html body.gm-sidebar-layout:has(> main.gm-wire > section.am-pv) footer.site-footer .gmf-copy::after {
  content: none;
}
/* The BeGambleAware hairline keeps the strip header's 26px off the
   licence panel (!important: 50-footer.css zeroes the row's inline
   margins with !important). */
html body.gm-sidebar-layout:has(> main.gm-wire > section.am-pv) footer.site-footer .gmf-responsible-row {
  margin-top: 26px !important;
}

/* ==== 4. Live accents ==================================================== */
/* Home Canlı Casino panel title: a green live dot AFTER the words and a
   ring that pings out of it (motion block). The title is shrink-wrapped
   (width: fit-content, one line: 20-home.css keeps "CANLI CASİNO" on one
   line), and both pseudos sit absolutely 10px past its end on the first
   line (::before = ring, painted first; ::after = dot, over it). Nothing
   is added to the title's width, so the head column and the rail start
   are exactly as without the dot. 20-home.css sets content:none on both
   pseudos; these rules are one class heavier. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section.gm-masa-section > .gm-row-head h2 {
  position: relative;
  width: fit-content;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section.gm-masa-section > .gm-row-head h2::before,
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section.gm-masa-section > .gm-row-head h2::after {
  content: "";
  position: absolute;
  top: calc(.54em - 4px);
  left: calc(100% + 10px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section.gm-masa-section > .gm-row-head h2::before {
  background: rgb(var(--am-accent-bright-rgb) / .55);
  opacity: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section.gm-masa-section > .gm-row-head h2::after {
  background: var(--am-accent-bright);
  box-shadow: 0 0 0 3px rgb(var(--am-accent-rgb) / .22), 0 0 9px rgb(var(--am-accent-rgb) / .7);
}
/* Header Canlı Casino tab (storefront >=992: the tab group is shown): a
   dot over the icon's top-right (::after) and its ping ring (::before). */
@media (min-width: 992px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"] {
    position: relative;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"]::before,
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"]::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 27px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"]::before {
    background: rgb(var(--am-accent-bright-rgb) / .6);
    opacity: 0;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"]::after {
    background: var(--am-accent-bright);
    box-shadow: 0 0 0 2px var(--am-surface-hdr), 0 0 8px rgb(var(--am-accent-bright-rgb) / .75);
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"]::before,
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"]::after {
    left: 22px;   /* icon-only tabs: padding 7px */
  }
}
/* Sidebar active item: a glow layer (::after) that breathes, opacity only. */
html body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgb(var(--am-accent-rgb) / .32), 0 0 18px rgb(var(--am-accent-rgb) / .2);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Motion (opt-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-thumb {
    transition: opacity var(--am-dur-2) var(--am-ease), border-color var(--am-dur-2) var(--am-ease), transform var(--am-dur-2) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-thumb[data-am-on] {
    transform: scale(1.04);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf[data-am-gf="spin"] .am-gf-thumb,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf[data-am-gf="again"] .am-gf-thumb {
    transition: none;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf :is(.am-gf-go, .am-gf-play) {
    transition: border-color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), transform var(--am-dur) var(--am-ease), opacity var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-card {
    transition: opacity var(--am-dur-2) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf[data-am-gf="done"] .am-gf-card {
    animation: am-x-card-in .32s var(--am-ease) both;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf:is([data-am-gf="spin"], [data-am-gf="again"]) .am-gf-go i {
    animation: am-x-roll .6s linear infinite;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf:is([data-am-gf="spin"], [data-am-gf="again"]) .am-gf-window {
    animation: am-x-window 1s ease-in-out infinite;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-go,
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-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);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-go i {
    transition: transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile {
    transition: border-color var(--am-dur-3) var(--am-ease), box-shadow var(--am-dur-3) var(--am-ease), transform var(--am-dur-2) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile::after {
    transition: opacity var(--am-dur-3) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-logo > img {
    transition: filter var(--am-dur-3) var(--am-ease), opacity var(--am-dur-3) var(--am-ease);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile:focus-visible {
    transform: translateY(-2px);
  }
  @media (hover: hover) {
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-go:not([aria-disabled="true"]):hover,
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-gf .am-gf-play:hover {
      transform: translateY(-1px);
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-vipbar .am-vipbar-go:hover i {
      transform: translateX(2px);
    }
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > section.am-pv .am-pv-tile:is(:hover, [data-am-hover]) {
      transform: translateY(-2px);
    }
  }

  /* Live dots: a ring pings out of the dot. Compositor-only (transform +
     opacity on the ring pseudo). */
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-row-section.gm-masa-section > .gm-row-head h2::before {
    animation: am-x-ping 1.8s ease-out infinite;
  }
  @media (min-width: 992px) {
    html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .main-text-nav .text-link[href="/livecasino"]::before {
      animation: am-x-ping-tab 1.8s ease-out infinite;
    }
  }
  /* Sidebar active item, only while the sidebar is on screen: the glow
     layer (::after) breathes, and the marker bar (::before) turns bright
     green and breathes with it; opacity only. */
  html body.gm-sidebar-layout > aside#amSidebar[data-am-sb-mode="desktop"] .am-sb-item[aria-current="page"]::after,
  html.am-drawer-open body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"]::after {
    animation: am-x-breathe 2.6s ease-in-out infinite;
  }
  html body.gm-sidebar-layout > aside#amSidebar[data-am-sb-mode="desktop"] .am-sb-item[aria-current="page"]::before,
  html.am-drawer-open body.gm-sidebar-layout > aside#amSidebar .am-sb-item[aria-current="page"]::before {
    background: var(--am-accent-bright);
    box-shadow: 0 0 14px rgb(var(--am-accent-bright-rgb) / .7);
    animation: am-x-mark 2.6s ease-in-out infinite;
  }
}
@keyframes am-x-roll {
  to { transform: rotate(360deg); }
}
@keyframes am-x-window {
  0%, 100% { box-shadow: 0 0 22px rgb(52 216 122 / .26), inset 0 0 18px rgb(52 216 122 / .1); }
  50% { box-shadow: 0 0 34px rgb(52 216 122 / .55), inset 0 0 22px rgb(52 216 122 / .18); }
}
@keyframes am-x-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes am-x-ping {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(3); opacity: 0; }
}
/* Starts under the dot's 2px header-coloured rim (11/7 = 1.57). */
@keyframes am-x-ping-tab {
  0% { transform: scale(1.57); opacity: 1; }
  70%, 100% { transform: scale(3); opacity: 0; }
}
@keyframes am-x-breathe {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes am-x-mark {
  0%, 100% { opacity: .38; }
  50% { opacity: 1; }
}

/* ---- 25-lobby.css ---- */
/*
 * v3 (2026-10-30): SPEC §7 steps 4 + 5. Step 4 (shell task): the search
 * dialog (section A, §4.18) and its openers; the v2 header trigger
 * (.am-search-btn, its first-paint placeholder and the
 * --am-chrome-nav-icon:none it forced) and the v2 drawer field are retired.
 * Step 5 (home task): the home search + chip row (section B, §4.8). Retired
 * with step 5: the sticky chip bar and its header-merge band, the
 * scroll-spy states, the Lobi chip, the desktop rails with arrows (old
 * section C; the titled panels are 20-home.css now), the games-first
 * flex order and the bar's html scroll-padding.
 *
 * Lobby (pairs with 25-lobby.js):
 *  A. game search: command-palette dialog built by 25-lobby.js, opened from
 *     the sidebar / drawer field (11-sidebar.js), the dock "Ara"
 *     (10-chrome.js), the home search field and Ctrl/Cmd+K, "/". 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 search + chip row (nav.am-lobby, after the tiles / winners,
 *     before the first game panel; not sticky). >=1200: one row, gap 12:
 *     the search (flex 0 1 60%, h48: 42px icon cell + a 46px faux input)
 *     and the chip rail (rest of the row, padding 0 30, 48px chips with a
 *     32px green icon tile, 26px gradient arrows at its ends, edge fades
 *     from [data-am-x]). <=1199: a column (field 46, chips below, gap 10).
 *     <=575: the field only (44). Its margins are part of the home rhythm
 *     (20-home.css).
 *
 * First paint: 25-lobby.js runs at the end of <body>. Until it has
 * inserted the row (main:not([data-am-lobby]), scripting enabled) the
 * first game panel's margin-top reserves exactly the row and its gap, so
 * nothing below moves; data-am-lobby="1" (inserted) or "off" (no :has())
 * drops the reservation. JS off: nothing is reserved, nothing inserted.
 *
 * Cascade: R = html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip)
 * (0,3,3), as in 20-home.css. 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 (the stack is documented in 55-overlays.css): 1600 search
 * dialog: above the drawer (1500; opening the search closes the drawer),
 * below the storefront dock (1700, its "Ara" stays visible and active
 * above the phone sheet), 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 / 576 / 992 (search: base sheet, 992 panel; chip row:
 * base field only, 576 column, 1200 row). Motion only inside
 * (prefers-reduced-motion: no-preference).
 */

/* ---------- Tokens ---------- */
html body.gm-sidebar-layout {
  --am-search-z: 1600;
}

/* ======================================================================
   A. Game search (v3, SPEC §4.18)
   Built by 25-lobby.js: div.am-search-root > .am-search-overlay +
   #amSearch.am-search (dialog) > .am-search-close, form.am-search-form
   (.am-search-field [.am-search-ico, input], .am-search-targets, hint),
   nav.am-search-quick (four 2:1 category tiles, SPEC §4.18 P2),
   nav.am-search-links. Openers: [data-am-search-open] (sidebar / drawer
   field, dock "Ara"), the home chip row, Ctrl/Cmd+K and "/". The v2 header
   trigger (.am-search-btn) and drawer field are retired.
    - <=991.98: a full-screen sheet from the top to the dock top
      (storefront: bottom = --gm-bottom, so the dock, z 1700, stays visible
      with "Ara" active; member pages keep the v2 dock under a full-height
      sheet). Field = one bordered well (icon 19px #34d87a + 16px input),
      44px close button beside it.
    - >=992: a blurred black scrim and a centred panel (max 1280, r18);
      icon cell 42 + a bordered 46px input with the focus ring, two
      --am-grad-2 submit pills, the hint, then the category chips.
   ====================================================================== */
html.am-search-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}
/* <=991 the sheet is full screen: no reserved gutter (a classic scrollbar
   would leave an uncovered strip at its right edge). */
@media (max-width: 991.98px) {
  html.am-search-open {
    scrollbar-gutter: auto;
  }
}
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: normal;
}
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: rgb(var(--am-bg-rgb) / .97);
  opacity: 0;
}
html body.gm-sidebar-layout > .am-search-root.is-open .am-search-overlay {
  opacity: 1;
}
/* Phones and tablets: full-screen sheet. */
html body.gm-sidebar-layout > .am-search-root .am-search {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  margin: 0;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(1000px 520px at 50% -12%, rgb(2 83 40 / .18), transparent 60%),
    rgb(var(--am-bg-rgb) / .97);
  box-shadow: none;
  outline: none;
  opacity: 0;
}
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > .am-search-root .am-search {
  bottom: var(--gm-bottom);
}
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: 12px;
  margin: 0;
}
/* Field: one bordered well (icon + input) beside the close button. */
html body.gm-sidebar-layout > .am-search-root .am-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 48px;
  margin: 0 54px 0 0;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--am-r-11);
  background: rgb(var(--am-accent-deep-rgb) / .12);
}
html body.gm-sidebar-layout > .am-search-root .am-search-field:focus-within {
  border-color: var(--am-field-focus-line);
  box-shadow: var(--am-field-focus-ring);
}
html body.gm-sidebar-layout > .am-search-root .am-search-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  color: var(--am-accent-bright);
  font-size: 19px;
  line-height: 1;
}
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);
  caret-color: var(--am-text);
  font: 500 16px/1.2 var(--am-font);
  letter-spacing: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-input::placeholder {
  color: rgb(255 255 255 / .45);
  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: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--am-r-sm);
  background: rgb(255 255 255 / .05);
  color: rgb(255 255 255 / .8);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-search-root .am-search-hint {
  margin: 0;
  padding: 0 2px;
  color: var(--am-text-label);
  font: 400 12px/1.5 var(--am-font);
}
html body.gm-sidebar-layout > .am-search-root .am-search-hint[data-am-error] {
  color: var(--am-warn);
}

/* Targets: two submit pills (Enter = the first, slots). */
html body.gm-sidebar-layout > .am-search-root .am-search-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgb(var(--am-accent-rgb) / .45);
  border-radius: var(--am-r-sm);
  background: var(--am-grad-2);
  box-shadow: 0 6px 16px rgb(2 83 40 / .35), var(--am-sheen-active);
  color: var(--am-on-accent);
  font: 600 13px/1 var(--am-font);
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target i {
  flex: none;
  font-size: 14px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-target-t {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* <=380: "Canlı casinoda ara" fits its half of the row uncut. */
@media (max-width: 380.98px) {
  html body.gm-sidebar-layout > .am-search-root .am-search-target {
    gap: 6px;
    padding: 0 8px;
    font-size: 12.5px;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target i {
    font-size: 13px;
  }
}
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: 10px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-label {
  margin: 0;
  padding: 0 2px;
  color: var(--am-text-label);
  font: 600 11px/1.5 var(--am-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
html body.gm-sidebar-layout > .am-search-root .am-search-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--am-line-ctl);
  border-radius: var(--am-r-9);
  background: rgb(255 255 255 / .035);
  color: var(--am-text-2);
  font: 600 12.5px/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);
  font-size: 14px;
  opacity: .7;
  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: rgb(255 255 255 / .07);
}

/* Quick access (SPEC §4.18 P2): four 2:1 category tiles, 2 per row on
   phones and 4 from 576, in the home tiles' green panel; the emblem art
   (when known) sits bottom-right, else the category icon. */
html body.gm-sidebar-layout > .am-search-root .am-search-quick {
  display: grid;
  gap: 10px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-quick-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
html body.gm-sidebar-layout > .am-search-root .am-search-tile {
  position: relative;
  display: block;
  box-sizing: border-box;
  aspect-ratio: 2 / 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .35);
  border-radius: var(--am-r-12);
  background: linear-gradient(100deg, #031409 0%, #052613 45%, #0b4423 75%, #10b461 135%);
  box-shadow: var(--am-sheen), 0 10px 24px rgb(0 0 0 / .35);
  color: var(--am-text);
  text-decoration: none;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout > .am-search-root .am-search-tile-art {
  position: absolute;
  right: 2%;
  bottom: 0;
  display: block;
  width: auto;
  height: 100%;
  max-width: 56%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-tile-ico {
  position: absolute;
  top: 50%;
  right: 12%;
  margin-top: -.5em;
  color: var(--am-accent-bright);
  font-size: clamp(22px, 16cqi, 44px);
  line-height: 1;
  opacity: .9;
}
html body.gm-sidebar-layout > .am-search-root .am-search-tile[data-am-art] .am-search-tile-ico {
  display: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-tile-t {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font: 700 clamp(12px, 8cqi, 22px)/1.05 var(--am-font);
  text-shadow: 0 2px 10px rgb(0 0 0 / .45);
  white-space: nowrap;
  pointer-events: none;
}
html body.gm-sidebar-layout > .am-search-root .am-search-tile-l2 {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout > .am-search-root .am-search-tile:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (min-width: 576px) {
  html body.gm-sidebar-layout > .am-search-root .am-search-quick-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout > .am-search-root .am-search-close:hover {
    border-color: rgb(255 255 255 / .16);
    background: rgb(255 255 255 / .1);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-target:hover {
    border-color: var(--am-accent);
    box-shadow: 0 8px 20px rgb(2 83 40 / .5), var(--am-sheen-cta);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-link:hover {
    border-color: rgb(255 255 255 / .16);
    background: rgb(255 255 255 / .07);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-link:hover i {
    color: var(--am-accent);
    opacity: 1;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-tile:hover {
    border-color: var(--am-line-hover);
  }
}

/* >=992: blurred scrim + centred panel. */
@media (min-width: 992px) {
  html body.gm-sidebar-layout > .am-search-root .am-search-overlay {
    background: rgb(0 0 0 / .6);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body.gm-sidebar-layout > .am-search-root .am-search-overlay {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }
  html body.gm-sidebar-layout > .am-search-root .am-search,
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) > .am-search-root .am-search {
    top: 22px;
    right: 0;
    bottom: auto;
    left: 0;
    gap: 22px;
    width: min(1280px, calc(100% - 36px));
    max-height: calc(100% - 50px);
    margin: 0 auto;
    padding: 18px 18px 20px;
    border: 1px solid rgb(var(--am-accent-deep-rgb) / .55);
    border-radius: var(--am-r-18);
    background: linear-gradient(180deg, rgb(7 26 16 / .96), rgb(4 13 8 / .97));
    box-shadow: var(--am-shadow-3);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-form {
    gap: 14px;
    margin-top: 40px;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-close {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }
  /* Field: unified soft pill capsule with the icon inside. */
  html body.gm-sidebar-layout > .am-search-root .am-search-field {
    height: 48px;
    margin: 0;
    padding: 0 16px 0 8px;
    border: 1px solid var(--am-field-focus-line);
    border-radius: var(--am-r-pill);
    background: rgb(var(--am-accent-deep-rgb) / .14);
    box-shadow: var(--am-field-focus-ring);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-field:focus-within {
    border-color: rgb(var(--am-accent-rgb) / .75);
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-ico {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--am-accent-bright);
    font-size: 18px;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-input {
    box-sizing: border-box;
    height: 100%;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-input:focus {
    border-color: transparent;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-targets {
    display: flex;
    flex-wrap: wrap;
    padding-left: 52px;
  }
  html body.gm-sidebar-layout > .am-search-root .am-search-hint {
    padding-left: 54px;
  }
  html body.gm-sidebar-layout > .am-search-root :is(.am-search-quick, .am-search-links) {
    padding: 18px 0 0 52px;
    border-top: 1px solid var(--am-line);
  }
}


/* ======================================================================
   B. Home search + chip row (v3, SPEC §4.8)
   nav.am-lobby > button.am-lobby-search (.am-lobby-search-ico +
   .am-lobby-search-field) + div.am-lobby-rail (.am-lobby-track > a.am-lobby-chip
   (.am-lobby-chip-ico + .am-lobby-chip-t), button.am-lobby-prev/next).
   ====================================================================== */

/* Reserve the row's slot until 25-lobby.js has inserted it (row + its
   gap on top of the first panel's own gap, 20-home.css):
   <=575 30 + 44, 576-991 30 + 46 + 10 + 48, 992-1199 the same stack under
   a 40 gap, >=1200 40 + 48 (one row). */
@media (scripting: enabled) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip):not([data-am-lobby]) > .gm-row-section:not(.gm-row-section ~ .gm-row-section) {
    margin-top: calc(var(--am-home-gap-panel, 16px) + 74px);
  }
}
@media (scripting: enabled) and (min-width: 576px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip):not([data-am-lobby]) > .gm-row-section:not(.gm-row-section ~ .gm-row-section) {
    margin-top: calc(var(--am-home-gap-panel, 16px) + 134px);
  }
}
@media (scripting: enabled) and (min-width: 992px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip):not([data-am-lobby]) > .gm-row-section:not(.gm-row-section ~ .gm-row-section) {
    margin-top: calc(var(--am-home-gap-panel, 28px) + 144px);
  }
}
@media (scripting: enabled) and (min-width: 1200px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip):not([data-am-lobby]) > .gm-row-section:not(.gm-row-section ~ .gm-row-section) {
    margin-top: calc(var(--am-home-gap-panel, 28px) + 88px);
  }
}

html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  box-sizing: border-box;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* Search: unified soft pill capsule (icon + placeholder together inside). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 18px 0 8px;
  border: 1px solid rgb(255 255 255 / .10);
  border-radius: var(--am-r-pill);
  background: linear-gradient(145deg, rgb(255 255 255 / .065) 0%, rgb(10 31 20 / .45) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 8px 20px -4px rgb(0 0 0 / .28);
  color: var(--am-text-label);
  font: 500 14px/1 var(--am-font);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgb(var(--am-accent-rgb) / .12);
  color: var(--am-accent-bright);
  font-size: 15px;
  line-height: 1;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search-field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  padding: 0 6px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--am-text-label);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search:focus-visible {
  outline: none;
  border-color: var(--am-field-focus-line);
  background: var(--am-field-focus-bg);
  box-shadow: var(--am-field-focus-ring);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search:focus-visible .am-lobby-search-field {
  border-color: transparent;
  background: none;
  box-shadow: none;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search:hover {
    border-color: rgb(52 216 122 / .35);
    background: linear-gradient(145deg, rgb(255 255 255 / .09) 0%, rgb(12 36 24 / .55) 100%);
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search:hover .am-lobby-search-ico {
    background: rgb(var(--am-accent-rgb) / .22);
    color: var(--am-text);
  }
}

/* Chip rail: hidden on phones (<=575, field only). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-rail {
  position: relative;
  display: none;
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 0;
  height: 48px;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 100%;
  padding: 0 30px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 30px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), 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 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), 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 30px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 100%);
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track[data-am-x="none"],
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track:focus-within {
  -webkit-mask-image: none;
  mask-image: none;
}
/* With nothing to scroll the track drops its arrow gutters. */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-track[data-am-x="none"] {
  padding-inline: 0;
}

html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  height: 46px;
  margin: 0;
  padding: 0 18px 0 8px;
  border: 1px solid rgb(255 255 255 / .09);
  border-radius: var(--am-r-pill);
  background: var(--am-grad-chip);
  box-shadow: var(--am-sheen);
  color: var(--am-text);
  font: 600 13.5px/1 var(--am-font);
  letter-spacing: 0;
  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;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip-ico {
  display: grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(var(--am-accent-rgb) / .32);
  border-radius: 50%;
  background: var(--am-tint-2);
  color: var(--am-accent-bright);
  font-size: 15px;
  line-height: 1;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip:hover {
  color: var(--am-text);
  text-decoration: none;
}
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);
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip:hover {
    border-color: var(--am-line-hover);
    background: var(--am-grad-chip-hover);
  }
}

/* Scroll arrows at the rail ends ([hidden] at the start / end). */
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin: -13px 0 0;
  padding: 0;
  border: 1px solid rgb(var(--am-accent-bright-rgb) / .5);
  border-radius: 50%;
  background: linear-gradient(160deg, #10b461, #025328);
  box-shadow: 0 4px 12px rgb(2 83 40 / .45);
  color: var(--am-on-accent);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-nav::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-nav[hidden] {
  display: none;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-prev {
  left: 0;
}
html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-next {
  right: 0;
}
@media (hover: hover) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-nav:hover {
    border-color: var(--am-accent-bright);
    box-shadow: 0 6px 16px rgb(2 83 40 / .6);
  }
}

@media (min-width: 576px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search {
    height: 46px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-rail {
    display: block;
    flex: none;
  }
}
/* One row only from 1200: beside the 260px sidebar the 60% search left the
   chip rail 254px at 1024 (one and a half chips under the arrow). */
@media (min-width: 1200px) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search {
    flex: 0 1 60%;
    width: auto;
    height: 48px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search-field {
    height: 46px;
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-rail {
    flex: 1 1 0;
  }
}

/* ======================================================================
   Motion (opt-in): fades, the dialog's drop-in and press feedback.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby :is(.am-lobby-chip, .am-lobby-nav),
  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), border-color var(--am-dur) var(--am-ease), box-shadow 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 :is(.am-lobby-search-field, .am-lobby-search-ico) {
    transition: border-color var(--am-dur) var(--am-ease), background-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease), color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout > .am-search-root :is(.am-search-field, .am-search-input) {
    transition: border-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease);
  }
  @media (hover: hover) {
    html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-chip:hover {
      transform: translateY(-1px);
    }
  }
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > nav.am-lobby :is(.am-lobby-chip, .am-lobby-nav):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 main.gm-wire:has(> .gm-catstrip) > nav.am-lobby .am-lobby-search:active .am-lobby-search-field,
  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: 992px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout > .am-search-root .am-search {
    transform: translateY(-8px) scale(.985);
  }
}

/* ---- 27-simplify.css ---- */
/*
 * v3 (2026-10-30, SPEC §4.4 text line, §4.22 / §7 step 8): the marquee
 * loop gets the reference's 28px gap with a "•" separator (10px, white .5)
 * and ~92px/s (27-simplify.js); its right edge fades over 24px. The phone
 * footer accordion keeps v2's behaviour in the v3 look: both heads are the
 * same 52px row in the same footer panel, with the section's green label
 * pill and a chevron. Breakpoints: base / 480 (static announce font) /
 * 575.98 (accordion).
 *
 * 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, the bullhorn and the close button).
 *    Geometry is NOT changed here: the strip stays --gm-announce (30px
 *    <=767 / 34px on the storefront from 768, 10-chrome.css), 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 480px, under reduced motion or
 *      (scripting: none), two clamped lines of 11/13px so the domain
 *      ("aquabet233.com") is never cut by the ellipsis.
 *    - 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 (text + 28px gap with a centred "•") 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), touch ([data-am-ann-paused]), the open
 *      drawer (html.am-drawer-open) and modals (html[data-am-modal]). The
 *      copy is display:none everywhere else, so screen readers and reduced
 *      motion get the original text once. Left fade = the 10px gap after
 *      the bullhorn (D: SPEC §4.4 says 24px; at 24px the resting text would
 *      start faded or the track would overlap the icon), right fade 24px.
 *    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 panel) 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; SPEC §4.24 keeps them removed). Both are server-rendered,
 *    never toggled by JS (maps/home.json).
 *    Root (0,5,4) beats 20-home's R > .gm-trust (0,4,3).
 *
 * 3. Footer accordion, phones only (<=575.98px)
 *    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><span class="am-acc-lbl"> 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:575.98px: without JS nothing
 *    collapses, and from 576px the original labels show and the buttons are
 *    display:none (no dead tab stops on desktop). Never collapsed: trust
 *    panel, RG strip (18+ pill, warning, its two links), legal text,
 *    licence seals, BeGambleAware, copyright, provider strip. When the RG
 *    strip links could not be built, the "Sorumlu Oyun" and "Şartlar ve
 *    Koşullar" nav links stay visible in the closed group (pinned by the
 *    JS, [data-am-acc-pin]).
 *    With the accordion on, the phone grid draws payments above links (DOM
 *    order), so the two buttons are tabbed and read in drawn order.
 *
 * No !important, no display !important, no transform/filter on html/body.
 * Motion only inside (prefers-reduced-motion: no-preference).
 */

/* ======================================================================
   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 phones (reduced motion, JS off): two lines of
   11/13px (26px inside the 30px strip), clamped with an ellipsis, so the
   domain ("aquabet233.com", end of the first ~55 characters) is always
   shown in full. One 12.5px line ellipsized it below ~430px: the v3 strip
   spends 26px on the bullhorn and 44px on the close button. The running
   marquee keeps 10-chrome's single 12.5px line. */
@media (max-width: 479.98px) and (prefers-reduced-motion: reduce), (max-width: 479.98px) and (scripting: none) {
  html body.gm-sidebar-layout div.gm-topbar-announce {
    font-size: 11px;
    line-height: 13px;
  }
  html body.gm-sidebar-layout div.gm-topbar-announce .gm-announce-track {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"] {
    --am-ann-gap: 28px;
    --am-ann-fade: 10px;
    justify-content: flex-start;
  }
  /* The track grows into the strip; its left edge moves 10px out (into the
     gap after the bullhorn) so the resting text keeps its static position
     while scrolled text fades out there; the right edge fades over 24px. */
  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% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--am-ann-fade), #000 calc(100% - 24px), transparent 100%);
  }
  html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"] .gm-announce-track > span {
    position: relative;
    display: block;
    flex: 0 0 auto;
    padding-right: var(--am-ann-gap);
    animation: am-ann-marquee var(--am-ann-dur, 10s) linear 2s infinite;
  }
  /* Separator between loop copies: centred in the 28px gap. */
  html body.gm-sidebar-layout div.gm-topbar-announce[data-am-ann="scroll"] .gm-announce-track > span::after {
    content: "\2022";
    content: "\2022" / "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--am-ann-gap);
    color: rgb(255 255 255 / .5);
    font-size: 10px;
    font-weight: 400;
    text-align: center;
  }
  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,
     11-sidebar.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: 575.98px) {
  /* Payments above links (DOM order, so the two heads are tabbed in drawn
     order); the rest is 50-footer's phone stack. */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-shell {
    grid-template-areas:
      "brand  brand  brand  brand"
      "cr     cr     cr     cr"
      "soc    soc    soc    soc"
      "trust  trust  trust  trust"
      "strip  strip  strip  strip"
      "pay    pay    pay    pay"
      "links  links  links  links"
      "licp   licp   licp   licp"
      ".      lict   lict   ."
      ".      licx   licx   ."
      "provh  provh  provh  provh"
      "prov   prov   prov   prov"
      "bottom bottom bottom bottom";
  }
  /* The JS heads replace 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: 44px;
    margin: 0;
    padding: 0 2px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--am-text);
    font: 700 11px/16px var(--am-font);
    letter-spacing: .08em;
    text-align: start;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Both heads: the footer panel, a full-width 52px tap row, the section's
     label pill. The panel's own 1px edge and fill are the payment panel's. */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-sec:has(> .am-acc-h),
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links:has(> .am-acc-h) {
    margin-top: 0;
    padding: 0 14px;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links:has(> .am-acc-h) {
    border: 1px solid var(--am-ft-edge);
    border-radius: var(--am-r-12);
    background: var(--am-ft-panel);
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc :is(.gmf-sec, .gmf-links) .am-acc-btn {
    min-height: 52px;
    margin: 0 -14px;
    padding: 0 16px 0 14px;
    width: calc(100% + 28px);
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc :is(.gmf-sec, .gmf-links) .am-acc-lbl {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 26px;
    padding: 0 13px;
    border: 1px solid rgb(var(--am-accent-rgb) / .4);
    border-radius: var(--am-r-pill);
    background: var(--am-ft-bg);
    color: var(--am-accent);
    white-space: nowrap;
  }
  /* 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 .gmf-links .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;
  }

  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links:has(> .am-acc-h) {
    margin-top: 22px;
  }
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc :is(.gmf-sec, .gmf-links)[data-am-acc-open="1"] {
    padding-bottom: 16px;
  }

  /* Closed link group, when no RG-strip links exist: only the two pinned
     links show, on one line in their own content-sized columns (the head
     still spans the full width). */
  html body.gm-sidebar-layout footer.site-footer.am-footer-acc .gmf-links[data-am-acc-open="0"]:has(> a[data-am-acc-pin]) {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    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. */
  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: 575.98px) 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 ---- */
/*
 * v3 (2026-10-30, SPEC §4.11-§4.14, §7 step 6): Casibow-green lobby pages.
 * Catalog pages: /slot (aqua-slot.php + aqua-slot.css) and /livecasino
 * (aqua-livecasino.php + aqua-livecasino.css).
 *
 * Layout, top to bottom (SPEC §4.12 rhythm, measured on the reference):
 *   page band (title + art)  -> search +20 (12 <=991) -> tab rail +16 (12)
 *   -> chips +10 (8 <=767) -> filter row +10 -> grid +12 -> load more
 *   +20 (16) -> footer +40 (50-footer).
 *  - Owner decision 4: the promo slider is hidden on both pages; the band
 *    takes the first slide's art (30-catalog.js copies its url into
 *    --am-cat-art on the band, [data-am-cat-art]) as an ambient strip on
 *    its right: the art's bottom-right corner (roulette, chips) in a dark
 *    green monochrome, fading in from the left, so the baked promo copy
 *    stays out of it (D, see section 2).
 *  - The band is full column width (>=992) / full-bleed (<=991); every
 *    other block is inset by --am-inset (44 / 8). main has no padding.
 *  - /slot: #slot-games is a flex column; .slot-toolbar is a grid that
 *    puts the search first, the JS tab rail (nav.am-lobby-tabs) second and
 *    the chips third. The "Tüm Sağlayıcılar" picker is a child of the
 *    chips scroller, so it is positioned absolutely against
 *    .slot-toolbar-filters (an ancestor of the scroller: it is neither
 *    clipped nor scrolled) and sits on its own "Filtre" row below.
 *  - /livecasino: main is a flex column and its section dissolves
 *    (display:contents, needs :has()), so band -> search -> tabs -> chips
 *    -> filter toggle -> grid exactly like /slot. Without :has() the DOM
 *    order stays.
 *  - Grid: 3 / 4 (768) / 5 (1200) / 6 (1400) / 7 (1700) columns. The
 *    reference gutters are kept (30 / 22; 18 / 14 <=575) but the grid has
 *    no inline padding (D, final-fix pass 2026-11-04: the reference's item
 *    padding left the cards 4-8px inside the chips, tabs and load-more, so
 *    the page had no single edge). Everything from the band text to the
 *    load-more button now sits on --am-cat-x (8 / 44).
 *  - Cards: cover = the page's own aspect-ratio contract (slots 330/420,
 *    live 1/1 = the --ar of nearly every table), letterboxed past a 1.3
 *    crop (blurred --cov bands on slots, [data-am-band]); foot 32.5px with
 *    the name (44px and two lines <=575, D: nine characters of a name left
 *    sibling games identical). One tag on the art: "Popüler" or the
 *    provider (/slot), CANLI (live; the provider tag is hidden). Tags are
 *    10/14 (D: SPEC §4.7 says 8/12, the smallest text on the site; 9px
 *    <=380 where the card is 100px). Play controls are hidden at rest and
 *    on hover and show a 44px disc on keyboard focus only (never
 *    display:none).
 *
 * Kept v2 contracts (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.
 *  - gm_slot_scroll_v1 restore: card heights are deterministic. Cards keep
 *    content-visibility:auto (theme "slotperf"); their placeholder height
 *    is the real height, computed from the grid width in container units
 *    (#slotGrid / #lcGrid are inline-size containers), so a restore lands
 *    on the same card before any card above it has rendered.
 *  - No transform/filter/contain/isolation/z-index on main.page-shell,
 *    section.game-section or #slot-games: the fixed provider modal lives
 *    inside them.
 *  - 60-motion: cards keep #slotGrid > .slot-card / #lcGrid > .lc-card,
 *    .slot-card-media stays the positioned, clipping cover (its ::after is
 *    the hover sweep) and .lc-play-btn stays the cover-sized absolute layer
 *    (its ::after is the live sweep).
 *
 * Retired (v2): the slider height cap + blurred side bands, the sticky
 * pill band (data-am-stuck / data-am-unstick), the desktop toolbar panel,
 * the square cover, the hover scrim + play disc, the pinned picker chip.
 *
 * Breakpoints: base = phones, 576, 768, 992, 1200, 1400, 1700 (max bounds
 * .98).
 */

/* ---------------------------------------------------------------------------
   0. Local tokens
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout {
  --am-cat-x: var(--am-inset);         /* section inset: 8 (<=991) / 44 */
  --am-cat-band-h: 100px;
  --am-cat-band-x: var(--am-inset);    /* band inner padding: on the grid edge (D: SPEC 12 / 48) */
  --am-cat-band-fs: 22px;
  --am-cat-band-lh: 24.2px;
  --am-cat-gap-search: 12px;           /* band -> search */
  --am-cat-gap-tabs: 12px;             /* search -> tab rail */
  --am-cat-gap-chips: 8px;             /* tab rail -> chips */
  --am-cat-gap-filter: 10px;           /* chips -> filter row */
  --am-cat-gap-grid: 12px;             /* filter row -> grid */
  --am-cat-gap-more: 16px;             /* grid -> load more */
  --am-cat-ctl-h: 32px;                /* chips + filter control */
  --am-cat-filter-lbl: 24px;           /* "Filtre" label width incl. gap (icon only <=575) */
  /* Grid: columns, card gutters, inline padding (0: cards on --am-cat-x). */
  --am-cat-cols: 3;
  --am-cat-cg: 18px;
  --am-cat-rg: 14px;
  --am-cat-px: 0px;                    /* grid inline padding (read by .is-loading too) */
  --am-cat-pb: 4px;
  --am-cat-foot: 32.5px;               /* name row incl. its 1px top line */
  --am-cat-crop: 1.3;                  /* max crop factor before letterboxing */
  --am-cat-cover: linear-gradient(180deg, #0c2418, #040d08);
  --am-cat-foot-bg: linear-gradient(180deg, #05120b, #040d08);
  --am-cat-shimmer: linear-gradient(100deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .05) 45%, rgb(255 255 255 / .08) 50%, rgb(255 255 255 / .05) 55%, rgb(255 255 255 / 0) 70%);
  --am-cat-tag-bg: rgb(1 13 8 / .6);
}
@media (min-width: 576px) {
  html body.gm-sidebar-layout {
    --am-cat-cg: 30px;
    --am-cat-rg: 22px;
    --am-cat-pb: 8px;
    --am-cat-filter-lbl: 66px;
  }
}
@media (min-width: 768px) {
  html body.gm-sidebar-layout {
    --am-cat-cols: 4;
    --am-cat-band-fs: 28px;
    --am-cat-band-lh: 29.4px;
    --am-cat-gap-chips: 10px;
    --am-cat-ctl-h: 34px;
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout {
    --am-cat-band-h: 120px;
    --am-cat-band-fs: 34px;
    --am-cat-band-lh: 35.7px;
    --am-cat-gap-search: 20px;
    --am-cat-gap-tabs: 16px;
    --am-cat-gap-more: 20px;
  }
}
@media (min-width: 1200px) {
  html body.gm-sidebar-layout { --am-cat-cols: 5; }
}
@media (min-width: 1400px) {
  html body.gm-sidebar-layout { --am-cat-cols: 6; }
}
@media (min-width: 1700px) {
  html body.gm-sidebar-layout { --am-cat-cols: 7; }
}

/* ---------------------------------------------------------------------------
   1. Page frame: main without padding, slider hidden (owner decision 4)
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--am-container);
  min-width: 0;
  margin: 0 auto;
  padding: 0;
}
html body.gm-sidebar-layout main.page-shell:is(:has(> #slot-games), :has(> #lcProviders)) > .gm-slider {
  display: none;
}

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 #slot-games {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Live (needs :has()): main is a flex column, the section dissolves. */
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > * {
  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) > section.game-section > .section-header { order: 1; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > .lc-search { order: 2; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > nav.am-lobby-tabs { order: 3; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders { order: 4; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcFilterToggle { order: 5; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > #lcGrid { order: 6; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > .gm-catalog-error { order: 7; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > #lcEmpty { order: 8; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > section.game-section > #lcLoadMoreWrap { order: 9; }
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > .lc-cta { order: 10; }

/* ---------------------------------------------------------------------------
   2. Page band (SPEC §4.11): "Tüm Slotlar" / "Canlı Masalar" head
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout :is(#slot-games, main.page-shell:has(> #lcProviders) > section.game-section) > .section-header {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  height: var(--am-cat-band-h);
  min-width: 0;
  margin: 12px var(--am-cat-x) 0;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .065);
  border-radius: 24px;
  background: var(--am-grad-band);
  box-shadow: 0 18px 48px -6px rgb(0 0 0 / .38), inset 0 1px 0 rgb(255 255 255 / .08);
}
/* 1px green top line. */
html body.gm-sidebar-layout :is(#slot-games, main.page-shell:has(> #lcProviders) > section.game-section) > .section-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, rgb(2 83 40 / 0), rgb(2 83 40 / .55), rgb(2 83 40 / 0));
  opacity: .8;
  pointer-events: none;
}
/* Art layer: an ambient strip on the right of the band (only once
   30-catalog.js has set --am-cat-art). (D) Our art is a bright promo
   banner with baked copy (copy left, character + roulette right), the
   reference's a dark table photo. So the layer bleeds to the band's right
   edge, covers at most min(62%, 760px), shows only the art's bottom-right
   corner (the roulette and chips: auto 340% from the bottom right, which
   keeps the baked copy outside the layer at every width) and fades in from
   the left; a dark-green monochrome (grayscale + sepia turned green) at
   half brightness makes it mood art in the brand colour, not a second
   promo thumbnail and not a blue glow. */
html body.gm-sidebar-layout :is(#slot-games, main.page-shell:has(> #lcProviders) > section.game-section) > .section-header[data-am-cat-art]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 0;
  width: min(62%, 760px);
  background:
    linear-gradient(180deg, rgb(1 13 8 / .55) 0, rgb(1 13 8 / 0) 30%, rgb(1 13 8 / 0) 70%, rgb(1 13 8 / .5) 100%),
    var(--am-cat-art, none) 100% 100% / auto 340% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 8%, rgb(0 0 0 / .3) 32%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0, transparent 8%, rgb(0 0 0 / .3) 32%, #000 62%);
  filter: grayscale(1) sepia(1) hue-rotate(92deg) saturate(1.4) brightness(.5);
  pointer-events: none;
}
html body.gm-sidebar-layout :is(#slot-games, main.page-shell:has(> #lcProviders) > section.game-section) > .section-header > * {
  position: relative;
  z-index: 1;
}
html body.gm-sidebar-layout :is(#slot-games, main.page-shell:has(> #lcProviders) > section.game-section) > .section-header > .section-title {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgb(255 255 255 / .96);
  font: 800 var(--am-cat-band-fs) / var(--am-cat-band-lh) var(--am-font);
  letter-spacing: .2px;
  text-shadow: 0 10px 24px rgb(0 0 0 / .35);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.gm-sidebar-layout :is(#slot-games, main.page-shell:has(> #lcProviders) > section.game-section) > .section-header > .section-title::before {
  content: none;
}

/* /slot "Canlı Casino" cross-link = the outlined panel CTA (SPEC §4.9). */
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 36px;
  min-height: 0;
  padding: 0 14px 0 16px;
  border: 1px solid var(--am-line-accent);
  border-radius: var(--am-r-pill);
  background: var(--am-tint);
  color: var(--am-text);
  font: 600 12px/1 var(--am-font);
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
/* 44.5px hit area (vertical only, inside the band). */
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link::after {
  content: "";
  position: absolute;
  inset: -5px 0;
}
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link > i {
  width: 16px;
  color: currentColor;
  font-size: 12px;
  text-align: center;
}
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link > i.fa-arrow-right::before {
  content: "\f054"; /* chevron-right */
}
html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}

/* Live table counter: a static tag with the live dot, not a link. */
html body.gm-sidebar-layout #lcCount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 36px;
  min-height: 0;
  padding: 0 16px 0 14px;
  border: 1px solid var(--am-line-3);
  border-radius: var(--am-r-pill);
  background: var(--am-cat-tag-bg);
  color: var(--am-text);
  font: 600 12px/1 var(--am-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}
html body.gm-sidebar-layout #lcCount::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--am-accent-bright);
  box-shadow: 0 0 0 3px rgb(52 216 122 / .16), 0 0 8px rgb(52 216 122 / .6);
}
html body.gm-sidebar-layout #lcCount > i {
  display: none;
}

/* ---------------------------------------------------------------------------
   3. Toolbar (SPEC §4.12)
   ------------------------------------------------------------------------ */
/* /slot: search -> tab rail -> chips (+ the absolute "Filtre" row). */
html body.gm-sidebar-layout #slot-games .slot-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin: var(--am-cat-gap-search) var(--am-cat-x) 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html body.gm-sidebar-layout #slot-games .slot-toolbar > .slot-search { order: 1; }
html body.gm-sidebar-layout #slot-games .slot-toolbar > nav.am-lobby-tabs {
  order: 2;
  justify-self: start;
  margin-top: var(--am-cat-gap-tabs);
}
html body.gm-sidebar-layout #slot-games .slot-toolbar > .slot-toolbar-filters {
  order: 3;
  position: relative;
  min-width: 0;
  margin: var(--am-cat-gap-chips) 0 0;
  padding: 0 0 calc(var(--am-cat-gap-filter) + var(--am-cat-ctl-h));
  background: none;
  box-shadow: none;
}

/* Live: the same rows as flex items of main. */
html body.gm-sidebar-layout main.page-shell > .lc-search {
  margin: var(--am-cat-gap-search) var(--am-cat-x) 0;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > nav.am-lobby-tabs {
  align-self: flex-start;
  max-width: calc(100% - 2 * var(--am-cat-x));
  margin: var(--am-cat-gap-tabs) var(--am-cat-x) 0;
}
html body.gm-sidebar-layout main.page-shell > #lcProviders {
  margin: var(--am-cat-gap-chips) var(--am-cat-x) 0;
}

/* ---- Search: unified soft pill capsule (icon + input inside) ---- */
html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-width: 0;
  height: 48px;
  padding: 0 18px 0 8px;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--am-r-pill);
  background: linear-gradient(145deg, rgb(255 255 255 / .065) 0%, rgb(10 31 20 / .48) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 8px 20px -4px rgb(0 0 0 / .28);
}
html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) > i {
  position: static;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgb(var(--am-accent-rgb) / .12);
  color: var(--am-accent-bright);
  font-size: 15px;
  transform: none;
  pointer-events: none;
}
html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) input {
  display: block;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--am-text);
  font: 500 14px/1.2 var(--am-font);
  outline: none;
  caret-color: var(--am-text);
}
html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) input::placeholder {
  color: var(--am-text-label);
  font-size: 14px;
  opacity: 1;
}
html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search):focus-within {
  border-color: rgb(16 180 97 / .62);
  box-shadow: 0 0 0 3px rgb(2 83 40 / .14), 0 10px 24px rgb(0 0 0 / .28);
}
html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) input:focus {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search):focus-within > i {
  background: rgb(var(--am-accent-rgb) / .24);
  color: var(--am-accent-bright);
}
/* iOS zooms into fields under 16px: touch devices keep 16px. */
@media (pointer: coarse) {
  html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) input {
    font-size: 16px;
  }
}
/* <=991 the row is 44px (reference 44 at 390 and 768); phones keep 16px. */
@media (max-width: 991.98px) {
  html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) {
    height: 44px;
  }
  html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) input {
    height: 100%;
  }
}
@media (max-width: 575.98px) {
  html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search) input {
    font-size: 16px;
  }
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout :is(#slot-games .slot-search, main.page-shell > .lc-search):not(:focus-within):hover {
    border-color: rgb(52 216 122 / .35);
  }
}

/* ---- Tab rail (JS-built nav.am-lobby-tabs, links only) ---- */
html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  height: 40px;
  padding: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--am-line-ctl);
  border-radius: var(--am-r-pill);
  background: rgb(255 255 255 / .035);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 14px 36px rgb(0 0 0 / .42);
  scrollbar-width: none;
}
html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs::-webkit-scrollbar {
  display: none;
}
html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 32px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--am-r-pill);
  color: var(--am-text-2);
  font: 600 12.5px/12.5px var(--am-font);
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}
html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs > a > i {
  width: 20px;
  color: currentColor;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}
html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs > a[aria-current="page"] {
  border-color: rgb(16 180 97 / .4);
  background: var(--am-accent-deep);
  color: var(--am-text);
  font-weight: 700;
}
html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs > a:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: -2px;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs > a:not([aria-current="page"]):hover {
    background: rgb(255 255 255 / .04);
    color: var(--am-text);
  }
}
/* <=767: 36px rail, 30px buttons (SPEC §4.12): 2px rail padding. */
@media (max-width: 767.98px) {
  html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs {
    height: 36px;
    padding: 2px;
  }
  html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs > a {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* ---- Chips: /slot provider pills, live provider pills ----
   <=767: one scrolling row with edge fades; from 768 they wrap. */
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders) {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 28px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: none;
  box-shadow: none;
  clip-path: none;
}
html body.gm-sidebar-layout #slot-games #slotFilterPills {
  margin: -4px 0;
}
html body.gm-sidebar-layout main.page-shell > #lcProviders {
  margin-bottom: -4px;
  padding-top: 4px;
  transform: none;
  visibility: visible;
}
html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders {
  margin-top: calc(var(--am-cat-gap-chips) - 4px);
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders)::-webkit-scrollbar {
  display: none;
}
/* Edge fades (<=767), sticky inside the row, in the canvas colour. The
   left one appears once 30-catalog.js reports a scroll. */
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders)::before,
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders)::after {
  content: "";
  position: sticky;
  z-index: 2;
  flex: 0 0 28px;
  align-self: stretch;
  margin-block: -4px;
  pointer-events: none;
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders)::before {
  left: 0;
  margin-right: -34px; /* zero net width (28 + 6 gap) */
  background: linear-gradient(to right, var(--am-bg) 20%, rgb(var(--am-bg-rgb) / 0));
  opacity: 0;
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders)::after {
  right: 0;
  margin-left: -6px; /* cancels the gap: the fade sits after the last pill */
  background: linear-gradient(to left, var(--am-bg) 20%, rgb(var(--am-bg-rgb) / 0));
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders):is([data-am-scroll="middle"], [data-am-scroll="end"])::before {
  opacity: 1;
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders):is([data-am-scroll="end"], [data-am-scroll="none"])::after {
  opacity: 0;
}

html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill, main.page-shell > #lcProviders .lc-pill) {
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: var(--am-cat-ctl-h);
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0 13px;
  border: 1px solid var(--am-line-ctl);
  border-radius: var(--am-r-pill);
  background: rgb(255 255 255 / .038);
  color: var(--am-text-2);
  font: 600 11.5px/18px var(--am-font);
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
/* 40px hit area on the 34px pill (rows are 6px apart when they wrap). */
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill, main.page-shell > #lcProviders .lc-pill)::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill, main.page-shell > #lcProviders .lc-pill) > i {
  display: none;
}
/* Display per page (an :is() list would take the id-heavier /slot weight
   and out-rank the live cap below). Every /slot pill stays reachable. */
html body.gm-sidebar-layout #slot-games #slotFilterPills .slot-pill {
  display: inline-flex;
}
/* Provider pills keep the data's casing (html lang=tr would print
   "PRAGMATİC PLAY", "EVOLUTİON"); "TÜMÜ" / "TÜM OYUNLAR" stay uppercase. */
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill:not([data-provider="all"], .slot-picker-btn), main.page-shell > #lcProviders .lc-pill:not([data-filter="all"])) {
  text-transform: none;
}
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;
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill, main.page-shell > #lcProviders .lc-pill) :is(.pill-count, .lc-pill-count) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  box-sizing: border-box;
  height: 18px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-pill);
  background: rgb(255 255 255 / .07);
  color: rgb(255 255 255 / .55);
  font: 600 11px/1 var(--am-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  opacity: 1;
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill.is-active, main.page-shell > #lcProviders .lc-pill.active) {
  border-color: rgb(16 180 97 / .45);
  background: var(--am-accent-deep);
  color: var(--am-text);
  font-weight: 700;
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill.is-active, main.page-shell > #lcProviders .lc-pill.active) :is(.pill-count, .lc-pill-count) {
  border-color: rgb(255 255 255 / .12);
  background: rgb(1 13 8 / .3);
  color: rgb(255 255 255 / .85);
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill, main.page-shell > #lcProviders .lc-pill):focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: -3px;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill:not(.is-active), main.page-shell > #lcProviders .lc-pill:not(.active)):hover {
    border-color: rgb(255 255 255 / .16);
    background: rgb(255 255 255 / .07);
    color: var(--am-text);
  }
}
@media (min-width: 768px) {
  html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders) {
    flex-wrap: wrap;
    padding: 0;
    overflow: visible;
  }
  html body.gm-sidebar-layout #slot-games #slotFilterPills {
    margin: 0;
  }
  html body.gm-sidebar-layout main.page-shell > #lcProviders {
    margin-bottom: 0;
    padding-top: 0;
  }
  html body.gm-sidebar-layout main.page-shell:has(> #lcProviders) > #lcProviders {
    margin-top: var(--am-cat-gap-chips);
  }
  html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders)::before,
  html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders)::after {
    content: none;
  }
  html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill, main.page-shell > #lcProviders .lc-pill) {
    padding: 0 14px;
    border-radius: var(--am-r-pill);
    font-size: 12px;
  }
  html body.gm-sidebar-layout :is(#slot-games #slotFilterPills .slot-pill, main.page-shell > #lcProviders .lc-pill)::after {
    inset: -3px 0;
  }
}

/* Live provider list: <=767 every pill sits in the scrolling row (the
   theme caps the collapsed list at 10); from 768 the collapsed list wraps
   the first 10 plus the active one, and "Tüm sağlayıcıları göster"
   (#lcFilterToggle) expands it to all of them. */
html body.gm-sidebar-layout main.page-shell > #lcProviders .lc-pill {
  display: inline-flex;
}
/* Same :is() form as the shared rail rules, so .is-expanded out-ranks them. */
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders).is-expanded {
  flex-wrap: wrap;
  overflow: visible;
}
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders).is-expanded::before,
html body.gm-sidebar-layout :is(#slot-games #slotFilterPills, main.page-shell > #lcProviders).is-expanded::after {
  content: none;
}
@media (min-width: 768px) {
  html body.gm-sidebar-layout main.page-shell > #lcProviders:not(.is-expanded) .lc-pill:nth-child(n + 11):not(.active) {
    display: none;
  }
}

/* ---- Filter row: "Filtre · <Sağlayıcılar> ▾" ----
   /slot: the picker is placed absolutely on the row reserved by
   .slot-toolbar-filters' bottom padding (30-catalog.js moves it out of
   #slotFilterPills to .slot-toolbar-filters so the horizontal rail's
   overflow does not clip it).
   Live: #lcFilterToggle is its own flex row. The "Filtre" label (filter
   icon + word) is drawn by the button's own pseudo-elements in the
   --am-cat-filter-lbl gutter to its left (icon only <=575), so a tap on it
   opens the list too. */
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: var(--am-cat-ctl-h);
  min-height: 0;
  padding: 0 14px;
  border: 1px solid var(--am-line-ctl);
  border-radius: var(--am-r-pill);
  background: rgb(255 255 255 / .038);
  box-shadow: none;
  color: var(--am-text);
  font: 600 12.5px/18px var(--am-font);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: none;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout #slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: var(--am-cat-filter-lbl);
  z-index: 1;
  max-width: min(320px, calc(100% - var(--am-cat-filter-lbl)));
  margin: 0;
}
html body.gm-sidebar-layout main.page-shell > #lcFilterToggle {
  position: relative;
  top: auto;
  z-index: auto;
  align-self: flex-start;
  max-width: calc(100% - 2 * var(--am-cat-x) - var(--am-cat-filter-lbl));
  margin: var(--am-cat-gap-filter) var(--am-cat-x) 0 calc(var(--am-cat-x) + var(--am-cat-filter-lbl));
}
/* The page's icon becomes the trailing chevron. */
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle) > i {
  display: inline-block;
  order: 2;
  flex: 0 0 18px;
  width: 18px;
  margin: 0;
  color: rgb(255 255 255 / .86);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  transform: none;
}
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle) > i::before {
  content: "\f078"; /* chevron-down */
}
/* Open states, in the same :is() form so they out-rank the rules above. */
html body.gm-sidebar-layout.slot-modal-open :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle) > i,
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle).is-expanded > i {
  transform: rotate(180deg);
}
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn > .pill-label, main.page-shell > #lcFilterToggle > span) {
  position: static;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  overflow: hidden;
  clip-path: none;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "Filtre" label: icon (::before) + word (::after), left of the button. */
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle)::before,
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle)::after {
  position: absolute;
  top: 50%;
  bottom: auto;
  right: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--am-text-label);
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle)::before {
  content: "\f0b0"; /* filter */
  left: calc(-1 * var(--am-cat-filter-lbl) - 1px);
  width: 16px;
  font: 900 13px/16px "Font Awesome 6 Free";
  text-align: center;
}
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle)::after {
  content: "Filtre";
  left: calc(-1 * var(--am-cat-filter-lbl) + 23px);
  font: 600 12px/18px var(--am-font);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle) {
    min-width: calc(50% - var(--am-cat-filter-lbl) - 4px);
  }
  html body.gm-sidebar-layout #slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn > .pill-label,
  html body.gm-sidebar-layout main.page-shell > #lcFilterToggle > span {
    flex: 1 1 auto;
  }
  html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle)::after {
    content: none;
  }
}
/* A provider picked from the list (not a chip): the picker shows it. */
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn.is-active, main.page-shell > #lcFilterToggle.is-expanded) {
  border-color: rgb(16 180 97 / .45);
  background: var(--am-accent-deep);
  color: var(--am-text);
  font-weight: 700;
}
html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle):focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn:not(.is-active), main.page-shell > #lcFilterToggle:not(.is-expanded)):hover {
    border-color: rgb(255 255 255 / .16);
    background: rgb(255 255 255 / .07);
    color: var(--am-text);
  }
}

/* ---------------------------------------------------------------------------
   4. Provider picker (/slot): reference popover under the picker from 992
   (30-catalog.js anchors it: [data-am-pop], --am-pop-*), centred dialog at
   576-991 (and from 992 without JS), 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: var(--am-overlay);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  padding: 0 10px 10px;
  overflow: hidden;
  border: 1px solid rgb(2 83 40 / .5);
  border-bottom: 0;
  border-radius: var(--am-r-12) var(--am-r-12) 0 0;
  background: var(--am-surface-2);
  box-shadow: 0 14px 40px rgb(0 0 0 / .45);
  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: rgb(255 255 255 / .16);
}
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 0 10px 4px;
  border: 0;
}
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: 700 16px/1.2 var(--am-font);
  letter-spacing: .01em;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-head h3 > i {
  color: var(--am-accent-bright);
  font-size: 15px;
}
html body.gm-sidebar-layout #slotProviderModal .fa-grid-2::before {
  content: "\f0b0"; /* filter (FA Free; grid-2 is Pro-only) */
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--am-r-sm);
  background: rgb(255 255 255 / .05);
  color: rgb(255 255 255 / .8);
  font-size: 16px;
  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;
  box-sizing: border-box;
  height: 46px;
  margin: 0 0 8px;
  padding: 0 14px;
  border: 1px solid var(--am-field-line);
  border-radius: var(--am-r-6);
  background: var(--am-grad-band);
  color: var(--am-text-label);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search:focus-within {
  border-color: rgb(16 180 97 / .75);
  box-shadow: 0 0 0 3px rgb(16 180 97 / .18);
  color: var(--am-accent-bright);
}
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);
  caret-color: var(--am-text);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search input::placeholder {
  color: var(--am-text-label);
  font-size: 14px;
  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: 2px;
  margin: 0 -4px;
  padding: 0 4px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / .14) transparent;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 8px 0 10px;
  border: 1px solid transparent;
  border-radius: var(--am-r-xs);
  background: transparent;
  color: #f1f5f9;
  font: 600 13px/18px 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 10px;
  border-radius: var(--am-r-pill);
  background: linear-gradient(to right, #024b24, #037035);
  color: var(--am-text);
  font: 600 12px/1.2 var(--am-font);
  font-variant-numeric: tabular-nums;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt[aria-selected="true"] {
  border-color: rgb(16 180 97 / .35);
  background: rgb(2 83 40 / .45);
  color: var(--am-text);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: -2px;
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt-empty {
  grid-column: 1 / -1;
  padding: 24px 12px;
  color: var(--am-text-3);
  font: 500 13px/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: rgb(255 255 255 / .05);
    color: var(--am-text);
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-close:hover {
    background: rgb(255 255 255 / .1);
    color: var(--am-text);
  }
}
@media (min-width: 576px) {
  html body.gm-sidebar-layout #slotProviderModal {
    align-items: center;
    padding: 24px 24px calc(24px + var(--gm-bottom, 0px));
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-panel {
    width: min(520px, 100%);
    max-height: min(640px, 100%);
    padding-top: 10px;
    border-bottom: 1px solid rgb(2 83 40 / .5);
    border-radius: var(--am-r-12);
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-panel::before {
    content: none;
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-head {
    padding-top: 0;
  }
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6px;
  }
}
/* >=992 with JS: the reference popover, anchored under (or over) the
   picker. Search + close share the first row; the "Sağlayıcı Seç" title
   stays for the dialog's aria-labelledby, visually hidden. The root keeps
   the full-screen hit area (a click outside the panel closes it, page JS)
   without dimming the page. */
@media (min-width: 992px) {
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop] {
    display: block;
    padding: 0;
    background: transparent;
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop] .slot-provider-modal-panel {
    position: absolute;
    top: var(--am-pop-y, 0px);
    left: var(--am-pop-x, 0px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    grid-template-rows: 46px minmax(0, 1fr);
    gap: 10px 8px;
    width: 300px;
    max-height: var(--am-pop-h, 420px);
    padding: 10px;
    border: 1px solid rgb(2 83 40 / .5);
    border-radius: var(--am-r-12);
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop="up"] .slot-provider-modal-panel {
    top: auto;
    bottom: var(--am-pop-y, 0px);
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop] .slot-provider-modal-search {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop] .slot-provider-modal-head {
    grid-row: 1;
    grid-column: 2;
    padding: 0;
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop] .slot-provider-modal-head h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop] .slot-provider-modal-close {
    width: 46px;
    height: 46px;
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop] .slot-provider-modal-list {
    grid-row: 2;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop] .slot-provider-opt {
    min-height: 34px;
    font-size: 12px;
  }
}
/* While the sheet is open the support launcher and mobile dock step aside. */
html body.gm-sidebar-layout.slot-modal-open :is(.gm-live-support-fab, .gm-support-status, [data-destek-widget], nav.gm-bottombar) {
  visibility: hidden;
}

/* ---------------------------------------------------------------------------
   5. Recently played rail (/slot, localStorage); head = SPEC §4.14 (a)
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slotRecentWrap {
  margin: 16px var(--am-cat-x) 0;
  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: 4px;
  margin: 0;
  color: var(--am-text);
  font: 700 16px/25.5px var(--am-font);
  letter-spacing: .01em;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-title > i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--am-accent-bright);
  font-size: 17px;
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-clear {
  position: relative;
  box-sizing: border-box;
  height: 32px;
  min-height: 0;
  padding: 0 12px;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-xs);
  background: transparent;
  color: var(--am-text-3);
  font: 600 12px/1 var(--am-font);
  cursor: pointer;
}
/* 44px hit area on the 32px "Temizle" button. */
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-clear::after {
  content: "";
  position: absolute;
  inset: -7px -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 4px 6px;
  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: 1px solid var(--am-line-2);
  border-radius: var(--am-r-12);
  background: var(--am-grad-card);
  box-shadow: none;
  color: var(--am-text);
  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-cover);
}
html body.gm-sidebar-layout #slotRecentWrap .slot-recent-name {
  display: block;
  padding: 7px 8px 8px;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / .05);
  color: var(--am-text);
  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 {
    border-color: var(--am-line-hover);
  }
  html body.gm-sidebar-layout #slotRecentWrap .slot-recent-clear:hover {
    border-color: var(--am-line-hover);
    color: var(--am-text);
  }
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout #slotRecentWrap .slot-recent-card {
    width: 112px;
  }
  html body.gm-sidebar-layout #slotRecentWrap .slot-recent-title {
    font-size: 17px;
  }
}

/* ---------------------------------------------------------------------------
   6. Grid (SPEC §4.13). The grid is an inline-size container so the cards
   can state their real height in cqi for content-visibility (section 7).
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout :is(#slot-games #slotGrid, main.page-shell #lcGrid) {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--am-cat-cols), minmax(0, 1fr));
  align-items: start;
  column-gap: var(--am-cat-cg);
  row-gap: var(--am-cat-rg);
  box-sizing: border-box;
  margin: var(--am-cat-gap-grid) var(--am-cat-x) 0;
  padding: 0 var(--am-cat-px) var(--am-cat-pb);
  opacity: 1;
}
html body.gm-sidebar-layout #slot-games #slotGrid { --am-cat-tile: calc(330 / 420); }
html body.gm-sidebar-layout main.page-shell #lcGrid { --am-cat-tile: 1; }

/* ---------------------------------------------------------------------------
   7. Card frame (slot + live)
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout :is(#slotGrid .slot-card, #lcGrid .lc-card) {
  /* Card width from the grid's content box (cqi), then its real height:
     1px border + cover (inner width / tile ratio) + foot + 1px border. */
  --am-cat-cw: calc((100cqi - (var(--am-cat-cols) - 1) * var(--am-cat-cg)) / var(--am-cat-cols));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--am-cat-foot);
  align-content: start;
  box-sizing: border-box;
  min-width: 0;
  height: auto;
  aspect-ratio: auto !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  isolation: isolate;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-12);
  background: var(--am-grad-card);
  box-shadow: var(--am-shadow-1);
  transform: none;
  transition: none;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  content-visibility: auto;
  contain-intrinsic-width: auto 100px;
  contain-intrinsic-height: auto calc((var(--am-cat-cw) - 2px) / var(--am-cat-tile) + var(--am-cat-foot));
}
html body.gm-sidebar-layout :is(#slotGrid .slot-card, #lcGrid .lc-card):focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout :is(#slotGrid .slot-card, #lcGrid .lc-card):hover {
    border-color: var(--am-line-hover);
    box-shadow: 0 16px 34px rgb(0 0 0 / .5), var(--am-glow);
  }
}

/* Visible box ratio of the art, relative to the tile (q = 1: fills it).
   Art wider than the tile is shown whole (letterboxed top/bottom); art
   narrower than the tile is cropped by up to --am-cat-crop, then
   letterboxed left/right. r = (art ratio) / (tile ratio);
   q = max(r, clamp(r / crop, 1, r * crop)), mirrored in 30-catalog.js. */
html body.gm-sidebar-layout #slotGrid .slot-card-media,
html body.gm-sidebar-layout #lcGrid .lc-card {
  --am-cat-r: calc(var(--ar, 1) / var(--am-cat-tile));
  --am-cat-q: max(var(--am-cat-r), clamp(calc(var(--am-cat-r) / var(--am-cat-crop)), 1, calc(var(--am-cat-r) * var(--am-cat-crop))));
}

/* Foot: the name, one line (SPEC §4.13). */
html body.gm-sidebar-layout :is(#slotGrid .slot-card-footer, #lcGrid .lc-card-name) {
  position: relative;
  inset: auto;
  z-index: 3;
  grid-row: 2;
  grid-column: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  box-sizing: border-box;
  height: var(--am-cat-foot);
  min-width: 0;
  margin: 0;
  padding: 8px 8px 0;
  border-top: 1px solid rgb(255 255 255 / .05);
  border-bottom: 8px solid #040d08;
  overflow: hidden;
  background: var(--am-cat-foot-bg);
  color: var(--am-text);
  font: 600 12.5px/15px var(--am-font);
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-wrap: wrap;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* Tags on the art (provider, "Popüler", CANLI): SPEC provider-tag style. */
html body.gm-sidebar-layout :is(#slotGrid .slot-card-hot, #slotGrid .slot-card-provider, #lcGrid .lc-badge-live, #lcGrid .lc-badge-provider) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid var(--am-line-3);
  border-radius: var(--am-r-6);
  background: var(--am-cat-tag-bg);
  color: #dfeee6;
  font: 700 10px/14px var(--am-font);
  letter-spacing: .03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  pointer-events: none;
}
/* Brand names keep the catalog's casing: html lang=tr uppercases i to İ
   ("PRAGMATİC PLAY"). The provider tag has one text run, so display:block
   lets its ellipsis work (it does not on a flex container). */
html body.gm-sidebar-layout :is(#slotGrid .slot-card-provider, #lcGrid .lc-badge-provider) {
  letter-spacing: .01em;
  text-transform: none;
}
html body.gm-sidebar-layout #slotGrid .slot-card-provider {
  display: block;
}
html body.gm-sidebar-layout :is(#slotGrid .slot-card-hot, #slotGrid .slot-card-provider) {
  position: absolute;
  top: 6px;
  right: auto;
  bottom: auto;
  left: 6px;
  z-index: 3;
  max-width: calc(100% - 46px);
}
/* One tag per card (the reference art is nearly untouched; two stacked
   tags covered a quarter of the cover): "Popüler" wins over the provider
   tag on /slot, live cards keep CANLI only (the studio is in the table art
   and the chips filter by it). Static markup, not JS-toggled. */
html body.gm-sidebar-layout #slotGrid .slot-card:has(> .slot-card-hot) > .slot-card-provider,
html body.gm-sidebar-layout #lcGrid .lc-badge-provider {
  display: none;
}
html body.gm-sidebar-layout #slotGrid .slot-card-hot > i {
  color: var(--am-warn);
  font-size: 9px;
}
/* <=575 (100-180px cards) the provider tag only fits cut ("PRAGMATIC I");
   the studio mark is in the art and the chips filter by it. "Popüler" and
   CANLI stay: the decorative flame goes and the padding tightens, because
   the tag may be at most card - 46px (it ends 6px before the 28px heart)
   and text-overflow does nothing on the inline-flex tag. */
@media (max-width: 575.98px) {
  html body.gm-sidebar-layout #slotGrid .slot-card-provider {
    display: none;
  }
  html body.gm-sidebar-layout #slotGrid .slot-card-hot > i {
    display: none;
  }
  html body.gm-sidebar-layout :is(#slotGrid .slot-card-hot, #lcGrid .lc-badge-live) {
    padding: 2px 4px;
  }
}
@media (max-width: 380.98px) {
  html body.gm-sidebar-layout :is(#slotGrid .slot-card-hot, #lcGrid .lc-badge-live) {
    font-size: 9px;
  }
}

/* Favourite heart (SPEC §4.10 chip, tokens in 12-cards.css). */
html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav {
  position: absolute;
  top: var(--am-card-fav-inset, 6px);
  right: var(--am-card-fav-inset, 6px);
  bottom: auto;
  left: auto;
  z-index: 5;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--am-card-fav-size, 28px);
  height: var(--am-card-fav-size, 28px);
  margin: 0;
  padding: 0;
  border: 1px solid var(--am-card-chip-line, transparent);
  border-radius: 50%;
  background: var(--am-card-chip-bg, rgb(0 0 0 / .5));
  box-shadow: var(--am-card-chip-shadow, none);
  color: var(--am-text);
  font-size: var(--am-card-fav-icon, 13px);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 44px hit area. */
html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav.active {
  border-color: var(--am-card-chip-on-line, var(--am-line-cta));
  background: var(--am-card-chip-on, var(--am-grad));
  box-shadow: var(--am-card-chip-on-shadow, none);
  color: var(--am-text);
}
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:not(.active):hover {
    background: var(--am-card-chip-bg-hover, rgb(0 0 0 / .66));
  }
  html body.gm-sidebar-layout :is(#slotGrid, #lcGrid) .gm-fav.active:hover {
    border-color: var(--am-card-chip-on-line-hover, var(--am-accent));
  }
}

/* ---------------------------------------------------------------------------
   8. Slot card: 330/420 cover + foot
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #slotGrid .slot-card-media {
  position: relative;
  inset: auto;
  z-index: auto;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 330 / 420;
  overflow: hidden;
  background: var(--am-cat-cover) !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): the bands show the
   same art (--cov, set by the template) blurred and dimmed; the image
   stays whole and sharp on top. Only marked covers paint the blur. */
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);
}
html body.gm-sidebar-layout #slotGrid .slot-card-media img {
  object-fit: cover !important;
  object-position: 50% 40% !important;
}

/* Play layer = the cover only; hidden at rest and on hover, a 44px disc on
   keyboard focus (card or its button). The name it repeats is in the foot. */
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: 330 / 420;
  padding: 0;
  background: var(--am-card-scrim);
  opacity: 0;
  pointer-events: none;
}
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: 44px;
  height: 44px;
  min-height: 0;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 1px solid var(--am-line-cta);
  border-radius: 50%;
  background: var(--am-grad);
  color: var(--am-on-accent);
  font-size: 0;
  line-height: 0;
  box-shadow: var(--am-cta-shadow);
  cursor: pointer;
}
html body.gm-sidebar-layout #slotGrid .slot-card-play > i {
  margin-left: 2px;
  font-size: 15px;
  line-height: 1;
}
html body.gm-sidebar-layout #slotGrid .slot-card:is(:focus-visible, :has(.slot-card-play:focus-visible)) .slot-card-overlay {
  opacity: 1;
  pointer-events: auto;
}
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 (one ring). */
@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-cta-shadow);
  }
}

/* ---------------------------------------------------------------------------
   9. Live card: square cover + foot. The badges wrapper is the tag stack on
   the art; body/meta dissolve so the name lands in the foot row. The in-flow
   ::after is the square cover tile (it sizes row 1 and carries the
   skeleton); the image is placed inside it with width-relative offsets.
   ------------------------------------------------------------------------ */
html body.gm-sidebar-layout #lcGrid .lc-card {
  justify-content: stretch;
}
html body.gm-sidebar-layout #lcGrid .lc-card::before {
  content: none;
}
html body.gm-sidebar-layout #lcGrid .lc-card::after {
  content: "";
  grid-row: 1;
  grid-column: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: transparent;
  background-image: var(--am-cat-shimmer), var(--am-cat-cover);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  background-repeat: no-repeat;
}
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;
}
html body.gm-sidebar-layout #lcGrid .lc-card-badges {
  position: absolute;
  top: 6px;
  right: auto;
  left: 6px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  max-width: calc(100% - 46px);
  pointer-events: none;
}
html body.gm-sidebar-layout #lcGrid .lc-badge-live::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--am-accent-bright);
  box-shadow: 0 0 6px rgb(52 216 122 / .7);
}
html body.gm-sidebar-layout #lcGrid .lc-badge-live > i {
  display: none;
}
html body.gm-sidebar-layout #lcGrid .lc-card-body,
html body.gm-sidebar-layout #lcGrid .lc-card-meta {
  display: contents;
}
html body.gm-sidebar-layout #lcGrid .lc-card-sub {
  display: none;
}
/* Play layer: the absolute cover-sized box (60-motion's live sweep is its
   ::after); its disc (::before) and icon show on keyboard focus only. */
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;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--am-on-accent);
  font-size: 0;
  line-height: 0;
  pointer-events: none;
}
html body.gm-sidebar-layout #lcGrid .lc-play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  box-sizing: border-box;
  border: 1px solid var(--am-line-cta);
  border-radius: 50%;
  background: var(--am-grad);
  box-shadow: var(--am-cta-shadow);
  opacity: 0;
}
html body.gm-sidebar-layout #lcGrid .lc-play-btn > i {
  position: relative;
  margin-left: 2px;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
}
html body.gm-sidebar-layout #lcGrid .lc-card:focus-visible .lc-play-btn {
  background: var(--am-card-scrim);
}
html body.gm-sidebar-layout #lcGrid .lc-card:focus-visible .lc-play-btn::before,
html body.gm-sidebar-layout #lcGrid .lc-card:focus-visible .lc-play-btn > i {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   10. Loading, load more, empty + error states
   ------------------------------------------------------------------------ */
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: -7px;
  left: var(--am-cat-px);
  right: var(--am-cat-px);
  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: full content width, 48px band-gradient bar. The icon is drawn
   in CSS because the inline <i> is wiped by textContent on the first
   click. JS sets the wraps' display inline (never !important here). */
html body.gm-sidebar-layout #slot-games #slotLoadMoreWrap,
html body.gm-sidebar-layout main.page-shell #lcLoadMoreWrap {
  display: flex;
  justify-content: stretch;
  margin: var(--am-cat-gap-more) var(--am-cat-x) 0;
}
html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore) {
  appearance: none;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 0;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--am-line-2) !important;
  border-radius: var(--am-r-12);
  background: var(--am-grad-band) !important;
  color: var(--am-text) !important;
  font: 600 14px/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: "\f2f1"; /* rotate */
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  color: var(--am-accent-bright);
  font: 900 15px/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: 15px;
  height: 15px;
  border: 2px solid var(--am-accent-bright);
  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: var(--am-line-hover) !important;
    background: var(--am-surface-3) !important;
    color: var(--am-text) !important;
    box-shadow: none;
    transform: none;
  }
}

html body.gm-sidebar-layout #slot-games .slot-empty,
html body.gm-sidebar-layout main.page-shell #lcEmpty {
  grid-column: 1 / -1;
  margin: var(--am-cat-gap-grid) var(--am-cat-x) 0;
  padding: 40px 20px !important;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-18);
  background: var(--am-grad-panel);
  box-shadow: var(--am-shadow-2);
  color: var(--am-text-2) !important;
  font: 400 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: 1px solid rgb(16 180 97 / .32);
  border-radius: 50%;
  background: var(--am-tint-2);
  color: var(--am-accent-bright) !important;
  font-size: 22px !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;
  box-sizing: border-box;
  width: calc(100% - 2 * var(--am-cat-x));
  max-width: 560px;
  margin: 16px auto 0;
  padding: 12px 16px 12px 44px !important;
  border: 1px solid rgb(255 83 101 / .3);
  border-radius: var(--am-r-12);
  background: rgb(255 83 101 / .08);
  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";
}

/* ---------------------------------------------------------------------------
   11. Live closing CTA: a content panel at the section inset
   ------------------------------------------------------------------------ */
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: 40px var(--am-cat-x) 0;
  padding: 24px 20px;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-lg);
  background: var(--am-grad-panel);
  box-shadow: var(--am-shadow-2);
}
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: 700 20px/30px var(--am-font);
  letter-spacing: -.01em;
}
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 13px/21px 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: 576px) {
  html body.gm-sidebar-layout main.page-shell > section.lc-cta {
    padding: 28px 32px;
  }
  html body.gm-sidebar-layout main.page-shell > section.lc-cta .btn-primary {
    width: auto;
  }
}
@media (min-width: 768px) {
  html body.gm-sidebar-layout main.page-shell > section.lc-cta .lc-cta-copy h2 {
    font-size: 26px;
    line-height: 39px;
  }
}

/* ---------------------------------------------------------------------------
   12. Motion (no-preference only; the theme's reduced-motion guard stays)
   ------------------------------------------------------------------------ */
@keyframes am-cat-shimmer {
  from { background-position: 100% 0, 0 0; }
  to { background-position: 0 0, 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 {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes am-cat-heart {
  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 :is(#slot-games #slotFilterPills .slot-pill, main.page-shell > #lcProviders .lc-pill, main.page-shell > #lcFilterToggle),
  html body.gm-sidebar-layout :is(#slot-games, main.page-shell) nav.am-lobby-tabs > a,
  html body.gm-sidebar-layout #slotProviderModal :is(.slot-provider-opt, .slot-provider-modal-close),
  html body.gm-sidebar-layout #slot-games > .section-header > a.view-all-link {
    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 :is(#slot-games .slot-search, main.page-shell > .lc-search) input,
  html body.gm-sidebar-layout #slotProviderModal .slot-provider-modal-search,
  html body.gm-sidebar-layout #slotRecentWrap :is(.slot-recent-card, .slot-recent-clear) {
    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), color var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout :is(#slotLoadMore, #lcLoadMore) {
    transition: background var(--am-dur-3) var(--am-ease), color var(--am-dur) var(--am-ease), border-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 :is(#slot-games :is(#slotFilterPills, .slot-toolbar-filters) > .slot-pill.slot-picker-btn, main.page-shell > #lcFilterToggle) > i {
    transition: transform .15s 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 {
    animation: am-cat-shimmer 1.5s var(--am-ease) 5;
  }
  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-2) var(--am-ease), border-color var(--am-dur-2) var(--am-ease), box-shadow var(--am-dur-2) var(--am-ease), opacity .15s linear;
  }
  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 var(--am-dur-3) var(--am-ease);
  }
  html body.gm-sidebar-layout #slotGrid .slot-card-overlay,
  html body.gm-sidebar-layout #lcGrid .lc-play-btn::before,
  html body.gm-sidebar-layout #lcGrid .lc-play-btn > i {
    transition: opacity var(--am-dur) var(--am-ease);
  }
  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-heart .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;
  }
  html body.gm-sidebar-layout #slotProviderModal[data-am-pop]:not([hidden]) .slot-provider-modal-panel {
    animation: am-cat-pop .18s var(--am-ease) 1;
  }

  /* Hover lift + art zoom (fine pointers; touch never translates). The
     card selectors stay at (1,3,2) so 60-motion's pressed rules win. */
  @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.06);
    }
  }
  /* Press feedback (touch and mouse) is 60-motion.css's. */
}

/* ---- 40-content.css ---- */
/*
 * v3 (2026-10-30, SPEC §7 step 7: §4.11 page band, §4.15 promotions,
 * §4.16 info cards, §4.17 legal / info pages, 404, password reset).
 *
 * Aquabet modern layer — secondary storefront pages ("content" area).
 * Pages: /promosyonlar (band, grid, title bars, 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).
 * Pairs with 40-content.js (promo title bars + odd-ratio banner bands,
 * legal TOC selector + scroll spy).
 *
 * Page roots (none exists on member pages, game.php or /sports, 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. The
 *          :is() wrapper keeps selector lists valid where :has() is not
 *          parsed; there the cards are still styled through main.page-shell.)
 *   RESET  main.page-shell:has(> .gm-reset)
 *   LEGAL  div.legal-page (a direct body child, no <main>)
 *   404    main.gm-404
 *
 * Shell (11-sidebar.css / 10-chrome.css own it): on storefront pages the
 * content column starts at x = --am-sb-w (260 / rail 78 at >=992, 0 below)
 * and y = --gm-top (marquee + 53px header, both scroll away). Each root is
 * min(100%, --am-container 1680) wide and centred in the column.
 *
 * Layout v3 (reference: Casibow promotions / policies / tournaments):
 *  - Page band (SPEC §4.11) at the top of every root except 404/reset:
 *    full column width (full-bleed <=991), 120px (100 <=991), r4,
 *    --am-grad-band, 1px top line, deep shadow, inner padding --am-inset
 *    (44 / 8: on the edge of the blocks below, D: SPEC says 48 / 12, which
 *    left title and CTA 4px off the grid),
 *    title Rubik 800 34/35.7 (28 at 768-991, 22/24.2 <=767), optional
 *    subtitle 600 12/16.2. Drawn on the existing head element:
 *    .promotions-hero (PROMO), .legal-page-header (LEGAL) and, on INFO,
 *    the section's ::before behind the head row + intro <p> (.gm-row-head
 *    is display:contents so its h2 / view-all link become grid items of
 *    the section; no DOM moves).
 *  - Blocks below the band sit at --am-inset (44 >=992, 8 <=991).
 *  - Promo grid (§4.15): 45px under the band; 1 column <720, 2 at
 *    720-1199 (D: our art is 2.94:1, three columns at 992 gave 69px-tall
 *    banners; two give the reference's card height), 3 from 1200; gap
 *    30 / 16. Card r16, no border, --am-shadow-1, JS title bar 48px #0c2418.
 *  - Info cards (§4.16): 1 column <=575, 2 at 576-1199, 4 from 1200 (D:
 *    four 150px cards at 992 wrap every line), gap 14; surface-1 card,
 *    34px green emblem + eyebrow + title, green checks, 118px watermark.
 *    The tag ("Popüler" ...) straddles the card's top edge (D) so it never
 *    collides with the eyebrow on 4-up rows.
 *  - Legal (§4.17): band, then a 264px sticky TOC card + content frame
 *    (gap 22) at >=1200, a column with a 46px TOC selector row <=1199 (D:
 *    SPEC says 992; beside the 260px sidebar the text column was 256-460px
 *    at 992-1199, narrower than a phone's). TOC links wrap to two lines
 *    (the full names, no ellipsis). Body text is capped at 80ch from 1600.
 *    The sections are siblings of the TOC, so the frame (outer 1px green rim,
 *    24px gutter) and the inner card are LEGAL ::before / ::after, absolute
 *    grid children of the legal-page grid placed from the first content
 *    row to the bottom edge (no wrapper, no DOM moves); the sections are
 *    padded into the inner card.
 *  - 404 and /sifremi-unuttum: the inner-card skin, centred, max 560.
 *  - Legal tables are a horizontal scroller inside the card (edge fades
 *    show more columns exist) until the section's text box is 540px wide;
 *    only then a plain full-width table. .legal-section is the inline-size
 *    container for that. Words never break mid-token.
 *  - /canli-yayin (.ly-page): only styled as a child of main.page-shell, so
 *    these rules are dormant until the template wraps the page (the shell
 *    and sidebar need that same wrapper).
 *
 * 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, colour and border with !important (0,2,1); the legal pages'
 * aqua-profile-legacy.css is @layer'ed, so any unlayered rule here wins.
 * 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 below); .promo-desc
 * stays hidden; the promo dialog never fills the backdrop (backdrop click =
 * e.target===modal, so the modal keeps padding); no transform, position or
 * z-index on PROMO main / section.promotions-tab (the promo modal is
 * position:fixed inside them and stacks at 1990, under #authModal 10000:
 * "HEMEN KATIL" opens the login dialog on top). The promo card click /
 * Enter handlers stay the page's; the JS title bar is aria-hidden inside
 * the card (the article keeps its aria-label). The TOC collapse
 * (nav[data-am-toc]) only exists with JS; without it the list shows.
 *
 * Rules: every selector carries a storefront root; no bare element
 * selectors; no display:!important; motion only under
 * (prefers-reduced-motion: no-preference); bands 576 / 720 (banner
 * <source> switch) / 768 / 992 / 1200, max bounds .98.
 */

/* ---------------------------------------------------------------------------
 * Area tokens (--am-ct-*: content-local, nothing else reads them)
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout {
  --am-ct-band-h: 100px;
  --am-ct-band-pad: var(--am-inset);     /* band inner inline padding = the blocks' edge */
  --am-ct-band-fs: 22px;
  --am-ct-band-lh: 24.2px;
  --am-ct-band-bg:
    linear-gradient(90deg, rgb(2 83 40 / 0), rgb(2 83 40 / .44), rgb(2 83 40 / 0)) 0 0 / 100% 1px no-repeat,
    linear-gradient(180deg, #091610 0%, #040d08 100%);
  --am-ct-band-shadow: 0 18px 60px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .08);
  --am-ct-gap: 24px;                     /* band -> first block (info pages) */
  --am-ct-legal-gap: 38px;               /* band -> TOC / content (M, all widths) */
  --am-ct-bottom: 40px;                  /* last block -> footer */
  --am-promo-ratio: 2.94 / 1;            /* live banners are 2.89-2.98:1 (one 1.78:1) */
  --am-promo-placeholder: var(--am-surface-0);
  /* Info-card / legal inner-card skin */
  --am-ct-card-bg:
    radial-gradient(720px 260px at 50% -12%, rgb(2 83 40 / .12), transparent 60%),
    linear-gradient(180deg, rgb(7 26 16 / .9), rgb(3 10 6 / .95));
  --am-ct-card-shadow: 0 20px 46px rgb(0 0 0 / .34), inset 0 1px 0 rgb(255 255 255 / .04);
  --am-ct-emblem: linear-gradient(180deg, #34d87a, #10b461);
}

@media (min-width: 768px) {
  html body.gm-sidebar-layout {
    --am-ct-band-fs: 28px;
    --am-ct-band-lh: 29.4px;
  }
}

@media (min-width: 992px) {
  html body.gm-sidebar-layout {
    --am-ct-band-h: 120px;
    --am-ct-band-fs: 34px;
    --am-ct-band-lh: 35.7px;
  }
}

/* ---------------------------------------------------------------------------
 * Roots: min(100%, --am-container), centred in the content column, no
 * padding (the band is full width; blocks below carry --am-inset).
 * Overrides .page-shell 24/18/14px (theme), .gm-wire > * max-width 1180px
 * and .legal-page max-width 900px / padding (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)),
html body.gm-sidebar-layout main.page-shell:has(> .gm-reset, > .ly-page),
html body.gm-sidebar-layout div.legal-page {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--am-container);
  min-width: 0;
  margin: 0 auto var(--am-ct-bottom);
  padding: 0;
}

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 band (SPEC §4.11)
 * Real boxes: .promotions-hero (PROMO) and .legal-page-header (LEGAL).
 * Two-column grid: title / subtitle left, optional action right.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero,
html body.gm-sidebar-layout div.legal-page > .legal-page-header {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  column-gap: 16px;
  min-height: var(--am-ct-band-h);
  margin: 0;
  padding: 14px var(--am-ct-band-pad);
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-4);
  background: var(--am-ct-band-bg);
  box-shadow: var(--am-ct-band-shadow);
  text-align: left;
}
html body.gm-sidebar-layout div.legal-page > .legal-page-header::after {
  content: none;   /* legacy gradient underline */
}

/* Band title (PROMO h2, LEGAL h1, INFO h2). D: Rubik 800 (the reference
   renders system-ui 900 by accident, SPEC §6). */
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 {
  grid-column: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: rgb(255 255 255 / .96);
  -webkit-text-fill-color: currentColor;
  font-family: var(--am-font);
  font-size: var(--am-ct-band-fs) !important;  /* beats the promo block's h2 !important */
  font-weight: 800;
  line-height: var(--am-ct-band-lh);
  letter-spacing: .2px;
  text-transform: none;
  text-shadow: 0 10px 24px rgb(0 0 0 / .35);
  overflow-wrap: anywhere;
}

/* Band subtitle (PROMO .promotions-subtitle; the INFO intro <p> is
   inline-styled, see the INFO band). */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-subtitle {
  grid-column: 1;
  max-width: 72ch;
  margin: 10px 0 0;
  padding: 0;
  color: rgb(255 255 255 / .65);
  font: 600 12px/16.2px var(--am-font);
  letter-spacing: 0;
  text-align: left;
}

/* Eyebrow above the legal title (the page's own category badge). */
html body.gm-sidebar-layout div.legal-page > .legal-page-header .legal-badge {
  order: -1;
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--am-accent-bright);
  font: 600 11px/16.5px var(--am-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: none;
}
html body.gm-sidebar-layout div.legal-page > .legal-page-header .legal-badge i {
  color: currentColor;
  font-size: 11px;
}

/* ---------------------------------------------------------------------------
 * INFO band: /vip, /turnuvalar, /canli-destek
 * The section is a grid: [pad][text][action][pad]. Its ::before paints the
 * band behind row 1 (title) and, when the page has an intro <p>, row 2
 * (subtitle). The band's min-height (a spanning grid item) grows both rows
 * equally, so title + subtitle stay centred whatever the subtitle wraps to.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section {
  display: grid;
  grid-template-columns: [band-start] var(--am-ct-band-pad) [text-start] minmax(0, 1fr) [cta-start] auto [cta-end] var(--am-ct-band-pad) [band-end];
  align-items: center;
  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::before {
  content: "";
  grid-column: band-start / band-end;
  grid-row: 1;
  align-self: stretch;
  min-height: var(--am-ct-band-h);
  border-radius: var(--am-r-4);
  background: var(--am-ct-band-bg);
  box-shadow: var(--am-ct-band-shadow);
  pointer-events: 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:has(> p)::before {
  grid-row: 1 / 3;
}
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: contents;
}
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 {
  grid-column: text-start / cta-start;
  grid-row: 1;
  margin: 14px 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:has(> p) > .gm-row-head h2 {
  align-self: end;
  margin-bottom: 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 > p {
  grid-column: text-start / cta-end;
  grid-row: 2;
  align-self: start;
  max-width: 72ch !important;
  margin: 10px 0 14px !important;
  padding: 0;
  color: rgb(255 255 255 / .65) !important;
  font: 600 12px/16.2px var(--am-font) !important;
  letter-spacing: 0;
}

/* Band action ("Tüm Ayrıcalıklar", "Bonuslar"): the outlined panel CTA
   (SPEC §4.9): h34, r8, tint fill, accent edge, 600 12 .04em upper case,
   chevron. The page's own arrow icon is hidden (::after draws a chevron). */
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 .gm-row-all {
  grid-column: cta-start / cta-end;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 34px;
  min-height: 0;   /* theme .gm-row-all min-height 40px */
  margin: 0 0 0 16px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--am-line-accent);
  border-radius: var(--am-r-xs);
  background: var(--am-tint);
  color: #fff;
  font: 600 12px/1 var(--am-font);
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 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 > .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-section > .gm-row-head .gm-row-all::after {
  content: "\f054";
  content: "\f054" / "";   /* decorative: kept out of the link's accessible name */
  font: 900 11px/1 "Font Awesome 6 Free";
}
/* 44px touch target without changing the 34px look */
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 .gm-row-all::before {
  content: "";
  position: absolute;
  inset: -6px -2px;
}
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 .gm-row-all:hover {
  border-color: rgb(16 180 97 / .6);
  background: var(--am-accent-deep);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  /* With a subtitle: the action sits on the title line (centred on it),
     the subtitle runs under both. */
  html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section:has(> p) > .gm-row-head h2 {
    margin-top: 18px;
  }
  html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section:has(> p) > .gm-row-head .gm-row-all {
    align-self: end;
    margin-bottom: calc((var(--am-ct-band-lh) - 34px) / 2);
  }
}

@media (min-width: 768px) {
  /* With a subtitle the action centres on the whole band. */
  html body.gm-sidebar-layout :is(main.page-shell.gm-wire:has(.gm-vip-grid, .gm-tour-grid, .gm-support-grid)) > .gm-row-section:has(> p) > .gm-row-head .gm-row-all {
    grid-row: 1 / 3;
  }
  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 {
    grid-column: text-start / cta-start;
  }
}

/* ---------------------------------------------------------------------------
 * INFO grids (SPEC §4.16): 1 column <=575, 2 at 576-1199, 4 from 1200;
 * gap 14; --am-inset from the column edges.
 * ------------------------------------------------------------------------- */
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-column: band-start / band-end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 24px 14px;   /* rows leave room for the tag on the top edge */
  margin: calc(var(--am-ct-gap) + 4px) var(--am-inset) 0;
  padding: 0;
}

@media (min-width: 576px) {
  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-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  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-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * Info cards (.gm-vip-card, .gm-tour-card, .gm-support-card)
 * Fixes the theme's invalid rgba(var(--gm-raised-rgb),.88) surfaces.
 * Layout per card: header row (emblem | eyebrow / title), check list,
 * (support: action). isolation keeps the watermark (z -1) above the card
 * fill and under the text.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card) {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 18px 20px 16px;
  overflow: visible;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-md);
  background: var(--am-surface-1);
  box-shadow: var(--am-shadow-2);
  color: var(--am-text);
  transform: none;
}
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card).featured {
  border-color: rgb(16 180 97 / .45);
  background: var(--am-surface-1);
  box-shadow: var(--am-shadow-2), var(--am-glow);
}
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card):hover {
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card):hover {
    border-color: rgb(16 180 97 / .4);
    background: var(--am-surface-1);
    box-shadow: var(--am-shadow-2);
  }
  html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card).featured:hover {
    box-shadow: var(--am-shadow-2), var(--am-glow);
  }
}

/* Watermark: 118px glyph at 6%, bleeding ~26px off the bottom-right
   corner. The pseudo box is the card's padding box with overflow:hidden
   (the card itself stays overflow:visible for the edge tag, and nothing
   adds scrollable overflow): letter-spacing -26px shortens the glyph's
   advance so its ink runs past the right edge, line-height 66px (< 118)
   lets it run past the bottom; both are clipped to the rounded box. */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card)::after {
  content: "\f590";
  content: "\f590" / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: calc(var(--am-r-md) - 1px);
  color: #fff;
  opacity: .06;
  font: 900 118px/66px "Font Awesome 6 Free";
  letter-spacing: -26px;
  white-space: nowrap;
  pointer-events: none;
}
/* The theme's v1 top accent bar is not used (no ::before on the card). */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card)::before {
  content: none;
}

/* Tag ("Popüler", "Öne Çıkan", "Önerilen"): a pill on the card's top
   edge (opaque, so the edge line does not show through). */
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: -11px;
  right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 22px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid rgb(16 180 97 / .32);
  border-radius: var(--am-r-pill);
  background: #043d1f;   /* rgba(2,83,40,.62) over surface-1, opaque */
  color: var(--am-accent-bright);
  font: 600 11px/1 var(--am-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgb(0 0 0 / .35);
}

/* Header row. VIP / tournaments: the h3 is a 2-column grid; ::before is the
   emblem (rows 1-2), ::after the eyebrow (row 1) and the title text falls
   into row 2. Support: .head holds span.ic + h3, ::before is the eyebrow. */
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: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
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: 700 17px/20.4px var(--am-font);
  letter-spacing: -.01em;
  text-transform: none;
  overflow-wrap: anywhere;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card > .head > h3 {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Emblem: 34px r10, bright green gradient, 19px glyph in #02170d. */
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 {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 0;
  border-radius: var(--am-r-sm);
  background: var(--am-ct-emblem);
  color: var(--am-on-bright);
  font: 900 17px/1 "Font Awesome 6 Free";
  box-shadow: 0 6px 16px rgb(2 83 40 / .35), inset 0 1px 0 rgb(255 255 255 / .25);
}
html body.gm-sidebar-layout main.page-shell .gm-support-card > .head > .ic i {
  color: currentColor;
  font-size: 17px;
}

/* Eyebrow: 600 11/14.25 .1em upper case, bright green. */
html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card) > h3::after,
html body.gm-sidebar-layout main.page-shell .gm-support-card > .head::before {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: var(--am-accent-bright);
  font: 600 11px/14.25px var(--am-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* VIP: the hard-coded order Bronze, Silver, Gold, Diamond (aqua-vip.php)
   keeps its tier icons; eyebrow "VIP SEVİYE n" (counter, announced). */
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 > h3::after {
  content: "VIP SEVİYE " counter(am-vip-tier);
}
/* Icons are decorative ('/ ""' keeps them out of the heading's name; the
   plain declaration is the fallback where that syntax is not parsed). */
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(1) > h3::before,
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(1)::after { content: "\f5a2"; content: "\f5a2" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(2) > h3::before,
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(2)::after { content: "\f559"; content: "\f559" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(3) > h3::before,
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(3)::after { content: "\f521"; content: "\f521" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(n+4) > h3::before,
html body.gm-sidebar-layout main.page-shell .gm-vip-card:nth-child(n+4)::after { content: "\f3a5"; content: "\f3a5" / ""; }

/* Turnuvalar: trophy emblem + watermark, "TURNUVA" eyebrow. */
html body.gm-sidebar-layout main.page-shell .gm-tour-card > h3::before,
html body.gm-sidebar-layout main.page-shell .gm-tour-card::after {
  content: "\f091";
  content: "\f091" / "";
}
html body.gm-sidebar-layout main.page-shell .gm-tour-card > h3::after {
  content: "TURNUVA";
}

/* Destek: the card's own icon is the emblem; the watermark repeats it. */
html body.gm-sidebar-layout main.page-shell .gm-support-card > .head::before {
  content: "DESTEK";
}
html body.gm-sidebar-layout main.page-shell .gm-support-card:has(.ic .fa-envelope)::after { content: "\f0e0"; content: "\f0e0" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-support-card:has(.ic .fa-user)::after { content: "\f007"; content: "\f007" / ""; }
html body.gm-sidebar-layout main.page-shell .gm-support-card:has(.ic .fa-gift)::after { content: "\f06b"; content: "\f06b" / ""; }

/* 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: 9px;
  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: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--am-text-2);
  font: 500 13.5px/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 {
  flex: none;
  width: 14px;
  margin-top: 3px;
  background: none;
  color: var(--am-accent-bright);
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

/* Turnuvalar: the prize pool line as an inset well. */
html body.gm-sidebar-layout main.page-shell .gm-tour-card li:first-child {
  margin-bottom: 3px;
  padding: 8px 10px;
  border: 1px solid var(--am-line);
  border-radius: var(--am-r-9);
  background: var(--am-surface-0);
  color: var(--am-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Destek actions: the recommended channel is the primary CTA, the others
   the outlined panel CTA. */
html body.gm-sidebar-layout main.page-shell .gm-support-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 40px;
  margin: auto 0 0;
  padding: 0 16px;
  border: 1px solid var(--am-line-accent);
  border-radius: var(--am-r-sm);
  background: var(--am-tint);
  color: #fff;
  font: 600 13px/1 var(--am-font);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card .btn:hover {
  border-color: rgb(16 180 97 / .6);
  background: var(--am-accent-deep);
  color: #fff;
}
html body.gm-sidebar-layout main.page-shell .gm-support-card.featured .btn {
  border-color: var(--am-line-cta);
  background: var(--am-grad);
  color: var(--am-on-accent);
  font-weight: 700;
  box-shadow: var(--am-cta-shadow);
}
html body.gm-sidebar-layout main.page-shell .gm-support-card.featured .btn:hover {
  border-color: var(--am-accent);
  background: var(--am-grad-hover);
  box-shadow: var(--am-cta-shadow-hover);
}

/* ---------------------------------------------------------------------------
 * Promosyonlar: band (.promotions-hero)
 * Kicker hidden (SPEC §4.11); the guest CTA ("Müşteri hizmetlerine bağlan",
 * opens the login dialog) is the Kayıt Ol button style, right; it drops
 * under the subtitle on phones.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-kicker {
  display: none;
}

/* "PROMOSYONLAR" is upper-case in the template: shown as title case like
   the other band 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;
}

/* The template copy is upper case: lower-cased + ::first-letter (needs a
   block container, so guests get inline-block instead of the theme's
   inline-flex; members keep the theme's display:none, never matched). */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-cta {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  box-sizing: border-box;
  min-height: 38px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--am-line-cta) !important;
  border-radius: var(--am-r-sm);
  background: var(--am-grad) !important;
  color: var(--am-on-accent) !important;
  font: 700 13px/1 var(--am-font);
  letter-spacing: .02em;
  text-transform: lowercase;
  box-shadow: var(--am-cta-shadow);
  filter: none;
  transform: none;
  cursor: pointer;
}
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: 36px;
  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 {
  border-color: var(--am-accent) !important;
  background: var(--am-grad-hover) !important;
  box-shadow: var(--am-cta-shadow-hover);
}

@media (max-width: 575.98px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-cta {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    margin-top: 12px;
  }
  html body.gm-sidebar-layout:not([data-auth-logged-in="1"]) main.page-shell.promotions-page-only .promotions-hero .promotions-cta {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
 * Promosyonlar: grid + banner cards (SPEC §4.15)
 * 45px under the band; inset 8 / 44; 1 column <720, 2 at 720-1199, 3 from
 * 1200; row gap 30, column gap 16. The media box reserves the banner ratio
 * (no lazy-image layout shift) and the image is contained, so the odd
 * 1.78:1 banner is letterboxed, never cropped.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-tab {
  margin: 0;
  padding: 0;
}
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: 30px 16px;
  max-width: none;
  margin: 45px var(--am-inset) 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));
    max-width: none;
  }
}

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

html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  border: 0;
  border-radius: var(--am-r-lg);
  background: var(--am-surface-0);
  box-shadow: var(--am-shadow-1);
  color: var(--am-text);
  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:
    radial-gradient(620px 240px at 80% 20%, rgb(255 255 255 / .04), transparent 66%),
    linear-gradient(rgb(7 20 14 / .94), rgb(4 13 8 / .96));
  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: 8px 8px 0 0;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
}

/* Near-ratio banner (40-content.js [data-am-fit]: within 3% of the frame):
   contain left 2-4px dark bars beside neighbours that fill edge to edge;
   cover trims at most 1.5% off two edges of the art. */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media[data-am-fit] img {
  object-fit: cover;
}

/* 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;
   the bands show the same art blurred and dimmed, and with side bands
   ("x") the art's edges fade into them over 20px. 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;
  border-radius: 0;
}
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)));
}

/* Title bar (40-content.js, from data-promo-title; aria-hidden): h48,
   padding 0 20, #0c2418, ticket icon, title 600 14 ellipsis, info icon. */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card > .am-promo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  padding: 0 20px;
  border-radius: 0 0 8px 8px;
  background: var(--am-surface-2);
  color: #fff;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card > .am-promo-bar > i {
  flex: none;
  width: 20px;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card > .am-promo-bar > .am-promo-bar-info {
  margin-left: auto;
  color: var(--am-text-2);
  font-size: 18px;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card > .am-promo-bar > .am-promo-bar-t {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  color: #fff;
  font: 600 14px/20px var(--am-font);  /* a 14px line box clipped İ dots and Ç, ş, y tails */
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text fallback card (no banner): same frame and ratio, --am-grad-panel,
   28px gift, title 700 16, text 13/21 (2 lines). With the JS title bar the
   title is not repeated when the card has a description. */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  aspect-ratio: var(--am-promo-ratio);
  min-height: 0;
  padding: 12px 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  border-radius: 0;
  background: var(--am-grad-panel);
  color: var(--am-text);
  text-align: center;
  text-decoration: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback > i {
  margin: 0;
  color: var(--am-accent-bright);
  font-size: 28px;
  line-height: 1;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--am-text);
  font: 700 16px/1.3 var(--am-font);
  letter-spacing: 0;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-width: 46ch;
  max-height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--am-text-2);
  font: 400 13px/21px var(--am-font);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promo-card-fallback > span:empty,
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card[data-am-bar] .promo-card-fallback > strong:has(+ span:not(:empty)) {
  display: none;
}

/* Focus and tap feedback (the tap highlight is off; hover is fine-pointer
   only and lives in the motion block). */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:focus-visible {
  outline: none;
  box-shadow: var(--am-focus), var(--am-shadow-1);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:active {
  opacity: .88;
}

/* ---------------------------------------------------------------------------
 * Promosyonlar: detail modal (#gmPromoModal)
 * z 1990, under #authModal (10000): "HEMEN KATIL" opens the login dialog
 * on top. The dialog (max 960, r16, --am-grad-card, hairline top) is the
 * scroll container; the close button is sticky in its 56px top strip and
 * the CTA sticky at the bottom.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal {
  z-index: 1990;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--am-overlay);
  -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: 960px;
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-md);
  background: var(--am-grad-card);
  box-shadow: 0 18px 40px rgb(0 0 0 / .34), inset 0 1px 0 rgb(255 255 255 / .04);
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / .12) transparent;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 2px;
  background: var(--am-hairline-top);
  pointer-events: none;
}

/* The 50px top strip (56 from 768) is the close button's own margin box:
   9 + 32 + 9 (15 + 36 + 5). Sticky (top = its resting offset) keeps it in
   reach while the offer scrolls. Not dialog padding: Chrome resolves a
   sticky inset against the scroll container's padding edge, which would
   push the button into the art. */
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-close {
  position: sticky;
  top: 9px;
  z-index: 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin: 9px 12px 9px auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--am-r-sm);
  background: rgb(0 0 0 / .5);
  color: rgb(255 255 255 / .75);
  font: 400 24px/1 var(--am-font);
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-close:hover {
  border-color: rgb(255 255 255 / .16);
  background: rgb(255 255 255 / .10);
  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: 0;
  border-top: 1px solid var(--am-line);
  border-bottom: 1px solid var(--am-line);
  background: var(--am-promo-placeholder);
}

html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body {
  padding: 20px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  color: var(--am-text-body);
  font: 400 14px/23.1px var(--am-font);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body h3 {
  margin: 0 0 18px;
  padding: 0;
  color: #fff;
  font: 700 16px/1.35 var(--am-font);
  letter-spacing: .5px;
  text-transform: uppercase;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body h4 {
  margin: 24px 0 12px;
  padding: 0 0 6px;
  border-bottom: 1px dashed rgb(52 216 122 / .2);
  color: #fff;
  font: 700 14px/1.4 var(--am-font);
}
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: 13.5px;
  line-height: 22.3px;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body p {
  margin: 0 0 10px;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body :is(ul, ol) {
  margin: 0 0 10px;
  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-accent-bright);
  font-weight: 700;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body a {
  color: var(--am-accent);
  text-underline-offset: 2px;
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body a:hover {
  color: var(--am-accent-bright);
}

/* Sticky CTA. A sticky box is its own stacking context, so its own
   background would paint UNDER negative-z children: the button face is
   ::after and the text-hiding fade behind it ::before (both z -1, tree
   order); the button's own background is cleared. The template copy
   "HEMEN KATIL" (+ the page's uppercase) is shown sentence case,
   "Hemen katıl" (lang="tr"), like every primary CTA. */
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-12);
  background: transparent !important;
  color: var(--am-on-accent) !important;
  font: 700 15px/48px var(--am-font);
  letter-spacing: .02em;
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
  box-shadow: none;
  filter: none;
  cursor: pointer;
}
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 -18px calc(-16px - env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgb(var(--am-surface-0-rgb) / 0), var(--am-surface-0) 20px);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::after {
  inset: 0;
  box-sizing: border-box;
  border: 1px solid var(--am-line-cta);
  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: brightness(1.08);
}
html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta:hover::after {
  border-color: var(--am-accent);
  box-shadow: var(--am-cta-shadow-hover);
}

@media (min-width: 576px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal {
    padding: 24px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-dialog {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }
  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-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: 768px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-dialog {
    border-radius: var(--am-r-lg);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-close {
    top: 15px;
    width: 36px;
    height: 36px;
    margin: 15px 15px 5px auto;
  }
}

@media (min-width: 992px) {
  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): cap the hero
   (contained, never cropped) so several lines of the offer show. */
@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: 14px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-body h3 {
    margin-bottom: 10px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta {
    min-height: 44px;
    margin-top: 14px;
    line-height: 44px;
  }
}
@media (min-width: 576px) and (max-height: 560px) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal {
    padding: 8px 24px;
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-dialog {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  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;
  }
}

/* ---------------------------------------------------------------------------
 * Legal / info pages (div.legal-page, body.gm-arwen-page) — SPEC §4.17
 * Grid: [inset][main][inset] <=1199; [inset][TOC 264][22][main][inset] from
 * 1200. Row 1 = band. The TOC spans the content rows at >=1200 (sticky);
 * <=1199 it is row 2 above the content. LEGAL::before (outer frame) and
 * ::after (inner card) are absolute grid children placed from the first
 * content row to the bottom padding edge, z -1 inside the root's
 * isolation; the sections are padded into the inner card:
 *   >=1200: frame 1px + 24px gutter + card 1px + 32/30 padding
 *   <=1199: frame 1px + 12px gutter + card 1px + 18/20 padding
 * Resets the legacy GilroyArwen/Rajdhani faces, gold-gradient h1, cyan
 * section cards and top bars.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout div.legal-page {
  --am-ct-sec-l: 32px;      /* frame 1 + gutter 12 + card 1 + 18 */
  --am-ct-sec-r: 32px;
  --am-ct-sec-t: 34px;      /* frame 1 + gutter 12 + card 1 + 20 */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: [full-start] var(--am-inset) [main-start] minmax(0, 1fr) [main-end] var(--am-inset) [full-end];
  align-items: start;
  gap: 0;
}
html body.gm-sidebar-layout div.legal-page > .legal-page-header {
  grid-column: full-start / full-end;
  grid-row: 1;
  margin: 0 0 var(--am-ct-legal-gap);
}
html body.gm-sidebar-layout div.legal-page > :is(.legal-section, .legal-footer-note) {
  grid-column: main-start / main-end;
}

/* Content frame (outer) and card (inner) */
html body.gm-sidebar-layout div.legal-page::before,
html body.gm-sidebar-layout div.legal-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  grid-column: main-start / main-end;
  grid-row: 3 / auto;
  box-sizing: border-box;
  pointer-events: none;
}
html body.gm-sidebar-layout div.legal-page::before {
  inset: 0;
  border: 1px solid rgb(2 83 40 / .3);
  border-radius: var(--am-r-12);
  background: rgb(4 13 8 / .86);
  box-shadow: 0 24px 48px rgb(0 0 0 / .36);
}
html body.gm-sidebar-layout div.legal-page::after {
  inset: 13px;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-md);
  background: var(--am-ct-card-bg);
  box-shadow: var(--am-ct-card-shadow);
}

/* Sections: transparent, padded into the inner card; a hairline between
   two sections, inside the card's text box. */
html body.gm-sidebar-layout div.legal-page > .legal-section {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0 var(--am-ct-sec-r) 0 var(--am-ct-sec-l);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html body.gm-sidebar-layout div.legal-page > .legal-toc + .legal-section {
  padding-top: var(--am-ct-sec-t);
}
html body.gm-sidebar-layout div.legal-page > .legal-section::before {
  content: none;   /* legacy cyan top bar */
}
html body.gm-sidebar-layout div.legal-page > .legal-section + .legal-section {
  margin-top: 28px;
  padding-top: 28px;
}
html body.gm-sidebar-layout div.legal-page > :is(.legal-section + .legal-section, .legal-section + .legal-footer-note)::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--am-ct-sec-r);
  left: var(--am-ct-sec-l);
  height: 1px;
  background: var(--am-line-2);
}
html body.gm-sidebar-layout div.legal-page > .legal-section > :last-child {
  margin-bottom: 0;
}

/* Measure: the sections run ~1190px wide at 1920 (170 characters a line).
   Tables and contact cards keep the full width. */
@media (min-width: 1600px) {
  html body.gm-sidebar-layout div.legal-page .legal-section > :is(p, ul, ol, h2, h3, h4, .legal-info-box, .legal-warning-box) {
    max-width: 80ch;
  }
}

/* Footer note: last row of the card (its bottom padding closes the card). */
html body.gm-sidebar-layout div.legal-page > .legal-footer-note {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  margin: 28px 0 0;
  padding: 20px var(--am-ct-sec-r) var(--am-ct-sec-t) var(--am-ct-sec-l);
  border: 0;
  text-align: left;
}
html body.gm-sidebar-layout div.legal-page > .legal-footer-note p {
  margin: 0;
  color: var(--am-text-3);
  font: 500 12px/1.5 var(--am-font);
}
/* No footer note: the last section closes the card. */
html body.gm-sidebar-layout div.legal-page > .legal-section:last-child {
  padding-bottom: var(--am-ct-sec-t);
}

/* Type (SPEC §4.17): p 400 14.5/26.1, strong 600 #fff, h2 700 19/1.3,
   h3/h4 700 16/1.3, dot bullets, green underlined links. */
html body.gm-sidebar-layout div.legal-page .legal-section h2 {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  color: #fff;
  font: 700 19px/1.3 var(--am-font);
  letter-spacing: 0;
  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 :is(h3, h4) {
  margin: 28px 0 12px;
  padding: 0;
  color: #fff;
  font: 700 16px/1.3 var(--am-font);
  letter-spacing: 0;
  text-transform: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section :is(p, li) {
  color: var(--am-text-body);
  font: 400 14.5px/26.1px var(--am-font);
  letter-spacing: 0;
}
html body.gm-sidebar-layout div.legal-page .legal-section p {
  margin: 0 0 16px;
}
html body.gm-sidebar-layout div.legal-page .legal-section :is(strong, b) {
  color: #fff;
  font-weight: 600;
}
html body.gm-sidebar-layout div.legal-page .legal-section ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section ul > li {
  position: relative;
  margin: 0 0 4px;
  padding: 4px 0 4px 22px;
}
html body.gm-sidebar-layout div.legal-page .legal-section ul > li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--am-accent);
  box-shadow: 0 0 0 4px rgb(16 180 97 / .14);
}
html body.gm-sidebar-layout div.legal-page .legal-section ol {
  margin: 0 0 16px;
  padding: 0 0 0 22px;
}
html body.gm-sidebar-layout div.legal-page .legal-section ol > li {
  margin: 0 0 4px;
  padding: 4px 0 4px 2px;
}
html body.gm-sidebar-layout div.legal-page .legal-section ol > li::marker {
  color: var(--am-accent);
  font-weight: 700;
}
html body.gm-sidebar-layout div.legal-page .legal-section a {
  border: 0;
  color: var(--am-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
html body.gm-sidebar-layout div.legal-page .legal-section a:hover {
  color: var(--am-accent-bright);
}

/* 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);
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid rgb(var(--am-box-rgb) / .22);
  border-left: 3px solid rgb(var(--am-box-rgb));
  border-radius: var(--am-r-12);
  background: rgb(var(--am-box-rgb) / .07);
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-warning-box {
  --am-box-rgb: 239 176 37;
}
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-body);
  font-size: 14px;
  line-height: 23px;
}
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-info-box i {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-warning-box :is(strong, b) {
  color: #ffd98a;
}

/* Tables: a scroller inside the card, full width once the section's text
   box reaches 540px (@container below; the text box decides, at every
   viewport: 288px at 1024 used to squeeze cells to 60px wide and
   overflow-wrap:anywhere cut "500.000 ₺" over four lines; 540 clears the
   widest table's 471px min-content). Words stay whole. The edge fades say more columns exist: the two surface-0 layers
   scroll with the content (local) and cover the two green fades (scroll)
   at each end; the opaque header row sits above them. */
html body.gm-sidebar-layout div.legal-page > .legal-section {
  container-type: inline-size;
}
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: 1px solid var(--am-line-2);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--am-r-12);
  background:
    linear-gradient(90deg, var(--am-surface-0) 40%, rgb(var(--am-surface-0-rgb) / 0)) 0 0 / 44px 100% no-repeat local,
    linear-gradient(270deg, var(--am-surface-0) 40%, rgb(var(--am-surface-0-rgb) / 0)) 100% 0 / 44px 100% no-repeat local,
    linear-gradient(90deg, rgb(var(--am-accent-rgb) / .3), rgb(var(--am-accent-rgb) / 0)) 0 0 / 16px 100% no-repeat scroll,
    linear-gradient(270deg, rgb(var(--am-accent-rgb) / .3), rgb(var(--am-accent-rgb) / 0)) 100% 0 / 16px 100% no-repeat scroll,
    var(--am-surface-0);
  font: 400 13px/1.55 var(--am-font);
}
html body.gm-sidebar-layout div.legal-page .legal-section table th {
  padding: 11px 14px;
  border: 0;
  background: var(--am-surface-2);
  color: #fff;
  font: 600 12.5px/1.35 var(--am-font);
  letter-spacing: .01em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}
html body.gm-sidebar-layout div.legal-page .legal-section table td {
  min-width: 7.5em;
  padding: 11px 14px;
  overflow-wrap: break-word;   /* breaks only a token wider than its column */
  border: 0;
  border-top: 1px solid var(--am-line);
  background: transparent;
  color: var(--am-text-2);
  font: 400 13px/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 / .02);
}
@container (min-width: 540px) {
  html body.gm-sidebar-layout div.legal-page .legal-section table {
    display: table;
    overflow: hidden;
    background: var(--am-surface-0);
  }
  html body.gm-sidebar-layout div.legal-page .legal-section table :is(th, td) {
    min-width: 0;
  }
  html body.gm-sidebar-layout div.legal-page .legal-section table th {
    white-space: normal;
  }
}

/* İletişim: contact cards (surface-2 tiles, emblem-style icon) */
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: 16px 18px;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-12);
  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: var(--am-line-hover);
  transform: none;
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-card > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 0 12px;
  border-radius: var(--am-r-sm);
  background: var(--am-tint-bright);
  color: var(--am-accent-bright);
  font-size: 16px;
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-card h4 {
  margin: 0 0 6px;
  font-size: 15px;
}
html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-card p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 21px;
}
@media (min-width: 576px) {
  html body.gm-sidebar-layout div.legal-page .legal-section .legal-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* TOC card (nav.legal-toc): reference sidebar skin at every width.
   <=1199 it is a card above the content; with JS (40-content.js,
   nav[data-am-toc]) the list collapses behind a 46px selector row. */
html body.gm-sidebar-layout div.legal-page > .legal-toc {
  grid-column: main-start / main-end;
  grid-row: 2;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 22px;
  padding: 10px;
  overflow: visible;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-md);
  background:
    radial-gradient(260px 160px at 15% -10%, rgb(2 83 40 / .14), transparent 62%),
    linear-gradient(180deg, rgb(7 26 16 / .92), rgb(3 10 6 / .96));
  box-shadow: 0 16px 36px rgb(0 0 0 / .32), inset 0 1px 0 rgb(255 255 255 / .04);
}
html body.gm-sidebar-layout div.legal-page > .legal-toc::before {
  content: none;   /* legacy cyan top bar */
}
html body.gm-sidebar-layout div.legal-page > .legal-toc h3 {
  margin: 0;
  padding: 4px 14px 8px;
  color: var(--am-accent-bright);
  font: 600 11px/16.5px var(--am-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
html body.gm-sidebar-layout div.legal-page > .legal-toc ol {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: auto;
  counter-reset: none;
}
html body.gm-sidebar-layout div.legal-page > .legal-toc ol li {
  margin: 0;
  padding: 0;
  break-inside: avoid;
}
/* Two lines, so a long name still says where the link goes (the longest
   today is 341px in a 236px box). Hover and current shift the text 4px
   right with the right padding answering it, so the wrap never changes. */
html body.gm-sidebar-layout div.legal-page > .legal-toc ol li a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  box-sizing: border-box;
  min-height: 40px;
  padding: 10.5px 14px;
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-9);
  color: var(--am-text-2);
  font: 600 13.5px/18.9px var(--am-font);
  letter-spacing: 0;
  text-decoration: none;
  white-space: normal;
  box-shadow: none;
}
html body.gm-sidebar-layout div.legal-page > .legal-toc ol li a:hover {
  padding-left: 18px;
  padding-right: 10px;
  background: rgb(255 255 255 / .05);
  color: #fff;
  box-shadow: inset 3px 0 0 rgb(16 180 97 / .55);
}
html body.gm-sidebar-layout div.legal-page > .legal-toc ol li a[aria-current] {
  padding-left: 18px;
  padding-right: 10px;
  background: var(--am-tint);
  color: var(--am-accent-bright);
  box-shadow: inset 3px 0 0 var(--am-accent);
}
html body.gm-sidebar-layout div.legal-page > .legal-toc ol li a:focus-visible {
  outline-offset: -2px;
}

/* Selector row (JS-built button.am-toc-btn): 46px, r10, white .05 fill,
   control edge, 600 13.5 #fff, chevron. Hidden from 1200. */
html body.gm-sidebar-layout div.legal-page > .legal-toc > .am-toc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--am-line-ctl);
  border-radius: var(--am-r-sm);
  background: rgb(255 255 255 / .05);
  color: #fff;
  font: 600 13.5px/1 var(--am-font);
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.gm-sidebar-layout div.legal-page > .legal-toc > .am-toc-btn .am-toc-k {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html body.gm-sidebar-layout div.legal-page > .legal-toc > .am-toc-btn .am-toc-v {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.gm-sidebar-layout div.legal-page > .legal-toc > .am-toc-btn .am-toc-chev {
  flex: none;
  color: var(--am-text-2);
  font-size: 12px;
}
html body.gm-sidebar-layout div.legal-page > .legal-toc[data-am-toc="open"] > .am-toc-btn .am-toc-chev {
  transform: rotate(180deg);
}
html body.gm-sidebar-layout div.legal-page > .legal-toc > .am-toc-btn:hover {
  border-color: rgb(255 255 255 / .16);
  background: rgb(255 255 255 / .07);
}

@media (max-width: 1199.98px) {
  html body.gm-sidebar-layout div.legal-page > .legal-toc[data-am-toc] > h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html body.gm-sidebar-layout div.legal-page > .legal-toc[data-am-toc="closed"] > ol {
    display: none;
  }
  html body.gm-sidebar-layout div.legal-page > .legal-toc[data-am-toc="open"] > ol {
    margin-top: 8px;
  }
}

@media (min-width: 1200px) {
  html body.gm-sidebar-layout div.legal-page {
    --am-ct-sec-l: 58px;    /* frame 1 + gutter 24 + card 1 + 32 */
    --am-ct-sec-r: 34px;    /* frame 1 + card 1 + 32 */
    --am-ct-sec-t: 32px;    /* frame 1 + card 1 + 30 */
    grid-template-columns: [full-start] var(--am-inset) [toc-start] 264px [toc-end] 22px [main-start] minmax(0, 1fr) [main-end] var(--am-inset) [full-end];
  }
  html body.gm-sidebar-layout div.legal-page::before,
  html body.gm-sidebar-layout div.legal-page::after {
    grid-row: 2 / auto;
  }
  html body.gm-sidebar-layout div.legal-page::after {
    inset: 1px 1px 1px 25px;
  }
  /* Sticky TOC spanning the content rows (row gap 0: the spacing is the
     sections' own). 20px = the storefront html scroll-padding. */
  html body.gm-sidebar-layout div.legal-page > .legal-toc {
    grid-column: toc-start / toc-end;
    grid-row: 2 / span 80;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  html body.gm-sidebar-layout div.legal-page > .legal-toc::-webkit-scrollbar {
    display: none;
  }
  html body.gm-sidebar-layout div.legal-page > .legal-toc > .am-toc-btn {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * /canli-yayin (.ly-page, the page's own <style> in <body>). Works both as
 * a direct child of body.gm-sidebar-layout and inside main.page-shell.
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) {
  max-width: none;
  margin: 0;
  padding: 24px var(--am-inset) 0;
  font-family: var(--am-font);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) :is(h1, h2, h3, h4, button, input, select) {
  font-family: var(--am-font);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-head-left h1 {
  color: #fff;
  font: 700 20px/1.2 var(--am-font);
  letter-spacing: -.02em;
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) :is(.ly-live-tag, .ly-badge-live) {
  background: var(--am-accent-deep);
  color: #fff;
  font-size: 11px;
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-count {
  color: var(--am-text-3);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-filter:is(:hover, .active) {
  border-color: rgb(var(--am-accent-rgb) / .45);
  background: var(--am-accent-deep);
  color: #fff;
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-filter:not(:hover, .active) {
  color: var(--am-text-2);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) :is(.ly-empty, .ly-empty p) {
  color: var(--am-text-3);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-empty i {
  color: rgb(255 255 255 / .22);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-card--live {
  border-color: rgb(var(--am-accent-rgb) / .22);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-card--live:hover {
  border-color: var(--am-line-hover);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-min {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout :is(main.page-shell > .ly-page, > .ly-page) .ly-btn-watch {
  background: var(--am-grad);
  color: var(--am-on-accent);
}

/* ---------------------------------------------------------------------------
 * 404 (main.gm-404) and /sifremi-unuttum (.gm-reset): the inner-card skin,
 * centred, max 560 (SPEC §4.17).
 * ------------------------------------------------------------------------- */
html body.gm-sidebar-layout main.gm-404,
html body.gm-sidebar-layout main.page-shell .gm-reset {
  position: relative;
  box-sizing: border-box;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-md);
  background: var(--am-ct-card-bg);
  box-shadow: var(--am-ct-card-shadow);
}

html body.gm-sidebar-layout main.gm-404 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(560px, 100% - 2 * var(--am-inset));
  max-width: none;
  margin: 40px auto var(--am-ct-bottom);
  padding: 30px 20px 28px;
  overflow: hidden;
  text-align: center;
}
html body.gm-sidebar-layout main.gm-404 > :not(a) {
  flex: 0 0 100%;
}
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-accent-bright);
  -webkit-text-fill-color: currentColor;
  font: 800 clamp(72px, 18vw, 104px)/1 var(--am-font);
  letter-spacing: -.02em;
  text-shadow: 0 10px 24px rgb(0 0 0 / .35);
  filter: none;
}
html body.gm-sidebar-layout main.gm-404 h1 {
  margin: 8px 0 0;
  color: #fff;
  font: 700 22px/1.3 var(--am-font);
  letter-spacing: -.01em;
  text-transform: none;
}
html body.gm-sidebar-layout main.gm-404 p {
  max-width: 40ch;
  margin: 0 auto 14px;
  color: var(--am-text-2);
  font: 400 13.5px/21px 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;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid var(--am-line-cta);
  border-radius: var(--am-r-sm);
  background: var(--am-grad);
  color: var(--am-on-accent);
  font: 700 14px/1 var(--am-font);
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: var(--am-cta-shadow);
}
html body.gm-sidebar-layout main.gm-404 .btn:hover {
  border-color: var(--am-accent);
  background: var(--am-grad-hover);
  box-shadow: var(--am-cta-shadow-hover);
}
html body.gm-sidebar-layout main.gm-404 .btn.ghost {
  border-color: var(--am-line-3);
  background: var(--am-grad-ghost);
  color: #fff;
  box-shadow: none;
}
html body.gm-sidebar-layout main.gm-404 .btn.ghost:hover {
  border-color: rgb(255 255 255 / .16);
  background: var(--am-grad-ghost-hover);
  color: #fff;
}

/* /sifremi-unuttum: auth-modal form language (SPEC §4.23 inputs/submit).
   (0,4,3): out-ranks the shared root rule above. */
html body.gm-sidebar-layout main.page-shell:has(> .gm-reset):not(.promotions-page-only) {
  padding: 40px var(--am-inset) 0;
}
html body.gm-sidebar-layout main.page-shell .gm-reset {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 18px 20px;
}
html body.gm-sidebar-layout main.page-shell .gm-reset::before {
  content: "\f084";
  content: "\f084" / "";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 0 16px;
  border-radius: var(--am-r-sm);
  background: var(--am-ct-emblem);
  color: var(--am-on-bright);
  font: 900 16px/1 "Font Awesome 6 Free";
  box-shadow: 0 6px 16px rgb(2 83 40 / .35), inset 0 1px 0 rgb(255 255 255 / .25);
}
html body.gm-sidebar-layout main.page-shell .gm-reset h1 {
  margin: 0 0 8px;
  color: #fff;
  font: 700 22px/1.3 var(--am-font);
  letter-spacing: -.01em;
}
html body.gm-sidebar-layout main.page-shell .gm-reset .sub {
  margin: 0 0 22px;
  color: var(--am-text-2);
  font: 400 13.5px/21px var(--am-font);
}
html body.gm-sidebar-layout main.page-shell .gm-reset label {
  display: block;
  margin: 16px 0 6px;
  padding-left: 4px;
  color: var(--am-text-label);
  font: 500 13px/15.6px var(--am-font);
  letter-spacing: .3px;
}
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: var(--am-r-sm);
  background: rgb(255 255 255 / .04);
  color: #fff;
  caret-color: #fff;
  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-label);
  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: var(--am-field-focus-line);
  background: var(--am-field-focus-bg);
  box-shadow: var(--am-field-focus-ring);
}
html body.gm-sidebar-layout main.page-shell .gm-reset .btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin: 20px 0 0;
  padding: 0 24px;
  border: 1px solid var(--am-line-cta);
  border-radius: var(--am-r-12);
  background: var(--am-grad);
  color: var(--am-on-accent);
  font: 700 15px/1 var(--am-font);
  letter-spacing: .02em;
  box-shadow: var(--am-cta-shadow);
  cursor: pointer;
}
html body.gm-sidebar-layout main.page-shell .gm-reset .btn:hover:not(:disabled) {
  border-color: var(--am-accent);
  background: var(--am-grad-hover);
  box-shadow: var(--am-cta-shadow-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: var(--am-r-sm);
  font: 500 14px/1.5 var(--am-font);
}
html body.gm-sidebar-layout main.page-shell .gm-reset .msg.ok {
  border: 1px solid rgb(19 227 152 / .3);
  background: rgb(19 227 152 / .1);
  color: #a7f3d0;
}
html body.gm-sidebar-layout main.page-shell .gm-reset .msg.err {
  border: 1px solid rgb(255 83 101 / .3);
  background: rgb(255 83 101 / .1);
  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-label);
  font: 500 13px/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-bright);
  text-decoration: underline;
}

@media (min-width: 576px) {
  html body.gm-sidebar-layout main.gm-404 {
    padding: 30px 32px;
  }
  html body.gm-sidebar-layout main.gm-404 .btn {
    flex: 0 0 auto;
    min-width: 160px;
  }
  html body.gm-sidebar-layout main.page-shell .gm-reset {
    padding: 30px 32px;
  }
}

/* ---------------------------------------------------------------------------
 * Motion (SPEC §2.6): colour / border / shadow .18-.3s, promo card lift
 * -4px + art zoom 1.05 (fine pointers), CTA lift -1px, modal pop, TOC
 * chevron. Nothing moves under prefers-reduced-motion: reduce.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card {
    transition: transform .24s var(--am-ease), box-shadow .24s var(--am-ease);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card .promotion-card__media img {
    transition: transform var(--am-dur-3) 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(-4px);
      box-shadow: 0 18px 40px rgb(0 0 0 / .5), 0 0 24px rgb(2 83 40 / .18);
    }
    html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:hover .promotion-card__media img {
      transform: scale(1.05);
      filter: none;
    }
    html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotions-hero .promotions-cta:hover,
    html body.gm-sidebar-layout main.gm-404 .btn:hover,
    html body.gm-sidebar-layout main.page-shell .gm-reset .btn:hover:not(:disabled),
    html body.gm-sidebar-layout main.page-shell .gm-support-card .btn:hover {
      transform: translateY(-1px);
    }
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:focus-visible {
    transform: translateY(-4px);
  }
  html body.gm-sidebar-layout main.page-shell :is(.gm-vip-card, .gm-tour-card, .gm-support-card) {
    transition: border-color var(--am-dur-2) var(--am-ease), box-shadow var(--am-dur-2) var(--am-ease);
  }
  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 .gm-row-all,
  html body.gm-sidebar-layout main.page-shell :is(.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),
  html body.gm-sidebar-layout main.gm-404 .btn,
  html body.gm-sidebar-layout div.legal-page > .legal-toc > .am-toc-btn,
  html body.gm-sidebar-layout div.legal-page .legal-section 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), transform var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal .gm-promo-cta::after {
    transition: border-color var(--am-dur) var(--am-ease), box-shadow var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout div.legal-page > .legal-toc ol li a {
    transition: color .2s var(--am-ease), background-color .2s var(--am-ease), padding-left .2s var(--am-ease), padding-right .2s var(--am-ease), box-shadow .2s var(--am-ease);
  }
  html body.gm-sidebar-layout div.legal-page > .legal-toc > .am-toc-btn .am-toc-chev {
    transition: transform .15s var(--am-ease);
  }
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .gm-promo-modal.is-open .gm-promo-dialog {
    animation: am-content-pop .22s var(--am-ease) both;
  }
}
@keyframes am-content-pop {
  from { transform: translateY(8px) scale(.985); opacity: 0; }
}

/* ---- 45-member.css ---- */
/*
 * v3 (2026-10-30, owner decision 7, SPEC §3.2): member pages get the green
 * colours only. No sidebar, no layout change: this partial sets colour,
 * background(-image), border colour and shadow, never display, position,
 * size, spacing, [hidden] or any JS-toggled state. The one exception is the
 * section "Broken-parts pass" near the end (2026-11-04): text properties
 * (family, size, tracking, wrap) and the layout of a few non-control boxes
 * that were visibly broken. Form controls, hidden blocks and iframes keep
 * their display, position, size and overflow there too; the only change to
 * a control is font-size 16px on phones (iOS zooms on focus below that).
 *
 * Member root (called M below): html body.gm-sidebar-layout:has(> .dash-shell)
 * (0,3,2): /hesabim (aqua-hesabim.php, body.gm-account-page) and the
 * legacy /profile/* shells (div.dash-shell[.account-page] as a body child).
 * No storefront root, game.php or /sports has a body > .dash-shell child.
 *
 * Why a partial of its own: the member content is painted by the theme's
 * member sheets (aqua-hesabim.css, aqua-deposit-ocean.css, the inline
 * <style> of the logged-in profile view) and most of their cyan is
 * literal (the cyan --gm-gold > --gm-accent > --gm-leaf gradient written
 * out, bright-cyan edges, navy wells), which no token
 * can reach. The var()-based part (--gold, --panel, --line, --muted, the
 * --gm-* palette and deposit-ocean's --account-* set) is re-pointed by the
 * alias block in 00-tokens.css, which now also covers .dash-shell. Each
 * rule below restates one theme rule (same selector under M, so it always
 * out-ranks it; theme !important is answered with !important) with the v3
 * values:
 *   cyan CTA gradient (gold > accent > leaf stops)    -> --am-grad, white
 *     text (the dark navy ink becomes #fff, SPEC §2.2)
 *   bright-cyan and cyan-alpha edges                  -> --am-line-cta /
 *     rgb(16 180 97 / a)
 *   cyan CTA / card shadows                           -> rgb(2 83 40 / .35)
 *   cyan accent / gold text                           -> --am-accent-bright
 *   navy wells (five steps)                           -> #040d08 … #17402a
 *     (same lightness order: deep, well, card, hover, selected)
 *   secondary pills (pale-cyan text, cyan .55 edge)   -> #fff, green .55
 *   input edges                                       -> --am-field-line,
 *     focus --am-field-focus-* (SPEC §2.6)
 * Sources were read from the live theme snapshot (2026-10-30) with a CSSOM
 * scan of the guest view and a simulated logged-in kasa view (deposit,
 * withdraw, crypto). Rules for states the simulation cannot reach (the
 * logged-in profile view, transaction rows, the h2h bank box, the legacy
 * /profile/* wizard .wd-*, the security page .hg-* / .cp-*) restate the
 * theme selectors as well; they are colour-only and unverified on screen.
 *
 * The generic-class groups (inputs, selects, .btn-primary, .gold, .bg-*)
 * are kept inside body > .dash-shell, so the header, the footer and the
 * auth modal (55-overlays.css owns its fields) are never matched.
 *
 * Rules (SPEC §7): no bare element selectors, nothing outside M (the .hg-*
 * page is keyed by its own classes under body.gm-arwen-page, which no
 * storefront page renders), no motion, no breakpoints. Exceptions: the
 * "Broken-parts pass" section (its own breakpoints, see above; it also
 * holds the /virtual hero caption rule) and the last section ("Shared
 * chrome leftovers", final-fix pass 2026-11-04): colour-only answers for
 * shared chrome on every _head.php page (body text colour, focus-ring
 * fallback, the hidden FAB label, /virtual hero frame, hidden-until-used
 * #authModal icons / provider sheet / toasts).
 *
 * Final pass (2026-11-03, owner: "her yeri yeşil yap"), verified on the
 * logged-in fixtures ops/redesign/v3/fixtures/{hesabim-*,profile-*,
 * bonustaleps}.html at 390 and 1440 (blue detector: 0 visible, 0 hidden):
 *  - Member body (MB below) = html body.gm-sidebar-layout:is(:has(> .dash-shell),
 *    :has(> .bp-section), :has(> main.page-shell .hg-card|.cp-card)), i.e.
 *    /hesabim, /profile/* (dash-shell and the two main.page-shell security
 *    pages) and /bonustaleps (section.bp-section, no dash-shell). Storefront
 *    legal pages also carry gm-arwen-page but none of these children.
 *  - MB restates the 00-tokens alias block on <body> itself, so the body
 *    text colour (aqua-theme `body { color: var(--text) }`, inherited by
 *    every unstyled node), elements appended to body (Swal toasts, FAB copy)
 *    and /bonustaleps (outside every alias root) resolve the cyan --gm-* /
 *    --account-* palette to green. --account-line / --account-text, which
 *    the alias block does not cover, are added here.
 *  - The literal cyan of the history sheet (aqua-profile-history-legacy.css,
 *    mostly !important), the profile page inline <style> blocks (promotions
 *    .ab-* / .pc-*, kyc, bonustaleps .bp-*) and two JS inline colours
 *    (#depositFormNote / #withdrawFormNote info, #kycHint) are restated
 *    below, colour properties only (background-color / -image, border-color,
 *    color, box-shadow with the source offsets). Inline JS colours are
 *    matched by their serialized value ([style*="r, g, b"]) so the error
 *    colours the same code sets stay untouched.
 *  - cark.php is not covered: the live file redirects to / (302) since
 *    2026-09-17, so it never renders.
 */

/* ---- Local tokens (M, and body.gm-arwen-page for the security page) ------ */
html body.gm-sidebar-layout:has(> .dash-shell),
html body.gm-sidebar-layout.gm-arwen-page {
  --am-m-deep: var(--am-surface-0);            /* #040d08: tab rail well */
  --am-m-form: #05120b;                        /* finance form well */
  --am-m-well: var(--am-surface-1);            /* #071a10: rows, bonus card, inputs */
  --am-m-card: var(--am-surface-2);            /* #0c2418: balance card, method card */
  --am-m-hover: var(--am-surface-3);           /* #122e20: hover, active link */
  --am-m-chip: #0f3b24;                        /* method icon / meta chip */
  --am-m-raised: #17402a;                      /* selected amount, switch on */
  --am-m-cta-shadow: 0 12px 28px rgb(var(--am-accent-deep-rgb) / .35);
  --am-m-edge: rgb(var(--am-accent-rgb) / .28);
  --am-m-edge-strong: rgb(var(--am-accent-rgb) / .55);
}

/* ---- Sidebar card (aqua-hesabim.css) ------------------------------------- */
html body.gm-sidebar-layout:has(> .dash-shell) .sidebar-avatar { color: var(--am-text); }
html body.gm-sidebar-layout:has(> .dash-shell) .avatar-status-dot.online { background-color: var(--am-accent-bright); }
html body.gm-sidebar-layout:has(> .dash-shell) .sidebar-balance-card { background-color: var(--am-m-card); }
html body.gm-sidebar-layout:has(> .dash-shell) .sidebar-balance-bonus { background-color: var(--am-m-well); }
html body.gm-sidebar-layout:has(> .dash-shell) .balance-refresh-btn:hover { background-color: var(--am-m-hover); }
html body.gm-sidebar-layout:has(> .dash-shell) :is(.sidebar-link:hover, .sidebar-link.active) { background-color: var(--am-m-hover); }

/* ---- Primary CTAs: deposit, submit, copy IBAN (cyan gradient) ------------ */
html body.gm-sidebar-layout:has(> .dash-shell) :is(.bal-deposit, .psa-btn-deposit, .deposit-submit-btn, .h2h-copy-btn) {
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.bal-deposit, .psa-btn-deposit, .deposit-submit-btn:not(.withdraw-submit-btn), .h2h-copy-btn) {
  border-color: var(--am-line-cta);
  background-image: var(--am-grad);
  box-shadow: var(--am-cta-shadow);
  color: var(--am-text);
}
/* Secondary pills: Para Çek, profile actions, withdraw submit (outline). */
html body.gm-sidebar-layout:has(> .dash-shell) :is(.bal-action-btn:not(.bal-deposit), .psa-btn:not(.psa-btn-deposit), .withdraw-submit-btn) {
  border-color: var(--am-m-edge-strong);
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> .dash-shell) .withdraw-submit-btn { background-color: var(--am-m-card); }
html body.gm-sidebar-layout:has(> .dash-shell) .withdraw-submit-btn:hover { background-color: var(--am-m-hover); }

/* ---- Account hero + profile strip ---------------------------------------- */
html body.gm-sidebar-layout:has(> .dash-shell) .account-hero {
  background-image: linear-gradient(125deg, var(--am-m-hover), var(--panel));
}
html body.gm-sidebar-layout:has(> .dash-shell) .dash-profile-strip { background-color: var(--am-m-card); }
html body.gm-sidebar-layout:has(> .dash-shell) :is(.profile-strip-avatar, .avatar-letter-lg) { color: var(--am-text); }
html body.gm-sidebar-layout:has(> .dash-shell) .badge-online { background-color: var(--am-accent-bright); }
/* Logged-in profile view (inline <style> of aqua-hesabim.php). */
html body.gm-sidebar-layout:has(> .dash-shell) .gm-profile-avatar {
  background-image: var(--am-grad);
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> .dash-shell) .gm-profile-row {
  border-color: var(--am-line-2);
  background-color: rgb(var(--am-accent-rgb) / .04);
}

/* ---- Deposit / withdraw tabs and method cards ----------------------------- */
html body.gm-sidebar-layout:has(> .dash-shell) .dw-tabs {
  border-color: rgb(var(--am-accent-rgb) / .22) !important;
  background-color: var(--am-m-deep);
}
html body.gm-sidebar-layout:has(> .dash-shell) .dw-tab {
  border-color: var(--am-line-2) !important;
  background-color: rgb(var(--am-surface-1-rgb) / .85) !important;
  color: rgb(255 255 255 / .82) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) .pm-card {
  border-color: var(--am-m-edge) !important;
  background-color: var(--am-m-card);
  background-image: linear-gradient(135deg, rgb(var(--am-surface-0-rgb) / .92), rgb(var(--am-surface-1-rgb) / .9)) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) .wd-method-card {
  background-image: linear-gradient(135deg, rgb(var(--am-surface-0-rgb) / .92), rgb(var(--am-surface-1-rgb) / .9)) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.pm-card:hover, .pm-card.active, .wd-method-card:hover, .wd-method-card.active, .wd-method-card--active, .wd-method-card.selected) {
  border-color: var(--am-accent) !important;
  box-shadow: 0 12px 30px rgb(var(--am-accent-deep-rgb) / .35) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.pm-card-icon, .pm-card-meta) { background-color: var(--am-m-chip); }
html body.gm-sidebar-layout:has(> .dash-shell) :is(.pm-card .pm-card-inner > i, .wd-method-card__img, .method-mark, .method-mini, .profile-strip-avatar) {
  border-color: rgb(var(--am-accent-bright-rgb) / .45) !important;
  background-image: var(--am-grad) !important;
  box-shadow: 0 8px 18px rgb(var(--am-accent-deep-rgb) / .35) !important;
  color: var(--am-text) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.profile-strip-avatar .avatar-letter-lg, .pm-card .pm-card-inner > i) {
  color: var(--am-text) !important;
}
/* Every "selected / primary" surface of deposit-ocean (!important there). */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.dw-tab.active, button.dw-tab.active, .wd-step--active, .wd-submit, .wd-quick-btn.active, .wd-quick-btn.selected, .wd-quick-btn:hover, .pm-card.active, .pm-card.selected, .pm-card[aria-selected="true"], .btn-primary, .dash-btn-primary, .deposit-submit, #paymentForm button[type="submit"], #withdrawForm button[type="submit"], .profile-sidebar a.active, .dash-side a.active, .side-link.active, .bg-gold, .bg-purple, .bg-emerald) {
  background-image: var(--am-grad) !important;
  box-shadow: var(--am-m-cta-shadow) !important;
  color: var(--am-text) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.transaction-steps .step.active strong, .wd-step__num) {
  background-image: var(--am-grad) !important;
  color: var(--am-text) !important;
}

/* ---- Amount form ---------------------------------------------------------- */
html body.gm-sidebar-layout:has(> .dash-shell) .finance-form { background-color: var(--am-m-form); }
html body.gm-sidebar-layout:has(> .dash-shell) .deposit-input {
  border-color: var(--am-field-line);
  background-color: var(--am-m-well);
}
/* Final pass: the text colour too (deposit-ocean #f2f9fc !important, history
   sheet #f2f9fc), and the history sheet's .form-control (date inputs). */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.wd-field__input, .wd-field__input-wrap input, .deposit-input-wrap input, input[type="text"], input[type="number"], input[type="tel"], select, .wd-otp-digit, .form-control) {
  border-color: var(--am-field-line) !important;
  color: var(--am-text) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell .form-control { background-color: rgb(var(--am-bg-rgb) / .85); }
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.wd-field__input, .wd-field__input-wrap input, .deposit-input-wrap input, input[type="text"], input[type="number"], input[type="tel"], select, .wd-otp-digit, .form-control, input):focus {
  border-color: var(--am-field-focus-line) !important;
  box-shadow: var(--am-field-focus-ring) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) .qa-btn { background-color: var(--am-m-card); }
html body.gm-sidebar-layout:has(> .dash-shell) :is(.qa-btn:hover, .qa-btn.selected) { background-color: var(--am-m-raised); }

/* ---- Accent text ---------------------------------------------------------- */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.dash-card-title, .wd-user-bar__method, .wd-field__limits, .transaction-steps .step.active, .gold, .text-gold, .badge-gold, .purple, .text-purple, .emerald, .text-emerald) {
  color: var(--am-accent-bright) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) .wd-user-bar__balance { color: var(--am-accent-bright) !important; }

/* ---- Cards (deposit-ocean paints .dash-card / .dash-main with !important) - */
html body.gm-sidebar-layout:has(> .dash-shell) :is(.dash-card, .dash-main) {
  border-color: var(--am-line-2) !important;
  background-image: linear-gradient(rgb(var(--am-surface-1-rgb) / .96), rgb(var(--am-bg-rgb) / .94)) !important;
}

/* ---- Bank transfer box, transactions --------------------------------------- */
html body.gm-sidebar-layout:has(> .dash-shell) .h2h-bank-box { background-color: var(--am-m-card); }
html body.gm-sidebar-layout:has(> .dash-shell) .h2h-row { background-color: var(--am-m-well); }
html body.gm-sidebar-layout:has(> .dash-shell) .transaction-row { background-color: var(--am-m-well); }
html body.gm-sidebar-layout:has(> .dash-shell) .transaction-icon { background-color: var(--am-m-raised); }
html body.gm-sidebar-layout:has(> .dash-shell) .transaction-amount.is-plus { color: var(--am-accent-bright); }
html body.gm-sidebar-layout:has(> .dash-shell) .transaction-status.is-approved {
  background-color: rgb(var(--am-accent-rgb) / .14);
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout:has(> .dash-shell) .transactions-empty {
  border-color: var(--am-m-edge);
  background-color: rgb(var(--am-accent-rgb) / .04);
}
html body.gm-sidebar-layout:has(> .dash-shell) .transactions-empty > i { color: var(--am-accent-bright); }

/* ---- Legacy /profile/* wizard (.account-page shell) ------------------------ */
html body.gm-sidebar-layout:has(> .dash-shell) .account-page :is(.transaction-steps, .wd-step) { color: var(--am-text-3); }
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .transaction-steps .step strong { color: var(--am-text); }
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .wd-step { background-color: rgb(var(--am-accent-rgb) / .1); }
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .wd-step__num {
  background-color: rgb(var(--am-accent-rgb) / .28);
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .wd-field__prefix { color: var(--am-accent-bright); }

/* ---- Security / password page (aqua-hesabim.css, body.gm-arwen-page) ------ */
html body.gm-sidebar-layout.gm-arwen-page :is(.hg-head > i, .cp-head > i) { background-color: var(--am-m-chip); }
html body.gm-sidebar-layout.gm-arwen-page .hg-user { background-color: var(--am-m-card); }
html body.gm-sidebar-layout.gm-arwen-page .hg-row-ic { background-color: var(--am-m-card); }
html body.gm-sidebar-layout.gm-arwen-page .hg-switch {
  border-color: var(--am-line-3);
  background-color: var(--am-m-well);
}
html body.gm-sidebar-layout.gm-arwen-page .hg-switch.on {
  border-color: rgb(var(--am-accent-rgb) / .6);
  background-color: var(--am-m-raised);
}
html body.gm-sidebar-layout.gm-arwen-page .hg-note { background-color: var(--am-m-card); }
html body.gm-sidebar-layout.gm-arwen-page :is(.hg-pw, .cp-btn) {
  background-image: var(--am-grad);
  color: var(--am-text);
}
html body.gm-sidebar-layout.gm-arwen-page .cp-field {
  border-color: var(--am-field-line);
  background-color: var(--am-m-form);
}
html body.gm-sidebar-layout.gm-arwen-page .cp-field:focus-within {
  border-color: var(--am-field-focus-line);
  outline-color: rgb(var(--am-accent-rgb) / .3);
}
html body.gm-sidebar-layout.gm-arwen-page .cp-msg.ok {
  border-color: rgb(var(--am-accent-rgb) / .45);
  background-color: rgb(var(--am-accent-rgb) / .14);
  color: var(--am-accent-bright);
}

/* ==== Final pass (2026-11-03): member body MB ============================== */
/* The 00-tokens alias block restated on <body> of every member page (no
   geometry tokens: --gm-radius / --gm-top / --gm-rail are left alone), plus
   --account-line / --account-text and the body text colour. */
html body.gm-sidebar-layout:is(:has(> .dash-shell), :has(> .bp-section), :has(> main.page-shell .hg-card), :has(> main.page-shell .cp-card)) {
  --gm-canvas: var(--am-bg);
  --gm-canvas-rgb: var(--am-bg-rgb);
  --gm-surface: var(--am-surface-1);
  --gm-surface-rgb: var(--am-surface-1-rgb);
  --gm-raised: var(--am-surface-2);
  --gm-raised-rgb: var(--am-surface-2-rgb);
  --gm-leaf: var(--am-accent-2);
  --gm-leaf-rgb: var(--am-accent-2-rgb);
  --gm-accent: var(--am-accent);
  --gm-accent-rgb: var(--am-accent-rgb);
  --gm-muted: var(--am-text-label);
  --gm-muted-rgb: var(--am-text-label-rgb);
  --gm-soft: #dfeee6;
  --gm-soft-rgb: 223 238 230;
  --gm-text: var(--am-text);
  --gm-text-rgb: 255 255 255;
  --gm-gold: var(--am-accent-bright);
  --gm-gold-rgb: var(--am-accent-bright-rgb);
  --gm-pine: var(--am-accent-deep);
  --gm-pine-rgb: var(--am-accent-deep-rgb);
  --gm-ocean: var(--am-accent-deep);
  --gm-ocean-rgb: var(--am-accent-deep-rgb);
  --gm-cyan-bright: var(--am-accent-bright);
  --gm-cyan-bright-rgb: var(--am-accent-bright-rgb);
  --gm-cyan-soft: var(--am-accent-bright);
  --gm-cyan-soft-rgb: var(--am-accent-bright-rgb);
  --gm-ocean-grad: var(--am-grad);
  --gm-ocean-navy: var(--am-bg);

  --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);
  --secondary: var(--am-surface-1);
  --header: var(--am-surface-1);
  --neutral: var(--am-bg);
  --line: var(--am-line-2);
  --line-soft: var(--am-line);
  --shadow: var(--am-shadow-2);
  --muted: var(--am-text-2);
  --text: var(--am-text);
  --gold: var(--am-accent);
  --gold-soft: var(--am-accent-bright);
  --gold-text: var(--am-accent-bright);
  --gold-bright: var(--am-accent-bright);
  --gold-dark: var(--am-accent-deep);
  --primary: var(--am-accent);
  --tertiary: var(--am-accent-bright);
  --amethyst: var(--am-accent-2);
  --amethyst-strong: var(--am-surface-2);
  --figma-purple: var(--am-surface-2);
  --lavender: var(--am-accent-bright);
  --green-emerald: var(--am-accent);
  --green-deep: var(--am-accent-2);
  --emerald: var(--am-accent);
  --emerald-strong: var(--am-accent-2);
  --mint: #dfeee6;

  --account-bg: var(--am-bg);
  --account-bg-2: var(--am-surface-0);
  --account-panel: var(--am-surface-1);
  --account-panel-2: var(--am-surface-2);
  --account-line: rgb(255 255 255 / .1);
  --account-line-strong: rgb(var(--am-accent-rgb) / .28);
  --account-text: var(--am-text);
  --account-muted: var(--am-text-label);
  --account-purple: var(--am-accent);
  --account-purple-2: var(--am-accent-2);
  --account-gold: var(--am-accent-bright);
  --account-gold-2: var(--am-accent);
  --account-green: var(--am-accent);

  color: var(--am-text);
}

/* FAB copy (visually hidden label; aqua-member-chrome #a8e6ff / #eef6fa). */
html body.gm-sidebar-layout:is(:has(> .dash-shell), :has(> .bp-section), :has(> main.page-shell .hg-card), :has(> main.page-shell .cp-card)) .gm-live-support-fab-copy :is(strong, small) {
  color: inherit;
}

/* Swal toast (kyc.php: background #082635, color #f1f5f9 inline). */
html body.gm-sidebar-layout:is(:has(> .dash-shell), :has(> .bp-section)) .swal2-popup[style*="8, 38, 53"] {
  background-color: var(--am-surface-1) !important;
}
html body.gm-sidebar-layout:is(:has(> .dash-shell), :has(> .bp-section)) .swal2-popup[style*="241, 245, 249"] {
  color: var(--am-text) !important;
}

/* ---- Kasa: method cards text, JS info notes -------------------------------- */
html body.gm-sidebar-layout:has(> .dash-shell) :is(.pm-card, .wd-method-card) { color: var(--am-text) !important; }
/* setFinanceNote(): info #a8e6ff -> green; the error colour (#ffb4a8) stays. */
html body.gm-sidebar-layout:has(> .dash-shell) .deposit-note:is([style*="168, 230, 255"], [style*="#a8e6ff" i]) {
  color: var(--am-accent-bright) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) .method-icon { color: var(--am-accent-bright); }

/* /hesabim only: deposit-ocean's `.gm-account-page input:focus` (!important)
   also reaches the layer's search field (25-lobby, a body child). Restate
   25-lobby's own focus look: no ring below 992 (the field wrapper shows it),
   the bordered field + focus ring from 992 (same breakpoint as 25-lobby). */
html body.gm-sidebar-layout.gm-account-page > .am-search-root .am-search-input:focus {
  border-color: rgb(var(--am-accent-rgb) / .75) !important;
  box-shadow: none !important;
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout.gm-account-page > .am-search-root .am-search-input:focus {
    box-shadow: var(--am-field-focus-ring) !important;
  }
}

/* ---- Logged-in profile view: action pills (aqua-theme .auth-btn) ----------- */
html body.gm-sidebar-layout:has(> .dash-shell) .gm-profile-actions .auth-btn {
  background-color: var(--am-m-card);
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> .dash-shell) .gm-profile-actions .auth-btn:hover { background-color: var(--am-m-hover); }
html body.gm-sidebar-layout:has(> .dash-shell) .gm-profile-actions .auth-btn.gm-header-deposit-btn {
  border-color: var(--am-line-cta);
  background-image: var(--am-grad);
  box-shadow: var(--am-cta-shadow);
  color: var(--am-on-accent);
}

/* ---- History pages (aqua-profile-history-legacy.css, .account-page) -------- */
/* Primary CTAs (theme: cyan gradient, #5eefff edge, !important). */
html body.gm-sidebar-layout.gm-arwen-page:has(> .dash-shell) > .dash-shell :is(.btn-primary, .tableFilter .btn),
html body.gm-sidebar-layout:has(> .dash-shell) .account-page :is(.btn-primary, .deposit-submit-btn:not(.withdraw-submit-btn), .psa-btn-deposit, .promo-input button, .wd-submit, .qa-btn.selected, .recent-card-head button) {
  border-color: var(--am-line-cta) !important;
  background-image: var(--am-grad) !important;
  box-shadow: var(--am-cta-shadow) !important;
  color: var(--am-on-accent) !important;
}
/* Secondary outline pills. */
html body.gm-sidebar-layout:has(> .dash-shell) .account-page :is(.psa-btn:not(.psa-btn-deposit), .withdraw-submit-btn, .panel-link, .history-chip, .pagination .page-link, .page-item .page-link, .dataTables_paginate .paginate_button),
html body.gm-sidebar-layout.gm-arwen-page:has(> .dash-shell) > .dash-shell :is(.btn-outline, .btn-outline-secondary) {
  border-color: var(--am-m-edge-strong);
  background-color: rgb(var(--am-bg-rgb) / .35);
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> .dash-shell) .account-page :is(.psa-btn:not(.psa-btn-deposit), .history-chip, .pagination .page-link):hover {
  border-color: var(--am-accent);
  background-color: rgb(var(--am-accent-rgb) / .18);
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> .dash-shell) .account-page :is(.history-chip.active, .dw-tab.active, .page-item.active .page-link, .dataTables_paginate .paginate_button.current) {
  border-color: var(--am-line-cta) !important;
  background-image: var(--am-grad) !important;
  color: var(--am-on-accent) !important;
}
/* Filters. */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell .tableFilter,
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .history-filters {
  border-color: rgb(var(--am-accent-rgb) / .22);
  background-image: linear-gradient(180deg, rgb(var(--am-surface-1-rgb) / .72), rgb(var(--am-bg-rgb) / .62));
}
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell .tableFilter .col-form-label { color: #dfeee6; }
/* Tables. */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.table-responsive, .spor-table-scroll) {
  border-color: rgb(var(--am-accent-rgb) / .2);
  background-image: linear-gradient(180deg, rgb(var(--am-surface-1-rgb) / .55), rgb(var(--am-bg-rgb) / .7));
}
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell table.table { color: var(--am-text); }
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell table.table thead {
  background-image: linear-gradient(180deg, rgb(var(--am-surface-2-rgb) / .96), rgb(var(--am-surface-1-rgb) / .96)) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell table.table thead th { color: var(--am-accent-bright) !important; }
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell table.table tbody td {
  border-top-color: rgb(var(--am-accent-rgb) / .14);
  color: var(--am-text-body);
}
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell table.table tbody tr:hover { background-color: rgb(var(--am-accent-rgb) / .08); }
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell .text-success { color: var(--am-accent-bright) !important; }
html body.gm-sidebar-layout.gm-arwen-page:has(> .dash-shell) > .dash-shell .text-muted,
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .table .text-muted { color: var(--am-text-label) !important; }
/* Badges and statuses. */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell .badge.bg-success {
  border-color: rgb(var(--am-accent-rgb) / .42);
  background-image: linear-gradient(180deg, rgb(var(--am-accent-rgb) / .28), rgb(var(--am-accent-2-rgb) / .16)) !important;
  color: var(--am-accent-bright) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell .badge.bg-secondary {
  border-color: rgb(var(--am-text-label-rgb) / .35);
  background-image: linear-gradient(180deg, rgb(var(--am-text-label-rgb) / .18), rgb(var(--am-text-label-rgb) / .06)) !important;
  color: #dfeee6 !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.account-page .transaction-status.success, .transaction-status.is-approved) {
  border-color: rgb(var(--am-accent-rgb) / .35);
  background-color: rgb(var(--am-accent-rgb) / .14);
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .transaction-status.success {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 4px 12px rgb(var(--am-accent-deep-rgb) / .3);
}
html body.gm-sidebar-layout:has(> .dash-shell) .account-page :is(.account-status-rail .status-check, .security-score li i) {
  border-color: rgb(var(--am-accent-bright-rgb) / .5);
  background-image: radial-gradient(circle at 30% 25%, var(--am-accent-bright), var(--am-accent-2) 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 3px 8px rgb(var(--am-accent-deep-rgb) / .4);
}
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .ses-row > i { color: var(--am-accent-bright); }
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .ses-now {
  background-color: rgb(var(--am-accent-rgb) / .14);
  color: var(--am-accent-bright);
}
/* Empty states, summary strip. */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.empty-state-card, .history-empty) {
  border-color: rgb(var(--am-accent-rgb) / .28);
  background-color: rgb(var(--am-accent-rgb) / .04);
  color: var(--am-text-label);
}
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.empty-state-icon, .history-empty i) { color: var(--am-accent-bright); }
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.nodatafound, .history-empty strong) { color: var(--am-text); }
html body.gm-sidebar-layout:has(> .dash-shell) .account-page :is(.admin-card, .spor-summary-card) {
  border-color: rgb(var(--am-accent-rgb) / .22);
  background-image: linear-gradient(160deg, rgb(var(--am-surface-2-rgb) / .55), rgb(var(--am-bg-rgb) / .72));
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> .dash-shell) .account-page .spor-summary-item strong { color: var(--am-accent-bright); }

/* ---- KYC (profile/kyc.php inline <style> + #kycHint JS colour) ------------- */
html body.gm-sidebar-layout:has(> .dash-shell) :is(.kyc-title, .kyc-panel__header-title) { color: var(--am-text); }
html body.gm-sidebar-layout:has(> .dash-shell) :is(.kyc-unified__slot-label, .kyc-unified__preview-label) { color: var(--am-text-body); }
html body.gm-sidebar-layout:has(> .dash-shell) .kyc-status-approved {
  border-color: rgb(var(--am-accent-rgb) / .25);
  background-color: rgb(var(--am-accent-rgb) / .12);
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.kyc-unified__state--approved, .kyc-unified__mini-state--approved) {
  border-color: rgb(var(--am-accent-rgb) / .15);
  background-color: rgb(var(--am-accent-rgb) / .06);
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout:has(> .dash-shell) .kyc-upload-btn { background-image: var(--am-grad); }
html body.gm-sidebar-layout:has(> .dash-shell) .kyc-progress__bar { background-image: linear-gradient(90deg, var(--am-accent-2), var(--am-accent-bright)); }
html body.gm-sidebar-layout:has(> .dash-shell) #kycHint[style*="74, 182, 222"] { color: var(--am-accent-bright) !important; }
html body.gm-sidebar-layout:has(> .dash-shell) #kycHint[style*="169, 195, 209"] { color: var(--am-text-label) !important; }

/* ---- Promotions (profile/promotions.php inline <style> .ab-* / .pc-*) ------ */
html body.gm-sidebar-layout:has(> .dash-shell) .ab-card {
  border-color: rgb(var(--am-accent-rgb) / .22);
  background-image: linear-gradient(135deg, rgb(var(--am-surface-1-rgb) / .96) 0%, rgb(var(--am-surface-0-rgb) / .98) 100%);
  box-shadow: 0 8px 32px rgb(0 0 0 / .35), 0 0 0 1px rgb(var(--am-accent-rgb) / .06) inset;
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-card::before {
  background-image: linear-gradient(90deg, var(--am-accent-deep) 0%, var(--am-accent-2) 40%, var(--am-accent-bright) 70%, var(--am-accent-2) 100%);
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-card-left {
  border-color: rgb(var(--am-accent-rgb) / .1);
  background-color: rgb(var(--am-accent-rgb) / .04);
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.ab-badge, .ab-status-active) {
  border-color: rgb(var(--am-accent-rgb) / .3);
  background-color: rgb(var(--am-accent-rgb) / .12);
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.ab-completed-badge, .ab-status-completed) {
  border-color: rgb(var(--am-accent-rgb) / .28);
  background-color: rgb(var(--am-accent-rgb) / .1);
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.ab-source, .ab-amount-label, .ab-progress-label i, .pc-sub) { color: rgb(var(--am-accent-rgb) / .85); }
/* Phone card labels (content only inside the source's 768px query). */
html body.gm-sidebar-layout:has(> .dash-shell) .ab-table tbody td::before { color: rgb(var(--am-accent-rgb) / .85); }
html body.gm-sidebar-layout:has(> .dash-shell) :is(.ab-amount-box, .ab-remaining-badge) {
  border-color: rgb(var(--am-accent-rgb) / .15);
  background-color: rgb(var(--am-accent-rgb) / .06);
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.ab-amount-value.em, .ab-table .ab-col-amount) { color: var(--am-accent-bright); }
html body.gm-sidebar-layout:has(> .dash-shell) :is(.ab-progress-pct, .ab-section-title i, .ab-empty a) { color: var(--am-accent); }
html body.gm-sidebar-layout:has(> .dash-shell) .ab-empty a:hover { color: var(--am-accent-bright); }
html body.gm-sidebar-layout:has(> .dash-shell) .ab-empty i { color: rgb(var(--am-accent-rgb) / .25); }
html body.gm-sidebar-layout:has(> .dash-shell) .ab-progress-fill {
  background-image: linear-gradient(90deg, var(--am-accent-deep) 0%, var(--am-accent-2) 50%, var(--am-accent-bright) 100%);
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-progress-fill.done {
  background-image: linear-gradient(90deg, var(--am-accent-2) 0%, var(--am-accent) 50%, var(--am-accent-bright) 100%);
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-info-tag {
  border-color: rgb(var(--am-accent-rgb) / .15);
  background-color: rgb(var(--am-accent-rgb) / .07);
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-info-tag i { color: rgb(var(--am-accent-bright-rgb) / .8); }
html body.gm-sidebar-layout:has(> .dash-shell) .ab-table-wrap { border-color: rgb(var(--am-accent-rgb) / .12); }
html body.gm-sidebar-layout:has(> .dash-shell) .ab-table thead th {
  border-bottom-color: rgb(var(--am-accent-rgb) / .1);
  background-color: rgb(var(--am-accent-rgb) / .06);
  color: rgb(var(--am-accent-rgb) / .9);
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-table tbody tr:hover { background-color: rgb(var(--am-accent-rgb) / .04); }
/* Mirrors the source breakpoint (promotions.php @media max-width 768px). */
@media (max-width: 768px) {
  html body.gm-sidebar-layout:has(> .dash-shell) .ab-table tbody tr { border-bottom-color: rgb(var(--am-accent-rgb) / .08); }
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-mini-progress-fill { background-image: linear-gradient(90deg, var(--am-accent-deep), var(--am-accent-2)); }
html body.gm-sidebar-layout:has(> .dash-shell) .ab-mini-progress-fill.done { background-image: linear-gradient(90deg, var(--am-accent-2), var(--am-accent-bright)); }
html body.gm-sidebar-layout:has(> .dash-shell) .pc-card {
  border-color: rgb(var(--am-accent-rgb) / .18);
  background-color: rgb(var(--am-accent-rgb) / .04);
}
html body.gm-sidebar-layout:has(> .dash-shell) .pc-card::before {
  background-image: linear-gradient(90deg, var(--am-accent-deep) 0%, var(--am-accent-2) 50%, var(--am-accent-bright) 100%);
}
html body.gm-sidebar-layout:has(> .dash-shell) .pc-icon {
  background-image: var(--am-grad);
  box-shadow: 0 4px 14px rgb(var(--am-accent-deep-rgb) / .45);
}
html body.gm-sidebar-layout:has(> .dash-shell) .pc-btn {
  background-image: var(--am-grad);
  box-shadow: 0 4px 14px rgb(var(--am-accent-deep-rgb) / .45);
}
html body.gm-sidebar-layout:has(> .dash-shell) .pc-result.success {
  border-color: rgb(var(--am-accent-rgb) / .25);
  background-color: rgb(var(--am-accent-rgb) / .08);
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-pagination a {
  border-color: rgb(var(--am-accent-rgb) / .15);
  background-color: rgb(var(--am-accent-rgb) / .05);
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-pagination a:hover {
  border-color: rgb(var(--am-accent-rgb) / .4);
  background-color: rgb(var(--am-accent-rgb) / .12);
  color: var(--am-accent);
}
html body.gm-sidebar-layout:has(> .dash-shell) .ab-pagination a.active {
  background-image: var(--am-grad);
  box-shadow: 0 3px 10px rgb(var(--am-accent-deep-rgb) / .45);
  color: var(--am-on-accent);
}

/* ---- Security page extras (aqua-hesabim.css literals) ---------------------- */
html body.gm-sidebar-layout.gm-arwen-page :is(.hg-pw, .cp-btn) {
  border-color: var(--am-line-cta);
  box-shadow: var(--am-cta-shadow);
}
html body.gm-sidebar-layout.gm-arwen-page .hg-switch.on .hg-state { color: var(--am-text); }
html body.gm-sidebar-layout.gm-arwen-page .hg-switch.on .hg-knob { background-color: #dfeee6; }
html body.gm-sidebar-layout.gm-arwen-page .hg-switch .hg-knob { background-color: var(--am-text-label); }
html body.gm-sidebar-layout.gm-arwen-page :is(.hg-crumb i, .cp-crumb i) { color: var(--am-text-label); }

/* ---- /bonustaleps (section.bp-section, inline <style> literals) ------------ */
html body.gm-sidebar-layout > .bp-section :is(.bp-bal-value.green) { color: var(--am-accent-bright); }
html body.gm-sidebar-layout > .bp-section .bp-card-cevrimsiz:hover { border-color: rgb(var(--am-accent-rgb) / .42); }
html body.gm-sidebar-layout > .bp-section .bp-card-icon.cevrimsiz { background-image: linear-gradient(140deg, var(--am-accent), var(--am-accent-deep)); }
html body.gm-sidebar-layout > .bp-section .bp-tag.success {
  border-color: rgb(var(--am-accent-rgb) / .3);
  background-color: rgb(var(--am-accent-rgb) / .12);
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout > .bp-section .bp-claim-btn.green {
  background-image: linear-gradient(135deg, var(--am-accent), var(--am-accent-deep));
  box-shadow: 0 10px 24px rgb(var(--am-accent-deep-rgb) / .4);
}
html body.gm-sidebar-layout > .bp-section .bp-badge.success {
  background-color: rgb(var(--am-accent-rgb) / .14);
  color: var(--am-accent-bright);
}

/* ==== Final-fix pass (2026-11-04, QA findings) ============================== */
/* Disabled fields (/profile/account-details İsim / Soy İsim, any disabled
   control under .dash-shell): the field rules above paint every control
   white-on-well with the 3:1 edge (!important), so a read-only field looked
   editable. Restated dimmed, colour only (same weight + :disabled). */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.wd-field__input, .wd-field__input-wrap input, .deposit-input-wrap input, input[type="text"], input[type="number"], input[type="tel"], select, .wd-otp-digit, .form-control, input, textarea):disabled {
  border-color: var(--am-line-2) !important;
  background-color: var(--am-surface-0) !important;
  color: var(--am-text-3) !important;
  -webkit-text-fill-color: var(--am-text-3);
}

/* Trial-bonus game rail (account-details.php inline <style>): the red CTAs,
   hover edge and fallback glow are the only red action colour on a member
   screen; v3 action colour is green. [disabled] opacity is untouched. */
html body.gm-sidebar-layout:has(> .dash-shell) :is(.trial-game-play, .trial-load-more) {
  background-color: var(--am-accent-2);
  background-image: var(--am-grad);
  box-shadow: var(--am-cta-shadow);
  color: var(--am-on-accent);
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.trial-game-play, .trial-load-more):not(:disabled):hover {
  box-shadow: var(--am-cta-shadow-hover);
}
html body.gm-sidebar-layout:has(> .dash-shell) .trial-game-item:hover {
  border-color: var(--am-line-hover);
}
html body.gm-sidebar-layout:has(> .dash-shell) .trial-game-media--fallback::before {
  background-image:
    radial-gradient(circle at top right, rgb(var(--am-accent-rgb) / .28), transparent 34%),
    linear-gradient(135deg, rgb(var(--am-bg-rgb) / .98) 0%, var(--am-bg) 100%);
}

/* Contrast (promotions meta text white .35-.38 on #000b07 = 3.1-3.5:1 at
   11-12px; the sidebar avatar letter white on #10b461 = 2.7:1). */
html body.gm-sidebar-layout:has(> .dash-shell) :is(.ab-progress-stats, .ab-empty, .ab-table .ab-col-date) {
  color: var(--am-text-3);
}
html body.gm-sidebar-layout:has(> .dash-shell) .sidebar-avatar {
  background-color: var(--am-accent-2);
}

/* ==== Broken-parts pass (2026-11-04, owner: "CSS'de bozuk olan kısımlar,
   fontlar"). Verified on the fixtures at the reported widths + 390/1440. ==== */

/* Fields: below 16px iOS Safari zooms the page on focus. Font-size only. */
@media (max-width: 767.98px) {
  html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(.form-control, #manualTrialGamesSearch, #promoCodeInput, .tableFilter :is(select, input)) {
    font-size: 16px;
  }
}

/* Old faces in member content (aqua-profile-legacy Rajdhani / GilroyArwen;
   the h1's 900 was a synthetic bold of a 400-only face). All member and
   bonus pages use the v3 primary font stack (--am-font: AM Rubik with AM
   Inter fallback for ₺). */
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell,
html body.gm-sidebar-layout:has(> .dash-shell) > .dash-shell :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .pc-title, .ab-title, .ab-section-title, .pc-btn, .pc-input),
html body.gm-sidebar-layout :is(.bonus-page, .bp-hero, .bp-section),
html body.gm-sidebar-layout :is(.bonus-page, .bp-hero, .bp-section) :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .bp-btn, .bp-tab) {
  font-family: var(--am-font) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(.pc-title, .ab-title, .ab-section-title, .pc-btn, .pc-input) {
  letter-spacing: normal;
}
html body.gm-sidebar-layout:has(> .dash-shell) :is(#sidebarMainBalance, .sidebar-balance-card .balance-amount) {
  background: none !important;
  -webkit-text-fill-color: var(--am-accent-bright) !important;
  color: var(--am-accent-bright) !important;
}
html body.gm-sidebar-layout:has(> .dash-shell) .spor-summary-card > .spor-summary-divider {
  color: var(--am-text-2);
}
html body.gm-sidebar-layout:has(> .dash-shell) .pm-card {
  overflow: clip;
}
html body.gm-sidebar-layout .bonus-page {
  overflow-x: clip;
}
@media (max-width: 900px) {
  html body.gm-sidebar-layout .bonus-page :is(.bp-hero, .bp-section) {
    margin-inline: -16px;
  }
}

/* The 11px floor for real text (labels and meta were 10px). */
html body.gm-sidebar-layout:has(> .dash-shell) :is(.sidebar-balance-card .balance-label, .bal-action-btn, .balance-note, .transaction-status, .pm-card-meta, .ab-amount-label, .ab-badge, .ab-info-tag),
html body.gm-sidebar-layout > .bp-section :is(.bp-cevrim-label, .bp-bal-label) {
  font-size: 11px;
}
/* "PARA ÇEKME" wrapped beside a one-line "PARA YATIR". */
html body.gm-sidebar-layout:has(> .dash-shell) .bal-action-btn {
  letter-spacing: 0;
  white-space: nowrap;
}

/* The profile card's "Para İşlemleri" reuses the header's icon button class,
   so the theme's phone rules (40px square, no padding) squeezed its label
   out of the box, and at every width it had the header's 10px radius and
   Rajdhani. Restated as a pill like its two siblings. */
html body.gm-sidebar-layout:has(> .dash-shell) .gm-profile-actions .auth-btn.gm-header-deposit-btn {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: inherit;
}
@media (max-width: 600px) {
  html body.gm-sidebar-layout:has(> .dash-shell) .gm-profile-actions .auth-btn.gm-header-deposit-btn {
    padding: 9px 12px;
  }
}

/* .deposit-note is a flex row (setFinanceNote() writes display:flex inline),
   so each text run around a <strong> became its own column. display:contents
   joins the bold text to the run; the note itself is untouched. */
html body.gm-sidebar-layout:has(> .dash-shell) .deposit-note > strong {
  display: contents;
}

/* Trial-game cards: the 90px "Oyna" button was clipped by the 121-169px
   card (overflow hidden, nowrap row). The row wraps; the button keeps its box. */
html body.gm-sidebar-layout:has(> .dash-shell) .trial-game-actions {
  flex-wrap: wrap;
}

/* KYC slots: 1fr tracks grew with their content past the panel at 768. */
@media (min-width: 601px) {
  html body.gm-sidebar-layout:has(> .dash-shell) .kyc-unified__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Payment method cards: an 8rem label basis pushed the wider "KREDİ KARTI"
   badge onto its own row, off the line of its neighbours. */
html body.gm-sidebar-layout:has(> .dash-shell) .pm-card-label {
  flex-basis: 4.5rem;
}
html body.gm-sidebar-layout:has(> .dash-shell) .pm-card-meta {
  white-space: nowrap;
}

/* Phones: the two balance cards sit side by side, but only the left label
   row holds the 32px refresh button, so labels and amounts did not line up. */
@media (max-width: 575.98px) {
  html body.gm-sidebar-layout:has(> .dash-shell) .sidebar-balance-bonus .balance-label {
    min-height: 32px;
  }
}

/* Profile header card (inc/profile_header_card.php). No sheet in the repo or
   on the live page styles .profile-hero-* / .btn-ui, so it rendered as bare
   text and underlined links in the fixtures. The partial's source is not in
   the repo: if it brings its own styles, these only restate them in v3. */
html body.gm-sidebar-layout:has(> .dash-shell) .profile-hero-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-r-12);
  background: var(--am-m-card);
}
html body.gm-sidebar-layout:has(> .dash-shell) .profile-hero-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
html body.gm-sidebar-layout:has(> .dash-shell) .profile-hero-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--am-accent-2);
  color: var(--am-on-accent);
  font-size: 18px;
  font-weight: 700;
}
html body.gm-sidebar-layout:has(> .dash-shell) .profile-hero-text h3 {
  margin: 0 0 2px;
  color: var(--am-text);
  font-size: 16px;
  line-height: 1.3;
}
html body.gm-sidebar-layout:has(> .dash-shell) .profile-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--am-text-2);
  font-size: 12px;
  line-height: 1.5;
}
html body.gm-sidebar-layout:has(> .dash-shell) .profile-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body.gm-sidebar-layout:has(> .dash-shell) .profile-hero-actions .btn-ui {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--am-m-edge-strong);
  border-radius: var(--am-r-sm);
  background-color: rgb(var(--am-bg-rgb) / .35);
  color: var(--am-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
html body.gm-sidebar-layout:has(> .dash-shell) .profile-hero-actions .btn-ui-primary {
  border-color: var(--am-line-cta);
  background-image: var(--am-grad);
  box-shadow: var(--am-cta-shadow);
  color: var(--am-on-accent);
}

/* ---- /virtual hero (main.page-shell #heroSlider, storefront content) ------
   The slide art has its copy baked in, so the legacy 44-72px title printed
   text over text and at 360 started 37px above the slider. Visually hidden
   (never display: the slider JS writes the title, and a screen reader still
   gets it). */
html body.gm-sidebar-layout main.page-shell #heroSlider .hero-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Shared chrome leftovers (every _head.php page, colour only) ----------
   Not member content, kept here because this pass may only edit this
   partial: the visually hidden live-support label (aqua-member-chrome
   #a8e6ff / #eef6fa, clipped to 1x1, so nobody sees it but it is cyan),
   and the /virtual hero frame (aqua-profile-legacy.css:29 cyan .24 edge). */
html body.gm-sidebar-layout .gm-live-support-fab-copy :is(strong, small) {
  color: inherit;
}
html body.gm-sidebar-layout:has(> main.page-shell) #heroSlider.hero-slider {
  border-color: var(--am-line-2);
}
/* Body text colour on every _head.php page: aqua-theme `body { color:
   var(--text) }` resolves to #f2f9fc on <body> (the alias block re-points
   --text only inside the roots), and every node without its own colour
   inherits that cyan-tinted white (/virtual hero title, the hidden slider
   status line, the home .gm-trust labels). */
html body.gm-sidebar-layout {
  color: var(--am-text);
}
/* /virtual legacy hero (aqua-profile-legacy.css, @layer aqua-legacy):
   inner edge, arrows and dots in the v3 neutrals; active dot green. */
html body.gm-sidebar-layout:has(> main.page-shell) #heroSlider.hero-slider::before {
  border-color: var(--am-line-3);
}
html body.gm-sidebar-layout:has(> main.page-shell) #heroSlider .hero-nav {
  border-color: rgb(255 255 255 / .2);
  background-color: rgb(var(--am-bg-rgb) / .45);
  color: var(--am-text);
}
html body.gm-sidebar-layout:has(> main.page-shell) #heroSlider .hero-dot {
  background-color: rgb(255 255 255 / .35);
}
html body.gm-sidebar-layout:has(> main.page-shell) #heroSlider .hero-dot.active {
  background-color: var(--am-accent);
  box-shadow: 0 0 10px rgb(var(--am-accent-bright-rgb) / .6);
}
/* Hidden-until-used leftovers (shown by JS or by opening a panel):
   #authModal field icons (aqua-member-chrome #4cc9f0; 55-overlays hides
   them, so colour only), the /slot provider sheet options (#f1f5f9 in
   30-catalog), the /canli-yayin copy toast (inline --gm-canvas navy and
   #206781 icon), the home .gm-trust tiles (removed by 27-simplify). */
html body.gm-sidebar-layout #authModal .auth-input-wrap > i {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout #slotProviderModal .slot-provider-opt:not([aria-selected="true"]) {
  color: rgb(255 255 255 / .92);
}
html body.gm-sidebar-layout #lyToast.ly-toast {
  border-color: var(--am-line-3);
  background-color: var(--am-surface-1);
  color: var(--am-text);
}
html body.gm-sidebar-layout #lyToast.ly-toast i {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout .gm-trust a {
  background-color: var(--am-surface-1);
  color: var(--am-text);
}
/* Keyboard focus ring fallback: aqua-theme `:focus-visible { outline: 3px
   solid var(--gold-soft) }` resolves to #5eefff on body. Same weight as
   that rule (0,1,0) and later, so every component focus rule of this layer
   (all more specific) still wins; only the theme's cyan fallback turns
   green (game.php overlay, sidebar items, member pages). */
:where(html body.gm-sidebar-layout, html body.gm-sidebar-layout *):focus-visible {
  outline-color: rgb(var(--am-accent-rgb) / .8);
}

/* ---- 46-game.css ---- */
/*
 * v3 (2026-11-03, owner request "oyuna girince hala mavi geliyor"): the
 * game launch screen (game.php, #game-stage) in the v3 green look.
 *
 * What game.php renders (live template, launch-OK branch): _head.php (so
 * this layer loads), _header.php (hidden under the overlay), then an
 * inline <style> in <body> and
 *   div#game-stage (position:fixed; inset:0; z-index:2147483000)
 *     .game-shell (flex column, height 100%)
 *       .game-topbar  (grid: back link | provider pill | controls)
 *         a.game-back, span.game-pill, .game-controls > button.game-btn
 *         (#retryBtn veritral only, #fullscreenBtn, #closeBtn.danger)
 *       .bonus-progress[hidden] (shown by the balance poll)
 *         .bonus-label, .bonus-value, .bonus-track > .bonus-fill, .bonus-meta
 *       .game-frame-wrap > iframe#gameFrame (100% x 100%)
 *   body > #gameNoticeStack > div  (JS toasts, inline-styled)
 * game.php exits before _footer.php, so aqua-modern.js never runs there
 * (every layer module also skips #game-stage). This partial is CSS only.
 *
 * Why the inline cyan won before: the inline <style> paints with literal
 * cyan (rgba(111,217,242,…), #a8e6ff) and with var(--gm-canvas/-accent/
 * -text), and #game-stage is not in the 00-tokens.css alias block, so
 * those vars resolved to aqua-colors.css's navy/cyan :root palette.
 *
 * How: (1) the --gm-* palette is re-pointed to the v3 tokens on
 * #game-stage itself, so every var()-based colour of the inline sheet
 * turns green; (2) each painted property of the inline sheet is restated
 * under "html body.gm-sidebar-layout #game-stage" (1,1,2)+, which out-ranks
 * the inline rules (max #game-stage.is-immersive .game-topbar = 1,2,0)
 * without !important; (3) the two JS-written inline colours (completed
 * bonus fill, toast backgrounds) are matched by their serialized style
 * attribute and answered with !important (background, border colour,
 * radius and shadow only; never a box or display property).
 *
 * Contract (game screen safety rules): colour, background, border COLOUR,
 * radius, shadow and outline only. Never display, visibility,
 * position, inset, z-index, size, margin, padding, border width/style,
 * overflow, opacity, transform or pointer-events, so the overlay, the
 * immersive collapse (.is-immersive: topbar + bonus bar height 0, frame
 * full bleed) and #gameFrame 100% x 100% stay exactly as game.php sets
 * them. No font family is set (final pass, QA 2026-11-03: the Rubik
 * family moved text-driven widths by up to 3px), so game.php keeps its
 * Inter text. The one font property is the bonus bar's 11px floor below
 * (its 10px phone rule), with the line height pinned to what 10px gave, so
 * the bar and the frame under it stay exactly the same height. Where the
 * inline immersive rule removes a shadow/radius, the
 * restated shadow/radius is removed again under .is-immersive.
 *
 * Look (SPEC §2): top bar = the storefront header language (#030a06,
 * green .85 bottom edge + white .07 inner line, header shadow); ghost
 * buttons like the header's Giriş Yap, "Tam Ekran" as the green CTA like
 * Para Yatır, "Kapat" in the v3 danger red; provider pill = green chip;
 * bonus bar = titled panel, bright-green eyebrow, green fill (the JS warm
 * states, amber >= 65% and red < 65%, are progress signals and stay; the
 * JS "done" cyan becomes bright green); frame = flat #010d08 well with a
 * white hairline; JS toasts in the 55-overlays toast language (tinted
 * gradient, 2px tone bar, amber stays amber). No motion is added; the
 * striped fill animation stops under prefers-reduced-motion: reduce.
 *
 * Out of reach of this layer (own head, no gm-sidebar-layout): the launch
 * error page (game.php ~L435, .aw-game-error; recoloured by
 * aqua-green-compat.css §6, <link> added before its </head> at deploy) and
 * the 403 "Oyun kapalı" echo (game.php L45, inline styles, no <head>;
 * two-value colour edit in the template at deploy). /sports has its own
 * #game-stage without gm-sidebar-layout: aqua-green-compat.css §8.
 */

/* ---- Palette: --gm-* re-pointed on the overlay (same mapping as the
   00-tokens.css alias block, the subset the inline sheet reads). -------- */
html body.gm-sidebar-layout #game-stage {
  --gm-canvas: var(--am-bg);
  --gm-canvas-rgb: var(--am-bg-rgb);
  --gm-surface: var(--am-surface-1);
  --gm-surface-rgb: var(--am-surface-1-rgb);
  --gm-raised: var(--am-surface-2);
  --gm-raised-rgb: var(--am-surface-2-rgb);
  --gm-leaf: var(--am-accent-2);
  --gm-leaf-rgb: var(--am-accent-2-rgb);
  --gm-accent: var(--am-accent);
  --gm-accent-rgb: var(--am-accent-rgb);
  --gm-gold: var(--am-accent-bright);
  --gm-gold-rgb: var(--am-accent-bright-rgb);
  --gm-muted: var(--am-text-label);
  --gm-muted-rgb: var(--am-text-label-rgb);
  --gm-soft: #dfeee6;
  --gm-soft-rgb: 223 238 230;
  --gm-text: var(--am-text);
  --gm-text-rgb: 255 255 255;

  background: var(--am-bg);
  color: var(--am-text);
  font-family: var(--am-font);
}
html body.gm-sidebar-layout #game-stage :is(.game-topbar, .game-back, .game-pill, .game-btn, .bonus-progress, .bonus-label, .bonus-value, .bonus-meta) {
  font-family: var(--am-font);
}
html body.gm-sidebar-layout:has(#game-stage) :is(.gm-topbar-announce, header.topbar, nav.gm-bottombar, .gm-live-support-fab, .gm-support-status, [data-destek-widget]) {
  visibility: hidden !important;
}

/* ---- Top bar: storefront header language -------------------------------- */
html body.gm-sidebar-layout #game-stage .game-topbar {
  border-bottom-color: var(--am-line-hdr);
  background:
    linear-gradient(rgb(255 255 255 / .07), rgb(255 255 255 / .07)) 0 100% / 100% 1px no-repeat,
    var(--am-surface-hdr);
  box-shadow: var(--am-shadow-hdr);
}

/* Back link: white .78 text, bright-green arrow; white on hover. */
html body.gm-sidebar-layout #game-stage .game-back {
  color: rgb(255 255 255 / .78);
}
html body.gm-sidebar-layout #game-stage .game-back > i {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout #game-stage .game-back:hover {
  color: var(--am-text);
}

/* Provider pill (SLOT OYUN / CANLI OYUN): green chip. */
html body.gm-sidebar-layout #game-stage .game-pill {
  border-color: var(--am-line-accent);
  background: var(--am-tint-2);
  color: var(--am-accent-bright);
  box-shadow: var(--am-sheen-active);
}

/* Buttons: ghost (Yeniden Dene), green CTA (Tam Ekran), danger (Kapat).
   Height, padding and font size stay game.php's (34px, 32px <=860). */
html body.gm-sidebar-layout #game-stage .game-btn {
  border-color: var(--am-line-3);
  border-radius: var(--am-r-sm);
  background: var(--am-grad-ghost);
  color: var(--am-text);
  box-shadow: var(--am-sheen);
}
html body.gm-sidebar-layout #game-stage .game-btn > i {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout #game-stage #fullscreenBtn.game-btn {
  border-color: var(--am-line-cta);
  background: var(--am-grad);
  color: var(--am-on-accent);
  box-shadow: var(--am-cta-shadow);
}
html body.gm-sidebar-layout #game-stage #fullscreenBtn.game-btn > i {
  color: var(--am-on-accent);
}
html body.gm-sidebar-layout #game-stage .game-btn.danger {
  border-color: rgb(255 83 101 / .5);
  background: linear-gradient(180deg, rgb(190 38 58 / .92), rgb(140 22 40 / .92));
  color: var(--am-text);
  box-shadow: 0 6px 16px rgb(120 14 30 / .35), inset 0 1px 0 rgb(255 255 255 / .14);
}
html body.gm-sidebar-layout #game-stage .game-btn.danger > i {
  color: var(--am-text);
}
/* Busy retry ("Yenileniyor"): the spinner glyph is the v3 loader colour. */
html body.gm-sidebar-layout #game-stage .game-btn .fa-spinner {
  color: var(--am-accent-bright);
}
@media (hover: hover) {
  html body.gm-sidebar-layout #game-stage .game-btn:hover {
    border-color: rgb(var(--am-accent-rgb) / .55);
    background: var(--am-grad-ghost-hover);
    color: var(--am-text);
    box-shadow: 0 6px 16px rgb(0 0 0 / .3), var(--am-sheen);
  }
  html body.gm-sidebar-layout #game-stage #fullscreenBtn.game-btn:hover {
    border-color: var(--am-accent);
    background: var(--am-grad);
    color: var(--am-on-accent);
    box-shadow: var(--am-cta-shadow-hover);
  }
  html body.gm-sidebar-layout #game-stage .game-btn.danger:hover {
    border-color: rgb(255 83 101 / .8);
    background: linear-gradient(180deg, rgb(214 46 68 / .96), rgb(160 26 46 / .96));
    color: var(--am-text);
    box-shadow: 0 8px 20px rgb(120 14 30 / .45), inset 0 1px 0 rgb(255 255 255 / .16);
  }
}
html body.gm-sidebar-layout #game-stage :is(.game-btn, .game-back):focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .8);
  outline-offset: 2px;
}

/* ---- Bonus progress (shown by the balance poll) -------------------------- */
html body.gm-sidebar-layout #game-stage .bonus-progress {
  border-color: rgb(var(--am-accent-rgb) / .22);
  background:
    radial-gradient(120% 160% at 0% 0%, rgb(var(--am-accent-deep-rgb) / .34), transparent 62%),
    linear-gradient(180deg, rgb(var(--am-surface-1-rgb) / .96), rgb(var(--am-surface-0-rgb) / .96));
  box-shadow: var(--am-sheen-panel), 0 10px 24px rgb(0 0 0 / .32);
}
html body.gm-sidebar-layout #game-stage .bonus-label {
  color: var(--am-accent-bright);
}
html body.gm-sidebar-layout #game-stage :is(.bonus-value, #bonusPercent) {
  color: var(--am-text);
}
html body.gm-sidebar-layout #game-stage #bonusRemaining {
  color: var(--am-text-2);
}
html body.gm-sidebar-layout #game-stage .bonus-track {
  background: rgb(255 255 255 / .09);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .45);
}
/* Base fill (before the first poll paints an inline colour). */
html body.gm-sidebar-layout #game-stage .bonus-fill {
  background: linear-gradient(90deg, var(--am-accent-deep) 0%, var(--am-accent) 60%, var(--am-accent-bright) 100%);
}
/* JS "done" state (pct >= 100): inline linear-gradient(#0a8ebf, #0cace7),
   serialized as rgb(10, 142, 191) by Chromium/WebKit/Gecko; the hex forms
   cover an engine that keeps the authored text. Amber/red states stay. */
html body.gm-sidebar-layout #game-stage .bonus-fill:is([style*="10, 142, 191"], [style*="10,142,191"], [style*="0a8ebf" i]) {
  background: linear-gradient(90deg, var(--am-accent) 0%, var(--am-accent-bright) 100%) !important;
  box-shadow: 0 0 10px rgb(var(--am-accent-bright-rgb) / .45);
}
@media (prefers-reduced-motion: reduce) {
  html body.gm-sidebar-layout #game-stage .bonus-fill::after {
    animation: none;
  }
}

/* ---- Game frame ------------------------------------------------------------ */
html body.gm-sidebar-layout #game-stage .game-frame-wrap {
  border-color: var(--am-line-2);
  background: var(--am-bg);
  box-shadow: var(--am-shadow-hero), inset 0 1px 0 rgb(255 255 255 / .04);
}
html body.gm-sidebar-layout #game-stage #gameFrame {
  background: var(--am-bg);
}
/* Immersive (fullscreen fallback): game.php drops the frame's shadow; the
   restated shadow above out-ranks that rule, so it is dropped again. */
html body.gm-sidebar-layout #game-stage.is-immersive .game-frame-wrap {
  box-shadow: none;
}
html body.gm-sidebar-layout #game-stage.is-immersive :is(.game-topbar, .bonus-progress) {
  box-shadow: none;
}

/* ---- JS toasts (#gameNoticeStack, built by showInPageNotice()) -------------
   Inline background / border / shadow / radius are answered with
   !important (colour, radius, shadow only; size and padding stay). Tone by
   the serialized inline background: success rgba(9, 67, 88), warning
   rgba(112, 71, 0), info (default) rgba(8, 38, 53). */
html body.gm-sidebar-layout > #gameNoticeStack > div {
  --am-gn-tone: var(--am-accent-rgb);
  --am-gn-hi: var(--am-accent-bright);
  border-color: rgb(var(--am-gn-tone) / .35) !important;
  border-radius: var(--am-r-12) !important;
  background:
    linear-gradient(125deg, rgb(255 255 255 / .05) 0%, rgb(255 255 255 / .01) 35%, transparent 65%),
    radial-gradient(120% 180% at 100% 0%, rgb(var(--am-gn-tone) / .14) 0%, transparent 55%),
    linear-gradient(125deg, rgb(7 26 16 / .98) 0%, rgb(3 10 6 / .98) 100%) !important;
  color: var(--am-text) !important;
  box-shadow: inset 2px 0 0 var(--am-gn-hi), 0 22px 46px rgb(0 0 0 / .55), 0 8px 20px rgb(var(--am-gn-tone) / .16), inset 0 1px 0 rgb(255 255 255 / .06) !important;
}
html body.gm-sidebar-layout > #gameNoticeStack > div:is([style*="9, 67, 88"], [style*="9,67,88"]) {
  --am-gn-tone: var(--am-accent-rgb);
  --am-gn-hi: var(--am-accent-bright);
  background:
    linear-gradient(125deg, rgb(255 255 255 / .06) 0%, rgb(255 255 255 / .01) 35%, transparent 65%),
    radial-gradient(120% 180% at 100% 0%, rgb(var(--am-accent-rgb) / .26) 0%, transparent 60%),
    linear-gradient(125deg, rgb(3 112 53 / .96) 0%, rgb(2 52 26 / .98) 100%) !important;
}
html body.gm-sidebar-layout > #gameNoticeStack > div:is([style*="112, 71, 0"], [style*="112,71,0"]) {
  --am-gn-tone: 239 176 37;
  --am-gn-hi: #f5c451;
  background:
    linear-gradient(125deg, rgb(255 255 255 / .05) 0%, rgb(255 255 255 / .01) 35%, transparent 65%),
    radial-gradient(120% 180% at 100% 0%, rgb(239 176 37 / .2) 0%, transparent 55%),
    linear-gradient(125deg, rgb(52 36 6 / .98) 0%, rgb(24 16 3 / .98) 100%) !important;
}
html body.gm-sidebar-layout > #gameNoticeStack > div > strong {
  color: var(--am-gn-hi);
}

/* Bonus bar text: game.php's <=860 rule drops it to 10px, under the site's
   11px floor. The line height is what 10px computed to (1.55), so the bar
   and #gameFrame keep their exact height. */
@media (max-width: 860px) {
  html body.gm-sidebar-layout #game-stage .bonus-progress :is(.bonus-label, .bonus-value, .bonus-meta span) {
    font-size: 11px;
    line-height: 15.5px;
  }
}

/* ---- 50-footer.css ---- */
/*
 * v3 (2026-10-30, SPEC §4.22 / §7 step 8): Casibow-green footer. A dot-grid
 * band with a green top hairline; boxed #071a10 panels (r12, 1px .08 edge);
 * green label pills; Rubik 400-700. One heading treatment: all four
 * section titles are the same 26px green pill, 11px with .08em tracking
 * (D, final-fix pass 2026-11-04: the reference mixes a pill, a green bar
 * and an icon + sentence-case title). Breakpoints 576 / 768 / 992 / 1200
 * (max bounds .98). Pairs with 27-simplify.css/.js (phone accordion and the
 * RG-strip links).
 *
 * Footer (footer.site-footer.gmf, inc/aqua/_footer.php). Shared chrome, so it
 * restyles member pages too; markup is identical logged in and out. On the
 * storefront >=992 it sits in the content column (body padding-left =
 * --am-sb-w, 11-sidebar.css), so it starts at x 260 (78 in rail state).
 *
 * Layout: ONE CSS grid on the EXISTING children of .gmf-shell (no DOM move,
 * no markup change). .gmf-copy and .gmf-rg are display:contents so their
 * children (and .gmf-copy's pseudo-elements) are placed on their own.
 * Visual order (SPEC §4.22 1-8):
 *   brand    .gmf-shell::before = logo box (the header's own logo file) +
 *            .gmf-cr copyright (+ .gmf-social if the markup ever has it)
 *   trust    .gmf-trust: ONE bordered panel, 5 icon-tile items
 *   strip    .gmf-bottom: 18+ pill (.gmf-18) + .gmf-warn sentence + links
 *            (.am-ft-strip, built by 27-simplify.js from the nav's own
 *            /sorumlu-oyun and /sartlar-ve-kosullar hrefs; without JS the
 *            "Sorumlu Oyun" badge text sits there as a label)
 *   links    nav.gmf-links: "BİLGİ & POLİTİKALAR" (::before pill) and
 *            9 links in 3 columns on the reference's column pitch (2 <=767)
 *   pay      .gmf-sec: panel; its h4 is the floating "ÖDEME YÖNTEMLERİ" pill
 *   licence  panel drawn by .gmf-shell::after (spans two grid rows, z -1 in
 *            the isolated shell) + pill .gmf-copy::before "Lisanslı
 *            Operatör": VaultMark + MGL badge tiles (.gmf-license-row) |
 *            legal text (.gmf-copy > p)
 *   provh    .gmf-copy::after "Sağlayıcılar" pill (generated, so it never
 *            scrolls with the rail)
 *   prov     .gmf-prov-marquee: 164x106 tiles (178x90 <=767) with an inner
 *            plate; animated only >=992 + no-preference (paused on hover,
 *            focus and off-screen), a swipeable rail otherwise
 *   bottom   .gmf-responsible-row: BeGambleAware tile centred under a
 *            hairline (the reference's bottom seal slot)
 * DOM (= tab) order is trust, providers, seals, payments, links, copy, RG
 * strip; only the seals, links and strip links are focusable, so the focus
 * order differs from the drawn order only between those groups.
 *
 * Gaps (M): band padding 34/0/28 (26 top <=767), panels 24 / 26 apart,
 * container = column - 2 x 16, capped at --am-container (1680 on the
 * storefront; member shells >=992 follow --am-chrome-member-x, 10-chrome).
 * The band owns the 40px gap above it (margin-top, SPEC §4.22/§4.24): the
 * content roots end without bottom padding, and a root's own 40px bottom
 * margin collapses with it (measured 40 on every storefront page).
 *
 * Cascade notes:
 *  - the provider-marquee <style> sits INSIDE the footer (after this layer),
 *    max (0,2,0): every rule here is (0,3,3)+ so it still wins;
 *  - the licence/RG rows, their links and badge <img>s carry inline style=""
 *    (display/gap/margin/height/opacity/justify-content): only those
 *    properties use !important here. Never display:...!important on
 *    .gmf-license (the MGL <img onerror> hides it with an inline
 *    display:none); the rows themselves are never toggled.
 *  - de-duplicated RG signals: the 18+ mark is shown once (.gmf-18 pill),
 *    so the second 18+ svg link and the "SORUMLU OYUN" caption are hidden.
 *  - logos: payment marks white at .5 (brightness(0) invert(1)); provider
 *    logos stay grayscale + lift (D: a white silhouette turns the badge-
 *    shaped marks, e.g. 7Mojos, PG Soft, Retro, EGT, into blobs); the KA
 *    Gaming mark (red die, black type) is inverted instead, and a stray
 *    mark at its foot is clipped.
 *  - tap targets: the RG-strip links and the policy links keep a 24px+
 *    hit area (WCAG 2.5.8) through padding offset by a negative margin.
 *
 * Motion only inside (prefers-reduced-motion: no-preference); no
 * transform/filter on html/body; no display !important on JS-toggled nodes.
 */
html body.gm-sidebar-layout footer.site-footer {
  --am-ft-fg: rgb(255 255 255 / .6);
  --am-ft-panel: var(--am-surface-1);     /* #071a10 */
  --am-ft-chip: var(--am-surface-2);      /* #0c2418 */
  --am-ft-hover: var(--am-surface-3);     /* #122e20 */
  --am-ft-edge: var(--am-line-2);
  --am-ft-gx: 16px;                       /* container gutter */
  --am-ft-px: 21px;                       /* panel edge: 1px border + 20 */
  --am-ft-pt: 52px;                       /* panel top (label pill row) */
  --am-ft-pb: 20px;
  --am-ft-dot: 20px;
  position: relative;
  display: block;
  margin: 40px 0 0;
  padding: 34px 0 28px;
  border: 0;
  border-top: 1px solid var(--am-line-2);
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / .045) 1px, transparent 1.4px) 0 0 / var(--am-ft-dot) var(--am-ft-dot),
    var(--am-ft-bg);
  box-shadow: none;
  color: var(--am-ft-fg);
  font: 400 12.5px/1.45 var(--am-font);
  text-align: start;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Green hairline on the top edge (M: opacity .45, 12-88%). */
html body.gm-sidebar-layout footer.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 12%, var(--am-accent) 50%, transparent 88%);
  opacity: .45;
  pointer-events: none;
}

/* ---- Shell grid ------------------------------------------------------- */
html body.gm-sidebar-layout footer.site-footer .gmf-shell {
  display: grid;
  /* panel edge | licence tiles | text | panel edge (full rows span all) */
  grid-template-columns: var(--am-ft-px) auto minmax(0, 1fr) var(--am-ft-px);
  grid-template-areas:
    "brand  brand  brand  brand"
    "cr     cr     cr     cr"
    "soc    soc    soc    soc"
    "trust  trust  trust  trust"
    "strip  strip  strip  strip"
    "links  links  links  links"
    "pay    pay    pay    pay"
    "licp   licp   licp   licp"
    ".      lict   lict   ."
    ".      licx   licx   ."
    "provh  provh  provh  provh"
    "prov   prov   prov   prov"
    "bottom bottom bottom bottom";
  align-items: start;
  gap: 0;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--am-container);
  margin: 0 auto;
  padding: 0 var(--am-ft-gx);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: start;
}
html body.gm-sidebar-layout footer.site-footer .gmf-copy { display: contents; }

/* ---- 1. Brand row ------------------------------------------------------
   Logo box 192x58 (r12, #071a10, 1px .08 edge, padding 0 20). The file is
   the header's own (/assets/aqua/aquabet-logo.png, already cached): its art
   (6..494 x 83..191 of 500x273) is scaled to the 150px content width. */
html body.gm-sidebar-layout footer.site-footer .gmf-shell::before {
  content: "";
  grid-area: brand;
  justify-self: center;
  box-sizing: border-box;
  width: 192px;
  height: 58px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: var(--am-site-logo-bg, url("/assets/aqua/aquabet-logo.png?v=20261105")) 50% 50% / contain no-repeat content-box;
  opacity: 1;
  pointer-events: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-cr {
  grid-area: cr;
  display: block;
  margin: 16px 0 0;
  padding: 0;
  color: var(--am-ft-fg);
  font: 400 12.5px/18.1px var(--am-font);
  text-align: center;
}
html body.gm-sidebar-layout footer.site-footer .gmf-shell > .gmf-social {
  grid-area: soc;
  justify-self: center;
  margin-top: 12px;
}
html body.gm-sidebar-layout footer.site-footer .gmf-social { display: flex; gap: 8px; }
html body.gm-sidebar-layout footer.site-footer .gmf-social a {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border: 1px solid var(--am-ft-edge);
  border-radius: var(--am-r-xs);
  background: var(--am-ft-panel);
  color: rgb(255 255 255 / .82);
  font-size: 16px;
  text-decoration: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-social a:hover {
  border-color: var(--am-accent);
  background: var(--am-ft-hover);
  color: var(--am-accent);
}

/* ---- 2. Trust panel ----------------------------------------------------- */
html body.gm-sidebar-layout footer.site-footer .gmf-trust {
  grid-area: trust;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / .065);
  border-radius: 22px;
  background: linear-gradient(145deg, rgb(255 255 255 / .045), rgb(7 26 16 / .52));
}
html body.gm-sidebar-layout footer.site-footer .gmf-trust-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--am-text);
  font: 600 11.5px/13.2px var(--am-font);
  letter-spacing: 0;
  text-align: start;
}
html body.gm-sidebar-layout footer.site-footer .gmf-trust-item i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(var(--am-accent-rgb) / .24);
  border-radius: 50%;
  background: rgb(var(--am-accent-rgb) / .10);
  color: var(--am-accent-bright);
  font-size: 14px;
}

/* ---- 3. Responsible-gaming strip --------------------------------------- */
html body.gm-sidebar-layout footer.site-footer .gmf-bottom {
  grid-area: strip;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 26px;
  padding: 14px 18px;
  border: 1px solid rgb(255 255 255 / .065);
  border-radius: 22px;
  background: linear-gradient(145deg, rgb(255 255 255 / .04), rgb(7 26 16 / .48));
}
html body.gm-sidebar-layout footer.site-footer .gmf-rg { display: contents; }
html body.gm-sidebar-layout footer.site-footer .gmf-rg-txt { display: none; }
/* 18+ pill: outlined green, a drawn "!" circle in front. */
html body.gm-sidebar-layout footer.site-footer .gmf-18 {
  order: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: auto;
  height: 26px;
  margin: 0;
  padding: 0 11px 0 8px;
  border: 1px solid var(--am-accent);
  border-radius: var(--am-r-pill);
  background: var(--am-tint-bright);
  color: var(--am-accent);
  font: 700 11.5px/1 var(--am-font);
  letter-spacing: .06em;
}
html body.gm-sidebar-layout footer.site-footer .gmf-18::before {
  content: "!";
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 700 9px/1 var(--am-font);
  letter-spacing: 0;
}
html body.gm-sidebar-layout footer.site-footer .gmf-warn {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin: 0 6px 0 0;
  color: var(--am-ft-fg);
  font: 400 12.5px/18.1px var(--am-font);
  text-align: start;
}
/* Right-hand links (27-simplify.js) and, without JS, the badge caption in
   the same uppercase link style. */
html body.gm-sidebar-layout footer.site-footer :is(.am-ft-strip, .gmf-badge) {
  order: 2;
  flex: 0 0 100%;
}
html body.gm-sidebar-layout footer.site-footer .am-ft-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
}
html body.gm-sidebar-layout footer.site-footer :is(.am-ft-strip a, .gmf-badge) {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgb(255 255 255 / .82);
  font: 700 11px/16px var(--am-font);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
html body.gm-sidebar-layout footer.site-footer .gmf-badge i { display: none; }
/* 24px tall hit area (WCAG 2.5.8) on the 16px links; the negative margin
   keeps the strip's layout. */
html body.gm-sidebar-layout footer.site-footer .am-ft-strip a {
  padding-block: 4px;
  margin-block: -4px;
}
html body.gm-sidebar-layout footer.site-footer[data-am-strip] .gmf-badge { display: none; }
html body.gm-sidebar-layout footer.site-footer .am-ft-strip a:hover { color: var(--am-accent); }

/* ---- 4. Link columns ------------------------------------------------------ */
html body.gm-sidebar-layout footer.site-footer .gmf-links {
  grid-area: links;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px 18px;
  justify-content: start;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Column title: the section pill (shared rule in section 5), 14 below. */
html body.gm-sidebar-layout footer.site-footer .gmf-links::before {
  content: "Bilgi & Politikalar";
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0 0 6px;
}
html body.gm-sidebar-layout footer.site-footer .gmf-links a {
  position: relative;
  display: block;
  justify-self: start;
  max-width: 100%;
  min-height: 0;
  margin: -3px 0;   /* 24.75px hit area, layout unchanged (row gap 8) */
  padding: 3px 0;
  border: 0;
  color: var(--am-ft-fg);
  font: 400 12.5px/18.75px var(--am-font);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: none;
}
/* Hover (mouse only): white, 13px in, a 5px green dot fades in. */
html body.gm-sidebar-layout footer.site-footer .gmf-links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--am-accent);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  html body.gm-sidebar-layout footer.site-footer .gmf-links a:hover {
    padding-left: 13px;
    color: var(--am-text);
    text-decoration: none;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-links a:hover::before { opacity: 1; }
}

/* ---- 5. Payment panel ----------------------------------------------------- */
html body.gm-sidebar-layout footer.site-footer .gmf-sec {
  grid-area: pay;
  position: relative;
  min-width: 0;
  margin: 26px 0 0;
  padding: 48px 14px 16px;
  border: 1px solid var(--am-ft-edge);
  border-radius: var(--am-r-12);
  background: var(--am-ft-panel);
}
/* Section pills: the payment h4 (kept as the heading), the link column
   title, the licence pill and the provider title. */
html body.gm-sidebar-layout footer.site-footer .gmf-sec > .gmf-h:not(.am-acc-h),
html body.gm-sidebar-layout footer.site-footer .gmf-links::before,
html body.gm-sidebar-layout footer.site-footer .gmf-copy::before,
html body.gm-sidebar-layout footer.site-footer .gmf-copy::after {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: max-content;
  height: 26px;
  padding: 0 13px;
  border: 1px solid rgb(var(--am-accent-rgb) / .4);
  border-radius: var(--am-r-pill);
  background: var(--am-ft-bg);
  color: var(--am-accent);
  font: 700 11px/16px var(--am-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-wrap: nowrap;
  white-space: nowrap;
}
html body.gm-sidebar-layout footer.site-footer .gmf-sec > .gmf-h:not(.am-acc-h) {
  position: absolute;
  top: 12px;
  left: 14px;
  margin: 0;
}
html body.gm-sidebar-layout footer.site-footer .gmf-pay-marquee {
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Phones: centred chips in balanced rows (inline chips in a block track,
   text-wrap: balance; font-size 0 drops the source whitespace, the chips
   set their own font), so 13 chips never leave a lone chip on the last
   row. From 768: the reference's left-aligned flex wrap, gap 9. */
html body.gm-sidebar-layout footer.site-footer .gmf-pay-track {
  display: block;
  width: auto;
  margin: 0 -4px -8px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
  text-wrap: balance;
}
html body.gm-sidebar-layout footer.site-footer .gmf-logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgb(255 255 255 / .82);
  font: 600 13px/1 var(--am-font);
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: top;
  transition: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-pay-track > .gmf-logo { margin: 0 4px 8px; }
html body.gm-sidebar-layout footer.site-footer .gmf-logo > i {
  color: rgb(255 255 255 / .5);
  font-size: 14px;
}
html body.gm-sidebar-layout footer.site-footer .gmf-logo-img {
  display: block;
  width: auto;
  height: 20px;
  max-width: none;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .5;
  transition: none;
}
/* The Visa mark is a small wordmark inside a 24x24 box: crop to it. */
html body.gm-sidebar-layout footer.site-footer .gmf-logo-img[src*="/pay/visa"] {
  width: 46px;
  height: 20px;
  object-fit: cover;
}
html body.gm-sidebar-layout footer.site-footer .gmf-logo-img[src*="/pay/mastercard"] { height: 24px; }
/* Icon-only marks (alt="") get a visible text token like the others. */
html body.gm-sidebar-layout footer.site-footer .gmf-logo:has(> img[src*="/pay/mastercard"])::after { content: "Mastercard"; }
html body.gm-sidebar-layout footer.site-footer .gmf-logo:has(> img[src*="/pay/tether"])::after { content: "Tether"; }
html body.gm-sidebar-layout footer.site-footer .gmf-logo:has(> img[src*="/pay/bitcoin"])::after { content: "Bitcoin"; }
html body.gm-sidebar-layout footer.site-footer .gmf-logo:has(> img[src*="/pay/paysafe"])::after { content: "Paysafe"; }
html body.gm-sidebar-layout footer.site-footer .gmf-logo:hover {
  border-color: transparent;
  background: none;
  color: var(--am-text);
}
html body.gm-sidebar-layout footer.site-footer .gmf-logo:hover > .gmf-logo-img { opacity: .95; }

/* ---- 6. Licence panel -----------------------------------------------------
   Backdrop: .gmf-shell::after over the pill row and the content row(s),
   z -1 inside the isolated shell, so the tiles and the text paint on top.
   Pill row = 26 (gap) + 1 (border) + 12 + 26 + 14 = 79 = gap + edge + 52. */
html body.gm-sidebar-layout footer.site-footer .gmf-shell::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: licp-start / licx-end;
  z-index: -1;
  align-self: stretch;
  margin: 26px 0 0;
  border: 1px solid var(--am-ft-edge);
  border-radius: var(--am-r-12);
  background: var(--am-ft-panel);
  pointer-events: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-copy::before {
  content: "Lisanslı Operatör";
  grid-area: licp;
  justify-self: start;
  align-self: start;
  margin: 39px 0 10px var(--am-ft-px);
}
/* Seal tiles (inline row styles need !important; the links keep theirs). */
html body.gm-sidebar-layout footer.site-footer .gmf-license-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
}
html body.gm-sidebar-layout footer.site-footer .gmf-license-row:not(.gmf-responsible-row) {
  grid-area: lict;
  align-self: center;
  margin: 0 !important;
}
html body.gm-sidebar-layout footer.site-footer .gmf-license-row a {
  align-items: center !important;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-license-row a:hover {
  border-color: transparent;
  background: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-license-row img {
  display: block;
  height: 40px !important;
  width: auto !important;
  opacity: 1 !important;
  object-fit: contain;
}
/* Reserve the badge widths before the lazy images load (no layout shift);
   VaultMark is cropped to its art (39..681 x 24..157 of 720x180). */
html body.gm-sidebar-layout footer.site-footer .gmf-license-row img[src*="vaultmark"] {
  aspect-ratio: 642 / 133;
  object-fit: cover;
}
html body.gm-sidebar-layout footer.site-footer .gmf-license-row img[src*="MglLogo"] { aspect-ratio: 1 / 1; }
html body.gm-sidebar-layout footer.site-footer .gmf-license-row img[src*="begambleaware"] { aspect-ratio: 152 / 21; }
/* Legal text (M 12.5/21.25; D: rgba .6, not the reference's bluish #9fb0cf). */
html body.gm-sidebar-layout footer.site-footer .gmf-copy > p {
  grid-area: licx;
  align-self: center;
  max-width: none;
  margin: 12px 0 calc(var(--am-ft-pb) + 1px);
  padding: 0;
  color: var(--am-ft-fg);
  font: 400 12.5px/21.25px var(--am-font);
  text-align: start;
}

/* ---- 7. Provider strip ----------------------------------------------------
   Header: generated (.gmf-copy::after), so it stays put while the rail
   scrolls; the section pill (section 5). */
html body.gm-sidebar-layout footer.site-footer .gmf-copy::after {
  content: "Sağlayıcılar";
  grid-area: provh;
  justify-self: start;
  margin: 26px 0 0;
}
/* Default (phones, tablets, reduced motion): a static, swipeable rail,
   full-bleed to the band edges. 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 footer.site-footer .gmf-prov-marquee {
  grid-area: prov;
  min-width: 0;
  margin: 12px calc(var(--am-ft-gx) * -1) 0;
  padding: 0 var(--am-ft-gx) 22px;
  border: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--am-ft-gx);
  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 footer.site-footer .gmf-prov-marquee::-webkit-scrollbar { display: none; }
html body.gm-sidebar-layout footer.site-footer .gmf-prov-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0;
  animation: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-prov-track > [data-am-dup] { display: none; }
/* Tiles: margin, not flex gap, so the -50% marquee loop stays exact. */
html body.gm-sidebar-layout footer.site-footer .gmf-prov {
  --am-ft-svg-py: 21px;
  position: relative;
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 178px;
  height: 90px;
  margin: 0 20px 0 0;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  scroll-snap-align: start;
  transition: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-prov::before {
  content: none;
  display: none;
}
html body.gm-sidebar-layout footer.site-footer .gmf-prov img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 10px 19%;
  border-radius: 0;
  background: none;
  object-fit: contain;
  filter: grayscale(1) brightness(var(--am-ft-prov-lift, 1.8));
  opacity: .8;
  transition: none;
}
/* Dark artwork (EGT badge) vanishes at the shared lift. */
html body.gm-sidebar-layout footer.site-footer .gmf-prov img[src*="/egt."] { --am-ft-prov-lift: 2.6; }
/* KA Gaming: a red die over black type stays a grey smudge at any lift;
   inverted, the type turns white and the die light grey like the other
   marks. Its bottom 4px carry a stray mark of the artwork: clipped. */
html body.gm-sidebar-layout footer.site-footer .gmf-prov img[src*="/kagaming."] {
  clip-path: inset(0 0 14px 0);
  filter: grayscale(1) invert(1) brightness(1.15) contrast(1.1);
}
/* Text-logo SVGs share a 220x48 viewBox with the wordmark left-aligned and
   the right third empty (widest mark ends at 143/220): the content box is
   given the 161:48 crop ratio and the art is cropped from the left. */
html body.gm-sidebar-layout footer.site-footer .gmf-prov img[src*=".svg"]:not([src*="pragmatic"]) {
  padding-block: var(--am-ft-svg-py);
  object-fit: cover;
  object-position: 0 50%;
}
@media (hover: hover) {
  html body.gm-sidebar-layout footer.site-footer .gmf-prov:hover { border-color: transparent; }
  html body.gm-sidebar-layout footer.site-footer .gmf-prov:hover img { opacity: 1; }
}
/* Mouse users get a thin scrollbar on the static rail (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 footer.site-footer .gmf-prov-marquee {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--am-accent-rgb) / .28) transparent;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgb(var(--am-accent-rgb) / .28);
  }
}

/* ---- 8. Bottom line: BeGambleAware under a hairline ------------------- */
html body.gm-sidebar-layout footer.site-footer .gmf-responsible-row {
  grid-area: bottom;
  justify-content: center !important;
  margin: 0 !important;
  padding: 20px 0 0;
  border-top: 1px solid var(--am-ft-edge);
}
html body.gm-sidebar-layout footer.site-footer .gmf-responsible-row a { padding: 10px 16px; }
html body.gm-sidebar-layout footer.site-footer .gmf-responsible-row img {
  height: 20px !important;
  opacity: .9 !important;
}
/* Second 18+ mark (svg link, same href as BeGambleAware): shown once via .gmf-18. */
html body.gm-sidebar-layout footer.site-footer .gmf-responsible-row a:has(> img[src*="18plus"]) { display: none !important; }

/* ---- Small phones -> 576: trust grows to the auto-fit panel, and the
   footer sections flow together on one unified surface (no separate boxes) */
@media (min-width: 576px) {
  html body.gm-sidebar-layout footer.site-footer {
    --am-ft-px: 0px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-trust {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 16px;
    padding: 16px 20px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-trust-item {
    min-height: 34px;
    font-size: 12.5px;
    line-height: 15px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-trust-item i {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-sec {
    margin: 24px 0 0;
    padding: 46px 0 8px;
    border: 0;
    border-top: 1px solid rgb(255 255 255 / .055);
    border-radius: 0;
    background: none;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-sec > .gmf-h:not(.am-acc-h) {
    top: 14px;
    left: 0;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-shell::after {
    margin: 20px 0 0;
    border: 0;
    border-top: 1px solid rgb(255 255 255 / .055);
    border-radius: 0;
    background: none;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-copy::before {
    margin: 34px 0 12px 0;
  }
}

/* ---- Phones and small tablets (<=767): stacked, centred brand ---------- */
@media (max-width: 767.98px) {
  html body.gm-sidebar-layout footer.site-footer {
    --am-ft-px: 15px;            /* 1px border + 14 */
    --am-ft-pb: 16px;
    --am-ft-dot: 18px;
    padding-top: 26px;
  }
}

/* ---- Tablet and up (>=768): brand row, panels 52/20/20, licence row ---- */
@media (min-width: 768px) {
  html body.gm-sidebar-layout footer.site-footer .gmf-shell {
    grid-template-areas:
      "brand  brand  brand  brand"
      "trust  trust  trust  trust"
      "strip  strip  strip  strip"
      "links  links  links  links"
      "pay    pay    pay    pay"
      "licp   licp   licp   licp"
      ".      lict   licx   ."
      "provh  provh  provh  provh"
      "prov   prov   prov   prov"
      "bottom bottom bottom bottom";
  }
  /* Logo left; copyright 18px after it in the same row (same cell). */
  html body.gm-sidebar-layout footer.site-footer .gmf-shell::before { justify-self: start; }
  html body.gm-sidebar-layout footer.site-footer .gmf-cr {
    grid-area: brand;
    align-self: center;
    margin: 0 0 0 192px;
    padding: 0 0 0 18px;
    text-align: start;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-shell > .gmf-social {
    grid-area: brand;
    justify-self: end;
    align-self: center;
    margin: 0;
  }
  /* 12 between pill and sentence, 18 (12 + the sentence's 6) before the
     links; wrapped links start a new line at the left. */
  html body.gm-sidebar-layout footer.site-footer .gmf-bottom {
    gap: 12px;
    padding: 13px 18px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-warn { flex: 1 1 320px; }
  html body.gm-sidebar-layout footer.site-footer :is(.am-ft-strip, .gmf-badge) { flex: 0 0 auto; }
  /* 3 columns on the reference's 4-column pitch (5 from 1200). */
  html body.gm-sidebar-layout footer.site-footer .gmf-links {
    grid-template-columns: repeat(3, calc((100% - 3 * 24px) / 4));
    column-gap: 24px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-sec { padding: 48px 0 10px; }
  html body.gm-sidebar-layout footer.site-footer .gmf-sec > .gmf-h:not(.am-acc-h) { left: 0; }
  html body.gm-sidebar-layout footer.site-footer .gmf-pay-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    text-align: start;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-pay-track > .gmf-logo { margin: 0; }
  html body.gm-sidebar-layout footer.site-footer .gmf-logo {
    height: 42px;
    padding: 0 16px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-copy::before { margin-bottom: 14px; }
  html body.gm-sidebar-layout footer.site-footer .gmf-license-row:not(.gmf-responsible-row) { margin: 0 0 calc(var(--am-ft-pb) + 1px) !important; }
  html body.gm-sidebar-layout footer.site-footer .gmf-copy > p {
    margin: 0 0 calc(var(--am-ft-pb) + 1px);
    padding-left: 18px;
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-prov {
    --am-ft-svg-py: 30px;
    width: 164px;
    height: 106px;
  }
}

/* ---- Desktop (>=992) ------------------------------------------------------ */
@media (min-width: 992px) {
  /* 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) footer.site-footer .gmf-shell {
    max-width: none;
    padding-inline: var(--am-chrome-member-x, 24px);
  }
  /* The rail is no longer full-bleed (the marquee masks both edges). */
  html body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee {
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 1200px) {
  html body.gm-sidebar-layout footer.site-footer .gmf-links {
    grid-template-columns: repeat(3, calc((100% - 4 * 24px) / 5));
  }
}

/* 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. 42 tiles x 184px per copy = ~7.7k px in 200s (~39px/s). */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee {
    overflow: hidden;
    scroll-snap-type: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-prov-track { animation: am-ft-prov 200s linear infinite; }
  html body.gm-sidebar-layout footer.site-footer .gmf-prov-track > [data-am-dup] { display: block; }
  html body.gm-sidebar-layout footer.site-footer .gmf-prov-marquee:is(:hover, :focus-within, [data-am-offscreen]) .gmf-prov-track,
  html body.gm-sidebar-layout footer.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 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 footer.site-footer .gmf-links a {
    transition: color var(--am-dur) var(--am-ease), padding-left var(--am-dur) var(--am-ease);
  }
  html body.gm-sidebar-layout footer.site-footer .gmf-links a::before {
    transition: opacity .2s var(--am-ease);
  }
  html body.gm-sidebar-layout footer.site-footer :is(.gmf-logo, .gmf-license-row a, .gmf-social a, .gmf-prov) {
    transition: background-color var(--am-dur-2) var(--am-ease), border-color var(--am-dur-2) var(--am-ease), color var(--am-dur-2) var(--am-ease);
  }
  html body.gm-sidebar-layout footer.site-footer :is(.gmf-logo-img, .gmf-prov img) {
    transition: opacity var(--am-dur-2) var(--am-ease);
  }
  html body.gm-sidebar-layout footer.site-footer .am-ft-strip a {
    transition: color var(--am-dur) var(--am-ease);
  }
}

/* ---- 55-overlays.css ---- */
/*
 * v3 (2026-10-30, SPEC §7 step 9, §4.20, §4.23, §3.5): "Casibow green"
 * overlays. Auth modal = the reference's split card (art | form column)
 * from 768px and a full-width sheet below it; toasts in the reference's
 * card language (hairline border, lit edge, 2px accent bar) recoloured
 * green (warn = amber, no blue); SeedyChat launcher in brand green; the
 * z-index plan and the FAB (step 4, shell). Colours, radii and shadows
 * from the v3 tokens (00-tokens.css). Breakpoints: 768 (sheet -> card),
 * 992 (no dock; overlay full height). Height band 600 stays (viewport).
 *
 * 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), the auth form error box, SeedyChat
 * launcher branding and the z-index plan. Shared chrome, so these apply
 * on member pages too (colours only there; no layout of theirs changes).
 *
 * z-index stack of the whole layer (low -> high). This is the one place it
 * is documented; the other partials point here.
 *       40  home chip bar while stuck (25-lobby, v2; retired in step 5)
 *       99  desktop sidebar aside#amSidebar (storefront >=992, 11-sidebar).
 *           Under the header on purpose (D, SPEC says 1200): the logo is
 *           the header's own .gm-brand-cluster pinned into the sidebar's
 *           logo row, so it paints inside header.topbar's stacking context
 *           (100) and the aside must stay below that. Nothing else
 *           overlaps x < --am-sb-w at >=992.
 *      100  header.topbar (pinned logo inside it), 101 marquee (10-chrome)
 *      130  bottom bar on member pages (v2 dock, 10-chrome)
 *      500  /slot provider sheet (30-catalog)
 *      880  live-support FAB
 *     1201  rail tooltip (.am-sb-tip, 11-sidebar; >=992 rail only)
 *     1499  drawer tap-catcher (transparent, 11-sidebar)
 *     1500  drawer = aside#amSidebar <=991.98 (11-sidebar)
 *     1600  search dialog #amSearch (25-lobby): opening it closes the drawer
 *     1700  storefront dock (10-chrome): above the drawer and the phone
 *           search sheet (its "Menü" / "Ara" stay usable and lit)
 *     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/dock/drawer/promo, below the
 *           auth modal; steps aside (visibility) while the drawer is open
 *    10000  #authModal: above every page modal (promo was 9999 live). At
 *           <=991 (only when a nav.gm-bottombar exists) the scrim stops at
 *           the dock top, so the dock stays visible (dimmed) below the
 *           sheet as in the reference; the overlay box itself runs over
 *           the dock, so a tap there is a backdrop tap (openAuthModal()
 *           makes the dock inert anyway). On screens <=600px tall the
 *           scrim covers the dock again (the form needs the height).
 *   2147483000  SeedyChat (third party, fixed): hidden while a modal, the
 *           drawer or the search dialog is open
 * Retired: 30/31 catalog sticky pill band (step 6), 1500 v2 #amDrawer.
 * Overlay order in short: drawer 1500 < search 1600 < dock 1700 < 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
 * 991.98 and --am-float-bottom (72px, 10-chrome) from 992 (right 8px):
 * the 56px FAB is centred on the 58px launcher's spot, so the support
 * button does not move when the widget becomes ready, and nothing sits on
 * the dock.
 *
 * 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.
 *  - .is-register on the overlay (activateAuthTab) also slides the tab
 *    thumb; the tabs' .active / aria-selected stay the theme's.
 *  - inputs stay >= 16px (iOS zoom); native validation untouched; the
 *    submit label is rewritten via innerHTML while sending (no ::before /
 *    ::after content on it here; 60-motion owns its hover sweep + press).
 *  - "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).
 *  - the toast tone (data-am-tone on .gm-support-status) is set by
 *    55-overlays.js; without it the toast keeps the neutral green look.
 *
 * 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 eye button sits there); deposit-ocean (guest
 * /hesabim) paints every input/select with (0,2,1) !important (undone at
 * the end of the auth block); the theme's #regGender/#regTc rules are
 * (1,0,0). Every rule here is (0,2,2)+ and every #authModal rule (1,2,2)+.
 *
 * Auth modal look (SPEC §4.23, reference: ref-pages-login/register-*):
 *  - scrim rgb(1,13,8) at .95 (the composite of the reference's three
 *    stacked scrims; SPEC lists only the .82 back layer), no blur. >=768: a 876x682 card (r24), art
 *    column (existing Aquabet art + "Oyuna tek dokunuşla dön." copy) |
 *    436px form column; <=767: the form column alone as a full-width r14
 *    sheet centred above the dock, art hidden.
 *  - form column: green-black gradient, green hairline border (no left
 *    edge on the card), 2px hairline highlight on its top edge, the site
 *    logo centred on top (the header's own file, painted as a background,
 *    no new DOM), close chip at top/right 17.
 *  - tab rail 48px with a sliding solid-green thumb; fields are 48px r10
 *    wells with the D-rule edge (--am-field-line, WCAG 1.4.11) and the
 *    reference's floating label (label inside the field, floats up on
 *    focus/fill and turns green; red "*" on required fields). Needs
 *    :has(); without it labels sit static above the fields. Date and
 *    select fields keep a static label above (as the reference's DOB).
 *    The decorative field icons are hidden (the reference has none).
 *  - submit: 52px r12 green CTA with its lit edge; links green.
 */
html body.gm-sidebar-layout {
  --am-ov-x: 12px;
  --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;
  /* Opaque twin of the field well over the form column (autofill paint). */
  --am-ov-field-solid: #111f18;
  /* Form-column body (reference .modal-body). */
  --am-ov-body: linear-gradient(180deg, #081a10 0%, #030d07 100%);
  --am-ov-edge: rgb(var(--am-accent-deep-rgb) / .5);
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout {
    --am-ov-x: 8px;
    --am-ov-float-b: var(--am-float-bottom);
  }
}

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

/* Overlay (scrim). Phones: the sheet sits between 14px and the dock top. */
html body.gm-sidebar-layout #authModal.auth-modal-overlay {
  z-index: var(--am-ov-z-modal);
  align-items: flex-start;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top, 0px)) 0 17px;
  overflow: hidden;
  overscroll-behavior: contain;
  /* The reference stacks three scrims (.cb-modal-back .82, the modal .34
     and its ::before .6, all rgb(1,13,8)): one layer of the composite. */
  background: rgb(var(--am-bg-rgb) / .95);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color-scheme: dark;
}
/* The dock stays visible below the dialog (reference: the bar is above the
   modal). Only where a dock exists. openAuthModal() makes it inert, so a
   tap on it used to do nothing but pull focus out of the dialog. Now the
   overlay runs to the screen foot and leaves its scrim off the dock band
   (padding keeps the dialog above the dock): the dock shows through,
   dimmed, and a tap there is a backdrop tap (the theme closes the dialog
   and returns focus). */
@media (max-width: 991.98px) {
  html body.gm-sidebar-layout:has(> nav.gm-bottombar) #authModal.auth-modal-overlay {
    bottom: 0;
    padding-bottom: calc(17px + var(--gm-bottom));
    background: linear-gradient(rgb(var(--am-bg-rgb) / .95), rgb(var(--am-bg-rgb) / .95)) 0 0 / 100% calc(100% - var(--gm-bottom)) no-repeat;
  }
  html[data-am-modal] body.gm-sidebar-layout > nav.gm-bottombar .gm-bb {
    opacity: .5;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  html body.gm-sidebar-layout:has(> nav.gm-bottombar) #authModal.auth-modal-overlay {
    padding-bottom: calc(24px + var(--gm-bottom));
  }
}

/* Dialog. Phones: the form column only, full width, r14, centred. */
html body.gm-sidebar-layout #authModal .auth-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
  margin: auto 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--am-r-md);
  background: var(--am-grad-overlay);
  box-shadow: 0 24px 70px -20px rgb(0 0 0 / .7);
  color: var(--am-text);
  font-family: var(--am-font);
  outline: none;
  color-scheme: dark;
}
/* 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 column: hidden on phones (sheet), shown from 768 (below). */
html body.gm-sidebar-layout #authModal .auth-stage {
  position: relative;
  display: none;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: var(--am-r-24) 0 0 var(--am-r-24);
  background-color: var(--am-surface-1);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-shadow: none;
  overflow: hidden;
}
html body.gm-sidebar-layout #authModal .auth-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 54%, rgb(3 14 8 / .34) 80%, rgb(3 14 8 / .78) 100%),
    linear-gradient(180deg, rgb(3 14 8 / .78) 0%, rgb(3 14 8 / .3) 26%, transparent 44%);
  pointer-events: none;
}

/* Form column (reference .modal-content + .modal-body): it is the scroller,
   logo and tab rail scroll with the form as in the reference. */
html body.gm-sidebar-layout #authModal .auth-workspace {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px 16px;
  border: 1px solid var(--am-ov-edge);
  border-radius: var(--am-r-md);
  /* 2px hairline on the top edge (76% wide), then the body gradient. A
     background layer, so it stays on the edge while the column scrolls. */
  background:
    var(--am-hairline-top) 50% 0 / 76% 2px no-repeat border-box,
    var(--am-ov-body);
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / .12) transparent;
}
/* Site logo, centred (the header's own file, cropped to its artwork box:
   500x273 with the mark at 6..494 x 83..191 -> 181x40 at 37%). */
html body.gm-sidebar-layout #authModal .auth-workspace::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  align-self: center;
  width: 181px;
  height: 44px;
  margin: 0 0 24px;
  background: var(--am-site-logo-bg, url("/assets/aqua/aquabet-logo.png?v=20261105")) no-repeat 50% 50% / contain;
  pointer-events: none;
}

/* Close: 36px chip at top/right 17 (44px hit area), level with the logo. */
html body.gm-sidebar-layout #authModal .auth-close-btn {
  position: absolute;
  top: 17px;
  right: 17px;
  left: auto;
  z-index: 4;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--am-r-sm);
  background: rgb(255 255 255 / .05);
  color: var(--am-text-label);
  font-size: 19px;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}
html body.gm-sidebar-layout #authModal .auth-close-btn::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 14px;
}
html body.gm-sidebar-layout #authModal .auth-close-btn i { color: inherit; font-size: inherit; }
html body.gm-sidebar-layout #authModal .auth-close-btn:hover {
  border-color: rgb(255 255 255 / .16);
  background: rgb(255 255 255 / .08);
  color: var(--am-text);
}
html body.gm-sidebar-layout #authModal .auth-close-btn:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 2px;
}

/* Tab rail: 48px, sliding solid-green 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;
  box-sizing: border-box;
  height: 48px;
  margin: 0 0 24px;
  padding: 4px;
  border: 0;
  border-radius: var(--am-r-12);
  background: rgb(255 255 255 / .043);
}
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-9);
  background: var(--am-grad-active-solid);
  box-shadow: 0 6px 16px rgb(var(--am-accent-deep-rgb) / .35), inset 0 1px 0 rgb(255 255 255 / .1);
  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;
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--am-r-9);
  background: transparent;
  color: var(--am-text-label);
  font: 500 14px/17.5px var(--am-font);
  letter-spacing: .3px;
  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: 16px;
  opacity: .55;
}
html body.gm-sidebar-layout #authModal .auth-tab-btn:not(.active):hover {
  background: rgb(255 255 255 / .05);
  color: rgb(255 255 255 / .95);
}
html body.gm-sidebar-layout #authModal .auth-tab-btn.active {
  background: transparent;
  color: var(--am-text);
  font-weight: 600;
  letter-spacing: .01em;
}
html body.gm-sidebar-layout #authModal .auth-tab-btn.active i { opacity: 1; }
html body.gm-sidebar-layout #authModal .auth-tab-btn:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 1px;
}

/* Panels: plain flow (the column scrolls). */
html body.gm-sidebar-layout #authModal .auth-panels {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Panel heading (Aquabet copy, kept): compact, under the tab rail. */
html body.gm-sidebar-layout #authModal .auth-panel-heading { margin: 0 0 20px; }
html body.gm-sidebar-layout #authModal .auth-panel-heading h3 {
  margin: 0 0 4px;
  color: var(--am-text);
  font: 700 18px/1.3 var(--am-font);
  letter-spacing: .01em;
}
html body.gm-sidebar-layout #authModal .auth-panel-heading p {
  margin: 0;
  color: var(--am-text-2);
  font: 400 13px/1.5 var(--am-font);
}

/* Form grid: 16px rhythm (reference group margin). Register: two columns
   for the paired rows and for date | gender, everything else full width. */
html body.gm-sidebar-layout #authModal .auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
}
html body.gm-sidebar-layout #authModal .auth-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 10px;
}
html body.gm-sidebar-layout #authModal #registerFormMain {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
}
html body.gm-sidebar-layout #authModal #registerFormMain > * { grid-column: 1 / -1; }
html body.gm-sidebar-layout #authModal #registerFormMain > .auth-field:has(> :is(#regDob, #regGender)) { grid-column: auto; }
html body.gm-sidebar-layout #authModal .auth-field {
  position: relative;
  min-width: 0;
  margin: 0;
}

/* Static label (date / select, and every field without :has()). */
html body.gm-sidebar-layout #authModal .auth-field > label {
  display: block;
  margin: 0 0 6px;
  padding: 0 0 0 4px;
  color: var(--am-text-label);
  font: 500 13px/15.6px var(--am-font);
  letter-spacing: .3px;
  text-transform: none;
}
html body.gm-sidebar-layout #authModal .auth-field:has(:required) > label::after {
  content: "*";
  margin-left: 4px;
  color: var(--am-danger-text);
}
/* Decorative field icons: the reference fields carry none. */
html body.gm-sidebar-layout #authModal .auth-field > i,
html body.gm-sidebar-layout #authModal .auth-input-wrap > i { display: none; }
html body.gm-sidebar-layout #authModal .auth-input-wrap {
  position: relative;
  display: block;
}

/* Fields: 48px r10 wells, 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: 12px 16px;
  border: 1px solid var(--am-field-line);
  border-radius: var(--am-r-sm);
  background: rgb(255 255 255 / .04);
  color: var(--am-text);
  caret-color: #fff;
  font: 400 16px/20px var(--am-font);
  letter-spacing: 0;
  box-shadow: none;
  outline: none;
  transition: none;
}
html body.gm-sidebar-layout #authModal .auth-field input::placeholder {
  color: rgb(255 255 255 / .4);
  font-size: inherit;
  opacity: 1;
}
/* Date + select (reference DOB selects): band gradient, r6, chevron.
   Both rules are (1,4,3) like the field rule above, so source order wins
   (the select one last: chevron layer + room for it). */
html body.gm-sidebar-layout #authModal .auth-field :is(input[type="date"]:not([type="hidden"]), select:not([type="hidden"])) {
  padding: 0 15px;
  border-radius: var(--am-r-6);
  background: var(--am-grad-band);
  font-weight: 500;
}
html body.gm-sidebar-layout #authModal .auth-field select:not([type="checkbox"]):not([type="hidden"]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background:
    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='none' stroke='%238b9e94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 15px center / 12px 8px,
    var(--am-grad-band);
  cursor: pointer;
}
/* Placeholder option ("Cinsiyet seç") and an empty date read muted. */
html body.gm-sidebar-layout #authModal .auth-field select:not([type="checkbox"]):not([type="hidden"]):invalid { color: var(--am-text-label); }
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-label); }
html body.gm-sidebar-layout #authModal .auth-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .6;
  cursor: pointer;
}
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: var(--am-field-focus-line);
  background-color: var(--am-field-focus-bg);
  box-shadow: var(--am-field-focus-ring);
  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); }
/* Browser autofill: keep the dark well and white text (no UA blue). */
html body.gm-sidebar-layout #authModal .auth-field input:is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: var(--am-text);
  caret-color: #fff;
  box-shadow: inset 0 0 0 1000px var(--am-ov-field-solid);
}
html body.gm-sidebar-layout #authModal .auth-field input:is(:-webkit-autofill, :autofill):focus {
  box-shadow: inset 0 0 0 1000px var(--am-ov-field-solid), var(--am-field-focus-ring);
}

/* Floating label (reference): the label sits inside text fields, floats
   to the top edge (scale .8) on focus / fill and turns green while
   focused. Placeholders show only under a floated label. Text padding
   22/10 (D; the reference's 20/12 lets the floated label touch the
   value's cap height). */
@supports selector(:has(*)) {
  html body.gm-sidebar-layout #authModal .auth-field:not(:has(select, input[type="date"])) > label {
    position: absolute;
    top: 24px;
    left: 16px;
    z-index: 2;
    max-width: calc(100% - 32px);
    margin: 0;
    overflow: hidden;
    color: var(--am-text-label);
    font: 500 15px/18px var(--am-font);
    letter-spacing: .3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateY(-50%);
    transform-origin: 0 0;
    pointer-events: none;
  }
  html body.gm-sidebar-layout #authModal .auth-field:not(:has(select, input[type="date"])):has(:is(input:focus, input:not(:placeholder-shown), input:-webkit-autofill, input:autofill)) > label {
    top: 9px;
    transform: scale(.8);
  }
  html body.gm-sidebar-layout #authModal .auth-field-password:not(:has(select, input[type="date"])) > label { max-width: calc(100% - 72px); }
  html body.gm-sidebar-layout #authModal .auth-field:not(:has(select, input[type="date"])):has(input:focus) > label { color: var(--am-accent); }
  html body.gm-sidebar-layout #authModal .auth-field:not(:has(select, input[type="date"])) :is(input:not([type="checkbox"]):not([type="hidden"])) { padding: 22px 16px 10px; }
  html body.gm-sidebar-layout #authModal .auth-field-password:not(:has(select, input[type="date"])) :is(input:not([type="checkbox"]):not([type="hidden"])) { padding-right: 48px; }
  html body.gm-sidebar-layout #authModal .auth-field:not(:has(select, input[type="date"])) input::placeholder { color: transparent; }
  html body.gm-sidebar-layout #authModal .auth-field:not(:has(select, input[type="date"])) input:focus::placeholder { color: rgb(255 255 255 / .34); }
}

/* Password show/hide (structure + icon swap owned by aqua-home.js): 48px
   square at the right edge, 20px eye. */
html body.gm-sidebar-layout #authModal .auth-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--am-r-sm);
  background: transparent;
  color: var(--am-text-label);
  font-size: 18px;
  transform: none;
  cursor: pointer;
}
html body.gm-sidebar-layout #authModal .auth-password-toggle:hover {
  background: transparent;
  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: -4px;
}

/* 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: 1px solid rgb(var(--am-accent-bright-rgb) / .35);
  border-radius: var(--am-r-sm);
  background: var(--am-grad-2);
  color: var(--am-on-accent);
  font: 600 13px/1 var(--am-font);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
  cursor: pointer;
}
html body.gm-sidebar-layout #authModal .auth-otp-send-btn:hover { border-color: var(--am-accent); }
html body.gm-sidebar-layout #authModal .auth-otp-send-btn:focus-visible {
  outline: 2px solid rgb(var(--am-accent-rgb) / .85);
  outline-offset: 2px;
}
html body.gm-sidebar-layout #authModal .auth-otp-help {
  margin: 6px 0 0;
  padding-left: 4px;
  color: var(--am-text-label);
  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: -4px 0 0;
  color: var(--am-text-label);
  font: 500 13px/1.4 var(--am-font);
  letter-spacing: .3px;
}
html body.gm-sidebar-layout #authModal .auth-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--am-text-label);
  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: rgb(255 255 255 / .04);
  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-hover); }
html body.gm-sidebar-layout #authModal .auth-check input[type="checkbox"]:checked {
  border-color: var(--am-line-cta);
  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: 500;
  text-decoration: none;
  text-underline-offset: 3px;
}
html body.gm-sidebar-layout #authModal .auth-forgot {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
}
html body.gm-sidebar-layout #authModal :is(.auth-forgot, .auth-check a):hover {
  color: var(--am-accent-bright);
  text-decoration: underline;
}

/* Error box (display toggled inline by _footer.php): the error toast skin
   (red hairline, tint, 2px bar). */
html body.gm-sidebar-layout #authModal .auth-form-error {
  position: relative;
  margin: 0;
  padding: 11px 14px 11px 16px;
  overflow: hidden;
  border: 1px solid rgb(255 83 101 / .42);
  border-radius: var(--am-r-sm);
  background:
    radial-gradient(130% 190% at 100% 0%, rgb(255 83 101 / .14) 0%, transparent 55%),
    rgb(255 83 101 / .08);
  color: #fecaca;
  font: 500 13.5px/1.45 var(--am-font);
}
html body.gm-sidebar-layout #authModal .auth-form-error::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 0 3px 3px 0;
  background: var(--am-danger);
  box-shadow: 0 0 10px rgb(255 83 101 / .5);
}

/* 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;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  min-height: 52px;
  margin: 4px 0 0;
  padding: 14px 24px;
  border: 1px solid var(--am-line-cta);
  border-radius: var(--am-r-12);
  background: var(--am-grad);
  color: var(--am-on-accent);
  font: 700 15px/18.75px var(--am-font);
  letter-spacing: .02em;
  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 {
  border-color: var(--am-accent);
  background: var(--am-grad-hover);
  box-shadow: var(--am-cta-shadow-hover);
  filter: brightness(1.08);
}
html body.gm-sidebar-layout #authModal .auth-submit-btn:disabled {
  opacity: .55;
  filter: none;
  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 (and
   :focus of every input) under .gm-account-page with (0,2,1) !important,
   including the background shorthand; 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: rgb(255 255 255 / .04) !important;
  color: var(--am-text) !important;
}
html body.gm-sidebar-layout.gm-account-page #authModal .auth-field input[type="date"] {
  background-image: var(--am-grad-band) !important;
}
html body.gm-sidebar-layout.gm-account-page #authModal .auth-field select {
  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='none' stroke='%238b9e94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"),
    var(--am-grad-band) !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center, 0 0 !important;
  background-size: 12px 8px, auto !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: var(--am-field-focus-line) !important;
  background-color: var(--am-field-focus-bg) !important;
  box-shadow: var(--am-field-focus-ring) !important;
  outline: none !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-label) !important; }
html body.gm-sidebar-layout.gm-account-page #authModal .auth-check input[type="checkbox"]:focus {
  border-color: var(--am-field-line) !important;
  box-shadow: none !important;
  outline: none !important;
}
html body.gm-sidebar-layout.gm-account-page #authModal .auth-check input[type="checkbox"]:checked:focus { border-color: var(--am-line-cta) !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: split card (>=768) ------------------------------------ */
@media (min-width: 768px) {
  html body.gm-sidebar-layout #authModal.auth-modal-overlay {
    align-items: center;
    padding: 24px 16px;
  }
  html body.gm-sidebar-layout #authModal .auth-modal {
    grid-template-columns: minmax(0, 1fr) min(436px, 100%);
    width: min(876px, 100%);
    height: min(682px, 100%);
    max-height: 100%;
    margin: auto;
    border-radius: var(--am-r-24);
    background: transparent;
  }
  html body.gm-sidebar-layout #authModal .auth-stage {
    display: block;
    grid-row: 1;
    grid-column: 1;
  }
  html body.gm-sidebar-layout #authModal .auth-stage-copy {
    display: block;
    position: absolute;
    top: 36px;
    right: 32px;
    left: 32px;
    z-index: 1;
    margin: 0;
    padding: 0;
  }
  html body.gm-sidebar-layout #authModal .auth-stage-copy h2 {
    margin: 0 0 8px;
    color: var(--am-text);
    font: 700 22px/1.2 var(--am-font);
    letter-spacing: .01em;
    text-shadow: 0 4px 14px rgb(0 0 0 / .45);
  }
  html body.gm-sidebar-layout #authModal .auth-stage-copy p {
    max-width: 330px;
    margin: 0;
    color: var(--am-text-2);
    font: 400 14px/1.6 var(--am-font);
    text-shadow: 0 2px 10px rgb(0 0 0 / .5);
  }
  html body.gm-sidebar-layout #authModal .auth-workspace {
    grid-column: 2;
    padding: 28px;
    border-left: 0;
    border-radius: 0 var(--am-r-24) var(--am-r-24) 0;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
  }
  html body.gm-sidebar-layout #authModal .auth-workspace::before { margin-bottom: 32px; }
}
/* Short screens with the dock (landscape phones, <=600px tall): the dialog
   takes the full height (over the dock) and drops the logo row, so the
   form is not left a sliver; the tab rail clears the close chip. */
@media (max-width: 991.98px) and (max-height: 600px) {
  html body.gm-sidebar-layout:has(> nav.gm-bottombar) #authModal.auth-modal-overlay { bottom: 0; padding-bottom: 10px; background: rgb(var(--am-bg-rgb) / .95); }
  html body.gm-sidebar-layout #authModal.auth-modal-overlay { padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
  html body.gm-sidebar-layout #authModal .auth-workspace { padding-top: 17px; }
  html body.gm-sidebar-layout #authModal .auth-workspace::before { display: none; }
  html body.gm-sidebar-layout #authModal .auth-tabs { margin: 0 46px 18px 0; }
  html body.gm-sidebar-layout #authModal .auth-close-btn { top: 24px; }
}
/* Landscape phones / short tablets with the dock: the art would leave the
   form a sliver, so the card drops it and becomes the form column alone. */
@media (min-width: 768px) and (max-width: 991.98px) and (max-height: 600px) {
  html body.gm-sidebar-layout #authModal .auth-modal {
    grid-template-columns: minmax(0, 1fr);
    width: min(480px, 100%);
    height: auto;
  }
  html body.gm-sidebar-layout #authModal .auth-stage { display: none; }
  html body.gm-sidebar-layout #authModal .auth-workspace {
    grid-column: 1;
    border-left: 1px solid var(--am-ov-edge);
    border-radius: var(--am-r-24);
  }
}

/* ==== Live support FAB (Premium emerald glassmorphic pill) ============== */
html:root body.gm-sidebar-layout .gm-live-support-fab {
  position: fixed;
  top: auto;
  right: 12px;
  bottom: calc(var(--am-ov-float-b) + 2px);
  left: auto;
  z-index: 2147482999;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  box-sizing: border-box;
  width: auto;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 5px 15px 5px 6px;
  border: 1px solid rgb(53 245 155 / .42);
  border-radius: 999px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(53 245 155 / .22) 0%, transparent 58%),
    linear-gradient(135deg, rgb(8 38 24 / .96) 0%, rgb(4 19 12 / .98) 100%);
  color: #f3fbf7;
  box-shadow:
    0 12px 28px rgb(0 0 0 / .58),
    0 0 22px rgb(23 217 119 / .22),
    inset 0 1px 0 rgb(255 255 255 / .14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--am-font);
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html:root body.gm-sidebar-layout .gm-live-support-fab-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #7affc1 0%, #1ce07d 45%, #068f48 100%);
  color: #032010;
  box-shadow:
    0 4px 12px rgb(28 224 125 / .42),
    inset 0 1px 0 rgb(255 255 255 / .45);
  font-size: 16px;
  line-height: 1;
}
html:root body.gm-sidebar-layout .gm-live-support-fab-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid #062316;
  border-radius: 50%;
  background: #39ff9c;
  box-shadow: 0 0 8px #39ff9c;
}
html:root body.gm-sidebar-layout .gm-live-support-fab-copy {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  text-align: left;
}
html:root body.gm-sidebar-layout .gm-live-support-fab-copy small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #4df5a1 !important;
  font: 700 9.5px/1 var(--am-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
html:root body.gm-sidebar-layout .gm-live-support-fab-copy small::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4df5a1;
  box-shadow: 0 0 6px #4df5a1;
}
html:root body.gm-sidebar-layout .gm-live-support-fab-copy strong {
  margin: 0;
  color: #f5fcf8 !important;
  font: 700 13.5px/1.15 var(--am-font);
  letter-spacing: -.01em;
}
html:root body.gm-sidebar-layout .gm-live-support-fab:focus-visible {
  outline: none;
  border-color: #6bffb8;
  box-shadow:
    0 0 0 3px rgb(53 245 155 / .38),
    0 14px 30px rgb(0 0 0 / .6);
}
@media (hover: hover) {
  html:root body.gm-sidebar-layout .gm-live-support-fab:hover {
    border-color: rgb(95 255 178 / .72);
    background:
      radial-gradient(120% 140% at 0% 0%, rgb(53 245 155 / .32) 0%, transparent 62%),
      linear-gradient(135deg, rgb(10 46 29 / .98) 0%, rgb(5 24 15 / .99) 100%);
    box-shadow:
      0 16px 34px rgb(0 0 0 / .64),
      0 0 28px rgb(28 224 125 / .36),
      inset 0 1px 0 rgb(255 255 255 / .22);
  }
}
@media (min-width: 992px) {
  html:root body.gm-sidebar-layout .gm-live-support-fab {
    right: 20px;
    bottom: 22px;
    height: 54px;
    min-height: 54px;
    gap: 11px;
    padding: 6px 19px 6px 7px;
  }
  html:root body.gm-sidebar-layout .gm-live-support-fab-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  html:root body.gm-sidebar-layout .gm-live-support-fab-copy small {
    font-size: 10px;
  }
  html:root body.gm-sidebar-layout .gm-live-support-fab-copy strong {
    font-size: 14.5px;
  }
}

/* ==== Support status toast (seedychat-bridge.js) ========================
   The reference toast card (1px hairline, r12, tinted gradient, lit edge,
   2px accent bar on the left, 28px round close), recoloured: green by
   default, a spinning notch while "connecting" (tone busy) and amber when
   the chat could not open (tone warn); tones come from 55-overlays.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 {
  --am-ov-tone: var(--am-accent-rgb);
  --am-ov-tone-hi: var(--am-accent-bright);
  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(380px, calc(100vw - 2 * var(--am-ov-x)));
  max-width: none;
  min-height: 56px;
  margin: 0;
  padding: 12px 46px 12px 16px;
  overflow: hidden;
  border: 1px solid rgb(var(--am-ov-tone) / .35);
  border-radius: var(--am-r-12);
  background:
    linear-gradient(125deg, rgb(255 255 255 / .05) 0%, rgb(255 255 255 / .01) 35%, transparent 65%),
    radial-gradient(120% 180% at 100% 0%, rgb(var(--am-ov-tone) / .14) 0%, transparent 55%),
    linear-gradient(125deg, rgb(7 26 16 / .98) 0%, rgb(3 10 6 / .98) 100%);
  color: var(--am-text);
  box-shadow: 0 22px 46px rgb(0 0 0 / .55), 0 8px 20px rgb(var(--am-ov-tone) / .16), inset 0 1px 0 rgb(255 255 255 / .06);
  font: 500 13.5px/1.45 var(--am-font);
  text-align: start;
}
html body.gm-sidebar-layout .gm-support-status[data-am-tone="warn"] {
  --am-ov-tone: 239 176 37;
  --am-ov-tone-hi: #f5c451;
}
/* Icon tile: headset (default), notch (busy), triangle (warn). */
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;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(var(--am-ov-tone) / .3);
  border-radius: var(--am-r-sm);
  background: rgb(var(--am-ov-tone) / .12);
  color: var(--am-ov-tone-hi);
  font: 900 15px/1 "Font Awesome 6 Free";
}
html body.gm-sidebar-layout .gm-support-status[data-am-tone="busy"]::before { content: "\f1ce"; }
html body.gm-sidebar-layout .gm-support-status[data-am-tone="warn"]::before { content: "\f071"; }
/* 2px accent bar on the left edge. */
html body.gm-sidebar-layout .gm-support-status::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 2px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--am-ov-tone-hi), rgb(var(--am-ov-tone) / .9));
  box-shadow: 0 0 12px rgb(var(--am-ov-tone) / .45);
  pointer-events: none;
}
html body.gm-sidebar-layout .gm-support-status p {
  grid-row: 1;
  grid-column: 2;
  margin: 0;
  color: var(--am-text);
  font: 500 13.5px/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: -6px 0 -12px;
  color: var(--am-accent);
  font: 600 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 {
  color: var(--am-accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Close: 28px round chip at top/right 8, 44px hit area. */
html body.gm-sidebar-layout .gm-support-status button {
  position: absolute;
  top: 8px;
  right: 8px;
  float: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(255 255 255 / .72);
  font: 400 22px/1 var(--am-font);
  cursor: pointer;
}
html body.gm-sidebar-layout .gm-support-status button::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
html body.gm-sidebar-layout .gm-support-status button:hover {
  background: rgb(255 255 255 / .14);
  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: 992px) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body.gm-sidebar-layout .gm-support-status {
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
}
/* 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; }
/* Same for the fallback FAB (z 880): the drawer edge cut it into a partial
   circle. Visibility only, so the bridge's display contract stays intact. */
html.am-drawer-open body.gm-sidebar-layout .gm-live-support-fab { 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-991 uses --am-ov-float-b, >=992
   the FAB's spot minus 1px (the 58px launcher centred where the 56px FAB
   was). Brand green (#037035, the CTA's mid stop) with a white icon at
   every width, like the FAB and the reference's support button. Solid
   colour 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). */
html body.gm-sidebar-layout [data-destek-widget] {
  --color: var(--am-accent-2);
  --fg: var(--am-on-accent);
  --radius: 16px;
  --x: var(--am-ov-x);
  --y: var(--am-ov-float-b);
}
@media (min-width: 992px) {
  html body.gm-sidebar-layout [data-destek-widget] {
    --x: calc(var(--am-ov-x) - 1px);
    --y: calc(var(--am-ov-float-b) - 1px);
  }
}
/* 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 :is([data-destek-widget], .gm-live-support-fab, .gm-support-status),
html body.gm-sidebar-layout > #authModal.active ~ :is([data-destek-widget], .gm-live-support-fab, .gm-support-status),
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. Reference timings: .16s
   cubic-bezier(.2,.7,.3,1) on tabs, labels and the close chip, .3s on
   field border/ring; .18s scrim fade. */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout #authModal .auth-close-btn,
  html body.gm-sidebar-layout #authModal .auth-tab-btn {
    transition: color .16s cubic-bezier(.2, .7, .3, 1), background-color .16s cubic-bezier(.2, .7, .3, 1), border-color .16s cubic-bezier(.2, .7, .3, 1);
  }
  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-password-toggle,
  html body.gm-sidebar-layout #authModal :is(.auth-forgot, .auth-check a) {
    transition: color .16s cubic-bezier(.2, .7, .3, 1);
  }
  html body.gm-sidebar-layout #authModal .auth-field :is(input:not([type="checkbox"]):not([type="hidden"]), select) {
    transition: border-color .3s, box-shadow .3s, background-color .3s;
  }
  html body.gm-sidebar-layout #authModal .auth-field > label {
    transition: top .16s cubic-bezier(.2, .7, .3, 1), transform .16s cubic-bezier(.2, .7, .3, 1), color .16s cubic-bezier(.2, .7, .3, 1);
  }
  html body.gm-sidebar-layout #authModal .auth-submit-btn {
    transition: filter .16s cubic-bezier(.2, .7, .3, 1), box-shadow .16s cubic-bezier(.2, .7, .3, 1), border-color .16s cubic-bezier(.2, .7, .3, 1), transform .16s cubic-bezier(.2, .7, .3, 1);
  }
  html body.gm-sidebar-layout #authModal .auth-submit-btn:not(:disabled):hover { transform: translateY(-1px); }
  html body.gm-sidebar-layout #authModal.active { animation: am-ov-fade .18s ease-out both; }
  html body.gm-sidebar-layout #authModal.active > .auth-modal { animation: am-ov-sheet .32s 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; }
  html body.gm-sidebar-layout .gm-support-status[data-am-tone="busy"]::before { animation: am-ov-spin .9s linear infinite; }
  html body.gm-sidebar-layout .gm-support-status button,
  html body.gm-sidebar-layout .gm-support-status a {
    transition: color .18s, background-color .18s;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout #authModal.active > .auth-modal { animation-name: am-ov-pop; animation-duration: .26s; }
}
@media (prefers-reduced-motion: no-preference) {
  html:root body.gm-sidebar-layout .gm-live-support-fab {
    transition: box-shadow var(--am-dur) var(--am-ease), transform var(--am-dur) var(--am-ease), border-color var(--am-dur) var(--am-ease);
  }
  html:root body.gm-sidebar-layout .gm-live-support-fab-icon {
    transition: transform var(--am-dur) var(--am-ease);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:root body.gm-sidebar-layout .gm-live-support-fab:hover {
    transform: translateY(-2px);
  }
  html:root body.gm-sidebar-layout .gm-live-support-fab:hover .gm-live-support-fab-icon {
    transform: scale(1.06);
  }
}
@keyframes am-ov-fade { from { opacity: 0; } }
@keyframes am-ov-sheet { from { opacity: .4; transform: translateY(24px); } }
@keyframes am-ov-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes am-ov-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes am-ov-spin { to { rotate: 360deg; } }

/* ---- 60-motion.css ---- */
/*
 * v3 (2026-10-30, SPEC §2.6, §4.5, §4.7, §7 step 10): motion for the
 * "Casibow green" storefront. Pairs with 60-motion.js.
 *
 *   0. Tokens: the global motion tokens (--am-ease cubic-bezier(.2,.9,.2,1),
 *      --am-ease-out cubic-bezier(.22,1,.36,1), --am-dur/-2/-3 .18/.22/.3s)
 *      live in 00-tokens.css. v2 redefined --am-ease-out here on the same
 *      selector, which silently re-timed every consumer that loads earlier
 *      (the FAB glyph morph in 55-overlays); v3 never redefines a global
 *      token. This file's own timings use local names (--am-rv-*,
 *      --am-press-*, --am-sheen-*).
 *   1. Scroll reveal (kept from v2).
 *   2. Category tile shine: off-screen pause of 20-home's band (§4.7).
 *   3. Kayıt Ol sheen (new, §4.5).
 *   4. Press feedback (kept from v2, v3 targets).
 *   5. Easing where an interactive hover had none (kept from v2).
 *   Retired: the v2 hover light sweep (a skewed band across game cards and
 *   primary CTAs on hover). The reference has no hover overlay on cards
 *   (§4.10: "no overlay"; §4.13: lift + border + glow + img zoom) and its
 *   CTA hover is border + shadow + lift, so the sweep is gone; the two
 *   ambient lights below replace it as the layer's "light" motif.
 *
 * Reduced motion: 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 reveal never marks
 * anything, and the shine and sheen layers are unpainted and out of flow
 * (absolute + visibility:hidden as well as display:none, since the theme
 * forces a display on header button spans), as they are under
 * forced-colors: active. The theme's own guard
 * (aqua-theme.css: durations forced to .01ms !important, one iteration)
 * stays as the second fallback for the theme and every partial. Only
 * opacity and transforms are animated (the individual translate/scale
 * properties on hosts, transform on the layers this file owns): no filter,
 * no layout property, nothing on html or body. The two infinite animations
 * (shine, sheen) are composited transforms on 2-4 small boxes, and are
 * paused while their host is off-screen (60-motion.js).
 *
 * 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, --am-rv-ease = the reference's own
 *    entrance curve cubic-bezier(.22,.61,.36,1)) after a stagger step
 *    [data-am-rv-d="1..6"] (40ms each, capped at 240ms). Both attributes
 *    are removed when the batch ends. Nothing that is in the viewport at
 *    load is ever marked, so there is no first-paint flash, and only
 *    opacity and translate change, so a reveal never shifts layout (no
 *    CLS). 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. 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). While either attribute is
 *    present the element's own transitions are off (transition: none
 *    !important): the catalog cards transition opacity, and a 0 -> 1
 *    opacity transition next to am-rv made Chrome refuse to composite
 *    am-rv (v2 measurement: +24 style recalcs per 6-card batch). 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. Category tile shine (§4.7): the band itself is 20-home's
 *    (span.am-cat-fx::after, built by 20-home.js on every v3 tile: a white
 *    band 45% x 180%, rotated -20deg, 5.5s loop, tiles .5s apart). Here
 *    only its off-screen pause: 60-motion.js sets [data-am-light-off] on
 *    the strip while it is out of view and the band holds still. (The
 *    earlier fallback layer span.am-cat-shine was never built, since every
 *    tile carries .am-cat-fx; it is retired.)
 *
 * 3. Kayıt Ol sheen (§4.5, measured on the reference header register
 *    button): a band 50% x 250% of the button (top -50%, rotated -20deg,
 *    alpha 0 / .05 / .30 / .45 / .30 / .05 / 0) is invisible off the left
 *    edge for 55% of a 5s ease-in-out loop, fades in by 65%, crosses to
 *    the right by 90% (alpha .15) and fades out by 100%. SPEC §4.5 guessed
 *    "about every 4s (I)"; the reference measures 5s, used here. The
 *    reference clips the band with overflow:hidden on the button; ours
 *    cannot, because the button's ::after is the transparent 44px touch
 *    hit area (10-chrome.css), which a clip would cut. So the band is the
 *    ::before of span.am-sheen, a clip layer 60-motion.js appends to the
 *    guest header .btn-register on storefront pages (aria-hidden,
 *    pointer-events none, padding box, radius inherited). It paints over
 *    the label like the reference (peak alpha .45). Member pages (colours
 *    only, §8 Q7) and the member header "Para Yatır" get no sheen.
 *
 * 4. Press feedback, touch and mouse
 *    :active plays am-press-in (scale 1 -> --am-press-scale, 120ms,
 *    --am-ease). 60-motion.js marks elements whose press really started
 *    ([data-am-pressed], from the animationstart event), so the release
 *    am-press-out (back to 1, 160ms) plays after a press and never on
 *    load. With JS off the press still works and the release snaps back.
 *    The scale is the individual `scale` property, so it composes with
 *    the partials' own transforms (the dock centre's translateY(-14px),
 *    the 05-base / 55-overlays translateY(1px) CTA nudge) instead of
 *    replacing them. Scale .97 everywhere (= §4.12 chips), .98 on the auth
 *    modal submit (§4.23). While a card, tile or promotion card is
 *    pressed its hover/focus lift (`transform`, owned by 20-home,
 *    30-catalog, 40-content) is dropped (transform:none !important, only
 *    while :active), so the lift and the scale never compound; a press on
 *    the favourite heart does not press its card (:has(.gm-fav:active)),
 *    and a card held during a home rail mouse drag stays pressed until
 *    the button is released (20-home swallows that click).
 *    Not pressed here (they own an :active translate or scale): sidebar
 *    items and cards (11-sidebar, translateY(1px)), the home chip row,
 *    rail buttons and search links (25-lobby, scale .95 / .985).
 *    Targets: storefront primary buttons, the auth modal submit, header
 *    auth buttons and burger, load-more, the lobby filter controls,
 *    provider chips (/slot, /livecasino), the titled-panel CTA, legal TOC
 *    links, bottom-dock items, home game cards and category tiles,
 *    catalog cards, recent strip cards and promotion cards.
 *
 * 5. Easing where it was missing
 *    v2 forced-:hover audit: three hovers changed colour with no
 *    transition (the /slot "Canlı Casino" view-all link, the live provider
 *    toggle #lcFilterToggle, the recent strip's "Temizle") plus the legal
 *    body link underline. They get the layer's colour transition
 *    (var(--am-dur) var(--am-ease)) at zero specificity (:where()), so a
 *    transition a partial adds later wins.
 *    v3 re-audit (2026-10-30; forced :hover on every link and button of
 *    /, /slot, /livecasino, /promosyonlar, /vip, /canli-destek,
 *    /hakkimizda, 404 at 1440, reveals settled first): no content hover
 *    snaps. Two chrome snaps remain, owned by the shell: the header Kayıt
 *    Ol border and -1px lift (a later 10-chrome rule narrows its
 *    transition to background + box-shadow) and the sidebar item's rest
 *    gradient -> flat hover fill (background-image is discrete).
 *
 * JS contracts (unchanged): the reveal and the press never write inline
 * styles, never move, replace or rebind a node, and keep the cards' own
 * attributes (aqua-favs, handlePlay, gm_slot_scroll_v1). The clip layers
 * are the only nodes added (one empty aria-hidden span per tile and one in
 * the guest Kayıt Ol button); the auth handler (.btn-open-auth click +
 * data-auth-tab) is untouched.
 */

/* ---------- 0. Tokens (local; the global ones live in 00-tokens) ---------- */
html body.gm-sidebar-layout {
  --am-rv-dur: .52s;   /* soft exponential entrance */
  --am-rv-ease: cubic-bezier(.16, 1, .3, 1);
  --am-press-scale: .975;
  --am-press-in: .15s;
  --am-press-out: .24s;
  --am-sheen-dur: 5s;
}

/* =====================================================================
   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-rv-ease) 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 10px; }
}

/* =====================================================================
   2. Category tile shine (home, §4.7): off-screen pause of 20-home's band
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html body.gm-sidebar-layout main.gm-wire:has(> .gm-catstrip) > .gm-catstrip[data-am-light-off] > a .am-cat-fx::after {
    animation-play-state: paused;
  }
}

/* =====================================================================
   3. Kayıt Ol sheen (storefront header, guest, §4.5)
   ===================================================================== */
/* At rest the layer is out of flow and hidden. display:none alone is not
   enough: the theme forces `.auth-links-guest .auth-btn span
   { display: inline !important }` at <=980 (aqua-member-chrome.css) and
   <=600 (aqua-theme.css), which would make an in-flow span a flex item of
   the button and add a 5px gap under reduced motion. */
html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-register > span.am-sheen {
  position: absolute;
  inset: 0;
  display: none;
  visibility: hidden;
  pointer-events: none;
}
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-register > span.am-sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    visibility: visible;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: none;
    contain: strict;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-register > span.am-sheen::before {
    content: "";
    position: absolute;
    top: -50%;
    left: 0;
    width: 50%;
    height: 250%;
    background: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .05) 30%, rgb(255 255 255 / .3) 48%, rgb(255 255 255 / .45) 50%, rgb(255 255 255 / .3) 52%, rgb(255 255 255 / .05) 70%, rgb(255 255 255 / 0) 100%);
    opacity: 0;
    transform: translateX(-200%) rotate(-20deg);
    animation: am-sheen var(--am-sheen-dur) ease-in-out infinite;
  }
  html body.gm-sidebar-layout:has(> :is(main.page-shell, div.legal-page, main.gm-404)) header.topbar .auth-links.auth-links-guest .auth-btn.btn-register[data-am-light-off] > span.am-sheen::before {
    animation-play-state: paused;
  }
}
@keyframes am-sheen {
  0%, 55% { transform: translateX(-200%) rotate(-20deg); opacity: 0; }
  65% { opacity: 1; }
  90% { transform: translateX(200%) rotate(-20deg); opacity: .15; }
  100% { transform: translateX(200%) rotate(-20deg); opacity: 0; }
}

/* =====================================================================
   4. 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 :is(#lcFilterToggle, #slotProviderPickerBtn):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;
  }
  /* §4.23: the modal submit presses to .98. */
  html body.gm-sidebar-layout #authModal .auth-submit-btn {
    --am-press-scale: .98;
  }

  /* 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. !important because the lift rules belong to partials that
     are being reworked (20-home, 30-catalog, 40-content) and their weight
     is not fixed; it applies only while :active. A card whose heart is
     being pressed keeps its lift. */
  html body.gm-sidebar-layout :is(main.gm-wire .gm-row > .gm-game, #slotGrid > .slot-card, #lcGrid > .lc-card):active:not(:has(.gm-fav:active)),
  html body.gm-sidebar-layout main.gm-wire > .gm-catstrip > a:active,
  html body.gm-sidebar-layout main.page-shell.promotions-page-only .promotion-card:active {
    transform: none !important;
  }
}
@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; }
}

/* =====================================================================
   5. 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"): the only transition left is
     the legacy sheet's `.legal-section a { transition: border-color .15s }`
     (0,1,1), so the underline snapped. (0,2,2): above that legacy rule,
     below 40-content's own selectors, 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);
  }
}