/* ==========================================================================
   BÖLÜM 1: morsite-final.css
   ========================================================================== */

/* ==========================================================================
   MORSITE FINAL PANEL OVERRIDES
   Bu dosya yalnız build girdisidir. Panelde morsite-all.css yüklenir.
   ========================================================================== */

@property --morsite-sidebar-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes morsite-sidebar-border-run {
  to {
    --morsite-sidebar-border-angle: 360deg;
  }
}

@media screen and (min-width: 992px) {
  html body #app#app
    #general-container#general-container
    #responsive-menu#responsive-menu.responsive-menu {
    box-sizing: border-box !important;
    position: fixed !important;
    inset: 28px auto 28px 0 !important;
    top: 28px !important;
    right: auto !important;
    bottom: 28px !important;
    left: 0 !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 12% 5%, rgba(194, 27, 238, .18), transparent 18rem),
      linear-gradient(180deg, #150750, #08052F) !important;
    border-top: 1px solid rgba(129, 35, 236, .78) !important;
    border-right: 1px solid rgba(46, 194, 245, .72) !important;
    border-bottom: 1px solid rgba(129, 35, 236, .78) !important;
    border-left: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow:
      12px 0 34px rgba(108, 45, 224, .22),
      0 0 22px rgba(46, 194, 245, .10) !important;
  }

  html body #app#app
    #general-container#general-container
    #responsive-menu#responsive-menu.responsive-menu
    > .sidebar-content {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    border-radius: inherit !important;
  }

  html body #app#app
    #general-container#general-container
    #responsive-menu#responsive-menu.responsive-menu
    > .sidebar-content
    > .menu-head {
    flex: 0 0 auto !important;
  }

  html body #app#app
    #general-container#general-container
    #responsive-menu#responsive-menu.responsive-menu
    > .sidebar-content
    > .sidebar-wrapper {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(129, 35, 236, .64) transparent !important;
  }

  html body #app#app
    #general-container#general-container
    #responsive-menu#responsive-menu.responsive-menu::after,
  html body #app#app
    #general-container#general-container
    #responsive-menu#responsive-menu.responsive-menu:not(.active-menu)::after {
    content: "" !important;
    box-sizing: border-box !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 100 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
      conic-gradient(
        from var(--morsite-sidebar-border-angle),
        transparent 0deg 238deg,
        rgba(129, 35, 236, .12) 258deg,
        #C21BEE 282deg,
        #F4F3FA 300deg,
        #2EC2F5 320deg,
        transparent 346deg 360deg
      ) !important;
    border: 0 !important;
    border-radius: inherit !important;
    clip-path: polygon(2px 0, 100% 0, 100% 100%, 2px 100%) !important;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    filter:
      drop-shadow(0 0 5px rgba(46, 194, 245, .90))
      drop-shadow(0 0 11px rgba(194, 27, 238, .58)) !important;
    animation: morsite-sidebar-border-run 5.4s linear infinite !important;
    transform: none !important;
  }
}

@media screen and (max-width: 991.98px) {
  html body #app#app
    #general-container#general-container
    #responsive-menu#responsive-menu.responsive-menu {
    inset: 0 auto 0 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}


/* ==========================================================================
   BÖLÜM 2: morsite.css
   ========================================================================== */

:root {
  /* =========================================================
       THEME CONTRACT (GLOBAL)
       Change values in /assets/css/themes/<domain>.css
       ========================================================= */

  /* Logo */
  --header-footer-logo: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/GafgafdgAVTEYWBVAE/statics/oPp7SCHsO2gH9lvZZD8THj5HSeQhEr5njd1Yml7e.png");
  --homepage-entrance-bg-image: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/GafgafdgAVTEYWBVAE/statics/8Sgic9okElGc1waYvwCgjeTDDBu5UG5LYTLCy43T.png");

  /* Brand */
  --brand-primary: #286EEA;
  --brand-primary-rgb: 37, 99, 235;
  --brand-primary-contrast: #F4F3FA;
  --brand-secondary: #3494EB;
  --brand-secondary-rgb: 56, 189, 248;

  --accent: var(--brand-primary);
  --accent-rgb: var(--brand-primary-rgb);
  --active: var(--accent);

  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --accent-soft-2: rgba(var(--accent-rgb), 0.08);
  --accent-soft-3: rgba(var(--accent-rgb), 0.20);
  --accent-soft2: var(--accent-soft-2);
  --accent-soft3: var(--accent-soft-3);
  --accent-border: rgba(var(--accent-rgb), 0.34);
  --accent-border-strong: rgba(var(--accent-rgb), 0.52);
  --accent-glow: rgba(var(--accent-rgb), 0.28);

  /* Surfaces */
  --surface-bg: #030817;
  --surface-bg-rgb: 3, 8, 23;
  --surface-1: #071020;
  --surface-2: #0b1628;
  --surface-3: #101d31;
  --surface-4: #17263c;

  --surface-card: var(--surface-2);
  --surface-modal: var(--surface-1);
  --surface-elevated: var(--surface-2);

  --surface-border: rgba(143, 170, 211, 0.22);
  --surface-border-soft: rgba(143, 170, 211, 0.13);
  --surface-border-strong: rgba(56, 189, 248, 0.48);

  /* Legacy aliases */
  --legacy-bg-1: var(--surface-1);
  --legacy-bg-2: var(--surface-2);
  --legacy-bg-3: var(--surface-3);
  --legacy-text-muted: #a8b8cf;

  /* Text */
  --text-primary: #F4F3FA;
  --text-secondary: rgba(255, 255, 255, 0.86);
  --text-muted: rgba(203, 215, 235, 0.66);
  --text-soft: rgba(203, 215, 235, 0.46);
  --text-disabled: rgba(203, 215, 235, 0.30);
  --text-on-accent: var(--brand-primary-contrast);

  /* States */
  --success: #37ee91;
  --success-rgb: 55, 238, 145;
  --warning: #fb7185;
  --warning-rgb: 251, 113, 133;
  --danger: #ff4d5e;
  --danger-rgb: 255, 77, 94;
  --info: #54a8ff;
  --info-rgb: 84, 168, 255;

  --state-success-soft: rgba(var(--success-rgb), 0.16);
  --state-warning-soft: rgba(var(--warning-rgb), 0.18);
  --state-danger-soft: rgba(var(--danger-rgb), 0.15);
  --state-info-soft: rgba(var(--info-rgb), 0.16);

  /* Radius scale — slightly larger = more “product / enterprise” */
  --radius-2xs: 4px;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-3xl: 26px;
  --radius-pill: 999px;

  /* Border scale */
  --border-thin: 1px;
  --border-medium: 2px;

  /* Shadow scale */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.34);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.4);
  --shadow-accent-sm: 0 6px 16px rgba(var(--accent-rgb), 0.2);
  --shadow-accent-md: 0 10px 24px rgba(var(--accent-rgb), 0.3);
  --shadow-accent-lg: 0 14px 32px rgba(var(--accent-rgb), 0.36);

  /* Gradients */
  --gradient-primary: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.72));
  --gradient-primary-horizontal: linear-gradient(90deg, rgba(var(--accent-rgb), 0.96), rgba(var(--accent-rgb), 0.74));
  --gradient-overlay: linear-gradient(180deg, rgba(17, 17, 17, 0.92), rgba(8, 8, 8, 0.95));
  --gradient-surface: linear-gradient(165deg, var(--surface-3) 0%, var(--surface-2) 45%, var(--surface-1) 100%);
  --gradient-chip: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --gradient-withdraw: linear-gradient(to right, #a070ff, #d951d9, #fa2ea9, #ff1a76, #ff3344);

  /* Legacy variables currently consumed by existing CSS */
  --panel-top: #030D44;
  --panel-bottom: var(--surface-bg);

  --panel-bg: var(--surface-1);
  --panel-bg2: var(--surface-bg);
  --modalbg: linear-gradient(180deg, var(--panel-bg), var(--panel-bg2));
  --lineartooltipbg: linear-gradient(180deg, #030D44 0%, var(--surface-bg) 100%);
  --linearbg: radial-gradient(900px 220px at 15% 0%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, #010627 0%, var(--surface-bg) 100%);
  --linearbgreversed: radial-gradient(900px 220px at 85% 0%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, #010627 0%, var(--surface-bg) 100%);

  /* Progress / indicators */
  --progressbg: linear-gradient(to right,
      rgba(var(--accent-rgb), 0.72) 0%,
      rgba(var(--accent-rgb), 0.82) 35%,
      rgba(var(--accent-rgb), 0.98) 70%,
      rgba(var(--accent-rgb), 1) 100%);

  /* Inputs */
  --input-bg: var(--linearbg);
  --input-bg-solid: var(--legacy-bg-3);
  --input-border: rgba(255, 255, 255, 0.10);
  --input-border-focus: rgba(var(--accent-rgb), 0.55);
  --input-placeholder: rgba(255, 255, 255, 0.42);

  /* Buttons */
  --btn-primary-bg: var(--accent);
  --btn-primary-bg-hover: color-mix(in srgb, var(--accent) 84%, #F4F3FA 16%);
  --btn-primary-bg-active: color-mix(in srgb, var(--accent) 88%, #000000 12%);
  --btn-primary-color: var(--brand-primary-contrast);
  --btn-primary-radius: var(--radius-sm);
  --btn-primary-shadow: var(--shadow-accent-sm);
  --btn-primary-shadow-active: var(--shadow-accent-md);
  --btn-primary-disabled-opacity: 0.55;

  --btn-secondary-bg: var(--legacy-bg-3);
  --btn-secondary-bg-hover: color-mix(in srgb, var(--legacy-bg-3) 88%, #F4F3FA 12%);
  --btn-secondary-color: var(--text-primary);
  --btn-secondary-border: var(--surface-border-soft);

  --btn-ghost-bg: rgba(255, 255, 255, 0.06);
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.11);
  --btn-ghost-color: var(--text-primary);

  /* Header */
  --header-register-bg: var(--btn-primary-bg);
  --header-register-color: var(--btn-primary-color);
  --wallet-btn-bg-start: color-mix(in srgb, var(--accent) 82%, #010627 18%);
  --wallet-btn-bg-end: var(--accent);
  --wallet-btn-gradient: linear-gradient(90deg, var(--wallet-btn-bg-start) 0%, var(--wallet-btn-bg-end) 100%);
  --wallet-btn-color: var(--brand-primary-contrast);

  /* Tabs / chips / pills */
  --tab-active-bg: var(--accent);
  --tab-active-color: var(--brand-primary-contrast);
  --tab-active-border: var(--accent);
  --tab-inactive-bg: transparent;
  --tab-inactive-color: var(--text-muted);
  --tab-inactive-border: var(--surface-border-soft);

  --chip-bg: rgba(255, 255, 255, 0.05);
  --chip-border: rgba(255, 255, 255, 0.10);
  --chip-color: var(--text-muted);
  --chip-active-bg: rgba(var(--accent-rgb), 0.16);
  --chip-active-border: rgba(var(--accent-rgb), 0.48);
  --chip-active-color: var(--text-primary);

  /* Cards */
  --card-bg: var(--gradient-surface);
  --card-border: var(--surface-border-soft);
  --card-radius: var(--radius-lg);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-md);

  --modal-bg: var(--modalbg);
  --modal-border: var(--surface-border-soft);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-xl);

  /* Wallet */
  --wallet-deposit-bg: var(--accent);
  --wallet-withdraw-gradient: var(--gradient-withdraw);
  --wallet-footer-btn-bg: var(--legacy-bg-3);
  --wallet-footer-btn-color: var(--text-primary);

  /* Game opener */
  --game-opener-border: var(--accent);
  --game-opener-overlay: linear-gradient(0deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.72) 100%);
  --game-play-btn-bg: var(--accent);
  --game-play-btn-color: var(--brand-primary-contrast);
  --game-demo-btn-bg: var(--legacy-text-muted);
  --game-demo-btn-color: #F4F3FA;

  /* Slider controls */
  --slider-nav-bg: rgba(17, 17, 17, 0.88);
  --slider-nav-bg-hover: rgba(var(--accent-rgb), 0.26);
  --slider-nav-border: rgba(255, 255, 255, 0.12);
  --slider-nav-color: #F4F3FA;
  --slider-pagination-dot: rgba(255, 255, 255, 0.28);
  --slider-pagination-dot-active: var(--accent);

  /* Typography tokens */
  --font-family-regular: "Rubik", sans-serif;
  --font-family-medium: "Rubik Medium", sans-serif;
  --font-family-semibold: "Rubik SemiBold", sans-serif;
  --font-family-bold: "Rubik Bold", sans-serif;

  /* Top search (global) */
  --top-search-form-border: 1px solid rgba(125, 211, 252, 0.24);
  --top-search-form-radius: 14px;
  --top-search-form-margin-top: 40px;
  --top-search-form-margin-bottom: 40px;
  --top-search-form-padding-x: 12px;
  --top-search-form-height: 48px;
  --top-search-form-line-height: 62px;
  --top-search-form-font-size: 0px;
  --top-search-form-bg:
    linear-gradient(115deg, rgba(19, 52, 99, 0.96), rgba(12, 31, 67, 0.98));
  --top-search-form-font-family: var(--font-family-medium);

  --top-search-icon-color: #2EC2F5;
  --top-search-input-color: var(--text-primary);
  --top-search-input-placeholder: rgba(219, 234, 254, 0.58);
  --top-search-focus-radius: 16px;
  --top-search-focus-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.12),
    0 12px 32px rgba(2, 8, 23, 0.30),
    0 0 22px rgba(56, 189, 248, 0.12);

  --top-search-layer-radius: 18px;
  --top-search-layer-border: 1px solid rgba(255, 255, 255, 0.08);
  --top-search-layer-border-bottom: 10px solid rgba(255, 255, 255, 0.06);
  --top-search-layer-bg:
    linear-gradient(150deg, rgba(17, 47, 91, 0.98), rgba(8, 23, 53, 0.985) 62%, rgba(35, 25, 76, 0.97));
  --top-search-layer-shadow:
    0 22px 50px rgba(2, 8, 23, 0.38),
    0 0 22px rgba(34, 211, 238, 0.10);
  --top-search-layer-blur: 18px;
  --top-search-recent-wrap-radius: 10px;
  --top-search-recent-wrap-border: 1px solid rgba(255, 255, 255, 0.10);
  --top-search-recent-wrap-bg: linear-gradient(180deg, #2a2a2a, #010627);
  --top-search-recent-wrap-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --top-search-recent-chip-radius: 999px;
  --top-search-recent-chip-border: 1px solid rgba(var(--brand-secondary-rgb), 0.5);
  --top-search-recent-chip-bg: linear-gradient(135deg,
      rgba(var(--brand-secondary-rgb), 0.26),
      rgba(var(--brand-secondary-rgb), 0.14));
  --top-search-recent-chip-color: #F4F3FA;
  --top-search-recent-chip-font-family: var(--font-family-semibold);
  --top-search-recent-chip-shadow: 0 6px 14px rgba(var(--brand-secondary-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);

  /* Lowbar (mobile dock) */
  --lb-bg: rgba(17, 17, 17, 0.92);
  --lb-stroke: rgba(255, 255, 255, 0.10);
  --lb-stroke-2: rgba(255, 255, 255, 0.05);
  --lb-text: rgba(255, 255, 255, 0.9);
  --lb-muted: rgba(255, 255, 255, 0.55);
  --lb-active: var(--accent);
  --lb-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  --lb-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.26);
  --lb-search-bg: #010627;
  --lb-radius: 22px;
  --lb-radius-sm: 20px;
  --lb-surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  --lb-wallet-ring-color: rgba(var(--accent-rgb), 0.6);
  --lb-wallet-ring-size: 0.2rem;
  --lb-wallet-glow: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0) 65%);
  --lb-wallet-glow-radius: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0) 62%);
  --lb-chat-bg: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.65));
  --lb-chat-border: rgba(var(--accent-rgb), 0.5);
  --lb-chat-color: #000000;
  --lb-chat-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.28), 0 8px 20px rgba(0, 0, 0, 0.35);
  --lb-chat-shadow-hover: 0 14px 28px rgba(var(--accent-rgb), 0.36), 0 10px 24px rgba(0, 0, 0, 0.38);

  /* Sidebar top tabs (casino/sportsbook) */
  /* Set CDN SVG URL here per-domain:
       --sidebar-tab-casino-bg-image: url("https://cdn.example.com/sidebar-casino-bg.svg");
       --sidebar-tab-sportsbook-bg-image: url("https://cdn.example.com/sidebar-sportsbook-bg.svg");
    */
  --sidebar-tab-casino-bg-image: linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.9), rgba(var(--brand-primary-rgb), 0.72));
  --sidebar-tab-sportsbook-bg-image: linear-gradient(180deg, #030D44 0%, #010627 100%);

  /* Bonus request modal */
  --bonus-request-tab-bg: var(--tab-inactive-bg);
  --bonus-request-tab-border: var(--tab-inactive-border);
  --bonus-request-tab-text: var(--tab-inactive-color);
  --bonus-request-tab-active-bg: var(--tab-active-bg);
  --bonus-request-tab-active-border: var(--tab-active-border);
  --bonus-request-tab-active-text: var(--tab-active-color);
  --bonus-request-card-bg: var(--card-bg);
  --bonus-request-card-border: var(--card-border);
  --bonus-request-card-shadow: var(--card-shadow);
  --bonus-request-info-bg: rgba(var(--accent-rgb), 0.16);
  --bonus-request-info-border: rgba(var(--accent-rgb), 0.45);
  --bonus-request-info-color: var(--text-primary);
  --bonus-request-button-bg: var(--btn-primary-bg);
  --bonus-request-button-text: var(--btn-primary-color);
  --bonus-request-empty-bg: rgba(255, 255, 255, 0.03);
  --bonus-request-empty-border: var(--surface-border-soft);
  --bonus-request-empty-text: var(--text-muted);

  /* VIP club page */
  --vip-accent: var(--accent);
  --vip-accent-rgb: var(--accent-rgb);
  --vip-bg0: var(--surface-bg);
  --vip-bg1: var(--surface-2);
  --vip-card-bg: rgba(255, 255, 255, 0.05);
  --vip-card-border: rgba(255, 255, 255, 0.10);
  --vip-card-border-soft: rgba(255, 255, 255, 0.06);
  --vip-card-hover-bg: rgba(255, 255, 255, 0.08);
  --vip-text: var(--text-secondary);
  --vip-muted: var(--text-soft);
  --vip-chip-bg: rgba(255, 255, 255, 0.05);
  --vip-chip-border: rgba(255, 255, 255, 0.10);
  --vip-chip-active-bg: rgba(var(--vip-accent-rgb), 0.16);
  --vip-chip-active-border: rgba(var(--vip-accent-rgb), 0.30);
  --vip-tag-bg: rgba(0, 0, 0, 0.22);
  --vip-gift-tag-bg: rgba(var(--vip-accent-rgb), 0.10);
  --vip-gift-tag-border: rgba(var(--vip-accent-rgb), 0.18);
  --vip-button-border: rgba(var(--vip-accent-rgb), 0.28);
  --vip-button-bg: linear-gradient(180deg, rgba(var(--vip-accent-rgb), 0.22), rgba(var(--vip-accent-rgb), 0.10));
  --vip-button-border-hover: rgba(var(--vip-accent-rgb), 0.42);
  --vip-link: rgba(var(--vip-accent-rgb), 0.95);
  --vip-link-border: rgba(var(--vip-accent-rgb), 0.35);
  --vip-link-border-hover: rgba(var(--vip-accent-rgb), 0.65);

  /* Misc */
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
  --divider: var(--surface-border-soft);

  /* Notification dropdown */
  --notif-badge-bg: var(--accent);
  --notif-badge-border: rgba(255, 255, 255, 0.85);
  --notif-panel-bg: var(--lineartooltipbg);
  --notif-panel-border: rgba(255, 255, 255, 0.08);
  --notif-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --notif-empty-bg: rgba(100, 116, 139, 0.14);
  --notif-empty-border: rgba(255, 255, 255, 0.06);
  --notif-item-bg: rgba(255, 255, 255, 0.04);
  --notif-item-bg-hover: rgba(255, 255, 255, 0.08);
  --notif-item-border: rgba(255, 255, 255, 0.06);
  --notif-item-border-hover: rgba(255, 255, 255, 0.10);
  --notif-track-thumb: rgba(255, 255, 255, 0.12);

  /* Wallet settings modal */
  --wgs-text: rgba(255, 255, 255, 0.92);
  --wgs-muted: rgba(255, 255, 255, 0.52);
  --wgs-panel-bg: rgba(10, 10, 10, 0.88);
  --wgs-panel-border: rgba(255, 255, 255, 0.06);
  --wgs-block-bg: rgba(255, 255, 255, 0.03);
  --wgs-block-bg-hover: rgba(255, 255, 255, 0.05);
  --wgs-block-border: rgba(255, 255, 255, 0.06);
  --wgs-switch-on-bg: rgba(var(--accent-rgb), 0.14);
  --wgs-switch-on-border: rgba(var(--accent-rgb), 0.28);
  --wgs-switch-knob: rgba(255, 255, 255, 0.35);
  --wgs-switch-knob-on: rgba(var(--accent-rgb), 0.9);
  --wgs-dot-bg: rgba(var(--accent-rgb), 0.1);
  --wgs-dot-border: rgba(var(--accent-rgb), 0.15);
  --wgs-dot-ring: rgba(var(--accent-rgb), 0.25);
  --wgs-save-border: rgba(var(--success-rgb), 0.22);
  --wgs-save-bg: linear-gradient(90deg, rgba(14, 58, 45, 0.92), rgba(var(--success-rgb), 0.45));

  /* Game page + empty states */
  --game-theater-overlay: rgba(0, 0, 0, 0.65);
  --game-overlay-soft: rgba(0, 0, 0, 0.55);
  --game-fs-close-bg: var(--legacy-bg-3);
  --game-switch-bg: var(--legacy-bg-3);
  --game-switch-knob: var(--legacy-bg-2);
  --game-switch-active-gradient: linear-gradient(to right, #00de99, #17de87, #2edd73, #41dc5d, #54db43);
  --game-bets-empty-bg: linear-gradient(145deg, rgba(34, 34, 34, 0.95), rgba(17, 17, 17, 0.92));
  --game-bets-empty-border: rgba(255, 255, 255, 0.10);
  --game-bets-empty-icon-bg: rgba(255, 255, 255, 0.05);
  --game-bets-empty-icon-border: rgba(255, 255, 255, 0.10);
  --game-bets-empty-icon-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --game-bets-empty-title: var(--text-primary);
  --game-bets-empty-text: var(--text-muted);
  --game-bets-empty-button-bg: rgba(var(--accent-rgb), 0.18);
  --game-bets-empty-button-border: rgba(var(--accent-rgb), 0.35);
  --game-bets-empty-button-hover-bg: rgba(var(--accent-rgb), 0.28);
  --game-bets-empty-button-hover-border: rgba(var(--accent-rgb), 0.50);

  /* Favorites empty card */
  --favorites-empty-bg: linear-gradient(140deg, rgba(26, 26, 26, 0.96), rgba(17, 17, 17, 0.96));
  --favorites-empty-border: rgba(255, 255, 255, 0.10);
  --favorites-empty-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.35);
  --favorites-empty-icon-bg: rgba(255, 255, 255, 0.05);
  --favorites-empty-icon-border: rgba(255, 255, 255, 0.10);
  --favorites-empty-icon-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
  --favorites-empty-title: var(--text-primary);
  --favorites-empty-text: var(--text-muted);
  --favorites-empty-btn-bg: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, #000 20%) 100%);
  --favorites-empty-btn-border: rgba(var(--accent-rgb), 0.50);
  --favorites-empty-btn-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.28);

  /* Race / raffle info blocks */
  --event-trophy-bg: rgba(184, 134, 11, 0.10);
  --event-trophy-border: rgba(212, 175, 55, 0.35);
  --event-card-border: rgba(255, 255, 255, 0.08);
  --event-divider: rgba(255, 255, 255, 0.10);
  --event-title: var(--text-primary);
  --event-label: var(--text-secondary);
  --event-muted: var(--text-muted);
  --event-stat-label: var(--text-soft);
  --event-cta-bg: var(--gradient-primary);
  --event-cta-color: var(--brand-primary-contrast);
  --event-progress-track: rgba(0, 0, 0, 0.28);

  /* Withdraw progress */
  --withdraw-progress-bg: rgba(10, 10, 10, 0.85);
  --withdraw-progress-border: rgba(255, 255, 255, 0.10);
  --withdraw-progress-track: rgba(0, 0, 0, 0.25);
  --withdraw-progress-fill: linear-gradient(90deg, #24c8ff 0%, #39de8e 100%);
  --withdraw-progress-stat-bg: rgba(255, 255, 255, 0.04);
  --withdraw-progress-label: #8D8A9E;
  --withdraw-progress-value: var(--text-primary);
  --withdraw-progress-note: #8D8A9E;

  /* Challenges page */
  --challenge-filter-bg: rgba(10, 10, 10, 0.65);
  --challenge-filter-border: rgba(255, 255, 255, 0.10);
  --challenge-filter-text: #8D8A9E;
  --challenge-filter-text-hover: var(--text-primary);
  --challenge-filter-active-bg: var(--linearbg);
  --challenge-filter-active-text: var(--text-primary);
  --challenge-filter-active-ring: rgba(var(--accent-rgb), 0.36);

  --challenge-card-radius: var(--radius-sm);
  --challenge-card-bg: radial-gradient(120% 80% at 8% -10%, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0) 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0) 64%),
    linear-gradient(160deg, var(--surface-3) 0%, var(--surface-3) 42%, var(--surface-2) 100%);
  --challenge-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --challenge-card-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 38%),
    repeating-linear-gradient(-35deg, rgba(255, 255, 255, 0.02) 0 2px, rgba(255, 255, 255, 0) 2px 14px);
  --challenge-card-overlay-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -42px 60px rgba(6, 6, 6, 0.45);
  --challenge-image-fallback: var(--surface-3);

  --challenge-title: var(--text-primary);
  --challenge-target: var(--text-secondary);
  --challenge-label: var(--text-muted);
  --challenge-value: var(--text-primary);
  --challenge-author: var(--text-primary);
  --challenge-claimed-divider: rgba(255, 255, 255, 0.10);

  --challenge-completed-ring: rgba(var(--success-rgb), 0.24);
  --challenge-completed-bg: linear-gradient(180deg, rgba(var(--success-rgb), 0.16) 0%, rgba(var(--success-rgb), 0.1) 100%);
  --challenge-control-label: var(--text-muted);
  --challenge-control-btn-bg: rgba(17, 17, 17, 0.92);
  --challenge-control-btn-border: rgba(255, 255, 255, 0.10);
  --challenge-control-btn-text: var(--text-primary);
  --challenge-control-btn-icon: var(--text-secondary);
  --challenge-control-badge-bg: rgba(var(--accent-rgb), 0.18);
  --challenge-control-badge-border: rgba(var(--accent-rgb), 0.35);
  --challenge-control-badge-text: color-mix(in srgb, var(--accent) 70%, #fff 30%);
  --challenge-dropdown-bg: #030D44;
  --challenge-dropdown-text: #f1f5f9;
  --challenge-dropdown-border: rgba(255, 255, 255, 0.10);
  --challenge-dropdown-divider: rgba(255, 255, 255, 0.08);
  --challenge-dropdown-item-hover: rgba(255, 255, 255, 0.06);
  --challenge-dropdown-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  --challenge-dropdown-active: var(--accent);
  --challenge-provider-pill-bg: linear-gradient(to right,
      color-mix(in srgb, var(--accent) 90%, #000 10%) 0%,
      var(--accent) 100%);
  --challenge-provider-pill-text: var(--brand-primary-contrast);

  /* Tournament buttons */
  --tournament-button-bg: linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 86%, #F4F3FA 14%) 0%,
      color-mix(in srgb, var(--accent) 84%, #000000 16%) 100%);
  --tournament-button-border: rgba(var(--accent-rgb), 0.54);
  --tournament-button-color: var(--brand-primary-contrast);
  --tournament-button-radius: var(--radius-2xs);
  --tournament-button-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.34);
  --tournament-button-hover-filter: brightness(1.05);

  /* General header tabs */
  --general-tabs-text: #8D8A9E;
  --general-tabs-active-text: var(--accent);
  --general-tabs-active-font: "Rubik Bold";

  /* Sidebar */
  --sb-surface-1: #0c0c0c;
  --sb-surface-2: var(--surface-bg);
  --sb-card-soft: rgba(255, 255, 255, 0.045);
  --sb-btn-active-bg: linear-gradient(90deg, rgba(var(--accent-rgb), 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
  --sb-btn-active-border: rgba(var(--accent-rgb), 0.32);
  --sb-btn-active-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sb-section-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  --sb-accordion-bg: #010627;
  --sb-accordion-border: rgba(255, 255, 255, 0.07);
  --sb-accordion-shadow: 0 4px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sb-collapsed-bg: radial-gradient(380px 220px at 0 0, rgba(var(--accent-rgb), 0.1), transparent 62%),
    linear-gradient(180deg, #0c0c0c 0%, #080808 100%);
  --sb-collapsed-border: 1px solid rgba(255, 255, 255, 0.08);
  --sb-collapsed-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), inset -1px 0 rgba(255, 255, 255, 0.035);
  --sb-collapsed-btn-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --sb-collapsed-btn-border: 1px solid rgba(255, 255, 255, 0.08);
  --sidebar-width: 224px;
  --sidebar-rail-width: 78px;
  --sidebar-z: 2000;
  --sidebar-ease: cubic-bezier(.2, .9, .2, 1);

  --sidebar-bg-open: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-bg) 100%);
  --sidebar-bg-open-accent: rgba(var(--accent-rgb), .14);
  --sidebar-bg-open-secondary: rgba(var(--warning-rgb), .10);

  --sidebar-bg-collapsed: linear-gradient(180deg, var(--surface-1) 0%, var(--g-bg-deep, #020611) 100%);
  --sidebar-bg-collapsed-accent: rgba(var(--accent-rgb), 0.18);

  --sidebar-bg-active: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-1) 100%);
  --sidebar-bg-active-accent: rgba(var(--accent-rgb), 0.2);
  --sidebar-bg-active-secondary: rgba(var(--success-rgb), 0.12);

  --sidebar-stroke: rgba(143, 170, 211, .14);
  --sidebar-stroke-strong: rgba(143, 170, 211, .24);
  --sidebar-stroke-accent: rgba(var(--accent-rgb), .56);
  --sidebar-text: rgba(255, 255, 255, 0.92);
  --sidebar-text-muted: rgba(203, 215, 235, 0.66);
  --sidebar-text-soft: #a8b8cf;

  --sidebar-chip: rgba(255, 255, 255, .05);
  --sidebar-chip-2: rgba(255, 255, 255, .03);
  --sidebar-chip-stroke: rgba(255, 255, 255, .08);

  --sidebar-shadow: 0 20px 48px rgba(0, 0, 0, .38);
  --sidebar-shadow-soft: 0 10px 24px rgba(0, 0, 0, .24);
  --sidebar-active-glow: 0 0 0 1px rgba(var(--accent-rgb), .14);

  --sidebar-overlay: rgba(0, 0, 0, .55);

  --sidebar-search-bg: radial-gradient(420px 120px at 15% 0%, rgba(var(--accent-rgb), .08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  --sidebar-search-text: var(--sidebar-text-muted);

  --sidebar-promo-bg: rgba(255, 255, 255, .03);
  --sidebar-promo-border: rgba(255, 255, 255, .07);
  --sidebar-promo-item-bg: rgba(0, 0, 0, .18);
  --sidebar-promo-item-bg-hover: rgba(0, 0, 0, .26);
  --sidebar-promo-dot: var(--accent);
  --sidebar-promo-dot-glow: rgba(var(--accent-rgb), .15);
  --sidebar-hero-glow: linear-gradient(90deg, var(--surface-bg) 0%, color-mix(in srgb, var(--accent) 32%, var(--surface-bg) 68%) 100%);

  --sidebar-top-btn-border: rgba(255, 255, 255, 0.08);
  --sidebar-top-btn-bg: linear-gradient(95deg, rgba(34, 34, 34, 0.65) 0%, rgba(17, 17, 17, 0.85) 100%);
  --sidebar-top-btn-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --sidebar-top-btn-title: rgba(255, 255, 255, 0.92);
  --sidebar-top-btn-arrow: rgba(255, 255, 255, 0.5);

  --sidebar-top-btn-hover-border: rgba(var(--accent-rgb), 0.34);
  --sidebar-top-btn-hover-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --sidebar-top-btn-active-border: rgba(var(--accent-rgb), 0.38);
  --sidebar-top-btn-active-bg: linear-gradient(95deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.1) 100%);
  --sidebar-top-btn-active-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   CRITICAL HEADER LOGO + SIDEBAR WHEEL
   Custom CSS sınırında kesilmemesi için dosyanın en başındadır.
   ========================================================================== */
#header .logo img,
#header .logo svg,
#header .responsive-logo img,
#header .responsive-logo svg {
  transform-origin: center center !important;
  will-change: scale, filter !important;
  animation: gb-critical-logo-beat 4.6s ease-in-out infinite !important;
}

@keyframes gb-critical-logo-beat {
  0%, 6%, 34%, 100% {
    scale: 1;
    filter: brightness(1) drop-shadow(0 0 0 rgba(56, 189, 248, 0));
  }
  11% {
    scale: 1.035;
    filter: brightness(1.05) drop-shadow(0 0 6px rgba(56, 189, 248, 0.22));
  }
  17% {
    scale: 0.992;
    filter: brightness(1);
  }
  23% {
    scale: 1.024;
    filter: brightness(1.035) drop-shadow(0 0 5px rgba(167, 139, 250, 0.17));
  }
  29% {
    scale: 1;
    filter: brightness(1);
  }
}

#responsive-menu.responsive-menu .gb-wheel-menu-icon {
  display: inline-grid !important;
  position: relative !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 38px !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.18), transparent 37%),
    linear-gradient(145deg, rgba(6, 182, 212, 0.22), rgba(79, 70, 229, 0.25) 58%, rgba(236, 72, 153, 0.17)) !important;
  border: 1px solid rgba(165, 243, 252, 0.55) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 12px rgba(34, 211, 238, 0.23),
    0 0 20px rgba(139, 92, 246, 0.11) !important;
  overflow: visible !important;
}

#responsive-menu.responsive-menu
  .gb-wheel-menu-icon::before,
#responsive-menu.responsive-menu
  .gb-wheel-menu-icon::after {
  content: none !important;
  display: none !important;
}

#responsive-menu.responsive-menu .gb-menu-wheel,
#responsive-menu.responsive-menu .gb-menu-wheel > svg {
  display: block !important;
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  overflow: visible !important;
}

#responsive-menu.responsive-menu .gb-menu-wheel__rotor {
  transform-box: fill-box !important;
  transform-origin: center !important;
  will-change: transform !important;
  animation: gb-critical-wheel-spin 5s cubic-bezier(.22, .64, .24, 1) infinite !important;
}

#responsive-menu.responsive-menu .gb-menu-wheel__pointer {
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 6px rgba(56, 189, 248, 0.62)) !important;
}

@keyframes gb-critical-wheel-spin {
  0%, 14% { transform: rotate(0deg); }
  46% { transform: rotate(760deg); }
  61% { transform: rotate(980deg); }
  72% { transform: rotate(1060deg); }
  78%, 100% { transform: rotate(1080deg); }
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .gb-wheel-menu-icon {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex-basis: 44px !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   CRITICAL GAME PICKER - BANNER ALTI RASTGELE OYUN SEÇİCİ
   ========================================================================== */
#gb-game-picker {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 238px minmax(0, 1fr) !important;
  width: min(100% - 28px, 1240px) !important;
  min-height: 196px !important;
  margin: 14px auto 20px !important;
  gap: 14px !important;
  color: #F4F3FA !important;
}

.gb-picker-control {
  box-sizing: border-box !important;
  display: flex !important;
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  padding: 18px !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(190px 150px at 15% 15%, rgba(34, 211, 238, 0.21), transparent 68%),
    radial-gradient(160px 120px at 100% 100%, rgba(139, 92, 246, 0.18), transparent 70%),
    linear-gradient(145deg, rgba(14, 71, 119, 0.98), rgba(12, 37, 81, 0.99)) !important;
  border: 1px solid rgba(125, 211, 252, 0.34) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 14px 30px rgba(2, 8, 23, 0.24) !important;
}

.gb-picker-control::after {
  content: "?" !important;
  position: absolute !important;
  z-index: -1 !important;
  right: -8px !important;
  top: -28px !important;
  color: rgba(165, 243, 252, 0.08) !important;
  font-size: 132px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: rotate(10deg) !important;
}

.gb-picker-control__eyebrow {
  margin-bottom: 7px !important;
  color: #a5f3fc !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
}

.gb-picker-control strong {
  color: #F4F3FA !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

.gb-picker-control small {
  min-height: 31px !important;
  margin-top: 8px !important;
  color: rgba(219, 234, 254, 0.68) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.gb-picker-spin {
  display: inline-flex !important;
  width: max-content !important;
  min-height: 37px !important;
  margin-top: 12px !important;
  padding: 0 15px !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #F4F3FA !important;
  background: linear-gradient(110deg, #2EC2F5, #286EEA 57%, #6C2DE0) !important;
  border: 1px solid rgba(165, 243, 252, 0.76) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 8px 18px rgba(2, 8, 23, 0.24),
    0 0 14px rgba(34, 211, 238, 0.14) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.gb-picker-spin svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.gb-picker-spin:hover:not(:disabled) {
  filter: brightness(1.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 18px rgba(34, 211, 238, 0.34),
    0 0 28px rgba(139, 92, 246, 0.16) !important;
  transform: translateY(-1px) !important;
}

.gb-picker-spin:disabled {
  cursor: wait !important;
  opacity: 0.72 !important;
}

.gb-game-picker.is-spinning .gb-picker-spin svg,
#gb-game-picker.is-spinning .gb-picker-spin svg {
  animation: gb-picker-button-spin 0.65s linear infinite !important;
}

.gb-picker-reels {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  min-width: 0 !important;
  padding: 12px !important;
  gap: 10px !important;
  overflow: hidden !important;
  background:
    radial-gradient(500px 180px at 0% 0%, rgba(34, 211, 238, 0.08), transparent 72%),
    radial-gradient(420px 180px at 100% 0%, rgba(139, 92, 246, 0.10), transparent 74%),
    linear-gradient(160deg, rgba(15, 43, 84, 0.96), rgba(7, 22, 51, 0.99)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 30px rgba(2, 8, 23, 0.20) !important;
}

.gb-picker-group {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.gb-picker-group__title {
  display: flex !important;
  min-height: 18px !important;
  align-items: center !important;
  color: rgba(219, 234, 254, 0.66) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.025em !important;
}

.gb-picker-group__title::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  margin-right: 6px !important;
  background: #2EC2F5 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 7px rgba(34, 211, 238, 0.72) !important;
}

.gb-picker-group:nth-child(2) .gb-picker-group__title::before {
  background: #3494EB !important;
}

.gb-picker-group:nth-child(3) .gb-picker-group__title::before {
  background: #8123EC !important;
}

.gb-picker-viewport {
  position: relative !important;
  min-width: 0 !important;
  height: 180px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) !important;
}

.gb-picker-track {
  display: flex !important;
  width: max-content !important;
  height: 100% !important;
  gap: 8px !important;
  align-items: center !important;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter !important;
}

.gb-picker-card {
  box-sizing: border-box !important;
  display: flex !important;
  position: relative !important;
  flex: 0 0 116px !important;
  width: 116px !important;
  height: 164px !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  background: #0b1d3d !important;
  border: 1px solid rgba(125, 211, 252, 0.20) !important;
  border-radius: 11px !important;
  text-decoration: none !important;
  transform: scale(0.96) !important;
  transition:
    opacity 0.24s ease,
    filter 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    transform 0.24s ease !important;
}

.gb-picker-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #081a36 !important;
}

.gb-picker-card > span {
  position: absolute !important;
  inset: auto 0 0 !important;
  padding: 22px 7px 7px !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  background: linear-gradient(180deg, transparent, rgba(3, 8, 23, 0.94)) !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gb-picker-card > i {
  display: grid !important;
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 21px !important;
  height: 21px !important;
  place-items: center !important;
  color: #F4F3FA !important;
  background: rgba(8, 47, 73, 0.68) !important;
  border: 1px solid rgba(165, 243, 252, 0.34) !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-style: normal !important;
  opacity: 0 !important;
}

#gb-game-picker.has-selection .gb-picker-card:not(.is-selected) {
  opacity: 0.50 !important;
  filter: saturate(0.62) brightness(0.72) !important;
  pointer-events: none !important;
}

#gb-game-picker:not(.has-selection) .gb-picker-card {
  pointer-events: none !important;
}

#gb-game-picker .gb-picker-card.is-selected {
  --gb-winner-rgb: 34, 211, 238;
  z-index: 5 !important;
  opacity: 1 !important;
  filter: brightness(1.08) saturate(1.12) !important;
  border-color: rgba(var(--gb-winner-rgb), 1) !important;
  box-shadow:
    0 0 0 2px rgba(var(--gb-winner-rgb), 0.24),
    0 0 17px rgba(var(--gb-winner-rgb), 0.54),
    0 0 30px rgba(139, 92, 246, 0.22) !important;
  transform: scale(1.06) !important;
  pointer-events: auto !important;
  animation: gb-picker-winner-pulse 1.15s ease-in-out infinite alternate !important;
}

#gb-game-picker .gb-picker-group:nth-child(1) .gb-picker-card.is-selected {
  --gb-winner-rgb: 34, 211, 238;
}

#gb-game-picker .gb-picker-group:nth-child(2) .gb-picker-card.is-selected {
  --gb-winner-rgb: 96, 165, 250;
}

#gb-game-picker .gb-picker-group:nth-child(3) .gb-picker-card.is-selected {
  --gb-winner-rgb: 167, 139, 250;
}

#gb-game-picker .gb-picker-card.is-selected > i {
  opacity: 1 !important;
}

#gb-game-picker .gb-picker-card.is-selected::before {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 2px solid rgba(var(--gb-winner-rgb), 0.92) !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 0 10px rgba(var(--gb-winner-rgb), 0.34),
    0 0 8px rgba(var(--gb-winner-rgb), 0.62) !important;
  animation: gb-picker-border-breathe 0.95s ease-in-out infinite alternate !important;
}

#gb-game-picker.is-spinning .gb-picker-card {
  pointer-events: none !important;
}

@keyframes gb-picker-button-spin {
  to { transform: rotate(360deg); }
}

@keyframes gb-picker-winner-pulse {
  from {
    border-color: rgba(var(--gb-winner-rgb), 0.66);
    box-shadow:
      0 0 0 1px rgba(var(--gb-winner-rgb), 0.18),
      0 0 9px rgba(var(--gb-winner-rgb), 0.30);
  }
  to {
    border-color: rgba(var(--gb-winner-rgb), 1);
    box-shadow:
      0 0 0 2px rgba(var(--gb-winner-rgb), 0.48),
      0 0 20px rgba(var(--gb-winner-rgb), 0.78),
      0 0 38px rgba(var(--gb-winner-rgb), 0.34);
  }
}

@keyframes gb-picker-border-breathe {
  from {
    opacity: 0.38;
    filter: brightness(0.82);
  }
  to {
    opacity: 1;
    filter: brightness(1.45);
  }
}

/* Geniş container içinde oyun kapaklarının portre oranını korur. */
html body main#main .game-carousel .game-item .game-top,
html body main#main .game-carousel .game-item figure.game-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border-radius: 11px !important;
}

html body main#main .game-carousel .game-item figure.game-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ==========================================================================
   CANLI CASINO LOBÄ°SÄ° - KARTLAR, KATEGORÄ°LER VE FÄ°LTRELER
   ========================================================================== */
html body main#main .general-tabs {
  padding: 14px !important;
  background:
    radial-gradient(700px 220px at 0% 0%, rgba(34, 211, 238, 0.09), transparent 72%),
    linear-gradient(155deg, rgba(18, 54, 103, 0.72), rgba(9, 28, 62, 0.82)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 17px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html body main#main .general-tabs .header-options {
  margin-bottom: 12px !important;
  padding: 8px !important;
  background: linear-gradient(100deg, rgba(30, 73, 132, 0.88), rgba(22, 50, 101, 0.82)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 13px !important;
}

html body main#main .general-tabs .general-tabs-buttons {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

html body main#main .general-tabs .general-tabs-buttons > a {
  display: inline-flex !important;
  min-height: 40px !important;
  padding: 5px 13px 5px 7px !important;
  gap: 8px !important;
  align-items: center !important;
  color: rgba(219, 234, 254, 0.78) !important;
  background: linear-gradient(145deg, rgba(30, 64, 122, 0.72), rgba(12, 34, 73, 0.82)) !important;
  border: 1px solid rgba(125, 211, 252, 0.20) !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    filter 0.2s ease !important;
}

html body main#main .general-tabs .general-tabs-buttons > a .icon {
  display: grid !important;
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 29px !important;
  place-items: center !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.20), rgba(59, 130, 246, 0.16)) !important;
  border: 1px solid rgba(103, 232, 249, 0.32) !important;
  border-radius: 8px !important;
}

html body main#main .general-tabs .general-tabs-buttons > a .icon img {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
  filter: brightness(0) saturate(100%) invert(83%) sepia(35%) saturate(1160%)
    hue-rotate(151deg) brightness(103%) contrast(104%) !important;
}

html body main#main .general-tabs .general-tabs-buttons > a:hover,
html body main#main .general-tabs .general-tabs-buttons > a.active {
  color: #F4F3FA !important;
  border-color: rgba(103, 232, 249, 0.78) !important;
  box-shadow:
    inset 0 0 15px rgba(34, 211, 238, 0.10),
    0 0 14px rgba(34, 211, 238, 0.25),
    0 0 24px rgba(139, 92, 246, 0.12) !important;
  filter: brightness(1.10) !important;
  transform: translateY(-2px) !important;
}

html body main#main .general-tabs .header-selects {
  display: flex !important;
  min-height: 58px !important;
  margin-bottom: 14px !important;
  padding: 8px 10px !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(100deg, rgba(24, 63, 119, 0.78), rgba(15, 39, 82, 0.86)) !important;
  border: 1px solid rgba(125, 211, 252, 0.20) !important;
  border-radius: 12px !important;
}

html body main#main .general-tabs .pfw__row,
html body main#main .general-tabs .sd__row {
  display: flex !important;
  gap: 9px !important;
  align-items: center !important;
}

html body main#main .general-tabs .pfw__label,
html body main#main .general-tabs .sd__label {
  color: rgba(191, 219, 254, 0.76) !important;
  font-weight: 750 !important;
}

html body main#main .general-tabs .pfw__btn,
html body main#main .general-tabs .sd__btn {
  min-height: 40px !important;
  padding: 0 14px !important;
  color: #F4F3FA !important;
  background: linear-gradient(145deg, rgba(31, 76, 139, 0.94), rgba(17, 43, 91, 0.96)) !important;
  border: 1px solid rgba(125, 211, 252, 0.34) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

html body main#main .general-tabs .pfw__btn:hover,
html body main#main .general-tabs .pfw__btn[aria-expanded="true"],
html body main#main .general-tabs .sd__btn:hover,
html body main#main .general-tabs .sd__btn[aria-expanded="true"] {
  border-color: rgba(103, 232, 249, 0.78) !important;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.25) !important;
  filter: brightness(1.10) !important;
}

html body main#main .general-tabs .slots-tabs-listing {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 18px 14px !important;
}

html body main#main .general-tabs .slots-tabs-listing > .item {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

html body main#main .general-tabs .game-item {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: visible !important;
  background: linear-gradient(155deg, rgba(29, 63, 115, 0.74), rgba(11, 29, 62, 0.94)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 13px !important;
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.20) !important;
  transform: translateZ(0) !important;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

/* Kategori klasörlerini kategoriye özel, temiz sembol ikonlarına çevirir. */
html body main#main .general-tabs .general-tabs-buttons > a .icon img {
  display: none !important;
}

html body main#main .general-tabs .general-tabs-buttons > a .icon::before {
  color: #2EC2F5 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 9px rgba(34, 211, 238, 0.68) !important;
}

html body main#main .general-tabs .general-tabs-buttons > a[href*="popular-live-games"] .icon::before {
  content: "✦" !important;
}

html body main#main .general-tabs .general-tabs-buttons > a[href*="game-show"] .icon::before {
  content: "â™›" !important;
}

html body main#main .general-tabs .general-tabs-buttons > a[href*="blackjack"] .icon::before {
  content: "â™ " !important;
}

html body main#main .general-tabs .general-tabs-buttons > a[href*="roulette"] .icon::before {
  content: "â—‰" !important;
}

html body main#main .general-tabs .general-tabs-buttons > a[href*="baccarat"] .icon::before {
  content: "â—†" !important;
}

/* Casino Lobisi / Slot Lobisi / Canlı Casino üst navigasyonu */
html body main#main .ato-wrap.general-nav {
  margin-bottom: 18px !important;
  padding: 9px !important;
  background:
    radial-gradient(480px 80px at 0% 50%, rgba(34, 211, 238, 0.10), transparent 72%),
    linear-gradient(100deg, rgba(19, 55, 105, 0.90), rgba(20, 39, 84, 0.94)) !important;
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(2, 8, 23, 0.18) !important;
}

html body main#main .ato-wrap.general-nav .ato-rail {
  display: flex !important;
  gap: 9px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

html body main#main .ato-wrap.general-nav .ato-btn {
  display: inline-flex !important;
  min-height: 42px !important;
  padding: 5px 14px 5px 6px !important;
  gap: 8px !important;
  align-items: center !important;
  color: rgba(219, 234, 254, 0.78) !important;
  background: linear-gradient(145deg, rgba(35, 73, 132, 0.76), rgba(13, 35, 75, 0.92)) !important;
  border: 1px solid rgba(147, 197, 253, 0.25) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  font-weight: 800 !important;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    filter 0.2s ease !important;
}

html body main#main .ato-wrap.general-nav .ato-btn .icon {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  place-items: center !important;
  color: #2EC2F5 !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.20), rgba(59, 130, 246, 0.17)) !important;
  border: 1px solid rgba(103, 232, 249, 0.34) !important;
  border-radius: 8px !important;
}

html body main#main .ato-wrap.general-nav .ato-btn .icon > span,
html body main#main .ato-wrap.general-nav .ato-btn .icon svg {
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
}

html body main#main .ato-wrap.general-nav .ato-btn:hover {
  color: #F4F3FA !important;
  border-color: rgba(103, 232, 249, 0.70) !important;
  box-shadow:
    0 0 15px rgba(34, 211, 238, 0.22),
    0 0 24px rgba(139, 92, 246, 0.10) !important;
  filter: brightness(1.10) !important;
  transform: translateY(-2px) !important;
}

html body main#main .ato-wrap.general-nav .ato-btn.is-active {
  color: #F4F3FA !important;
  background: linear-gradient(110deg, rgba(34, 211, 238, 0.30), rgba(59, 130, 246, 0.72), rgba(139, 92, 246, 0.42)) !important;
  border-color: rgba(165, 243, 252, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 0 16px rgba(34, 211, 238, 0.30),
    0 0 27px rgba(139, 92, 246, 0.16) !important;
}

html body main#main .general-tabs .game-item .game-top,
html body main#main .general-tabs .game-item figure.game-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border-radius: 12px 12px 9px 9px !important;
}

html body main#main .general-tabs .game-item figure.game-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.34s cubic-bezier(.2, .7, .2, 1), filter 0.3s ease !important;
}

html body main#main .general-tabs .game-item:hover {
  z-index: 5 !important;
  border-color: rgba(103, 232, 249, 0.78) !important;
  box-shadow:
    0 15px 28px rgba(2, 8, 23, 0.30),
    0 0 16px rgba(34, 211, 238, 0.27),
    0 0 28px rgba(139, 92, 246, 0.12) !important;
  transform: translateY(-6px) scale(1.025) !important;
}

html body main#main .general-tabs .game-item:hover figure.game-image img {
  filter: brightness(1.08) saturate(1.08) !important;
  transform: scale(1.045) !important;
}

html body main#main .general-tabs .game-item .game-details {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  justify-content: flex-start !important;
  background: linear-gradient(180deg, rgba(17, 42, 85, 0.94), rgba(10, 27, 59, 0.98)) !important;
  border-radius: 0 0 12px 12px !important;
}

@media (max-width: 1199px) {
  html body main#main .general-tabs .slots-tabs-listing {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  html body main#main .general-tabs {
    padding: 9px !important;
  }

  html body main#main .general-tabs .header-selects {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html body main#main .general-tabs .slots-tabs-listing {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 9px !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V6 — SAĞDA SABİT HIZLI ERİŞİM KUTULARI
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: clamp(14px, 1.35vw, 22px) !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  text-decoration: none !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(72,221,255,.15), transparent 38%),
    linear-gradient(160deg, rgba(14,52,98,.98), rgba(5,24,50,.99)) !important;
  border: 1px solid rgba(103,232,249,.32) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 28px rgba(2,8,23,.34) !important;
  transition:
    color .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature.tone-violet {
  background:
    radial-gradient(circle at 50% 18%, rgba(167,139,250,.20), transparent 40%),
    linear-gradient(160deg, rgba(45,36,111,.98), rgba(17,17,66,.99)) !important;
  border-color: rgba(167,139,250,.40) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature.tone-blue {
  background:
    radial-gradient(circle at 50% 18%, rgba(96,165,250,.20), transparent 40%),
    linear-gradient(160deg, rgba(22,61,124,.98), rgba(9,27,64,.99)) !important;
  border-color: rgba(96,165,250,.42) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__glow {
  position: absolute !important;
  top: -18% !important;
  left: 50% !important;
  z-index: -1 !important;
  width: 145% !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  opacity: .38 !important;
  background: radial-gradient(circle, rgba(72,221,255,.46), transparent 64%) !important;
  filter: blur(22px) !important;
  transform: translateX(-50%) !important;
  transition: opacity .3s ease, transform .45s ease !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .tone-violet
  .gb-hero-feature__glow {
  background: radial-gradient(circle, rgba(167,139,250,.52), transparent 65%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .tone-blue
  .gb-hero-feature__glow {
  background: radial-gradient(circle, rgba(96,165,250,.50), transparent 65%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__label {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  z-index: 2 !important;
  padding: 6px 9px !important;
  color: #baf5ff !important;
  background: rgba(6,28,57,.68) !important;
  border: 1px solid rgba(103,232,249,.24) !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(58px, 5vw, 82px) !important;
  height: clamp(58px, 5vw, 82px) !important;
  color: #75e9ff !important;
  background: rgba(16,63,112,.54) !important;
  border: 1px solid rgba(103,232,249,.34) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 25px rgba(72,221,255,.22) !important;
  transform: translate(-50%, -62%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .tone-violet
  .gb-hero-feature__icon {
  color: #8123EC !important;
  background: rgba(76,59,157,.50) !important;
  border-color: rgba(196,181,253,.38) !important;
  box-shadow: 0 0 25px rgba(167,139,250,.25) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__icon
  svg {
  width: 54% !important;
  height: 54% !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 6px currentColor) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__copy {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding-right: 22px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__copy
  strong {
  color: #fff !important;
  font-size: clamp(13px, 1.05vw, 17px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__copy
  small {
  color: #aec7e8 !important;
  font-size: clamp(9px, .72vw, 11px) !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__arrow {
  position: absolute !important;
  right: 13px !important;
  bottom: 14px !important;
  z-index: 3 !important;
  color: #2EC2F5 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: transform .24s ease !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature:hover {
  color: #fff !important;
  border-color: rgba(165,243,252,.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 15px 32px rgba(2,8,23,.40),
    0 0 22px rgba(72,221,255,.25) !important;
  transform: translateY(-3px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature:hover
  .gb-hero-feature__glow {
  opacity: .72 !important;
  transform: translateX(-50%) scale(1.14) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature:hover
  .gb-hero-feature__arrow {
  transform: translateX(4px) !important;
}

/* ==========================================================================
   HERO SHOWCASE FINAL — %68 SLIDER + %32 CASINO/SPOR
   Önerilen slider görsel oranı yaklaşık 2.7:1 (1620x600 veya 1920x710).
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .main-slider {
  width: calc(68% - 7px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: calc(32% - 7px) !important;
  gap: 12px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .hero-slider-controls {
  position: absolute !important;
  inset: 9px auto 9px 9px !important;
  z-index: 60 !important;
  width: calc(68% - 7px) !important;
  height: auto !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-area-slider-nav {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 5 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn.owl-prev {
  left: -18px !important;
  right: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn.owl-next {
  right: -18px !important;
  left: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn:hover {
  transform: translateY(-50%) scale(1.06) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-slider-pagination {
  left: 50% !important;
  bottom: 11px !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 1100px) and (min-width: 768px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .main-slider {
    width: calc(65% - 6px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: calc(35% - 6px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .hero-slider-controls {
    width: calc(65% - 6px) !important;
  }
}

@media (max-width: 767px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .main-slider,
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .hero-slider-controls {
    width: calc(100% - 10px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .hero-slider-controls {
    inset: 5px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .hero-nav-btn.owl-prev {
    left: 7px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .hero-nav-btn.owl-next {
    right: 7px !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V5 — SABİT ANA SAHNE + BAĞIMSIZ ÖNİZLEME RAYI
   Önerilen banner oranı: 8:3 (ör. 1600x600 veya 1920x720)
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable {
  box-sizing: border-box !important;
  display: block !important;
  height: clamp(300px, 25vw, 430px) !important;
  min-height: 0 !important;
  padding: 9px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .main-slider {
  position: relative !important;
  z-index: 3 !important;
  width: calc(62% - 7px) !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 17px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .swiper-wrapper {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .swiper-wrapper
  > .swiper-slide,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .swiper-wrapper
  > .swiper-slide.swiper-slide-active {
  box-sizing: border-box !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  .hero-slide-link,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  .hero-slide-card,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  .hero-slide-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background: #020712 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  .hero-slide-media
  img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  bottom: 9px !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: calc(38% - 7px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: #07162f !important;
  border: 1px solid rgba(103,232,249,.28) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 10px 25px rgba(2,8,23,.32) !important;
  opacity: .76 !important;
  filter: saturate(.82) brightness(.78) !important;
  transition:
    opacity .24s ease,
    filter .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-preview::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, transparent 54%, rgba(2,8,23,.46)),
    linear-gradient(135deg, rgba(72,221,255,.04), rgba(139,124,255,.10)) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-preview
  img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  transition: transform .45s cubic-bezier(.22,.72,.18,1) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-preview:hover {
  opacity: 1 !important;
  filter: none !important;
  border-color: rgba(165,243,252,.86) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 28px rgba(2,8,23,.38),
    0 0 19px rgba(72,221,255,.24) !important;
  transform: translateY(-2px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-preview:hover
  img {
  transform: scale(1.035) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-preview__position {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 29px !important;
  height: 24px !important;
  padding: 0 7px !important;
  color: #e8fbff !important;
  background: rgba(3,18,42,.72) !important;
  border: 1px solid rgba(103,232,249,.30) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  box-shadow: 0 0 12px rgba(72,221,255,.16) !important;
  backdrop-filter: blur(7px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-slider-pagination {
  left: 31% !important;
}

@media (max-width: 1100px) and (min-width: 768px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    height: clamp(270px, 31vw, 360px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .main-slider {
    width: calc(68% - 6px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: calc(32% - 6px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .gb-hero-preview:nth-child(n + 3) {
    display: none !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .hero-slider-pagination {
    left: 34% !important;
  }
}

@media (max-width: 767px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    height: auto !important;
    aspect-ratio: 8 / 3 !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .main-slider {
    width: 100% !important;
    height: 100% !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    display: none !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .hero-slider-pagination {
    left: 50% !important;
  }
}

/* Masaüstünde sidebar sonrasındaki kullanılabilir alanı içeriklere açar. */
@media (min-width: 992px) {
  html body main#main > .container {
    width: calc(100% - 28px) !important;
    max-width: 1600px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html body main#main > #gb-discovery-deck,
  html body main#main #gb-game-picker {
    width: calc(100% - 28px) !important;
    max-width: 1600px !important;
  }
}

@media (max-width: 991px) {
  #gb-game-picker {
    grid-template-columns: 1fr !important;
    width: calc(100% - 20px) !important;
  }

  .gb-picker-control {
    min-height: 148px !important;
  }
}

/* =========================================================
   PROMOSYON KAPAKLARI — TEK VE RESPONSIVE 16:7 ORANI
   Önerilen kaynak: 1600x700 WebP (veya 1920x840)
========================================================= */
html body #app main#main
  .promotions-box
  .promotion-list
  .promo-anim__item
  .item-top {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 7 !important;
  overflow: hidden !important;
}

html body #app main#main
  .promotions-box
  .promotion-list
  .promo-anim__item
  .item-front,
html body #app main#main
  .promotions-box
  .promotion-list
  .promo-anim__item
  .item-front
  .image {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: inherit !important;
  overflow: hidden !important;
}

html body #app main#main
  .promotions-box
  .promotion-list
  .promo-anim__item
  .item-front
  .image
  > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

html body #app main#main
  .promotions-box
  .promotion-list
  .promo-anim__item
  .item-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* HERO KONTROLLERİ — DAHA KOMPAKT OKLAR */
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn
  .gb-hero-chevron {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 2.15 !important;
}

@media (max-width: 991px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    > .hero-slider-controls
    .hero-nav-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .hero-nav-btn
    .gb-hero-chevron {
    width: 16px !important;
    height: 16px !important;
  }
}

/* HERO KONTROLLERİ — KOMPAKT ÖLÇÜ */
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn
  .gb-hero-chevron {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.15 !important;
}

@media (max-width: 991px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    > .hero-slider-controls
    .hero-nav-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    > .hero-slider-controls
    .hero-nav-btn
    .gb-hero-chevron {
    width: 17px !important;
    height: 17px !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V9 — SLIDER İÇİ KONTROLLER + BLURLU GÖRSEL DOLGUSU
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .main-slider {
  position: relative !important;
  isolation: isolate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  .hero-slide-media.gb-hero-media-ready {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #041025 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  .hero-slide-media.gb-hero-media-ready::before {
  content: "" !important;
  position: absolute !important;
  inset: -34px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(3,14,34,.22), rgba(3,14,34,.34)),
    var(--gb-slide-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: blur(24px) saturate(1.18) brightness(.62) !important;
  transform: scale(1.10) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  .hero-slide-media.gb-hero-media-ready::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(2,8,23,.16), transparent 24%, transparent 76%, rgba(2,8,23,.16)),
    linear-gradient(180deg, rgba(2,8,23,.10), transparent 60%, rgba(2,8,23,.20)) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  .hero-slide-media.gb-hero-media-ready
  > img {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls {
  position: absolute !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-area-slider-nav {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn.owl-prev {
  left: 10px !important;
  right: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn.owl-next {
  right: 10px !important;
  left: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn:hover {
  transform: translateY(-50%) scale(1.06) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-slider-pagination {
  position: absolute !important;
  right: auto !important;
  bottom: 12px !important;
  left: 50% !important;
  z-index: 4 !important;
  width: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

@media (max-width: 991px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    .hero-slide-media.gb-hero-media-ready
    > img {
    object-fit: cover !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    > .hero-slider-controls
    .hero-nav-btn.owl-prev {
    left: 7px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    > .hero-slider-controls
    .hero-nav-btn.owl-next {
    right: 7px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    > .hero-slider-controls
    .hero-slider-pagination {
    bottom: 7px !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE — HAREKETLİ BLUR ATMOSFERİ + MOBİL DOM SIRASI
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider {
  position: relative !important;
  isolation: isolate !important;
  background:
    linear-gradient(135deg, rgba(7, 26, 58, .94), rgba(11, 35, 78, .90)) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider::before,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  width: clamp(240px, 34vw, 560px) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: .46 !important;
  filter: blur(clamp(50px, 6vw, 96px)) saturate(1.35) !important;
  will-change: transform, opacity !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider::before {
  top: -46% !important;
  left: -10% !important;
  background:
    radial-gradient(circle, rgba(47, 210, 255, .72) 0%, rgba(37, 99, 235, .42) 42%, transparent 72%) !important;
  animation: gb-hero-blur-drift-a 9s ease-in-out infinite alternate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider::after {
  right: -8% !important;
  bottom: -55% !important;
  background:
    radial-gradient(circle, rgba(167, 139, 250, .66) 0%, rgba(85, 72, 255, .38) 44%, transparent 73%) !important;
  animation: gb-hero-blur-drift-b 11s ease-in-out -3s infinite alternate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider
  > .swiper-wrapper {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes gb-hero-blur-drift-a {
  0% {
    opacity: .30;
    transform: translate3d(-8%, -4%, 0) scale(.88);
  }
  48% {
    opacity: .62;
    transform: translate3d(72%, 24%, 0) scale(1.12);
  }
  100% {
    opacity: .38;
    transform: translate3d(148%, -2%, 0) scale(.94);
  }
}

@keyframes gb-hero-blur-drift-b {
  0% {
    opacity: .34;
    transform: translate3d(5%, 8%, 0) scale(.90);
  }
  52% {
    opacity: .58;
    transform: translate3d(-74%, -25%, 0) scale(1.10);
  }
  100% {
    opacity: .32;
    transform: translate3d(-142%, 4%, 0) scale(.96);
  }
}

@media (max-width: 767px) {
  html body #app main#main {
    display: flex !important;
    flex-direction: column !important;
  }

  html body #app main#main > #gb-guest-marquee {
    order: 1 !important;
  }

  html body #app main#main > .hp-mobile-slider {
    order: 2 !important;
  }

  html body #app main#main > .hp-hero-wrap {
    order: 2 !important;
  }

  html body #app main#main > #gb-discovery-deck {
    order: 3 !important;
  }

  html body #app main#main > :not(#gb-guest-marquee):not(.hp-mobile-slider):not(.hp-hero-wrap):not(#gb-discovery-deck) {
    order: 4 !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .main-slider::before,
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .main-slider::after {
    width: 240px !important;
    filter: blur(54px) saturate(1.25) !important;
    opacity: .34 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .main-slider::before,
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .main-slider::after {
    animation: none !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V3 — TAM GENİŞLİK VE ORTALANMIŞ ANİMASYONLU OKLAR
   ========================================================================== */

html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
  width: min(calc(100% - 4px), 1720px) !important;
  max-width: 1720px !important;
  padding: 9px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .hero-slider-controls {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-area-slider-nav {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn {
  position: absolute !important;
  top: 50% !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #fff !important;
  background:
    linear-gradient(145deg, rgba(18,61,112,.96), rgba(9,27,61,.98)) !important;
  border: 1px solid rgba(103,232,249,.72) !important;
  border-radius: 15px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 28px rgba(2,8,23,.46),
    0 0 16px rgba(56,189,248,.28) !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  isolation: isolate !important;
  transition:
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
  animation: gb-hero-arrow-breathe 3.8s ease-in-out infinite !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn.owl-prev {
  left: -17px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn.owl-next {
  right: -17px !important;
  animation-delay: -1.9s !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: -13px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 22px !important;
  opacity: .64 !important;
  background:
    radial-gradient(circle at 28% 30%, rgba(72,221,255,.82), transparent 48%),
    radial-gradient(circle at 72% 70%, rgba(139,124,255,.74), transparent 52%) !important;
  filter: blur(12px) saturate(1.45) !important;
  animation: gb-hero-arrow-ambient 4.6s ease-in-out infinite alternate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn.owl-next::before {
  animation-delay: -2.3s !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  color: currentColor !important;
  font-family: Arial, sans-serif !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 0 9px rgba(103,232,249,.78) !important;
  transform: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.94) !important;
  background:
    linear-gradient(135deg, rgba(31,190,231,.98), rgba(69,117,241,.98) 56%, rgba(126,91,239,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 12px 30px rgba(2,8,23,.48),
    0 0 22px rgba(72,221,255,.52),
    0 0 38px rgba(139,124,255,.26) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-slider-pagination {
  position: absolute !important;
  left: 50% !important;
  bottom: 13px !important;
  z-index: 4 !important;
  width: auto !important;
  min-height: 28px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(125,211,252,.24) !important;
  border-radius: 999px !important;
  background: rgba(4,18,42,.72) !important;
  box-shadow: 0 8px 22px rgba(2,8,23,.34) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

@keyframes gb-hero-arrow-breathe {
  0%, 100% {
    border-color: rgba(103,232,249,.52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.13),
      0 9px 25px rgba(2,8,23,.44),
      0 0 10px rgba(56,189,248,.18);
  }
  50% {
    border-color: rgba(165,243,252,.96);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 11px 29px rgba(2,8,23,.48),
      0 0 20px rgba(72,221,255,.54),
      0 0 34px rgba(139,124,255,.24);
  }
}

@keyframes gb-hero-arrow-ambient {
  0% {
    opacity: .28;
    transform: translate3d(-6px, 4px, 0) scale(.82) rotate(-8deg);
  }
  55% {
    opacity: .82;
    transform: translate3d(6px, -5px, 0) scale(1.18) rotate(8deg);
  }
  100% {
    opacity: .42;
    transform: translate3d(-2px, -7px, 0) scale(.94) rotate(-3deg);
  }
}

@media (max-width: 767px) {
  html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
    width: calc(100% - 6px) !important;
    padding: 5px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .hero-nav-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .hero-nav-btn.owl-prev {
    left: 7px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .hero-nav-btn.owl-next {
    right: 7px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .hero-nav-btn > span {
    padding-bottom: 3px !important;
    font-size: 30px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .hero-slider-pagination {
    bottom: 7px !important;
    min-height: 24px !important;
    padding: 5px 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .hero-nav-btn,
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .hero-nav-btn::before {
    animation: none !important;
  }
}

@media (max-width: 575px) {
  #gb-game-picker {
    width: calc(100% - 16px) !important;
    gap: 9px !important;
    margin-top: 10px !important;
  }

  .gb-picker-control {
    min-height: 142px !important;
    padding: 15px !important;
    border-radius: 13px !important;
  }

  .gb-picker-control strong {
    font-size: 16px !important;
  }

  .gb-picker-reels {
    grid-template-columns: 1fr !important;
    padding: 9px !important;
    border-radius: 13px !important;
  }

  .gb-picker-viewport {
    height: 150px !important;
  }

  .gb-picker-card {
    flex-basis: 96px !important;
    width: 96px !important;
    height: 136px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gb-game-picker .gb-picker-card.is-selected {
    animation: none !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE SLIDER — GENİŞ AKTİF SLAYT + 3 ÖNİZLEME
   Çalışma mantığı: panel-scripts/09-hero-showcase-slider.js
   ========================================================================== */

html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
  width: min(calc(100% - 28px), 1480px) !important;
  padding: 11px !important;
  overflow: visible !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider {
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 17px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-wrapper {
  align-items: stretch !important;
  transition-timing-function: cubic-bezier(.22, .72, .18, 1) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide {
  box-sizing: border-box !important;
  width: calc((46% - 42px) / 3) !important;
  height: auto !important;
  min-height: clamp(270px, 28vw, 500px) !important;
  opacity: .76 !important;
  filter: saturate(.78) brightness(.72) !important;
  transform: scale(.975) !important;
  transform-origin: center !important;
  transition:
    width .58s cubic-bezier(.22, .72, .18, 1),
    opacity .38s ease,
    filter .38s ease,
    transform .48s cubic-bezier(.22, .72, .18, 1) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide-active {
  width: 54% !important;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1) !important;
  z-index: 4 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide
  .hero-slide-link,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide
  .hero-slide-card,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide
  .hero-slide-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  border-radius: 17px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide
  .hero-slide-link {
  position: relative !important;
  isolation: isolate !important;
  border-color: rgba(79, 172, 254, .42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 13px 28px rgba(2,8,23,.34) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide-active
  .hero-slide-link {
  border-color: rgba(103, 232, 249, .84) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 16px 38px rgba(2,8,23,.42),
    0 0 22px rgba(56,189,248,.22) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide:not(.swiper-slide-active)
  .hero-slide-link::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, transparent 45%, rgba(2,8,23,.40) 100%),
    linear-gradient(135deg, rgba(56,189,248,.04), rgba(139,92,246,.10)) !important;
  transition: opacity .3s ease !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide
  .hero-slide-media
  img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .7s cubic-bezier(.22,.72,.18,1), filter .35s ease !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide:not(.swiper-slide-active):hover {
  opacity: .94 !important;
  filter: saturate(.96) brightness(.88) !important;
  transform: scale(.99) translateY(-2px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide:not(.swiper-slide-active):hover
  img {
  transform: scale(1.045) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-slider-controls {
  z-index: 12 !important;
}

@media (max-width: 1100px) and (min-width: 768px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide {
    width: calc((38% - 28px) / 2) !important;
    min-height: clamp(250px, 36vw, 410px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide-active {
    width: 62% !important;
  }
}

@media (max-width: 767px) {
  html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
    width: calc(100% - 16px) !important;
    padding: 5px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide,
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide-active {
    width: 100% !important;
    min-height: auto !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide
    .hero-slide-link,
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide
    .hero-slide-card,
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide
    .hero-slide-media {
    min-height: auto !important;
    aspect-ratio: 16 / 7 !important;
  }
}

/* ==========================================================================
   CRITICAL SEARCH THEME
   Dosyanın başında tutulur; Custom CSS karakter sınırında kesilmez.
   ========================================================================== */
html body #app main#main div.main-search[data-mode="inline"] {
  position: relative !important;
  isolation: isolate !important;
  z-index: 50 !important;
  background: transparent !important;
  border: 0 !important;
}

html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form {
  min-height: 56px !important;
  padding: 5px 8px !important;
  background:
    radial-gradient(260px 76px at 0% 50%, rgba(34, 211, 238, 0.12), transparent 72%),
    linear-gradient(115deg, #173d72 0%, #102d5d 58%, #182958 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.34) !important;
  border-radius: 15px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(2, 8, 23, 0.20) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form:hover {
  border-color: rgba(103, 232, 249, 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 17px rgba(34, 211, 238, 0.17) !important;
  filter: brightness(1.07) !important;
}

html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form:focus-within {
  background:
    radial-gradient(300px 82px at 4% 50%, rgba(34, 211, 238, 0.19), transparent 72%),
    linear-gradient(115deg, #1c4d8c 0%, #12366f 62%, #33276f 100%) !important;
  border-color: #2EC2F5 !important;
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.13),
    0 12px 30px rgba(2, 8, 23, 0.28),
    0 0 22px rgba(56, 189, 248, 0.18) !important;
  filter: none !important;
}

html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form > button {
  flex: 0 0 42px !important;
  color: #2EC2F5 !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.17), rgba(99, 102, 241, 0.19)) !important;
  border: 1px solid rgba(125, 211, 252, 0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form > button:hover,
html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form:focus-within > button {
  color: #F4F3FA !important;
  background: linear-gradient(145deg, rgba(6, 182, 212, 0.34), rgba(79, 70, 229, 0.34)) !important;
  border-color: rgba(165, 243, 252, 0.82) !important;
  box-shadow: 0 0 13px rgba(34, 211, 238, 0.30) !important;
}

html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form > button span,
html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form > button svg {
  color: inherit !important;
}

html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form
  > input[name="top-search"] {
  color: #F4F3FA !important;
  caret-color: #2EC2F5 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}

html body #app main#main
  div.main-search[data-mode="inline"] > form.search-form
  > input[name="top-search"]::placeholder {
  color: rgba(219, 234, 254, 0.66) !important;
  opacity: 1 !important;
}

html body #app main#main
  div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"] {
  margin-top: 9px !important;
  background:
    radial-gradient(460px 200px at 0% 0%, rgba(34, 211, 238, 0.13), transparent 72%),
    radial-gradient(380px 200px at 100% 0%, rgba(139, 92, 246, 0.14), transparent 74%),
    linear-gradient(150deg, #153d75 0%, #0d2858 62%, #29205d 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.34) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 50px rgba(2, 8, 23, 0.42),
    0 0 24px rgba(34, 211, 238, 0.13) !important;
}

html body #app main#main
  div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"] div[style*="place-items"] {
  color: rgba(219, 234, 254, 0.74) !important;
  background: radial-gradient(circle at 50% 48%, rgba(56, 189, 248, 0.10), transparent 38%) !important;
}

/* Arama/global modal açıldığında siyah ekran yerine temalı cam perde. */
html body.modal-open .modal-backdrop.fade.show {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(56, 189, 248, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(8, 32, 70, 0.54), rgba(23, 25, 72, 0.48)) !important;
  backdrop-filter: blur(3px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(115%) !important;
}

/* Arama açıkken yalnızca arama formu ve sonuç paneli backdrop'un üstüne çıkar. */
html body.modal-open #app main#main
  div.main-search[data-mode="inline"] {
  position: relative !important;
  isolation: isolate !important;
  z-index: 2605 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.modal-open #app main#main
  div.main-search[data-mode="inline"]
  > form.search-form {
  position: relative !important;
  z-index: 2607 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body.modal-open #app main#main
  div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"] {
  z-index: 2608 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.modal-open #global-modal {
  background: transparent !important;
}

html body.modal-open #global-modal .modal-dialog {
  filter: drop-shadow(0 18px 38px rgba(2, 8, 23, 0.32)) !important;
}

/* Search kendi inline panelini kullanıyor; bu durumda modal perdesi görünmemeli. */
html body.modal-open:has(.main-search:focus-within) .modal-backdrop.fade.show,
html body.modal-open:has(.main-search .search-layer) .modal-backdrop.fade.show {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

html body.modal-open:has(.main-search:focus-within) #global-modal,
html body.modal-open:has(.main-search .search-layer) #global-modal {
  display: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

html body.modal-open.search-focus .modal-backdrop.fade.show {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

html body.modal-open.search-focus #global-modal {
  display: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

html body.modal-open.search-focus #global-modal .modal-dialog,
html body.modal-open.search-focus #global-modal .modal-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.modal-open.search-focus #app main#main
  div.main-search[data-mode="inline"],
html body.modal-open.search-focus #app main#main
  div.main-search[data-mode="inline"] > form.search-form,
html body.modal-open.search-focus #app main#main
  div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"] {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   CRITICAL HERO THEME - BLUE STADIUM BACKGROUND + NEON FRAME
   ========================================================================== */
html body #app main#main > .hp-hero-wrap,
html body #app main#main > .hp-hero-wrap.welcome-content,
html body #app main#main .hp-hero-wrap div.enterence-box {
  background-color: #061a3a !important;
  background-image:
    radial-gradient(70% 120% at 50% 20%, rgba(37, 99, 235, 0.25), transparent 64%),
    radial-gradient(42% 80% at 4% 50%, rgba(34, 211, 238, 0.14), transparent 72%),
    radial-gradient(42% 80% at 96% 45%, rgba(139, 92, 246, 0.13), transparent 72%),
    repeating-linear-gradient(128deg, rgba(125, 211, 252, 0.025) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #061a3a 0%, #071936 52%, #081c40 100%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body #app main#main > .hp-hero-wrap {
  position: relative !important;
  isolation: isolate !important;
  padding: clamp(18px, 2.7vw, 38px) 0 !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(56, 189, 248, 0.16) !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.18) !important;
  box-shadow:
    inset 0 22px 50px rgba(2, 8, 23, 0.24),
    inset 0 -24px 54px rgba(2, 8, 23, 0.28) !important;
}

html body #app main#main > .hp-hero-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.68 !important;
  background:
    radial-gradient(circle at 14% 24%, rgba(103, 232, 249, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 18%, rgba(96, 165, 250, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 78%, rgba(167, 139, 250, 0.13) 0 1px, transparent 2px) !important;
  background-size: 54px 54px, 68px 68px, 74px 74px !important;
  animation: gb-hero-atmosphere 7s ease-in-out infinite alternate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  width: min(100% - 28px, 1380px) !important;
  margin: 0 auto !important;
  padding: 10px !important;
  overflow: visible !important;
  background:
    linear-gradient(145deg, rgba(20, 61, 116, 0.66), rgba(7, 25, 58, 0.84)) !important;
  border: 1px solid rgba(56, 189, 248, 0.72) !important;
  outline: 1px solid rgba(37, 99, 235, 0.18) !important;
  outline-offset: 3px !important;
  border-radius: 24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 0 22px rgba(34, 211, 238, 0.08),
    0 0 0 1px rgba(37, 99, 235, 0.18),
    0 18px 42px rgba(2, 8, 23, 0.38),
    0 0 24px rgba(34, 211, 238, 0.13) !important;
  animation: gb-hero-frame-blink 1.85s ease-in-out infinite !important;
}

/* Çerçeve boyunca gezen ince ışık. */
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: 8 !important;
  padding: 2px !important;
  pointer-events: none !important;
  border-radius: 25px !important;
  background:
    conic-gradient(
      from var(--gb-hero-frame-angle, 0deg),
      transparent 0deg 48deg,
      rgba(103, 232, 249, 0.18) 65deg,
      #2EC2F5 82deg,
      #3494EB 94deg,
      transparent 116deg 224deg,
      rgba(167, 139, 250, 0.22) 246deg,
      #8123EC 263deg,
      #3494EB 278deg,
      transparent 300deg 360deg
    ) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  filter:
    drop-shadow(0 0 5px rgba(103, 232, 249, 0.85))
    drop-shadow(0 0 10px rgba(37, 99, 235, 0.45)) !important;
  animation: gb-hero-frame-run 6s linear infinite !important;
}

/* Dört köşede sırayla yanıp sönen projektör ışıkları. */
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  z-index: 9 !important;
  pointer-events: none !important;
  border-radius: 28px !important;
  opacity: 0.48 !important;
  background:
    radial-gradient(circle at 2% 4%, #F4F3FA 0 1px, #2EC2F5 2px, rgba(56, 189, 248, 0.34) 5px, transparent 14px),
    radial-gradient(circle at 98% 4%, #F4F3FA 0 1px, #2EC2F5 2px, rgba(56, 189, 248, 0.34) 5px, transparent 14px),
    radial-gradient(circle at 98% 96%, #F4F3FA 0 1px, #8123EC 2px, rgba(139, 92, 246, 0.34) 5px, transparent 14px),
    radial-gradient(circle at 2% 96%, #F4F3FA 0 1px, #3494EB 2px, rgba(37, 99, 235, 0.34) 5px, transparent 14px) !important;
  filter:
    drop-shadow(0 0 7px rgba(103, 232, 249, 0.90))
    drop-shadow(0 0 16px rgba(37, 99, 235, 0.58)) !important;
  animation: gb-hero-corner-lights 2.4s steps(1, end) infinite !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider
  .hero-slide-link {
  overflow: hidden !important;
  border: 1px solid rgba(125, 211, 252, 0.40) !important;
  border-radius: 17px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 18px rgba(2, 132, 199, 0.10) !important;
}

@property --gb-hero-frame-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes gb-hero-frame-run {
  to {
    --gb-hero-frame-angle: 360deg;
  }
}

@keyframes gb-hero-frame-breathe {
  from {
    border-color: rgba(56, 189, 248, 0.50);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 0 18px rgba(34, 211, 238, 0.05),
      0 18px 42px rgba(2, 8, 23, 0.38),
      0 0 14px rgba(34, 211, 238, 0.09);
  }
  to {
    border-color: rgba(103, 232, 249, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 26px rgba(34, 211, 238, 0.11),
      0 18px 42px rgba(2, 8, 23, 0.38),
      0 0 30px rgba(34, 211, 238, 0.20);
  }
}

/* @property desteğine ihtiyaç duymayan görünür çerçeve yanıp-sönmesi. */
@keyframes gb-hero-frame-blink {
  0%, 100% {
    border-color: rgba(56, 189, 248, 0.42);
    outline-color: rgba(37, 99, 235, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 14px rgba(34, 211, 238, 0.04),
      0 0 0 1px rgba(37, 99, 235, 0.16),
      0 16px 38px rgba(2, 8, 23, 0.36),
      0 0 8px rgba(34, 211, 238, 0.08);
  }
  38% {
    border-color: rgba(103, 232, 249, 0.96);
    outline-color: rgba(96, 165, 250, 0.68);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 28px rgba(34, 211, 238, 0.14),
      0 0 0 2px rgba(96, 165, 250, 0.30),
      0 18px 42px rgba(2, 8, 23, 0.38),
      0 0 18px rgba(103, 232, 249, 0.54),
      0 0 38px rgba(37, 99, 235, 0.30);
  }
  48% {
    border-color: rgba(56, 189, 248, 0.30);
    outline-color: rgba(37, 99, 235, 0.12);
    box-shadow:
      inset 0 0 10px rgba(34, 211, 238, 0.03),
      0 16px 38px rgba(2, 8, 23, 0.36),
      0 0 5px rgba(34, 211, 238, 0.06);
  }
  62% {
    border-color: rgba(165, 243, 252, 0.88);
    outline-color: rgba(167, 139, 250, 0.56);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 24px rgba(34, 211, 238, 0.11),
      0 0 0 1px rgba(167, 139, 250, 0.28),
      0 18px 42px rgba(2, 8, 23, 0.38),
      0 0 16px rgba(103, 232, 249, 0.46),
      0 0 32px rgba(139, 92, 246, 0.24);
  }
}

@keyframes gb-hero-corner-lights {
  0%, 100% { opacity: 0.28; filter: brightness(0.85) drop-shadow(0 0 6px rgba(103, 232, 249, 0.55)); }
  25% { opacity: 1; filter: brightness(1.65) drop-shadow(0 0 12px rgba(103, 232, 249, 0.95)); }
  50% { opacity: 0.42; filter: brightness(1.05) drop-shadow(0 0 8px rgba(96, 165, 250, 0.72)); }
  75% { opacity: 0.88; filter: brightness(1.45) drop-shadow(0 0 14px rgba(167, 139, 250, 0.82)); }
}

@keyframes gb-hero-atmosphere {
  from { opacity: 0.42; transform: translate3d(-4px, 0, 0); }
  to { opacity: 0.78; transform: translate3d(5px, -2px, 0); }
}

@media (max-width: 767px) {
  html body #app main#main > .hp-hero-wrap {
    padding: 12px 0 !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider {
    width: calc(100% - 16px) !important;
    padding: 5px !important;
    border-radius: 15px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider::before {
    inset: -1px !important;
    padding: 1px !important;
    border-radius: 16px !important;
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.62)) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider::after {
    inset: -4px !important;
    border-radius: 17px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider
    .hero-slide-link {
    border-radius: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app main#main > .hp-hero-wrap::before,
  html body #app main#main > .hp-hero-wrap .hero-area-slider,
  html body #app main#main > .hp-hero-wrap .hero-area-slider::before,
  html body #app main#main > .hp-hero-wrap .hero-area-slider::after {
    animation: none !important;
  }
}

/* ==========================================================================
   CRITICAL SECTION TITLES - TEK SATIR + SVG İKON + HAREKETLİ ALT IŞIK
   ========================================================================== */
html body #app main#main
  .section-header
  .section-title {
  display: inline-flex !important;
  position: relative !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 46px !important;
  padding: 4px 18px 8px 0 !important;
  gap: 10px !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

html body #app main#main
  .section-header
  .section-title
  .title.gb-section-title-text,
html body #app main#main
  .section-header
  .section-title
  .title.gambleron-section-title {
  display: inline-flex !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  flex: 0 1 auto !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  overflow: visible !important;
  color: #F4F3FA !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

html body #app main#main
  .section-title
  .gambleron-title-main,
html body #app main#main
  .section-title
  .gambleron-title-accent {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  line-height: inherit !important;
  white-space: pre !important;
  writing-mode: horizontal-tb !important;
  word-break: keep-all !important;
}

html body #app main#main
  .section-title
  .gambleron-title-main {
  color: #F4F3FA !important;
  -webkit-text-fill-color: #F4F3FA !important;
  text-shadow: 0 1px 3px rgba(2, 8, 23, 0.54) !important;
}

html body #app main#main
  .section-title
  .gambleron-title-accent {
  color: #2EC2F5 !important;
  background: linear-gradient(90deg, #2EC2F5 0%, #3494EB 46%, #8123EC 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 7px rgba(56, 189, 248, 0.26)) !important;
}

html body #app main#main
  .section-header
  .section-title
  .icon.gb-section-title-icon {
  box-sizing: border-box !important;
  display: inline-grid !important;
  position: relative !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 38px !important;
  place-items: center !important;
  color: #2EC2F5 !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(165, 243, 252, 0.18), transparent 45%),
    linear-gradient(145deg, rgba(34, 211, 238, 0.17), rgba(37, 99, 235, 0.18) 56%, rgba(139, 92, 246, 0.16)) !important;
  border: 1px solid rgba(125, 211, 252, 0.42) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 12px rgba(34, 211, 238, 0.12) !important;
  overflow: visible !important;
  animation: gb-section-icon-glow 2.2s ease-in-out infinite alternate !important;
}

html body #app main#main
  .section-title
  .icon.gb-section-title-icon[data-gb-section-icon="original"],
html body #app main#main
  .section-title
  .icon.gb-section-title-icon[data-gb-section-icon="tournament"] {
  color: #8123EC !important;
  border-color: rgba(196, 181, 253, 0.46) !important;
}

html body #app main#main
  .section-title
  .icon.gb-section-title-icon[data-gb-section-icon="live"],
html body #app main#main
  .section-title
  .icon.gb-section-title-icon[data-gb-section-icon="sport"] {
  color: #2EC2F5 !important;
  border-color: rgba(125, 211, 252, 0.54) !important;
}

html body #app main#main
  .section-header
  .section-title
  .gb-section-title-svg {
  display: block !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 8px rgba(56, 189, 248, 0.20)) !important;
}

/* Yalnızca başlığın altında çalışan sağa-sola tarama ışığı. */
html body #app main#main
  .section-header
  .section-title::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 48px !important;
  right: auto !important;
  bottom: 1px !important;
  width: 174px !important;
  height: 1px !important;
  pointer-events: none !important;
  opacity: 0.42 !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(103, 232, 249, 0.38) 18%,
      rgba(96, 165, 250, 0.48) 52%,
      rgba(167, 139, 250, 0.32) 78%,
      transparent 100%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  border-radius: 99px !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.36)) !important;
  transform: translate3d(0, 0, 0) !important;
  animation: none !important;
}

/* Gerçek hareket eden ışık: JS Web Animations API tarafından yönetilir. */
html body #app main#main
  .section-header
  .section-title
  > .gb-section-title-scan {
  display: block !important;
  position: absolute !important;
  z-index: 3 !important;
  left: 48px !important;
  bottom: 0 !important;
  width: 58px !important;
  height: 3px !important;
  pointer-events: none !important;
  opacity: 1;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(165, 243, 252, 0.34) 16%,
      #F4F3FA 42%,
      #2EC2F5 54%,
      #3494EB 70%,
      transparent 100%
    ) !important;
  border-radius: 99px !important;
  box-shadow:
    0 0 5px rgba(103, 232, 249, 0.90),
    0 0 12px rgba(37, 99, 235, 0.48) !important;
  transform-origin: center !important;
  will-change: transform, opacity, filter !important;
}

@keyframes gb-section-underline-scan {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.38;
    filter:
      drop-shadow(0 0 2px rgba(103, 232, 249, 0.46))
      brightness(0.82);
  }
  48% {
    opacity: 1;
    filter:
      drop-shadow(0 0 5px rgba(103, 232, 249, 0.96))
      drop-shadow(0 0 10px rgba(37, 99, 235, 0.44))
      brightness(1.28);
  }
  100% {
    transform: translate3d(var(--gb-section-line-travel), 0, 0);
    opacity: 0.52;
    filter:
      drop-shadow(0 0 3px rgba(167, 139, 250, 0.70))
      brightness(1);
  }
}

@keyframes gb-section-icon-glow {
  from {
    transform: translateY(0) scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 7px rgba(34, 211, 238, 0.09);
  }
  to {
    transform: translateY(-1px) scale(1.035);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 12px rgba(103, 232, 249, 0.26),
      0 0 20px rgba(37, 99, 235, 0.12);
  }
}

@media (max-width: 575px) {
  html body #app main#main
    .section-header
    .section-title {
    min-height: 40px !important;
    padding-right: 8px !important;
    gap: 8px !important;
  }

  html body #app main#main
    .section-header
    .section-title
    .icon.gb-section-title-icon {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 9px !important;
  }

  html body #app main#main
    .section-header
    .section-title
    .gb-section-title-svg {
    width: 19px !important;
    min-width: 19px !important;
    height: 19px !important;
  }

  html body #app main#main
    .section-header
    .section-title
    .title.gb-section-title-text {
    font-size: 12px !important;
  }

  html body #app main#main
    .section-header
    .section-title::after {
    left: 40px !important;
    width: 102px !important;
  }

  html body #app main#main
    .section-header
    .section-title
    > .gb-section-title-scan {
    left: 40px !important;
    width: 42px !important;
    height: 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app main#main
    .section-header
    .section-title
    .icon.gb-section-title-icon {
    animation: none !important;
  }
}

/* ==========================================================================
   GLOBAL MOTION LIGHT POLISH - YUMUŞAK UÇLU IŞIK HUZMELERİ
   ========================================================================== */
html body #app main#main
  .section-header
  .section-title
  > .gb-section-title-scan {
  width: 76px !important;
  height: 4px !important;
  background:
    radial-gradient(
      ellipse 50% 50% at 50% 50%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(165, 243, 252, 0.92) 12%,
      rgba(103, 232, 249, 0.72) 27%,
      rgba(56, 189, 248, 0.38) 46%,
      rgba(37, 99, 235, 0.13) 63%,
      transparent 80%
    ) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* Aktif sidebar butonunun border üzerinde dolaşan ışığı. */
html body #app
  #responsive-menu.responsive-menu
  .sb-top
  > .sb-top-btn.active::before {
  width: 44px !important;
  height: 5px !important;
  background:
    radial-gradient(
      ellipse 50% 50% at 50% 50%,
      #F4F3FA 0%,
      rgba(165, 243, 252, 0.94) 13%,
      rgba(56, 189, 248, 0.68) 31%,
      rgba(37, 99, 235, 0.24) 52%,
      transparent 78%
    ) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 3px rgba(103, 232, 249, 0.82))
    drop-shadow(0 0 7px rgba(37, 99, 235, 0.32)) !important;
}

/* Menü başlığı altındaki ışık: merkez parlak, uçlar tamamen erir. */
html body #app
  #responsive-menu.responsive-menu
  .menu-head::after,
html body.sb-collapsed #app
  #responsive-menu.gb-sidebar-compact
  .menu-head::after {
  background:
    radial-gradient(
      ellipse 55% 80% at 50% 50%,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(103, 232, 249, 0.72) 18%,
      rgba(96, 165, 250, 0.36) 38%,
      rgba(167, 139, 250, 0.13) 58%,
      transparent 82%
    ) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.48)) !important;
}

/* Header altı yatay ışık. */
html body #app header#header::after {
  background:
    radial-gradient(
      ellipse 50% 55% at 50% 50%,
      #F4F3FA 0%,
      rgba(103, 232, 249, 0.88) 14%,
      rgba(56, 189, 248, 0.50) 34%,
      rgba(139, 92, 246, 0.18) 56%,
      transparent 82%
    ) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.58)) !important;
}

/* Sidebar sağ kenarındaki dikey ışık. */
html body #app #responsive-menu.responsive-menu::after,
html body #app #responsive-menu.responsive-menu:not(.active-menu)::after {
  background:
    radial-gradient(
      ellipse 55% 50% at 50% 50%,
      #F4F3FA 0%,
      rgba(103, 232, 249, 0.88) 14%,
      rgba(56, 189, 248, 0.48) 34%,
      rgba(139, 92, 246, 0.16) 56%,
      transparent 82%
    ) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.62)) !important;
}

/* Sidebar iç separator parlamaları. */
html body #app
  #responsive-menu.responsive-menu
  .sidebar-section-title.gb-empty-separator
  .sidebar-section-title__line::after {
  background:
    radial-gradient(
      ellipse 50% 70% at 50% 50%,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(103, 232, 249, 0.76) 17%,
      rgba(56, 189, 248, 0.38) 38%,
      rgba(139, 92, 246, 0.13) 58%,
      transparent 82%
    ) !important;
  border-radius: 50% !important;
}

@media (max-width: 575px) {
  html body #app main#main
    .section-header
    .section-title
    > .gb-section-title-scan {
    width: 54px !important;
    height: 3px !important;
  }
}

/* ==========================================================================
   SIDEBAR ÇARK ÇEVİR - RENKLİ DÖN / YAVAŞLA / DUR İKONU
   ========================================================================== */
html body #app
  #responsive-menu.responsive-menu
  .icon.gb-wheel-menu-icon {
  display: inline-grid !important;
  position: relative !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 38px !important;
  place-items: center !important;
  color: #2EC2F5 !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(6, 182, 212, 0.19), rgba(79, 70, 229, 0.22) 58%, rgba(236, 72, 153, 0.14)) !important;
  border: 1px solid rgba(165, 243, 252, 0.48) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 11px rgba(34, 211, 238, 0.18),
    0 0 18px rgba(139, 92, 246, 0.08) !important;
  overflow: visible !important;
  animation: gb-wheel-icon-aura 5.2s ease-in-out infinite !important;
}

html body #app
  #responsive-menu.responsive-menu
  .icon.gb-wheel-menu-icon::before,
html body #app
  #responsive-menu.responsive-menu
  .icon.gb-wheel-menu-icon::after {
  content: none !important;
  display: none !important;
}

.gb-menu-wheel {
  display: grid !important;
  width: 31px !important;
  height: 31px !important;
  place-items: center !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 0 4px rgba(103, 232, 249, 0.40))
    drop-shadow(0 0 7px rgba(139, 92, 246, 0.20)) !important;
}

.gb-menu-wheel > svg {
  display: block !important;
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  overflow: visible !important;
}

.gb-menu-wheel__rotor {
  transform-box: fill-box !important;
  transform-origin: center !important;
  animation: gb-wheel-spin-stop 5.2s cubic-bezier(.22, .64, .24, 1) infinite !important;
  will-change: transform !important;
}

.gb-menu-wheel__pointer {
  transform-box: fill-box !important;
  transform-origin: center bottom !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.88))
    drop-shadow(0 0 6px rgba(56, 189, 248, 0.58)) !important;
  animation: gb-wheel-pointer-tick 5.2s ease-in-out infinite !important;
}

html body #app
  #responsive-menu.responsive-menu
  a:hover
  .gb-menu-wheel__rotor,
html body #app
  #responsive-menu.responsive-menu
  button:hover
  .gb-menu-wheel__rotor {
  animation-duration: 3.6s !important;
}

@keyframes gb-wheel-spin-stop {
  0%,
  14% {
    transform: rotate(0deg);
  }
  46% {
    transform: rotate(760deg);
  }
  61% {
    transform: rotate(980deg);
  }
  72% {
    transform: rotate(1060deg);
  }
  78%,
  100% {
    transform: rotate(1080deg);
  }
}

@keyframes gb-wheel-pointer-tick {
  0%,
  14%,
  78%,
  100% {
    transform: rotate(0deg);
  }
  28% {
    transform: rotate(-8deg);
  }
  38% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(-6deg);
  }
  62% {
    transform: rotate(4deg);
  }
  72% {
    transform: rotate(-2deg);
  }
}

@keyframes gb-wheel-icon-aura {
  0%,
  14%,
  78%,
  100% {
    border-color: rgba(165, 243, 252, 0.38);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 8px rgba(34, 211, 238, 0.12);
  }
  42% {
    border-color: rgba(196, 181, 253, 0.78);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 13px rgba(103, 232, 249, 0.34),
      0 0 22px rgba(139, 92, 246, 0.20);
  }
  68% {
    border-color: rgba(244, 114, 182, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 11px rgba(244, 114, 182, 0.22),
      0 0 18px rgba(56, 189, 248, 0.18);
  }
}

body.sb-collapsed #responsive-menu.responsive-menu
  .icon.gb-wheel-menu-icon {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex-basis: 44px !important;
  margin: 0 auto !important;
}

body.sb-collapsed #responsive-menu.responsive-menu
  .gb-menu-wheel,
body.sb-collapsed #responsive-menu.responsive-menu
  .gb-menu-wheel > svg {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}

@media (prefers-reduced-motion: reduce) {
  .gb-menu-wheel__rotor,
  .gb-menu-wheel__pointer,
  html body #app #responsive-menu.responsive-menu
    .icon.gb-wheel-menu-icon {
    animation: none !important;
  }
}

/* ==========================================================================
   HEADER LOGO - HAFİF KALP ATIŞI
   ========================================================================== */
html body #app header#header
  .middle-header
  .middle-header-container
  .logo,
html body #app header#header
  .middle-header
  .middle-header-container
  .responsive-logo {
  transform-origin: center center !important;
  will-change: transform, filter !important;
  animation: gb-header-logo-heartbeat 4.8s ease-in-out infinite !important;
}

html body #app header#header
  .middle-header
  .middle-header-container
  .logo
  img,
html body #app header#header
  .middle-header
  .middle-header-container
  .logo
  svg,
html body #app header#header
  .middle-header
  .middle-header-container
  .responsive-logo
  img,
html body #app header#header
  .middle-header
  .middle-header-container
  .responsive-logo
  svg {
  transform-origin: center center !important;
}

@keyframes gb-header-logo-heartbeat {
  0%,
  5%,
  32%,
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(56, 189, 248, 0));
  }
  10% {
    transform: scale(1.026);
    filter: brightness(1.035) drop-shadow(0 0 5px rgba(56, 189, 248, 0.16));
  }
  15% {
    transform: scale(0.994);
    filter: brightness(1);
  }
  21% {
    transform: scale(1.018);
    filter: brightness(1.025) drop-shadow(0 0 4px rgba(167, 139, 250, 0.12));
  }
  27% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app header#header
    .middle-header
    .middle-header-container
    .logo,
  html body #app header#header
    .middle-header
    .middle-header-container
    .responsive-logo {
    animation: none !important;
  }
}

/* Scoped variables for hero area slider */
.hero-area-slider {
  --hero-accent: var(--accent);
  --hero-accent-rgb: var(--accent-rgb);
  --hero-nav-bg: var(--slider-nav-bg);
  --hero-nav-bg-hover: var(--slider-nav-bg-hover);
  --hero-nav-border: var(--slider-nav-border);
  --hero-pagination-dot: var(--slider-pagination-dot);
  --hero-pagination-dot-active: var(--slider-pagination-dot-active);
}

/* Unified canvas */
html {
  background-color: var(--surface-bg) !important;
  background-image: radial-gradient(120% 70% at 50% -5%, rgba(255, 255, 255, 0.05), transparent 50%),
    radial-gradient(65% 40% at 100% 35%, rgba(var(--accent-rgb), 0.04), transparent 46%) !important;
}

body {
  background-color: var(--surface-bg) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 28%) !important;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main,
[role="main"] {
  background-color: var(--surface-bg) !important;
}

/* Ãœst bar */
header#header {
  border-bottom: 1px solid var(--surface-border-soft) !important;
  background: rgba(17, 17, 17, 0.82) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

/* Sol menü — hover */
#responsive-menu.responsive-menu a,
.sidebar .menu a,
.sidebar .submenu a,
.sidebar-menu a,
.accordion-menu a {
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.hero-area-slider .hero-slider-pagination .swiper-pagination-bullet-active {

  background: linear-gradient(135deg, #2EC2F5 0%, #286EEA 50%, #6C2DE0 100%) !important;
  width: 22px;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.35),
    0 0 18px rgba(37, 99, 235, 0.45) !important;
  border-radius: 999px;
  transform: translateY(-.5px);
}

.container vip6q__container .vip6qCard img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.vip6qCard__icon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 992px) {

  #responsive-menu.responsive-menu:after {
    opacity: 0 !important;
  }
}


#responsive-menu.responsive-menu .menu a:not(.active):hover,
#responsive-menu.responsive-menu .submenu a:not(.active):hover,
.sidebar .menu a:not(.active):hover,
.sidebar .submenu a:not(.active):hover,
.sidebar-menu a:not(.active):hover,
.accordion-menu a:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.045) !important;
  border-radius: 4px !important;
}

/* =========================================================
   GLOBAL THEME OVERRIDES FOR LEGACY SELECTORS
   ========================================================= */

/* Header buttons */
header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register {
  background-color: var(--header-register-bg) !important;
  color: var(--header-register-color) !important;
  border-radius: var(--btn-primary-radius);
  box-shadow: var(--btn-primary-shadow);
}

header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button {
  color: #fff !important;
  background: var(--wallet-btn-gradient) !important;
  border-radius: var(--radius-sm);
}

/* Primary action buttons */
.common-form-button .button,
form.general-form div.form-buttons button,
.auth div.auth-box form.auth-form div.form-buttons button,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  border-radius: var(--btn-primary-radius) !important;
  box-shadow: var(--btn-primary-shadow);
}

.common-form-button .button:hover,
form.general-form div.form-buttons button:hover,
.auth div.auth-box form.auth-form div.form-buttons button:hover,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:hover {
  background-color: var(--btn-primary-bg-hover) !important;
}

.common-form-button .button:active,
form.general-form div.form-buttons button:active,
.auth div.auth-box form.auth-form div.form-buttons button:active,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:active {
  background-color: var(--btn-primary-bg-active) !important;
  box-shadow: var(--btn-primary-shadow-active) !important;
}

/* Inputs */
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input,
form.general-form div.form-group div.form-item.form-item-text input,
form.general-form div.form-group div.form-item.form-item-password input,
form.general-form div.form-group div.form-item.form-item-select select,
.phone-input,
.phone-input input {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  border-radius: var(--radius-xs) !important;
  color: var(--text-primary) !important;
}

.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input::placeholder,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input::placeholder,
form.general-form div.form-group div.form-item.form-item-text input::placeholder,
form.general-form div.form-group div.form-item.form-item-password input::placeholder {
  color: var(--input-placeholder) !important;
}

.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input:focus,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input:focus,
form.general-form div.form-group div.form-item.form-item-text input:focus,
form.general-form div.form-group div.form-item.form-item-password input:focus,
.phone-input input:focus {
  border-color: var(--input-border-focus) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Modals and cards */
.modal .modal-dialog .modal-content,
.modal-body,
#betModal .modal-dialog .modal-content .modal-body div.wallet-box,
#walletModal .modal-dialog .modal-content .modal-body div.wallet-box,
.auth-modal .modal-dialog .modal-content .modal-body {
  background: var(--modal-bg) !important;
  border: var(--border-thin) solid var(--modal-border);
  border-radius: var(--modal-radius) !important;
  box-shadow: var(--modal-shadow);
}

/* Wallet buttons */
#walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.deposit {
  background-color: var(--wallet-deposit-bg) !important;
  color: var(--brand-primary-contrast) !important;
}

/* #walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.withdraw {
    background-image: var(--wallet-withdraw-gradient) !important;
    color: var(--brand-primary-contrast) !important;
} */

#walletModal .modal-dialog .modal-content .modal-body div.wallet-footer a.button {
  background-color: var(--wallet-footer-btn-bg) !important;
  color: var(--wallet-footer-btn-color) !important;
  border-radius: var(--radius-xs) !important;
}

/* Tabs and chips */
.simple-bets .nav.nav-pills .nav-link.active,
.simple-bets .nav.nav-pills .nav-link[aria-selected="true"],
.simple-bets ul li button.active,
.simple-bets ul li button[aria-selected="true"] {
  color: var(--tab-active-color) !important;
  background-color: var(--tab-active-bg) !important;
  border-color: var(--tab-active-border) !important;
}

.faq__chip,
.ato-btn {
  border-color: var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-color);
  border-radius: var(--radius-pill);
}

/* .faq__chip.is-active,
.ato-btn.is-active {
  border-color: var(--chip-active-border) !important;
  background: var(--chip-active-bg) !important;
  color: var(--chip-active-color) !important;
} */

/* Animated tab indicator */
.ato-indicator {
  background: linear-gradient(to bottom,
      rgba(var(--accent-rgb), 0.72),
      rgba(var(--accent-rgb), 0.42)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.35) !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.22), inset 0 1px rgba(255, 255, 255, 0.18) !important;
}



#responsive-menu.responsive-menu:after {
  background: #2EC2F5 !important;
  opacity: 0 !important;
}

/* Progress bars */
div.progress-bar span,
.progress-fill,
.race-progress .line,
.simple-progress .fill {
  background: var(--progressbg) !important;
}

.progress-circle .progress-svg circle.circle-bg {
  stroke: rgba(168, 180, 196, 0.2);
}

.progress-circle .progress-svg circle.circle {
  stroke: var(--accent);
}

/* Game opener buttons */
.game-item div.game-top div.game-opener {
  border-color: var(--game-opener-border) !important;
  background: var(--game-opener-overlay) !important;
  border-radius: var(--radius-md);
}

.game-item div.game-top div.game-opener div.play-buttons span.button,
.game-item div.game-top div.game-opener div.play-buttons a.button {
  background-color: var(--game-play-btn-bg) !important;
  color: var(--game-play-btn-color) !important;
  border-radius: var(--radius-sm) !important;
}

.game-item div.game-top div.game-opener div.play-buttons span.button.demo,
.game-item div.game-top div.game-opener div.play-buttons a.button.demo {
  background-color: var(--game-demo-btn-bg) !important;
  color: var(--game-demo-btn-color) !important;
}

/* Race carousel CTA */
div.race-carousels div.slider-item .race-item div.head div.details div.buttons a.button {
  background-color: var(--accent) !important;
  color: var(--brand-primary-contrast) !important;
  border-color: var(--accent) !important;
  border-radius: var(--radius-xs) !important;
}

/* Sidebar */
.sidebar .menu a.active,
.sidebar .submenu a.active,
.sidebar-menu a.active,
.accordion-menu a.active {
  color: var(--text-primary) !important;
  background-color: rgba(var(--accent-rgb), 0.09) !important;
  border-radius: var(--radius-sm) !important;
}

#responsive-menu.responsive-menu .menu a.active,
#responsive-menu.responsive-menu .submenu a.active,
#responsive-menu.responsive-menu .accordion-menu a.active {
  color: var(--text-primary) !important;
  background-color: rgba(var(--accent-rgb), 0.1) !important;
  border-radius: var(--radius-sm) !important;
}

.lowbar .item.active {
  color: var(--accent) !important;
}

.sidebar .menu .active-indicator,
.accordion-menu .active-indicator,
.lowbar .indicator {
  background: var(--gradient-primary-horizontal) !important;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.22) !important;
  border-radius: var(--radius-pill);
}

/* FAQ background glow */
.faq__bg {
  filter: none !important;
  pointer-events: none;
  background:
    radial-gradient(700px 320px at 10% 0, rgba(var(--accent-rgb), 0.14), transparent 60%),
    radial-gradient(520px 260px at 100% 30%, rgba(255, 255, 255, 0.04), transparent 62%),
    radial-gradient(560px 300px at 20% 120%, rgba(var(--accent-rgb), 0.1), transparent 55%) !important;
}

/* Notification surfaces */
.notifications .notification-item,
.notification-item {
  background: var(--gradient-surface) !important;
  border: var(--border-thin) solid var(--surface-border-soft);
  border-radius: var(--radius-sm) !important;
}

.notifications .notification-item.unread,
.notification-item.unread {
  border-color: var(--accent-border) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

/* Generic utility mappings for old hardcoded palette usage */
.theme-bg-primary,
.bg-primary,
[data-theme="primary"] {
  background-color: var(--accent) !important;
  color: var(--brand-primary-contrast) !important;
}

.theme-surface,
.bg-surface,
[data-theme="surface"] {
  background-color: var(--legacy-bg-3) !important;
  color: var(--text-primary) !important;
}

.theme-muted,
.text-muted,
[data-theme="muted"] {
  color: var(--legacy-text-muted) !important;
}

/* Settings page theme tokens */
:root {
  --settings-sidebar-bg: rgba(12, 12, 12, 0.94);
  --settings-sidebar-border: rgba(255, 255, 255, 0.08);
  --settings-sidebar-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
  --settings-sidebar-radius: 14px;
  --settings-sidebar-select-bg: rgba(255, 255, 255, 0.04);
  --settings-sidebar-item-radius: 8px;
  --settings-sidebar-item-color: rgba(255, 255, 255, 0.68);
  --settings-sidebar-item-active-bg: linear-gradient(120deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.08));
  --settings-sidebar-active-color: #F4F3FA;

  --settings-content-bg: rgba(17, 17, 17, 0.94);
  --settings-content-border: rgba(255, 255, 255, 0.08);
  --settings-content-shadow: 0 24px 48px rgba(0, 0, 0, 0.42);
  --settings-content-radius: 14px;

  --settings-block-bg: rgba(10, 10, 10, 0.72);
  --settings-block-border: rgba(255, 255, 255, 0.08);
  --settings-block-divider: rgba(255, 255, 255, 0.08);
  --settings-block-header-bg: transparent;
  --settings-block-radius: 10px;
  --settings-block-title-color: rgba(255, 255, 255, 0.96);
  --settings-block-desc-color: rgba(255, 255, 255, 0.58);

  --settings-field-title-color: rgba(255, 255, 255, 0.88);
  --settings-control-bg: rgba(4, 4, 4, 0.85);
  --settings-control-border: rgba(255, 255, 255, 0.10);
  --settings-control-color: rgba(255, 255, 255, 0.92);
  --settings-control-radius: 8px;

  --settings-check-title-color: rgba(255, 255, 255, 0.92);
  --settings-check-desc-color: rgba(255, 255, 255, 0.55);

  /* Common page header */
  --page-header-radius: 8px;
  --page-header-bg: var(--linearbg);
  --page-header-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --page-header-top-line: linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0));
  --page-header-title-color: rgba(255, 255, 255, 0.96);
  --page-header-subtitle-color: rgba(255, 255, 255, 0.62);
  --page-header-icon-color: #0c0c0c;

  /* Blog detail */
  --blog-detail-shell-border: rgba(255, 255, 255, 0.08);
  --blog-detail-shell-radius: 12px;
  --blog-detail-shell-bg: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(17, 17, 17, 0.9));
  --blog-detail-shell-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
  --blog-detail-empty-border: rgba(255, 255, 255, 0.12);
  --blog-detail-empty-color: rgba(255, 255, 255, 0.75);
  --blog-detail-card-bg: rgba(255, 255, 255, 0.03);
  --blog-detail-close-border: rgba(255, 255, 255, 0.12);
  --blog-detail-close-bg: rgba(255, 255, 255, 0.05);
  --blog-detail-close-color: rgba(255, 255, 255, 0.9);
  --blog-detail-close-border-hover: rgba(255, 255, 255, 0.22);
  --blog-detail-close-bg-hover: rgba(255, 255, 255, 0.09);
  --blog-detail-image-border: rgba(255, 255, 255, 0.08);
  --blog-detail-title-color: #fff;
  --blog-detail-lead-color: rgba(255, 255, 255, 0.82);
  --blog-detail-time-color: rgba(255, 255, 255, 0.55);
  --blog-detail-content-color: rgba(255, 255, 255, 0.88);

  /* Policies page */
  --policies-content-bg: rgba(17, 17, 17, 0.92);
  --policies-content-color: var(--text-secondary);
  --policies-link-color: var(--accent);
  --policies-heading-color: #fff;

  /* Wheel page */
  --wheel-page-glow-a: rgba(var(--accent-rgb), 0.14);
  --wheel-page-glow-b: rgba(255, 255, 255, 0.05);
  --wheel-tabs-border: rgba(255, 255, 255, 0.08);
  --wheel-tabs-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  --wheel-tabs-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 24px rgba(0, 0, 0, 0.28);
  --wheel-tab-border: rgba(255, 255, 255, 0.12);
  --wheel-tab-bg: rgba(255, 255, 255, 0.04);
  --wheel-tab-color: rgba(255, 255, 255, 0.9);
  --wheel-tab-border-hover: rgba(255, 255, 255, 0.2);
  --wheel-tab-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --wheel-tab-shadow-hover: 0 10px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --wheel-chip-color: #fff;
  --wheel-chip-bg: rgba(var(--accent-rgb), 0.2);
  --wheel-chip-border: rgba(var(--accent-rgb), 0.36);
  --wheel-tab-active-border: rgba(var(--accent-rgb), 0.48);
  --wheel-tab-active-bg: linear-gradient(180deg, rgba(var(--accent-rgb), 0.88), rgba(var(--accent-rgb), 0.58));
  --wheel-tab-active-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.24);
  --wheel-card-border: rgba(255, 255, 255, 0.08);
  --wheel-card-bg: var(--modalbg);
  --wheel-card-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
  --wheel-stage-ring: rgba(255, 255, 255, 0.1);
  --wheel-stage-ring-outer: rgba(255, 255, 255, 0.03);
  --wheel-stage-plate-border: rgba(255, 255, 255, 0.12);
  --wheel-stage-plate-bg: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --wheel-stage-center-bg: radial-gradient(circle at 50% 35%, rgba(34, 34, 34, 0.92), rgba(17, 17, 17, 0.98));
  --wheel-stage-center-border: rgba(255, 255, 255, 0.2);
  --wheel-stage-center-ring: rgba(6, 6, 6, 0.55);
  --wheel-stage-center-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  --wheel-stage-center-highlight: rgba(255, 255, 255, 0.12);
  --wheel-halo-outer-border: rgba(var(--accent-rgb), 0.34);
  --wheel-halo-inner-border: rgba(var(--accent-rgb), 0.2);
  --wheel-halo-inner-shadow: inset 0 0 45px rgba(var(--accent-rgb), 0.14);
  --wheel-arrow-shadow: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  --wheel-spin-btn-border: rgba(255, 255, 255, 0.16);
  --wheel-spin-btn-bg: linear-gradient(180deg, rgba(34, 34, 34, 0.94), rgba(17, 17, 17, 0.97));
  --wheel-spin-btn-color: rgba(255, 255, 255, 0.96);
  --wheel-spin-btn-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --wheel-side-summary-border: rgba(255, 255, 255, 0.08);
  --wheel-side-summary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  --wheel-muted-text: rgba(255, 255, 255, 0.65);
  --wheel-strong-text: #fff;
  --wheel-status-border: rgba(255, 255, 255, 0.12);
  --wheel-status-bg: rgba(255, 255, 255, 0.04);
  --wheel-status-ready-color: #7dffb6;
  --wheel-status-ready-border: rgba(125, 255, 182, 0.32);
  --wheel-status-ready-bg: rgba(125, 255, 182, 0.1);
  --wheel-status-passive-color: rgba(255, 255, 255, 0.72);
  --wheel-article-border: rgba(255, 255, 255, 0.08);
  --wheel-article-bg: rgba(255, 255, 255, 0.02);
  --wheel-article-color: rgba(255, 255, 255, 0.88);
  --wheel-result-border: rgba(var(--accent-rgb), 0.22);
  --wheel-result-bg: rgba(var(--accent-rgb), 0.1);
  --wheel-register-btn-border: rgba(var(--accent-rgb), 0.48);
  --wheel-register-btn-bg: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.78));
  --wheel-register-btn-color: var(--brand-primary-contrast);
  --wheel-register-btn-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.22);

  /* Promotions cards */
  --promotion-hover-panel-bg: linear-gradient(180deg, rgba(26, 26, 26, 0.96), rgba(17, 17, 17, 0.98));
  --promotion-hover-panel-pattern: radial-gradient(620px 240px at 80% 20%, rgba(255, 255, 255, 0.04), transparent 66%);
  --promotion-hover-title-color: rgba(255, 255, 255, 0.96);
  --promotion-hover-desc-color: rgba(255, 255, 255, 0.62);
  --promotion-bottom-icon-color: var(--text-primary);
  --promotion-bottom-info-color: var(--text-muted);
}

/* Responsive menu (sidebar) background */
#responsive-menu.responsive-menu {
  background: radial-gradient(520px 260px at 0% 0%, rgba(var(--accent-rgb), .08), transparent 62%),
    linear-gradient(180deg, var(--sb-surface-1) 0%, var(--sb-surface-2) 100%) !important;
}

/* Sidebar collapsed state */
#responsive-menu.responsive-menu:not(.active-menu) {
  background: var(--sb-collapsed-bg) !important;
  border-right: var(--sb-collapsed-border) !important;
  box-shadow: var(--sb-collapsed-shadow) !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sb-top-btn {
  background: var(--sb-collapsed-btn-bg) !important;
  border: var(--sb-collapsed-btn-border) !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sb-top-btn.active,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__section.is-open .sl-acc__head {
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.22), inset 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* Sidebar top buttons */
#responsive-menu.responsive-menu.active-menu .sb-top-btn,
#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal {
  background: var(--sb-card-soft) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn.active {
  border-color: var(--sb-btn-active-border) !important;
  box-shadow: var(--sb-btn-active-shadow) !important;
  background: var(--sb-btn-active-bg) !important;
}

#responsive-menu.responsive-menu.active-menu .sidebar-section-title__line {
  background: var(--sb-section-line) !important;
}

/* Sol menü — üst başlık, casino/sports sekmeleri, arama, öne çıkan satırlar, akordeon satırları */
#responsive-menu.responsive-menu .sidebar-content {
  padding-bottom: 12px;
}

#responsive-menu.responsive-menu .menu-head {
  padding: 8px 10px 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--surface-border-soft);
}

#responsive-menu.responsive-menu .menu-head .head-left {
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  display: flex;
}

#responsive-menu.responsive-menu .menu-head .head-tabs {
  flex: 1 1 auto;
  min-width: 0;
}

#responsive-menu.responsive-menu .menu-head .head-tabs .head-tabs--plain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  width: 100%;
}

#responsive-menu.responsive-menu .menu-head .head-tabs .head-tab-btn {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  position: relative;
  overflow: hidden;
  background: var(--surface-2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}

#responsive-menu.responsive-menu .menu-head .head-tabs .head-tab-btn:hover {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.20);
}

#responsive-menu.responsive-menu .menu-head .head-tabs .head-tab-btn.active {
  background: rgba(var(--accent-rgb), 0.18) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}

#responsive-menu.responsive-menu .menu-head .head-tabs .head-tab-btn__label {
  color: var(--text-primary);
  font-family: var(--font-family-semibold);
  font-size: 13px;
  letter-spacing: 0.02em;
}

#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal {
  border-radius: 4px !important;
  border: 1px solid var(--surface-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn {
  position: relative;
  border-radius: 6px !important;
  border: 1px solid var(--surface-border-soft) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.16s var(--sidebar-ease), border-color 0.16s ease, box-shadow 0.16s ease;
  padding: 0 12px !important;
  height: 44px !important;
  min-height: 44px !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__head {
  border-radius: 6px !important;
  padding: 10px 12px;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn:not(.active):hover {
  border-color: rgba(var(--accent-rgb), 0.30) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(var(--accent-rgb), 0.12) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn.active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
}

#responsive-menu.responsive-menu.active-menu .sb-top-title {
  font-family: var(--font-family-semibold);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn.active .sb-top-title {
  color: var(--text-primary);
}

#responsive-menu.responsive-menu.active-menu .sb-top-arrow {
  opacity: 0.55;
  color: var(--text-muted);
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn.active .sb-top-arrow {
  opacity: 1;
  color: var(--accent);
}

#responsive-menu.responsive-menu.active-menu .sl-acc__section.is-open .sl-acc__head {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08), transparent) !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__itemInner {
  border-radius: 4px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s var(--sidebar-ease);
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:hover .sl-acc__itemInner {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.22) !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item.active .sl-acc__itemInner {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.32) !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__itemText {
  color: var(--legacy-text-muted);
  font-family: var(--font-family-semibold);
  font-size: 12px;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:hover .sl-acc__itemText,
#responsive-menu.responsive-menu.active-menu .sl-acc__item.active .sl-acc__itemText {
  color: var(--text-primary) !important;
}

/* Bölüm başlıkları */
#responsive-menu.responsive-menu .sidebar-section-title {
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.48) !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__section {
  position: relative;
  overflow: hidden;
  background: var(--sb-accordion-bg) !important;
  border: 1px solid var(--sb-accordion-border) !important;
  border-radius: 6px;
  box-shadow: var(--sb-accordion-shadow);
}

#responsive-menu.responsive-menu.active-menu .sl-acc__section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  opacity: 0.65;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.45), transparent);
}

/* Link hover */
a:hover {
  color: color-mix(in srgb, var(--accent) 82%, #F4F3FA 18%) !important;
}

/* Icon filters (replace blue with accent gold) */
div.general-header div.header-options ul.simple-nav li button.active span.icon img {
  filter: invert(71%) sepia(98%) saturate(467%) hue-rotate(6deg) brightness(103%) contrast(97%) !important;
}

.flex-table .flex-row .flex-cell div.game:hover span.icon {
  filter: invert(71%) sepia(98%) saturate(467%) hue-rotate(6deg) brightness(103%) contrast(97%) !important;
}

/* No-content empty state icon */
.no-content-svg {
  color: var(--accent) !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) !important;
}

/* Hero register button */
div.hero-box div.box-register a.register-button {
  background-color: var(--accent) !important;
  box-shadow: var(--shadow-accent-sm);
  color: #000 !important;
}

/* Entrance category card shadow */
div.enterence-box a.simple-category figure.item-image {
  box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Main search input — override hardcoded border */
div.main-search form.search-form {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: var(--top-search-form-bg) !important;
}

div.main-search form.search-form:focus-within {
  border-color: rgba(var(--accent-rgb), 0.30) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12) !important;
}

/* Header category tabs active/hover */
header#header div.middle-header div.middle-header-container div.categories a.category.active span.text,
header#header div.middle-header div.middle-header-container div.categories a.category:hover span.text {
  color: var(--accent) !important;
}

header#header div.middle-header div.middle-header-container div.categories a.category.active,
header#header div.middle-header div.middle-header-container div.categories a.category:hover {
  background: linear-gradient(0deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--accent-rgb), 0.18) 100%), var(--surface-2) !important;
}

/* Page form block buttons */
.page div.page-body div.page-content div.form-blocks div.form-block div.form-block-footer div.buttons button {
  background-color: var(--accent) !important;
}

/*
   Footer + alt bölüm
*/
#app,
#root,
.layout-content,
.page,
.page-body,
.page div.page-body,
.page div.page-content {
  background-color: var(--surface-bg) !important;
  background-image: radial-gradient(100% 42% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 68%) !important;
}

#footer,
footer#footer,
footer#footer>div,
footer#footer .footer-inner,
footer#footer .footer-top,
footer#footer .footer-bottom {
  background-color: var(--surface-bg) !important;
  background-image: none !important;
}

footer#footer {
  color: var(--text-muted) !important;
  border-top: 1px solid var(--surface-border-soft) !important;
}

footer#footer a {
  color: var(--text-secondary) !important;
}

footer#footer .footer-menus nav.footer-menu ul li span,
footer#footer .footer-menus nav.footer-menu ul li a {
  color: var(--text-secondary) !important;
}

footer#footer .footer-menus nav.footer-menu h3,
footer#footer .footer-menus nav.footer-menu h4,
footer#footer .footer-menus nav.footer-menu .title,
footer#footer .footer-menus nav.footer-menu .menu-title {
  color: var(--text-primary) !important;
}

/* Footer menu hover */
footer#footer div.footer-menus nav.footer-menu ul li:hover,
footer#footer div.footer-menus nav.footer-menu ul li:hover a {
  color: var(--accent) !important;
}

div.game-play div.game-before div.game-buttons span.button.real {
  background-color: var(--accent) !important;
  color: #000 !important;
}

.toast-6q .Toastify__progress-bar-theme--dark,
.toast-6q .Toastify__progress-bar--bg {
  background-color: var(--accent) !important;
}

.Toastify__toast.toast-6q-toast:after {
  background: none !important;
}

/* Logo */
header#header div.middle-header div.middle-header-container div.logo img,
header#header div.middle-header div.middle-header-container div.logo svg {
  top: 60% !important;
}

@media screen and (max-width: 1199px) {

  header#header div.middle-header div.middle-header-container div.logo {
    left: 40%;
  }


}




@media screen and (max-width: 1199px) {

  header#header div.middle-header div.middle-header-container div.responsive-logo img,
  header#header div.middle-header div.middle-header-container div.responsive-logo svg {
    max-width: unset;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -55%);

  }

  header#header div.middle-header div.middle-header-container div.responsive-logo {
    top: 5px !important;

  }


}

@media screen and (max-width: 991px) {

  header#header div.middle-header div.middle-header-container div.responsive-logo img,
  header#header div.middle-header div.middle-header-container div.responsive-logo svg {
    left: 50% !important;
  }

  .hero-area-slider .hero-area-slider-boot-card, .hero-area-slider.type-1 .hero-area-slider-boot-card, .hero-area-slider.type-2 .hero-area-slider-boot-card, .hero-area-slider.type-3 .hero-area-slider-boot-card, .hero-area-slider .hero-slide-media, .hero-area-slider.type-1 .hero-slide-media, .hero-area-slider.type-2 .hero-slide-media, .hero-area-slider.type-3 .hero-slide-media{
    aspect-ratio:16/7 !important;
  }



}

@media screen and (max-width: 768px) {
  header#header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }

  main,
  [role="main"],
  body.sportsbook-page header#header+div {
    margin-top: 60px;
  }
}

@media screen and (max-width: 575px) {
  header#header div.middle-header div.middle-header-container{
    justify-content: space-between !important;
  }
  header#header div.middle-header div.middle-header-container div.responsive-logo{
    width: 150px !important;
  }
  header#header div.middle-header div.middle-header-container div.header-buttons{
    width: unset !important;
  }
  header#header div.middle-header div.middle-header-container div.header-buttons{
    gap: 7px !important;
  }
  .header-minified-buttons{
    gap: 5px !important;
  }

}

/* modal */
.modal-body {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}



/* */
.copyright a[href*="hubgaming"] {
  display: none !important;
}

/* ========================================================================
   GAMBLERON PREMIUM UI OVERRIDES
   Generated from the approved black / charcoal / gold UX/UI direction.
   Keep this block at the very end of the stylesheet.
   ======================================================================== */

:root {
  --g-bg: #030817;
  --g-bg-deep: #020611;
  --g-surface-1: #071020;
  --g-surface-2: #0b1628;
  --g-surface-3: #101d31;
  --g-gold: #286EEA;
  --g-gold-light: #3494EB;
  --g-gold-dark: #286EEA;
  --g-text: #F4F3FA;
  --g-text-soft: rgba(255, 255, 255, .88);
  --g-text-muted: rgba(203, 215, 235, .66);
  --g-border: rgba(143, 170, 211, .13);
  --g-border-strong: rgba(143, 170, 211, .22);
  --g-border-gold: rgba(255, 212, 59, .52);
  --g-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  --g-shadow-hover: 0 18px 42px rgba(0, 0, 0, .52), 0 0 24px rgba(37, 99, 235, .08);

  /* Existing theme tokens redirected to the approved palette */
  --brand-primary: var(--g-gold);
  --brand-primary-rgb: 37, 99, 235;
  --brand-secondary: var(--g-gold-dark);
  --brand-secondary-rgb: 56, 189, 248;
  --accent: var(--g-gold);
  --accent-rgb: 37, 99, 235;
  --brand-primary-contrast: #F4F3FA;

  --surface-bg: var(--g-bg);
  --surface-bg-rgb: 3, 8, 23;
  --surface-1: var(--g-surface-1);
  --surface-2: var(--g-surface-2);
  --surface-3: var(--g-surface-3);
  --surface-4: #17263c;

  --gradient-primary: linear-gradient(135deg, var(--g-gold-light) 0%, var(--g-gold) 52%, var(--g-gold-dark) 100%);
  --gradient-primary-horizontal: linear-gradient(90deg, var(--g-gold-dark) 0%, var(--g-gold) 54%, var(--g-gold-light) 100%);
  --gradient-surface: linear-gradient(180deg, var(--g-surface-3) 0%, var(--g-surface-1) 100%);
  --btn-primary-bg: var(--gradient-primary);
  --btn-primary-color: #010627;
  --header-register-bg: var(--gradient-primary);
  --header-register-color: #010627;
  --wallet-btn-gradient: linear-gradient(90deg, #242426 0%, var(--g-gold) 100%);

  --slider-nav-bg: rgba(15, 15, 16, .86);
  --slider-nav-bg-hover: rgba(37, 99, 235, .14);
  --slider-nav-border: rgba(255, 255, 255, .12);
  --slider-pagination-dot: rgba(255, 255, 255, .32);
  --slider-pagination-dot-active: var(--g-gold);

  /* Sidebar tabs: one continuous visual gradient */
  --sidebar-tab-casino-bg-image: linear-gradient(90deg,
      var(--g-gold-light) 0%,
      var(--g-gold) 36%,
      #6C2DE0 70%,
      #252527 100%);
  --sidebar-tab-sportsbook-bg-image: linear-gradient(90deg,
      #252527 0%,
      #6C2DE0 30%,
      var(--g-gold) 66%,
      var(--g-gold-light) 100%);
}

/* ------------------------------------------------------------------------
   Canvas
   ------------------------------------------------------------------------ */
html,
body,
#__next,
#root,
main,
[role="main"] {
  background-color: var(--g-bg) !important;
  color: var(--g-text) !important;
}

body {
  background-image:
    radial-gradient(900px 380px at 18% -10%, rgba(37, 99, 235, .055), transparent 62%),
    linear-gradient(180deg, #010627 0%, #0f0f10 52%, #0a0a0b 100%) !important;
}

/* ------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------ */
header#header,
header#header .top-header,
header#header .middle-header,
header#header .menu-header,
.top-header,
.middle-header,
.menu-header {
  background: rgba(20, 20, 21, .96) !important;
  border-color: var(--g-border) !important;
  box-shadow: inset 0 -1px 0 rgba(37, 99, 235, .08), 0 10px 30px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

header#header a:not(.button),
header#header button:not(.button) {
  color: var(--g-text-soft) !important;
  transition: color .22s ease, opacity .22s ease, border-color .22s ease !important;
}

header#header a:not(.button):hover,
header#header button:not(.button):hover {
  color: var(--g-gold) !important;
}

/* Register */
header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register {
  background: var(--gradient-primary) !important;
  color: #010627 !important;
  border: 1px solid rgba(255, 226, 125, .46) !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255, 255, 255, .36) !important;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease !important;
}

header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px);
  box-shadow: 0 11px 26px rgba(37, 99, 235, .29), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

/* Login: dark outlined treatment */
header#header .login-buttons a.button:not(.register),
header#header .login-buttons button:not(.register) {
  background: transparent !important;
  color: var(--g-text-soft) !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  transition: color .22s ease, border-color .22s ease, background-color .22s ease !important;
}

header#header .login-buttons a.button:not(.register):hover,
header#header .login-buttons button:not(.register):hover {
  color: var(--g-gold) !important;
  border-color: var(--g-border-gold) !important;
  background: rgba(37, 99, 235, .05) !important;
}

/* ------------------------------------------------------------------------
   Sidebar shell and menu
   ------------------------------------------------------------------------ */
#responsive-menu.responsive-menu,
.sidebar,
.sidebar-wrapper,
.sidebar-content {
  background: linear-gradient(180deg, #010627 0%, #0c0c0d 100%) !important;
  border-color: var(--g-border) !important;
}

#responsive-menu.responsive-menu .menu a,
#responsive-menu.responsive-menu .submenu a,
.sidebar .menu a,
.sidebar .submenu a,
.sidebar-menu a,
.accordion-menu a,
#responsive-menu.responsive-menu.active-menu .sb-top-btn,
#responsive-menu.responsive-menu.active-menu .sl-acc__head {
  border: 1px solid transparent !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)) !important;
  border-radius: 8px !important;
  color: var(--g-text-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}

#responsive-menu.responsive-menu .menu a:not(.active):hover,
#responsive-menu.responsive-menu .submenu a:not(.active):hover,
.sidebar .menu a:not(.active):hover,
.sidebar .submenu a:not(.active):hover,
.sidebar-menu a:not(.active):hover,
.accordion-menu a:not(.active):hover,
#responsive-menu.responsive-menu.active-menu .sb-top-btn:not(.active):hover,
#responsive-menu.responsive-menu.active-menu .sl-acc__head:hover {
  background: #1a1a1c !important;
  border-color: rgba(37, 99, 235, .42) !important;
  color: var(--g-gold) !important;
  transform: translateX(3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

#responsive-menu.responsive-menu .menu a.active,
#responsive-menu.responsive-menu .submenu a.active,
#responsive-menu.responsive-menu .accordion-menu a.active,
.sidebar .menu a.active,
.sidebar .submenu a.active,
.sidebar-menu a.active,
.accordion-menu a.active,
#responsive-menu.responsive-menu.active-menu .sb-top-btn.active,
#responsive-menu.responsive-menu.active-menu .sl-acc__section.is-open .sl-acc__head {
  position: relative !important;
  color: var(--g-text) !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, .13), rgba(255, 255, 255, .025)) !important;
  border-color: rgba(37, 99, 235, .32) !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

/* Left gold indicator, without requiring new HTML */
#responsive-menu.responsive-menu .menu a.active::after,
.sidebar .menu a.active::after,
.sidebar-menu a.active::after,
.accordion-menu a.active::after,
#responsive-menu.responsive-menu.active-menu .sb-top-btn.active::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--gradient-primary);
  box-shadow: 0 0 12px rgba(37, 99, 235, .30);
}

/* Casino / Sportsbook paired buttons */
.p2seg.casino .p2bg {
  background-image: none !important;
}

.p2seg.sportsbook .p2bg {
  background-image: none !important;
}

.p2seg.casino:hover .p2bg {
  background-image: none !important;
  border: 2px solid #ff447f;
}

.p2seg.sportsbook:hover .p2bg {
  background-image: none !important;
  border: 2px solid #ff447f;
}

/* ------------------------------------------------------------------------
   Hero slider
   ------------------------------------------------------------------------ */
.hero-area-slider .hero-slide-link,
body a.hero-slide-link {
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34) !important;
  transition: border-color .26s ease, box-shadow .26s ease, transform .26s ease !important;
}

.hero-area-slider .hero-slide-link:hover,
body a.hero-slide-link:hover {
  border-color: rgba(37, 99, 235, .62) !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .46), 0 0 26px rgba(37, 99, 235, .08) !important;
}

.hero-area-slider .hero-nav-btn,
.hero-area-slider .swiper-button-prev,
.hero-area-slider .swiper-button-next {
  background: rgba(15, 15, 16, .82) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .22s ease, border-color .22s ease, transform .22s ease, background-color .22s ease !important;
}

.hero-area-slider .hero-nav-btn:hover,
.hero-area-slider .swiper-button-prev:hover,
.hero-area-slider .swiper-button-next:hover {
  background: rgba(37, 99, 235, .10) !important;
  color: var(--g-gold) !important;
  border-color: rgba(37, 99, 235, .58) !important;
  transform: scale(1.05);
}

.hero-area-slider .hero-slider-pagination .swiper-pagination-bullet {
  background: rgba(255, 255, 255, .33) !important;
  opacity: 1 !important;
  transition: width .22s ease, background-color .22s ease, box-shadow .22s ease !important;
}

.hero-area-slider .hero-slider-pagination .swiper-pagination-bullet-active {
  width: 22px !important;
  border-radius: 999px !important;
  background: var(--gradient-primary) !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .28), 0 0 16px rgba(37, 99, 235, .30) !important;
}

/* ------------------------------------------------------------------------
   Search fields
   ------------------------------------------------------------------------ */
div.main-search form.search-form,
.search-box,
.search-form {
  background: linear-gradient(180deg, #1c1c1e 0%, #151516 100%) !important;
  border: 1px solid var(--g-border-strong) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  transition: border-color .22s ease, box-shadow .22s ease !important;
}

div.main-search form.search-form:focus-within,
.search-box:focus-within,
.search-form:focus-within {
  border-color: rgba(37, 99, 235, .62) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .11), 0 10px 24px rgba(0, 0, 0, .25) !important;
}

div.main-search form.search-form input,
.search-box input,
.search-form input {
  background: transparent !important;
  border: 0 !important;
  color: var(--g-text) !important;
  box-shadow: none !important;
}

div.main-search form.search-form input::placeholder,
.search-box input::placeholder,
.search-form input::placeholder {
  color: var(--g-text-muted) !important;
}

/* ------------------------------------------------------------------------
   Cards, game tiles and panels
   ------------------------------------------------------------------------ */
.game-item,
.game-card,
.category-item,
.home-category-item,
.provider-item,
.provider-card,
.promotion-item,
.bonus-card,
.wallet-box,
.league-card,
.card,
.panel {
  border: none !important;
  background: none !important;
  border-radius: 10px !important;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease !important;
}

.game-item div.game-details {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  margin-left: -5px;
}

.game-item:hover,
.game-card:hover,
.category-item:hover,
.home-category-item:hover,
.provider-item:hover,
.provider-card:hover,
.promotion-item:hover,
.bonus-card:hover,
.league-card:hover {
  transform: translateY(-4px) !important;
  border-color: none !important;
  box-shadow: var(--g-shadow-hover) !important;
}

/* Game overlay */
.game-item div.game-top div.game-opener,
.game-item .game-opener {
  background: rgba(10, 10, 11, .82) !important;
  border: 1px solid rgba(37, 99, 235, .48) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.game-item div.game-top div.game-opener div.play-buttons span.button,
.game-item div.game-top div.game-opener div.play-buttons a.button,
.game-item .game-opener .button {
  background: var(--gradient-primary) !important;
  color: #010627 !important;
  border: 1px solid rgba(255, 226, 125, .42) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
}

/* ------------------------------------------------------------------------
   Live winners / horizontal result strips
   Multiple aliases are included because installations differ.
   ------------------------------------------------------------------------ */
.live-winners,
.live-winner,
.live-winners-wrapper,
.live-winners-container,
.winners-slider,
.winner-list,
.last-winners,
.live-casino-winners {
  background: linear-gradient(180deg, #18181a 0%, #010627 100%) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 11px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important;
}

.live-winners .amount,
.live-winner .amount,
.winner-list .amount,
.last-winners .amount,
.live-casino-winners .amount {
  color: var(--g-gold) !important;
}

/* ------------------------------------------------------------------------
   Section controls: show-all and carousel navigation
   ------------------------------------------------------------------------ */
.show-all,
.hepsini-goster,
.section-button,
a.show-all,
button.show-all,
.carousel-nav button,
.slider-navigation button,
.slider-nav button {
  background: #1a1a1c !important;
  color: var(--g-text-soft) !important;
  border: 1px solid var(--g-border-strong) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease !important;
}

.show-all:hover,
.hepsini-goster:hover,
.section-button:hover,
a.show-all:hover,
button.show-all:hover,
.carousel-nav button:hover,
.slider-navigation button:hover,
.slider-nav button:hover {
  background: rgba(37, 99, 235, .06) !important;
  color: var(--g-gold) !important;
  border-color: rgba(37, 99, 235, .52) !important;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------------
   Primary buttons globally, but avoid forcing navigation links
   ------------------------------------------------------------------------ */
.btn-primary,
button[type="submit"],
.common-form-button .button,
form.general-form div.form-buttons button,
.auth div.auth-box form.auth-form div.form-buttons button,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button {
  background: var(--gradient-primary) !important;
  color: #010627 !important;
  border: 1px solid rgba(255, 226, 125, .42) !important;
  box-shadow: 0 9px 22px rgba(37, 99, 235, .20) !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.common-form-button .button:hover,
form.general-form div.form-buttons button:hover,
.auth div.auth-box form.auth-form div.form-buttons button:hover,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:hover {
  filter: brightness(1.06);
  box-shadow: 0 11px 26px rgba(37, 99, 235, .27) !important;
}

/* ------------------------------------------------------------------------
   Prevent the old global a:hover rule from recoloring button text incorrectly
   ------------------------------------------------------------------------ */
header#header a.button.register:hover,
.btn-primary:hover,
.common-form-button .button:hover,
.game-item .game-opener .button:hover {
  color: #010627 !important;
}

/* ------------------------------------------------------------------------
   Mobile adjustments
   ------------------------------------------------------------------------ */
@media (max-width: 992px) {
  header#header {
    background: rgba(17, 17, 18, .98) !important;
  }

  .game-item:hover,
  .game-card:hover {
    transform: none !important;
  }

  #responsive-menu.responsive-menu .menu a:not(.active):hover,
  #responsive-menu.responsive-menu .submenu a:not(.active):hover {
    transform: none;
  }
}

:root {
  --sidebar-tab-casino-bg-image: linear-gradient(90deg,
      #2EC2F5 0%,
      #286EEA 38%,
      #286EEA 72%,
      #242424 100%);

  --sidebar-tab-sportsbook-bg-image: linear-gradient(90deg,
      #242424 0%,
      #286EEA 28%,
      #286EEA 65%,
      #2EC2F5 100%);
}

/* wallet bitiÅŸ */

/* =========================================================
   GAMBLERON — WALLET BUTTONS
   Yatırma, çekme, cüzdan ve footer butonları
   ========================================================= */

:root {
  /* Ana altın tonları */
  --wallet-gold-light: #2EC2F5;
  --wallet-gold: #286EEA;
  --wallet-gold-dark: #6C2DE0;

  /* Koyu yüzeyler */
  --wallet-dark-light: #2a2a2a;
  --wallet-dark: #010627;
  --wallet-dark-deep: #010627;

  /* Sistem deÄŸiÅŸkenlerini yeni temaya baÄŸlar */
  --wallet-btn-bg-start: #2a2a2a;
  --wallet-btn-bg-end: #286EEA;

  --wallet-btn-gradient: linear-gradient(90deg,
      #2a2a2a 0%,
      #286EEA 42%,
      #286EEA 100%);

  --wallet-deposit-bg: linear-gradient(135deg,
      #2EC2F5 0%,
      #286EEA 52%,
      #6C2DE0 100%);

  --wallet-withdraw-gradient: linear-gradient(135deg,
      #2a2a2a 0%,
      #010627 55%,
      #010627 100%);

  --wallet-footer-btn-bg: linear-gradient(180deg,
      #262626 0%,
      #171717 100%);

  --wallet-footer-btn-color: #F4F3FA;
}

/* =========================================================
   HEADER CÃœZDAN BUTONU
   ========================================================= */

header#header .middle-header .middle-header-container .header-buttons .wallet-menu .current-wallet a.wallet-button {
  background: var(--wallet-btn-gradient) !important;
  color: #010627 !important;

  border: 1px solid rgba(103, 232, 249, 0.5) !important;
  border-radius: 8px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 7px 18px rgba(37, 99, 235, 0.18) !important;

  transition:
    filter 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease !important;
}

header#header .middle-header .middle-header-container .header-buttons .wallet-menu .current-wallet a.wallet-button:hover {
  filter: brightness(1.08);

  border-color: rgba(103, 232, 249, 0.85) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 9px 22px rgba(37, 99, 235, 0.28) !important;

  transform: translateY(-1px);
}

/* =========================================================
   PARA YATIR BUTONU
   ========================================================= */

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-normal .wallet-body .wallet-buttons span.button.deposit,

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-normal .wallet-body .wallet-buttons a.button.deposit,

.wallet-button.deposit,
span.button.deposit,
a.button.deposit {
  background: linear-gradient(135deg,
      #2EC2F5 0%,
      #286EEA 52%,
      #6C2DE0 100%) !important;

  color: #010627 !important;

  border: 1px solid rgba(255, 226, 125, 0.52) !important;
  border-radius: 8px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 20px rgba(37, 99, 235, 0.24) !important;

  font-weight: 700 !important;

  transition:
    filter 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease !important;
}

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-normal .wallet-body .wallet-buttons span.button.deposit:hover,

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-normal .wallet-body .wallet-buttons a.button.deposit:hover,

.wallet-button.deposit:hover,
span.button.deposit:hover,
a.button.deposit:hover {
  filter: brightness(1.08);

  border-color: rgba(255, 226, 125, 0.9) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 25px rgba(37, 99, 235, 0.34) !important;

  transform: translateY(-1px);
}

/* =========================================================
   PARA ÇEK BUTONU
   Sarı dolu yerine premium koyu görünüm
   ========================================================= */

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-normal .wallet-body .wallet-buttons span.button.withdraw,

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-normal .wallet-body .wallet-buttons a.button.withdraw,
.wallet-button.withdraw,
span.button.withdraw,
a.button.withdraw {
  background: linear-gradient(180deg,
      #292929 0%,
      #010627 100%) !important;

  color: #2EC2F5 !important;

  border: 1px solid rgba(37, 99, 235, 0.45) !important;
  border-radius: 8px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 7px 18px rgba(0, 0, 0, 0.3) !important;

  font-weight: 700 !important;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease !important;
}

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-normal .wallet-body .wallet-buttons span.button.withdraw:hover,

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-normal .wallet-body .wallet-buttons a.button.withdraw:hover,

.wallet-button.withdraw:hover,
span.button.withdraw:hover,
a.button.withdraw:hover {
  background: linear-gradient(180deg,
      rgba(37, 99, 235, 0.16) 0%,
      rgba(37, 99, 235, 0.05) 100%) !important;

  color: #2EC2F5 !important;

  border-color: rgba(103, 232, 249, 0.85) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 16px rgba(37, 99, 235, 0.18),
    0 9px 22px rgba(0, 0, 0, 0.32) !important;

  transform: translateY(-1px);
}

/* =========================================================
   WALLET FOOTER BUTONLARI
   ========================================================= */

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-footer a.button,

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-footer button {
  background: linear-gradient(180deg,
      #282828 0%,
      #010627 100%) !important;

  color: rgba(255, 255, 255, 0.9) !important;

  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 16px rgba(0, 0, 0, 0.26) !important;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease !important;
}

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-footer a.button:hover,

#walletModal .modal-dialog .modal-content .modal-body .wallet-box .wallet-footer button:hover {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2EC2F5 !important;

  border-color: rgba(37, 99, 235, 0.58) !important;

  box-shadow:
    0 0 14px rgba(37, 99, 235, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.3) !important;

  transform: translateY(-1px);
}

/* =========================================================
   WALLET İÇİNDEKİ SVG İKONLAR
   ========================================================= */

.wallet-button svg,
.wallet-buttons .button svg,
.wallet-footer .button svg {
  color: currentColor !important;
  fill: currentColor !important;
}

.wallet-button svg path,
.wallet-buttons .button svg path,
.wallet-footer .button svg path {
  color: currentColor !important;
  fill: currentColor !important;
}

header#header .middle-header .middle-header-container .header-buttons .wallet-menu .current-wallet a.wallet-button {
  background: linear-gradient(90deg,
      #2a2a2a 0%,
      #1e3a8a 55%,
      #0ea5e9 100%) !important;

  color: #F4F3FA !important;

  border: 1px solid rgba(37, 99, 235, 0.42) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 16px rgba(0, 0, 0, 0.28) !important;
}

header#header .middle-header .middle-header-container .header-buttons .wallet-menu .current-wallet a.wallet-button:hover {
  background: linear-gradient(90deg,
      #303030 0%,
      #1e40af 55%,
      #6C2DE0 100%) !important;

  border-color: rgba(103, 232, 249, 0.65) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 20px rgba(0, 0, 0, 0.32),
    0 0 10px rgba(37, 99, 235, 0.10) !important;
}

/* wallet bitiÅŸ */

/* search button */
header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.opener-wallet div.coins-list form.coin-search button {
  height: 32px;
  border: none;
  background-color: transparent !important;
  width: 12px;
  padding: 0;
  background: transparent !important;
  border: transparent !important;
}

.hp-hero .hp-hero-bg {
  display: none !important;
}
div.enterence-box{
  background-image: url(https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/adgWQRGKOSFJGOWJORJGEWGHJaDSF/statics/caZFb4N5WjtzAEpBj6K9DaqnfwqLn7TX1WOtJrY5.png) !important;

}

header#header div.middle-header div.middle-header-container div.header-buttons div.notifications-box {
  cursor: pointer;
}


/* =========================================================
   GAMBLERON — CANLI KAZANÇLAR ALANI
   Gerçek HTML classları kullanılmıştır
   ========================================================= */

/* Tüm canlı kazançlar alanı */
.latestWins {
  position: relative !important;
  margin: 10px 0 18px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Canlı Kazançlar başlık alanı */
.latestWins__head {
  position: relative !important;
  z-index: 8 !important;

  display: flex !important;
  align-items: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Soldaki Canlı Kazançlar etiketi */
.latestWins__pill {
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  color: rgba(255, 255, 255, 0.92) !important;

  border: 1px solid rgba(37, 99, 235, 0.34) !important;
  border-radius: 5px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 5px 14px rgba(0, 0, 0, 0.32),
    0 0 12px rgba(37, 99, 235, 0.08) !important;
}

/* Başlığın solundaki yeşil noktayı altına çevir */
.latestWins__dot {
  background: #286EEA !important;

  border: 0 !important;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.12),
    0 0 10px rgba(37, 99, 235, 0.55) !important;
}

/* Oyunların bulunduğu ana viewport */
.latestWins__viewport {
  position: relative !important;
  overflow: hidden !important;


  .latestWins__viewport::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 52px !important;
    height: auto !important;

    z-index: 6 !important;
    pointer-events: none !important;

    background: linear-gradient(90deg,
        #010627 0%,
        rgba(17, 17, 17, 0.94) 28%,
        rgba(17, 17, 17, 0.58) 58%,
        rgba(17, 17, 17, 0) 100%) !important;

    box-shadow: none !important;
    opacity: 1 !important;
  }

  /* Sağ kenarda aynı koyu-altın fade */
  .latestWins__viewport::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;

    width: 58px !important;
    height: auto !important;

    z-index: 6 !important;
    pointer-events: none !important;

    background: linear-gradient(270deg,
        #010627 0%,
        rgba(17, 17, 17, 0.94) 28%,
        rgba(17, 17, 17, 0.58) 58%,
        rgba(17, 17, 17, 0) 100%) !important;

    box-shadow: none !important;
    opacity: 1 !important;
  }

  /* Swiper’ın kendi renkli zemin veya gölgesini temizle */
  .latestWins__swiper {
    position: relative !important;
    z-index: 1 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* Başlık hover olduğunda hafif altın vurgu */
  .latestWins__pill:hover {
    background: linear-gradient(90deg,
        rgba(37, 99, 235, 0.28) 0%,
        rgba(37, 99, 235, 0.13) 55%,
        rgba(22, 22, 22, 0.98) 100%) !important;

    border-color: rgba(103, 232, 249, 0.56) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 6px 16px rgba(0, 0, 0, 0.34),
      0 0 14px rgba(37, 99, 235, 0.12) !important;
  }

  .latestWins__playIcon {
    color: #3494EB;
    background-color: transparent;
  
    }
  }

  /* =========================================================
   SIDEBAR SOL ALT — ALTIN TOZ GÖRSELİ
   ========================================================= */

#responsive-menu.responsive-menu
.sidebar-wrapper.sb-fade-slide {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Altın toz görseli */
#responsive-menu.responsive-menu
.sidebar-wrapper.sb-fade-slide::after {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: 64% !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(17, 17, 17, 1) 0%,
      rgba(17, 17, 17, 0.25) 22%,
      rgba(17, 17, 17, 0) 45%
    ),
    url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/adgWQRGKOSFJGOWJORJGEWGHJaDSF/statics/haMXDwpJ8P1GLA8TTSNwce8nbwMnAl9r2eo4CaEu.png") !important;

  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, left bottom !important;
  opacity: 0.48 !important;
  filter: brightness(0.72) saturate(0.9) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Menü içerikleri görselin üstünde kalsın */
#responsive-menu.responsive-menu
.sidebar-wrapper.sb-fade-slide > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Dil seçim alanı üstte kalsın */
#responsive-menu.responsive-menu
.sidebar-wrapper.sb-fade-slide
.sidebar-lang-footer {
  position: relative !important;
  z-index: 2 !important;
}

/* Mobilde efekti biraz azalt */
@media screen and (max-width: 992px) {
  #responsive-menu.responsive-menu
  .sidebar-wrapper.sb-fade-slide::after {
    height: 58% !important;
    opacity: 0.38 !important;
  }
}


/* lowbar kodları */

/* =========================================================
   GAMBLERON — SAĞ ALT HIZLI İŞLEMLER FAB
   Ana buton + açılan aksiyon butonları + ikonlar + hover
   Mevcut ölçü, konum ve açılma animasyonunu bozmaz
   ========================================================= */

/* Tema renkleri */
.lowbar-fab.lowbar-fab--right.lowbar-fab--bottom {
  --fab-gold-light: #2EC2F5;
  --fab-gold: #286EEA;
  --fab-gold-dark: #6C2DE0;

  --fab-dark-1: #292929;
  --fab-dark-2: #010627;
  --fab-dark-3: #101010;

  --fab-border: rgba(37, 99, 235, 0.42);
  --fab-border-strong: rgba(103, 232, 249, 0.82);
}

/* =========================================================
   ANA YUVARLAK TETÄ°K BUTONU
   ========================================================= */

.lowbar-fab__trigger {
  background: linear-gradient(
    145deg,
    var(--fab-dark-1) 0%,
    var(--fab-dark-2) 58%,
    var(--fab-dark-3) 100%
  ) !important;

  background-image: linear-gradient(
    145deg,
    var(--fab-dark-1) 0%,
    var(--fab-dark-2) 58%,
    var(--fab-dark-3) 100%
  ) !important;

  color: var(--fab-gold-light) !important;

  border: 1px solid rgba(37, 99, 235, 0.52) !important;
  border-radius: 50% !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 9px 24px rgba(0, 0, 0, 0.42),
    0 0 14px rgba(37, 99, 235, 0.14) !important;

  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease !important;
}

/* Ana buton hover */
.lowbar-fab__trigger:hover {
  background: linear-gradient(
    145deg,
    rgba(37, 99, 235, 0.22) 0%,
    rgba(37, 99, 235, 0.08) 48%,
    #161616 100%
  ) !important;

  background-image: linear-gradient(
    145deg,
    rgba(37, 99, 235, 0.22) 0%,
    rgba(37, 99, 235, 0.08) 48%,
    #161616 100%
  ) !important;

  color: #2EC2F5 !important;
  border-color: var(--fab-border-strong) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 11px 28px rgba(0, 0, 0, 0.46),
    0 0 20px rgba(37, 99, 235, 0.24) !important;

  transform: translateY(-2px) scale(1.03) !important;
}

/* Açık durum */
.lowbar-fab__trigger[aria-expanded="true"] {
  background: linear-gradient(
    135deg,
    var(--fab-gold-light) 0%,
    var(--fab-gold) 52%,
    var(--fab-gold-dark) 100%
  ) !important;

  background-image: linear-gradient(
    135deg,
    var(--fab-gold-light) 0%,
    var(--fab-gold) 52%,
    var(--fab-gold-dark) 100%
  ) !important;

  color: #010627 !important;
  border-color: rgba(255, 226, 125, 0.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 25px rgba(0, 0, 0, 0.44),
    0 0 22px rgba(37, 99, 235, 0.28) !important;
}

/* Dış halkalar */
.lowbar-fab__trigger-rings::before,
.lowbar-fab__trigger-rings::after {
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.12) !important;
}

/* Açıkken halkalar */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-rings::before,
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-rings::after {
  border-color: rgba(103, 232, 249, 0.5) !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.2) !important;
}

/* Ana ikon alanları */
.lowbar-fab__trigger-core,
.lowbar-fab__trigger-glyph,
.lowbar-fab__trigger-glyph-menu,
.lowbar-fab__trigger-glyph-close {
  color: currentColor !important;
}

/* SVG ve img ikonları */
.lowbar-fab__trigger svg,
.lowbar-fab__trigger svg path {
  color: currentColor !important;
  fill: currentColor !important;
}

.lowbar-fab__trigger img {
  filter: none !important;
  opacity: 0.95;
}

/* Kapatma ikonu çizgileri */
.lowbar-fab__trigger-glyph-close::before,
.lowbar-fab__trigger-glyph-close::after,
.lowbar-fab__trigger-plus::before,
.lowbar-fab__trigger-plus::after {
  background: currentColor !important;
}

/* Küçük caret */
.lowbar-fab__trigger-caret::before {
  border-color: currentColor !important;
}

/* =========================================================
   AÇILAN AKSİYON BUTONLARI
   ========================================================= */

.lowbar-fab__action,
.lowbar-fab__action.is-home,
.lowbar-fab__action.is-support,
.lowbar-fab__action.is-login,
.lowbar-fab__action.is-register {
  background: linear-gradient(
    180deg,
    rgba(35, 35, 35, 0.98) 0%,
    rgba(18, 18, 18, 0.98) 100%
  ) !important;

  background-image: linear-gradient(
    180deg,
    rgba(35, 35, 35, 0.98) 0%,
    rgba(18, 18, 18, 0.98) 100%
  ) !important;

  color: rgba(255, 255, 255, 0.94) !important;

  border: 1px solid rgba(37, 99, 235, 0.34) !important;
  border-radius: 8px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.36),
    0 0 10px rgba(37, 99, 235, 0.06) !important;

  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease !important;
}

/* Hover */
.lowbar-fab__action:hover,
.lowbar-fab__action.is-home:hover,
.lowbar-fab__action.is-support:hover,
.lowbar-fab__action.is-login:hover,
.lowbar-fab__action.is-register:hover {
  background: linear-gradient(
    180deg,
    rgba(37, 99, 235, 0.18) 0%,
    rgba(37, 99, 235, 0.05) 100%
  ) !important;

  background-image: linear-gradient(
    180deg,
    rgba(37, 99, 235, 0.18) 0%,
    rgba(37, 99, 235, 0.05) 100%
  ) !important;

  color: var(--fab-gold-light) !important;
  border-color: rgba(103, 232, 249, 0.76) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(0, 0, 0, 0.42),
    0 0 16px rgba(37, 99, 235, 0.18) !important;

  transform: translateX(-2px) scale(1.02) !important;
}

/* İç ikon kutuları */
.lowbar-fab__action .icon {
  color: currentColor !important;

  background: rgba(37, 99, 235, 0.08) !important;
  background-image: none !important;

  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  border-radius: 6px !important;

  box-shadow: none !important;

  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease !important;
}

/* Hover ikon kutusu */
.lowbar-fab__action:hover .icon {
  background: rgba(37, 99, 235, 0.14) !important;
  border-color: rgba(103, 232, 249, 0.36) !important;
  color: var(--fab-gold-light) !important;
}

/* Yazılar */
.lowbar-fab__action .label {
  color: currentColor !important;
}

/* SVG ikonları */
.lowbar-fab__action svg,
.lowbar-fab__action svg path {
  color: currentColor !important;
  fill: currentColor !important;
}

/* Pseudo elementlerdeki eski mavi efektleri kapat */
.lowbar-fab__action::before,
.lowbar-fab__action::after,
.lowbar-fab__action.is-home::before,
.lowbar-fab__action.is-home::after,
.lowbar-fab__action.is-support::before,
.lowbar-fab__action.is-support::after,
.lowbar-fab__action.is-login::before,
.lowbar-fab__action.is-login::after,
.lowbar-fab__action.is-register::before,
.lowbar-fab__action.is-register::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* =========================================================
   KLAVYE FOCUS
   ========================================================= */

.lowbar-fab__trigger:focus,
.lowbar-fab__action:focus {
  outline: none !important;
}

.lowbar-fab__trigger:focus-visible,
.lowbar-fab__action:focus-visible {
  outline: none !important;

  border-color: var(--fab-gold-light) !important;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.16),
    0 0 18px rgba(37, 99, 235, 0.22) !important;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .lowbar-fab__trigger,
  .lowbar-fab__action {
    transition: none !important;
  }
}

/* =========================================================
   GAMBLERON — LOWBAR FAB RENK DÜZELTME PAKETİ
   Eski mavi halkaları, glow'ları, okları ve ikonları temizler
   ========================================================= */

/* Ana tema renkleri */
.lowbar-fab {
  --fab-gold-light: #2EC2F5;
  --fab-gold: #286EEA;
  --fab-gold-dark: #6C2DE0;

  --fab-dark: #171717;
  --fab-dark-deep: #0f0f0f;

  --fab-ring: rgba(37, 99, 235, 0.38);
  --fab-ring-strong: rgba(103, 232, 249, 0.74);
  --fab-glow: rgba(37, 99, 235, 0.22);
}

/* =========================================================
   ANA BUTON
   ========================================================= */

.lowbar-fab__trigger {
  background:
    linear-gradient(
      145deg,
      #292929 0%,
      #010627 58%,
      #101010 100%
    ) !important;

  background-color: #010627 !important;
  background-image:
    linear-gradient(
      145deg,
      #292929 0%,
      #010627 58%,
      #101010 100%
    ) !important;

  color: var(--fab-gold-light) !important;

  border-color: rgba(37, 99, 235, 0.56) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 22px rgba(0, 0, 0, 0.46),
    0 0 14px rgba(37, 99, 235, 0.14) !important;
}

/* Açılmış ana buton */
.lowbar-fab__trigger[aria-expanded="true"] {
  background:
    linear-gradient(
      135deg,
      #2EC2F5 0%,
      #286EEA 52%,
      #6C2DE0 100%
    ) !important;

  background-color: #286EEA !important;
  background-image:
    linear-gradient(
      135deg,
      #2EC2F5 0%,
      #286EEA 52%,
      #6C2DE0 100%
    ) !important;

  color: #010627 !important;

  border-color: rgba(255, 226, 125, 0.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 25px rgba(0, 0, 0, 0.46),
    0 0 20px rgba(37, 99, 235, 0.26) !important;
}

/* =========================================================
   ESKİ MAVİ DIŞ HALKALARI TEMİZLE
   ========================================================= */

.lowbar-fab__trigger-rings,
.lowbar-fab__trigger-rings::before,
.lowbar-fab__trigger-rings::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border-color: var(--fab-ring) !important;

  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.08),
    0 0 12px rgba(37, 99, 235, 0.12) !important;

  filter: none !important;
}

/* Açık durumda halkalar */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-rings,
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-rings::before,
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-rings::after {
  border-color: var(--fab-ring-strong) !important;

  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.14),
    0 0 16px rgba(37, 99, 235, 0.2) !important;
}

/* Ana butonun genel pseudo-elementlerini temizle */
.lowbar-fab__trigger::before,
.lowbar-fab__trigger::after {
  background-color: transparent !important;
  background-image: none !important;

  border-color: rgba(37, 99, 235, 0.3) !important;

  box-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   KÜÇÜK OK / CARET
   ========================================================= */

.lowbar-fab__trigger-caret,
.lowbar-fab__trigger-caret::before,
.lowbar-fab__trigger-caret::after {
  color: var(--fab-gold-light) !important;

  background: #030D44 !important;
  background-image: none !important;

  border-color: rgba(37, 99, 235, 0.54) !important;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.35),
    0 0 8px rgba(37, 99, 235, 0.12) !important;
}

/* Açıkken caret */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-caret,
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-caret::before,
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-caret::after {
  color: #010627 !important;
  background-image: none !important;
  border-color: rgba(255, 226, 125, 0.85) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.36),
    0 0 10px rgba(37, 99, 235, 0.2) !important;
}

/* Caret gerçek border yöntemiyle çiziliyorsa */
.lowbar-fab__trigger-caret::before {
  border-top-color: currentColor !important;
  border-right-color: currentColor !important;
  border-bottom-color: currentColor !important;
  border-left-color: currentColor !important;
}

/* =========================================================
   ANA BUTON Ä°KONLARI
   ========================================================= */

.lowbar-fab__trigger-core,
.lowbar-fab__trigger-glyph,
.lowbar-fab__trigger-glyph-menu,
.lowbar-fab__trigger-glyph-close,
.lowbar-fab__trigger-plus {
  color: currentColor !important;

  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  filter: none !important;
}

/* SVG ise */
.lowbar-fab__trigger svg,
.lowbar-fab__trigger svg path,
.lowbar-fab__trigger svg circle,
.lowbar-fab__trigger svg rect {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* img ise beyaz/sarıya yaklaştır */
.lowbar-fab__trigger img {
  opacity: 1 !important;

  filter:
    brightness(0)
    saturate(100%)
    invert(84%)
    sepia(65%)
    saturate(650%)
    hue-rotate(350deg)
    brightness(103%)
    contrast(92%) !important;
}

/* Açıkken img koyu olsun */
.lowbar-fab__trigger[aria-expanded="true"] img {
  filter:
    brightness(0)
    saturate(100%)
    invert(6%)
    sepia(7%)
    saturate(810%)
    hue-rotate(351deg)
    brightness(92%)
    contrast(93%) !important;
}

/* Menü / kapatma çizgileri */
.lowbar-fab__trigger-glyph-close::before,
.lowbar-fab__trigger-glyph-close::after,
.lowbar-fab__trigger-plus::before,
.lowbar-fab__trigger-plus::after {
  background: currentColor !important;
  box-shadow: none !important;
}

/* =========================================================
   AÇILAN AKSİYON BUTONLARI
   ========================================================= */

.lowbar-fab__action,
.lowbar-fab__action.is-home,
.lowbar-fab__action.is-support,
.lowbar-fab__action.is-login,
.lowbar-fab__action.is-register {
  background:
    linear-gradient(
      180deg,
      rgba(34, 34, 34, 0.98) 0%,
      rgba(17, 17, 17, 0.98) 100%
    ) !important;

  background-color: #010627 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(34, 34, 34, 0.98) 0%,
      rgba(17, 17, 17, 0.98) 100%
    ) !important;

  color: rgba(255, 255, 255, 0.94) !important;

  border-color: rgba(37, 99, 235, 0.42) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.38),
    0 0 10px rgba(37, 99, 235, 0.06) !important;

  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hover */
.lowbar-fab__action:hover,
.lowbar-fab__action.is-home:hover,
.lowbar-fab__action.is-support:hover,
.lowbar-fab__action.is-login:hover,
.lowbar-fab__action.is-register:hover {
  background:
    linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.18) 0%,
      rgba(37, 99, 235, 0.05) 100%
    ) !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.18) 0%,
      rgba(37, 99, 235, 0.05) 100%
    ) !important;

  color: var(--fab-gold-light) !important;

  border-color: rgba(103, 232, 249, 0.78) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(0, 0, 0, 0.42),
    0 0 15px rgba(37, 99, 235, 0.16) !important;
}

/* =========================================================
   AKSÄ°YON Ä°KON KUTULARI
   ========================================================= */

.lowbar-fab__action .icon {
  color: var(--fab-gold-light) !important;

  background: rgba(37, 99, 235, 0.09) !important;
  background-color: rgba(37, 99, 235, 0.09) !important;
  background-image: none !important;

  border-color: rgba(37, 99, 235, 0.26) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 8px rgba(37, 99, 235, 0.08) !important;
    filter: none !important;
}

/* Hover ikon kutusu */
.lowbar-fab__action:hover .icon {
  color: #2EC2F5 !important;

  background: rgba(37, 99, 235, 0.16) !important;
  background-image: none !important;

  border-color: rgba(103, 232, 249, 0.48) !important;
}

/* SVG ikon */
.lowbar-fab__action .icon svg,
.lowbar-fab__action .icon svg path,
.lowbar-fab__action .icon svg circle,
.lowbar-fab__action .icon svg rect {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* img ikon */
.lowbar-fab__action .icon img {
  opacity: 1 !important;

  filter:
    brightness(0)
    saturate(100%)
    invert(84%)
    sepia(65%)
    saturate(650%)
    hue-rotate(350deg)
    brightness(103%)
    contrast(92%) !important;
}

/* Mask ile çizilmiş ikon varsa */
.lowbar-fab__action .icon::before,
.lowbar-fab__action .icon::after {
  background-color: currentColor !important;
  box-shadow: none !important;
}

/* Aksiyon butonlarının eski mavi pseudo katmanlarını kapat */
.lowbar-fab__action::before,
.lowbar-fab__action::after,
.lowbar-fab__action.is-home::before,
.lowbar-fab__action.is-home::after,
.lowbar-fab__action.is-support::before,
.lowbar-fab__action.is-support::after,
.lowbar-fab__action.is-login::before,
.lowbar-fab__action.is-login::after,
.lowbar-fab__action.is-register::before,
.lowbar-fab__action.is-register::after {
  background: transparent !important;
  background-image: none !important;

  border-color: transparent !important;

  box-shadow: none !important;
  filter: none !important;
}

/* Yazılar */
.lowbar-fab__action .label {
  color: currentColor !important;
}

/* =========================================================
   LOWBAR FAB — AÇIK DURUMDA X KAPATMA İKONU
   ========================================================= */

/* Açıkken mevcut menü görselini gizle */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.7) !important;
}

/* Kapatma alanını görünür yap */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close {
  opacity: 1 !important;
  visibility: visible !important;

  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #010627 !important;

  background: transparent !important;
  background-image: none !important;

  transform: none !important;
}

/* İçteki eski işareti gizle */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-plus {
  display: none !important;
}

/* X çizgileri */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close::before,
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close::after {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 20px !important;
  height: 2.5px !important;

  border-radius: 999px !important;

  background: #010627 !important;
  background-image: none !important;

  box-shadow: none !important;

  transform-origin: center !important;
}

/* Birinci çizgi */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* İkinci çizgi */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Kapalı durumda X görünmesin */
.lowbar-fab__trigger[aria-expanded="false"]
.lowbar-fab__trigger-glyph-close {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Kapalı durumda normal menü ikonu görünsün */
.lowbar-fab__trigger[aria-expanded="false"]
.lowbar-fab__trigger-glyph-menu {
  opacity: 1 !important;
  visibility: visible !important;
}



/* =========================================================
   LOWBAR FAB — AÇIK DURUMDA X KAPATMA İKONU
   ========================================================= */

/* Açıkken mevcut menü görselini gizle */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.7) !important;
}

/* Kapatma alanını görünür yap */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close {
  opacity: 1 !important;
  visibility: visible !important;

  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #010627 !important;

  background: transparent !important;
  background-image: none !important;

  transform: none !important;
}

/* İçteki eski işareti gizle */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-plus {
  display: none !important;
}

/* X çizgileri */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close::before,
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close::after {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 20px !important;
  height: 2.5px !important;

  border-radius: 999px !important;

  background: #010627 !important;
  background-image: none !important;

  box-shadow: none !important;

  transform-origin: center !important;
}

/* Birinci çizgi */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* İkinci çizgi */
.lowbar-fab__trigger[aria-expanded="true"]
.lowbar-fab__trigger-glyph-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Kapalı durumda X görünmesin */
.lowbar-fab__trigger[aria-expanded="false"]
.lowbar-fab__trigger-glyph-close {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Kapalı durumda normal menü ikonu görünsün */
.lowbar-fab__trigger[aria-expanded="false"]
.lowbar-fab__trigger-glyph-menu {
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   GAMBLERON — LOWBAR FAB BACKDROP
   Açıldığında gelen mavi arka plan katmanını değiştirir
   ========================================================= */

.lowbar-fab__backdrop {
  background:
    radial-gradient(
      circle at 86% 88%,
      rgba(37, 99, 235, 0.18) 0%,
      rgba(37, 99, 235, 0.08) 20%,
      rgba(37, 99, 235, 0) 46%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.08) 0%,
      rgba(8, 8, 8, 0.34) 58%,
      rgba(8, 8, 8, 0.62) 100%
    ) !important;

  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;

  transition:
    opacity 0.24s ease,
    background 0.24s ease !important;
}

/* Açık durum */
.lowbar-fab.is-open .lowbar-fab__backdrop {
  opacity: 1 !important;

  background:
    radial-gradient(
      circle at 86% 88%,
      rgba(103, 232, 249, 0.22) 0%,
      rgba(37, 99, 235, 0.10) 22%,
      rgba(37, 99, 235, 0) 48%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.10) 0%,
      rgba(8, 8, 8, 0.38) 58%,
      rgba(8, 8, 8, 0.68) 100%
    ) !important;
}

/* lowbar kodları */

.latestWins__viewport:before{
  background: linear-gradient(
47deg, rgba(37, 99, 235, 0.42) 0%, rgba(37, 99, 235, 0) 5% 95%, rgba(37, 99, 235, 0.42) 100%)
}

header#header div.middle-header div.middle-header-container div.logo{
  position: static !important;
}
@media screen and (max-width:991px) {
  header#header div.middle-header div.middle-header-container div.responsive-logo img, header#header div.middle-header div.middle-header-container div.responsive-logo svg{
    height: unset !important;
  }
}

.originalGamesHero__logo{
  padding: 0 !important;
}
.sticky-menu .menu-item.wallet .logo img{
  padding: 10px !important;
}

.sticky-menu .menu-item.wallet:before{
  box-shadow: 0 0 0 0.2rem rgba(250, 210, 80, 0.5) !important;
}

.hero-area-slider .hero-nav-btn>span{
  padding-bottom: 3px;
}

/* =========================================
   GAMBLERON - OWL HEADER NAVIGATION
========================================= */

.owl-nav.owl-nav--header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 8px;
}


/* =========================================
   TÜMÜNÜ GÖR
========================================= */

.owl-nav.owl-nav--header .owl-view-all {
    min-width: 98px;
    height: 36px;
    margin-left: 0;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #e8e8e8;
    background:
        linear-gradient(
            180deg,
            rgba(56, 189, 248, 0.12) 0%,
            #010627 100%
        );

    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 5px 15px rgba(0, 0, 0, 0.3);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.owl-nav.owl-nav--header .owl-view-all:hover {
    border-color: #3494EB;
    box-shadow:
        0 0 12px rgba(56, 189, 248, 0.28),
        0 6px 16px rgba(0, 0, 0, 0.35);

    transform: translateY(-1px);
}


/* =========================================
   Ä°LERÄ° - GERÄ° BUTONLARI
========================================= */

.owl-nav.owl-nav--header .owl-prev,
.owl-nav.owl-nav--header .owl-next {
    position: relative;

    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #29292b 0%,
            #010627 100%
        );

    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 50%;

    cursor: pointer;
    overflow: hidden;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 5px 14px rgba(0, 0, 0, 0.32);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Owl Carousel'ın oluşturduğu yazıyı gizler */

.owl-nav.owl-nav--header .owl-prev > span,
.owl-nav.owl-nav--header .owl-next > span {
    display: none !important;
}


/* =========================================
   SUNUCUDAKÄ° ARROW SVG
========================================= */

.owl-nav.owl-nav--header .owl-prev::after,
.owl-nav.owl-nav--header .owl-next::after {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 16px !important;
    height: 16px !important;

    background-color: transparent !important;

    /* Eski görsel yolu */
    background-image:
        url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/adgWQRGKOSFJGOWJORJGEWGHJaDSF/statics/9G5fwZ5XFAoNCqsKmpCmnx19OoKMrxxM1hjlRAxS.png") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    opacity: 1 !important;
    visibility: visible !important;

    /*
       SVG'yi Gambleron sarısına yaklaştırır.
       SVG zaten #3494EB ise filter satırını kaldırabilirsin.
    */
    filter:
        brightness(0)
        saturate(100%)
        invert(87%)
        sepia(77%)
        saturate(724%)
        hue-rotate(334deg)
        brightness(106%)
        contrast(101%);

    transition:
        filter 0.25s ease,
        transform 0.25s ease !important;
}


/* SaÄŸ arrow */

.owl-nav.owl-nav--header .owl-next::after {
    transform:
        translate(-50%, -50%) !important;
}


/* Sol arrow */

.owl-nav.owl-nav--header .owl-prev::after {
    transform:
        translate(-50%, -50%)
        rotate(180deg) !important;
}


/* =========================================
   ARROW HOVER
========================================= */
.owl-nav.owl-nav--header .owl-prev:hover,
.owl-nav.owl-nav--header .owl-next:hover {
    border-color: #3494EB;

    box-shadow:
        0 0 13px rgba(56, 189, 248, 0.3),
        0 6px 16px rgba(0, 0, 0, 0.38);

    transform: translateY(-1px);
}


/* Hover sırasında ikon siyah */



.owl-nav.owl-nav--header .owl-next:hover::after {
    transform:
        translate(-50%, -50%)
        scale(1.08) !important;
}


.owl-nav.owl-nav--header .owl-prev:hover::after {
    transform:
        translate(-50%, -50%)
        rotate(180deg)
        scale(1.08) !important;
}


/* =========================================
   ACTIVE / FOCUS / DISABLED
========================================= */

.owl-nav.owl-nav--header .owl-prev:active,
.owl-nav.owl-nav--header .owl-next:active,
.owl-nav.owl-nav--header .owl-view-all:active {
    transform: translateY(0) scale(0.96);
}


.owl-nav.owl-nav--header .owl-prev:focus-visible,
.owl-nav.owl-nav--header .owl-next:focus-visible,
.owl-nav.owl-nav--header .owl-view-all:focus-visible {
    outline: 2px solid #3494EB;
    outline-offset: 3px;
}


.owl-nav.owl-nav--header .owl-prev.disabled,
.owl-nav.owl-nav--header .owl-next.disabled {
    opacity: 0.35;
    pointer-events: none;
}


/* =========================================
   MOBÄ°L
========================================= */

@media (max-width: 767px) {
    .owl-nav.owl-nav--header {
        gap: 6px;
    }

    .owl-nav.owl-nav--header .owl-view-all {
        min-width: auto;
        height: 34px;
        padding: 0 12px;

        font-size: 11px;
    }

    .owl-nav.owl-nav--header .owl-prev,
    .owl-nav.owl-nav--header .owl-next {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }

    .owl-nav.owl-nav--header .owl-prev::after,
    .owl-nav.owl-nav--header .owl-next::after {
        width: 15px !important;
        height: 15px !important;
    }
}


/* partnership */

.game-item, .game-card, .category-item, .home-category-item, .provider-item, .provider-card, .promotion-item, .bonus-card, .wallet-box, .league-card, .card, .panel{
  border-radius: 15px !important;
}
div.provider-box a.provider-item figure{
  background: transparent !important ;
}

div.provider-box a.provider-item figure.image{
  border: 1px solid #3494EB;
    border-color: #3494EB;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.28), 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* partnership */


/* ==================================================
   GAMBLERON - KULLANICI AÇILIR MENÜSÜ
================================================== */

.header-buttons .user-menu {
    position: relative;
}


/* Ana açılır menü */

.header-buttons .user-menus {
    min-width: 205px;
    padding: 8px;

    background:
        radial-gradient(
            circle at top right,
            rgba(56, 189, 248, 0.09),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #202021 0%,
            #010627 55%,
            #101011 100%
        );

    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 10px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.65),
        0 0 22px rgba(56, 189, 248, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* Üstteki küçük üçgen */

.header-buttons .user-menus::before {
    content: "";

    position: absolute;
    top: -7px;
    right: 18px;

    width: 13px;
    height: 13px;

    background: #1d1d1e;

    border-top: 1px solid rgba(56, 189, 248, 0.28);
    border-left: 1px solid rgba(56, 189, 248, 0.28);

    transform: rotate(45deg);
}


/* Liste sıfırlama */

.header-buttons .user-menus ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


/* Menü satırları */

.header-buttons .user-menus ul li {
    position: relative;

    margin: 2px 0;
    padding: 0;
}


/* Hem div hem de link yapısına uyumlu */

.header-buttons .user-menus ul li > div,
.header-buttons .user-menus ul li > a {
    position: relative;

    min-height: 38px;
    padding: 8px 10px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #e9e9e9;
    background: transparent;

    border: 1px solid transparent;
    border-radius: 7px;

    text-decoration: none;
    cursor: pointer;

    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}


/* İkon alanı */

.header-buttons .user-menus .icon {
    width: 20px;
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: rgba(56, 189, 248, 0.72);

    transition:
        color 0.22s ease,
        transform 0.22s ease,
        filter 0.22s ease;
}


/* SVG ikonlar */

.header-buttons .user-menus .icon svg {
    width: 18px;
    height: 18px;

    fill: currentColor;
    color: inherit;
}


/* Stroke kullanan SVG ikonlara destek */

.header-buttons .user-menus .icon svg path,
.header-buttons .user-menus .icon svg line,
.header-buttons .user-menus .icon svg polyline,
.header-buttons .user-menus .icon svg circle {
    transition:
        fill 0.22s ease,
        stroke 0.22s ease;
}


/* Metin */

.header-buttons .user-menus .text {
    color: inherit;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;
}


/* Hover */

.header-buttons .user-menus ul li > div:hover,
.header-buttons .user-menus ul li > a:hover {
    color: #3494EB;

    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.13),
            rgba(56, 189, 248, 0.035)
        );

    border-color: rgba(56, 189, 248, 0.32);

    box-shadow:
        inset 3px 0 0 #3494EB,
        0 4px 13px rgba(0, 0, 0, 0.22);

    transform: translateX(2px);
}


/* Hover sırasında ikon */

.header-buttons .user-menus ul li > div:hover .icon,
.header-buttons .user-menus ul li > a:hover .icon {
    color: #3494EB;

    transform: scale(1.08);
}


/* Tıklama efekti */

.header-buttons .user-menus ul li > div:active,
.header-buttons .user-menus ul li > a:active {
    transform: translateX(1px) scale(0.98);
}


/* Çıkış satırı */

.header-buttons .user-menus ul li:last-child {
    margin-top: 7px;
    padding-top: 7px;

    border-top: 1px solid rgba(56, 189, 248, 0.13);
}


.header-buttons .user-menus ul li:last-child > div,
.header-buttons .user-menus ul li:last-child > a {
    color: #3494EB;
    background: rgba(56, 189, 248, 0.035);
}


.header-buttons .user-menus ul li:last-child .icon {
    color: #3494EB;
}


.header-buttons .user-menus ul li:last-child > div:hover,
.header-buttons .user-menus ul li:last-child > a:hover {
    color: #010627;
    background: #3494EB;
    border-color: #3494EB;

    box-shadow:
        0 0 14px rgba(56, 189, 248, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}


.header-buttons .user-menus ul li:last-child > div:hover .icon,
.header-buttons .user-menus ul li:last-child > a:hover .icon {
    color: #010627;
}


/* Klavye odağı */

.header-buttons .user-menus ul li > a:focus-visible,
.header-buttons .user-menus ul li > div:focus-visible {
    outline: 2px solid #3494EB;
    outline-offset: 2px;
}


/* Mobil */

@media (max-width: 767px) {
    .header-buttons .user-menus {
        min-width: 195px;
        padding: 7px;
    }

    .header-buttons .user-menus ul li > div,
    .header-buttons .user-menus ul li > a {
        min-height: 37px;
        padding: 8px 9px;
    }

    .header-buttons .user-menus .text {
        font-size: 12px;
    }
}

/* ==================================================
   USER MENU - AFTER VE ÇIKIŞ YAP DÜZELTMESİ
================================================== */

/* Eski ve hatalı çapraz dekorasyonu tamamen kaldır */
.header-buttons .user-menu .user-menus::after {
    content: none !important;
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    background: none !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}


/* Üstte yalnızca küçük ve temiz üçgen */
.header-buttons .user-menu .user-menus::before {
    content: "" !important;

    position: absolute !important;
    top: -6px !important;
    right: 17px !important;
    left: auto !important;

    width: 11px !important;
    height: 11px !important;

    display: block !important;

    background: #1b1b1c !important;

    border-top: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-left: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;

    box-shadow: none !important;

    transform: rotate(45deg) !important;
    z-index: 2 !important;
}


/* Menü kutusunun konumu */
.header-buttons .user-menu .user-menus {
    position: absolute !important;
    overflow: visible !important;

    background:
        radial-gradient(
            circle at top right,
            rgba(56, 189, 248, 0.07),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #202021 0%,
            #010627 58%,
            #101011 100%
        ) !important;

    border: 1px solid rgba(56, 189, 248, 0.22) !important;
}


/* ==================================================
   ÇIKIŞ YAP - NORMAL DURUM
================================================== */

.header-buttons .user-menu .user-menus ul > li:last-child {
    margin-top: 7px !important;
    padding-top: 7px !important;

    border-top: 1px solid rgba(56, 189, 248, 0.14) !important;
}


/* Link, div veya button olmasına karşı tüm ihtimaller */
.header-buttons .user-menu .user-menus ul > li:last-child > a,
.header-buttons .user-menu .user-menus ul > li:last-child > div,
.header-buttons .user-menu .user-menus ul > li:last-child > button {
    color: #3494EB !important;

    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.1),
            rgba(56, 189, 248, 0.025)
        ) !important;

    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 7px !important;

    box-shadow: none !important;
}


/* Çıkış metnindeki pembe rengi zorla kaldır */
.header-buttons .user-menu .user-menus ul > li:last-child .text,
.header-buttons .user-menu .user-menus ul > li:last-child span {
    color: #3494EB !important;
}


/* Çıkış ikonunu sarı yap */
.header-buttons .user-menu .user-menus ul > li:last-child .icon,
.header-buttons .user-menu .user-menus ul > li:last-child svg {
    color: #3494EB !important;
    fill: #3494EB !important;
}


/* Stroke kullanan SVG desteÄŸi */
.header-buttons .user-menu .user-menus ul > li:last-child svg path,
.header-buttons .user-menu .user-menus ul > li:last-child svg line,
.header-buttons .user-menu .user-menus ul > li:last-child svg polyline,
.header-buttons .user-menu .user-menus ul > li:last-child svg circle {
    stroke: #3494EB !important;
}


/* ==================================================
   ÇIKIŞ YAP - HOVER
================================================== */

.header-buttons .user-menu .user-menus ul > li:last-child > a:hover,
.header-buttons .user-menu .user-menus ul > li:last-child > div:hover,
.header-buttons .user-menu .user-menus ul > li:last-child > button:hover {
    color: #010627 !important;

    background: #3494EB !important;
    border-color: #3494EB !important;

    box-shadow:
        0 0 14px rgba(56, 189, 248, 0.22),
        0 5px 14px rgba(0, 0, 0, 0.3) !important;

    transform: translateX(2px) !important;
}
header-buttons .user-menu .user-menus ul > li:last-child > a:hover *,
.header-buttons .user-menu .user-menus ul > li:last-child > div:hover *,
.header-buttons .user-menu .user-menus ul > li:last-child > button:hover * {
    color: #010627 !important;
    fill: #010627 !important;
    stroke: #010627 !important;
}
/* ==================================================
   USER MENU - HOVER KOPMA VE ÇIKIŞ RENGİ DÜZELTMESİ
================================================== */

.header-buttons .user-menu {
    position: relative !important;
}


/* --------------------------------------------------
   BUTON İLE AÇILIR MENÜ ARASINDAKİ HOVER KÖPRÜSÜ
-------------------------------------------------- */

.header-buttons .user-menu::after {
    content: "" !important;

    position: absolute !important;
    top: 93% !important;
    right: -8px !important;

    width: 235px !important;
    height: 25px !important;

    display: block !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    pointer-events: auto !important;
    z-index: 9998 !important;
}


/* Menü köprünün üzerinde kalsın */

.header-buttons .user-menu .user-menus {
    z-index: 9999 !important;
}


/* Parent hover durumunda menüyü açık tut */

.header-buttons .user-menu:hover .user-menus,
.header-buttons .user-menu:focus-within .user-menus {
    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;
}


/* Menü üzerine gelindiğinde de açık kalmasını garanti eder */

.header-buttons .user-menu .user-menus:hover {
    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* --------------------------------------------------
   ÇIKIŞ YAP - NORMAL DURUM
-------------------------------------------------- */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> a,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> div,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> button {
    color: #3494EB !important;
    -webkit-text-fill-color: #3494EB !important;

    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.10),
            rgba(56, 189, 248, 0.025)
        ) !important;

    border: 1px solid rgba(56, 189, 248, 0.18) !important;
}


/* Çıkış Yap içerisindeki tüm metin renkleri */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
.text,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
span:not(.icon) {
    color: #3494EB !important;
    -webkit-text-fill-color: #3494EB !important;
}


/* Inline style ile gelen pembe rengi de ezer */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
[style] {
    color: #3494EB !important;
    -webkit-text-fill-color: #3494EB !important;
}


/* --------------------------------------------------
   ÇIKIŞ YAP İKONU
-------------------------------------------------- */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
.icon {
    color: #3494EB !important;

    /*
       Ä°kon background-image veya eski renkli SVG ise
       sarıya yaklaştırır.
    */
    filter:
        brightness(0)
        saturate(100%)
        invert(87%)
        sepia(77%)
        saturate(724%)
        hue-rotate(334deg)
        brightness(106%)
        contrast(101%) !important;
}


/* Ä°kon pseudo element ile oluÅŸturulmuÅŸsa */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
.icon::before,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
.icon::after {
    color: #3494EB !important;
    background-color: #3494EB !important;
    border-color: #3494EB !important;
}


/* SVG ana elementi */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
svg {
    color: #3494EB !important;
}


/* Fill kullanan SVG parçaları */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
svg
[fill]:not([fill="none"]) {
    fill: #3494EB !important;
}


/* Stroke kullanan SVG parçaları */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
svg
[stroke]:not([stroke="none"]) {
    stroke: #3494EB !important;
}


/* --------------------------------------------------
   ÇIKIŞ YAP - HOVER
-------------------------------------------------- */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> a:hover,
.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> div:hover,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> button:hover {
    color: #010627 !important;
    -webkit-text-fill-color: #010627 !important;

    background: #3494EB !important;
    border-color: #3494EB !important;

    box-shadow:
        0 0 14px rgba(56, 189, 248, 0.22),
        0 5px 14px rgba(0, 0, 0, 0.30) !important;
}


/* Hover sırasında metin */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> a:hover
.text,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> div:hover
.text,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> button:hover
.text {
    color: #010627 !important;
    -webkit-text-fill-color: #010627 !important;
}


/* Hover sırasında ikon */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> a:hover
.icon,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> div:hover
.icon,

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> button:hover
.icon {
    color: #010627 !important;
    filter: brightness(0) saturate(100%) !important;
}


/* Hover sırasında SVG */

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> a:hover
svg
[fill]:not([fill="none"]),

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> div:hover
svg
[fill]:not([fill="none"]),

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> button:hover
svg
[fill]:not([fill="none"]) {
    fill: #010627 !important;
}


.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> a:hover
svg
[stroke]:not([stroke="none"]),

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> div:hover
svg
[stroke]:not([stroke="none"]),

.header-buttons
.user-menu
.user-menus
ul
> li:last-child
> button:hover
svg
[stroke]:not([stroke="none"]) {
    stroke: #010627 !important;
}

div.user-menu div.user-menus ul li:last-child>div span.text{
  background: none !important;
}
.header-buttons .user-menu .user-menus ul > li:last-child .icon{
  filter: none !important;
}

/* ==================================================
   GAMBLERON - TÜM OYUN BÖLÜMÜ BAŞLIKLARI
================================================== */

.game-carousel .section-header {
    position: relative;
    margin-bottom: 16px;
}


/* Başlık ana alanı */

.game-carousel
.section-header
.section-title {
    position: relative;

    min-height: 40px;

    display: inline-flex;
    align-items: center;

    padding-right: 20px;
}


/* Mevcut ikon alanı */

.game-carousel
.section-header
.section-title
.icon {
    width: 34px !important;
    min-width: 34px;
    height: 34px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 248, 0.13),
            rgba(22, 22, 23, 0.95)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 12px rgba(56, 189, 248, 0.06);
}


/* İkon görseli */

.game-carousel
.section-header
.section-title
.icon
img {
    max-width: 19px !important;
    max-height: 19px !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(87%)
        sepia(77%)
        saturate(724%)
        hue-rotate(334deg)
        brightness(106%)
        contrast(101%) !important;
}


/* Başlık */

.game-carousel
.section-header
.section-title
.title.gambleron-section-title {
    max-width: none !important;
    padding-left: 10px !important;

    display: inline-flex !important;
    align-items: center;
    gap: 5px;

    overflow: visible !important;

    color: #F4F3FA;

    font-family: "Rubik Medium", sans-serif;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.15px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: initial !important;
}


/* Son kelimeden önceki alan */

.game-carousel
.section-header
.section-title
.title
.gambleron-title-main {
    color: #F4F3FA !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.65);
}


/* Son kelime */

.game-carousel
.section-header
.section-title
.title
.gambleron-title-accent {
    color: #3494EB;

    text-shadow:
        0 0 9px rgba(56, 189, 248, 0.18);
}


/* Başlığın altında ince Gambleron çizgisi */

.game-carousel
.section-header
.section-title::after {
    content: "";

    position: absolute;
    right: 20px;
    bottom: 0;

    width: 110px;
    height: 1px;

    background:
        linear-gradient(
            -90deg,
            #3494EB 0%,
            rgba(56, 189, 248, 0) 100%
        );

    box-shadow:
        0 0 7px rgba(56, 189, 248, 0.22);

    pointer-events: none;
}


/* Mobil */

@media (max-width: 767px) {
    .game-carousel
    .section-header
    .section-title
    .icon {
        width: 30px !important;
        min-width: 30px;
        height: 30px;
    }

    .game-carousel
    .section-header
    .section-title
    .icon
    img {
        max-width: 17px !important;
        max-height: 17px !important;
    }

    .game-carousel
    .section-header
    .section-title
    .title.gambleron-section-title {
        padding-left: 8px !important;
        gap: 4px;

        font-size: 13px !important;
    }

    .game-carousel
    .section-header
    .section-title::after {
        left: 38px;
        width: 55px;
    }
}

/* ==========================================================
   GAMBLERON - SAĞLAYICILAR ALANI
   Ana sayfa carousel + sağlayıcı detay sayfası
========================================================== */


/* ==========================================================
   1. ANA SAYFA - SAĞLAYICILAR CAROUSEL BAŞLIĞI
========================================================== */

.provider-carousel .section-header {
    position: relative;

    min-height: 42px;
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Başlık ana alanı */

.provider-carousel .section-header .section-title {
    position: relative;

    min-height: 40px;
    padding: 3px 15px 3px 4px;

    display: inline-flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.09) 0%,
            rgba(56, 189, 248, 0.025) 62%,
            transparent 100%
        );

    border-radius: 9px;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* Ä°kon kutusu */

.provider-carousel .section-header .section-title .icon {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 248, 0.15),
            rgba(22, 22, 23, 0.98)
        ) !important;

    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 9px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 13px rgba(56, 189, 248, 0.08);

    overflow: hidden;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* İkon görseli */

.provider-carousel .section-header .section-title .icon img {
    width: 19px !important;
    max-width: 19px !important;
    height: 19px !important;
    max-height: 19px !important;

    object-fit: contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(87%)
        sepia(77%)
        saturate(724%)
        hue-rotate(334deg)
        brightness(106%)
        contrast(101%) !important;

    opacity: 1 !important;

    transition:
        filter 0.25s ease,
        transform 0.25s ease;
}


/* Başlık metni */

.provider-carousel .section-header .section-title .title {
    max-width: none !important;
    padding-left: 11px !important;

    display: inline-flex !important;
    align-items: center;

    overflow: visible !important;

    color: #F4F3FA !important;

    font-family: "Rubik Medium", sans-serif;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.15px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: initial !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.7);

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}


/* Başlık önündeki sarı nokta */

.provider-carousel .section-header .section-title .title::before {
    content: "";

    width: 4px;
    min-width: 4px;
    height: 4px;
    margin-right: 7px;

    display: inline-block;

    background: #3494EB;
    border-radius: 50%;

    box-shadow:
        0 0 7px rgba(56, 189, 248, 0.7);
}


/* Başlık altındaki ince sarı çizgi */

.provider-carousel .section-header .section-title::after {
    content: "";

    position: absolute;
    left: 45px;
    bottom: -4px;

    width: 88px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #3494EB 0%,
            rgba(56, 189, 248, 0.48) 48%,
            rgba(56, 189, 248, 0) 100%
        );

    box-shadow:
        0 0 7px rgba(56, 189, 248, 0.25);

    pointer-events: none;
}


/* Başlık hover */

.provider-carousel .section-header .section-title:hover {
    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.14),
            rgba(56, 189, 248, 0.035),
            transparent
        );
}


.provider-carousel .section-header .section-title:hover .icon {
    border-color: #3494EB !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 15px rgba(56, 189, 248, 0.2);

    transform: translateY(-1px);
}


.provider-carousel .section-header .section-title:hover .icon img {
    transform: scale(1.08);
}


.provider-carousel .section-header .section-title:hover .title {
    color: #3494EB !important;

    text-shadow:
        0 0 10px rgba(56, 189, 248, 0.16);
}


/* SaÄŸdaki navigasyonun konumu */

.provider-carousel .section-header .owl-nav.owl-nav--header {
    position: absolute;
    top: 2px;
    right: 0;

    display: flex;
    align-items: center;
    gap: 8px;
}


/* ==========================================================
   2. SAĞLAYICI DETAY SAYFASI - GENEL ALAN
========================================================== */

main#main.providers-page,
main.providers-page {
    --provider-yellow: #3494EB;
    --provider-black: #010627;
    --provider-card-black: #101011;
}


/* Liste alanı */

main#main.providers-page .provider-listing,
main.providers-page .provider-listing {
    position: relative;
}


/* ==========================================================
   3. SAĞLAYICI DETAY SAYFASI - ARAMA ALANI
========================================================== */



main#main.providers-page .main-search input,
main.providers-page .main-search input {
    min-height: 46px;

    color: #F4F3FA !important;
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    font-size: 13px;
    font-weight: 600;

    caret-color: #3494EB;
}


/* Placeholder */

main#main.providers-page .main-search input::placeholder,
main.providers-page .main-search input::placeholder {
    color: rgba(255, 255, 255, 0.52) !important;
    opacity: 1;
}


/* Arama ikonu */

main#main.providers-page .main-search svg,
main.providers-page .main-search svg {
    color: #3494EB !important;
    fill: currentColor;

    opacity: 0.85;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


main#main.providers-page .main-search:focus-within svg,
main.providers-page .main-search:focus-within svg {
    opacity: 1;
    transform: scale(1.06);
}


/* ==========================================================
   4. SAĞLAYICI DETAY SAYFASI - GRID
========================================================== */


/* Grid item */

main#main.providers-page .provider-grid__item,
main.providers-page .provider-grid__item {
    min-width: 0;
}


/* Link */

main#main.providers-page .provider-item,
main.providers-page .provider-item {
    display: block;

    color: inherit;
    text-decoration: none;

    border-radius: 9px;

    outline: none;
}


/* ==========================================================
   5. SAĞLAYICI KARTLARI
========================================================== */

main#main.providers-page .provider-item__inner,
main.providers-page .provider-item__inner {
    position: relative !important;

    width: 100% !important;
    min-height: 80px !important;
    padding: 15px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(56, 189, 248, 0.035),
            transparent 52%
        ),
        linear-gradient(
            180deg,
            #141415 0%,
            #0f0f10 100%
        ) !important;

    border: 1px solid rgba(56, 189, 248, 0.72) !important;
    border-radius: 9px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 22px rgba(0, 0, 0, 0.32),
        0 0 0 rgba(56, 189, 248, 0) !important;

    overflow: hidden;

    transform: translateZ(0);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease !important;
}


/* Kart üst parlama çizgisi */

main#main.providers-page .provider-item__inner::before,
main.providers-page .provider-item__inner::before {
    content: "";

    position: absolute;
    top: 0;
    left: 12%;

    width: 76%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(56, 189, 248, 0.72),
            transparent
        );

    opacity: 0.45;

    pointer-events: none;
}


/* Hover sırasında içeriden geçen yumuşak ışık */

main#main.providers-page .provider-item__inner::after,
main.providers-page .provider-item__inner::after {
    content: "";

    position: absolute;
    top: -80%;
    left: -45%;

    width: 35%;
    height: 260%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.055),
            transparent
        );

    transform: rotate(18deg);
    opacity: 0;

    pointer-events: none;

    transition:
        left 0.55s ease,
        opacity 0.25s ease;
}


/* Kart hover */

main#main.providers-page .provider-item:hover .provider-item__inner,
main.providers-page .provider-item:hover .provider-item__inner {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(56, 189, 248, 0.11),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #1a1a1b 0%,
            #010627 100%
        ) !important;

    border-color: #3494EB !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 16px rgba(56, 189, 248, 0.16),
        0 12px 28px rgba(0, 0, 0, 0.42) !important;

    transform: translateY(-3px);
}


main#main.providers-page
.provider-item:hover
.provider-item__inner::after,

main.providers-page
.provider-item:hover
.provider-item__inner::after {
    left: 112%;
    opacity: 1;
}


/* Active / tıklama */

main#main.providers-page .provider-item:active .provider-item__inner,
main.providers-page .provider-item:active .provider-item__inner {
    transform: translateY(-1px) scale(0.985);
}


/* Klavye focus */

main#main.providers-page .provider-item:focus-visible .provider-item__inner,
main.providers-page .provider-item:focus-visible .provider-item__inner {
    border-color: #3494EB !important;

    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.13),
        0 0 17px rgba(56, 189, 248, 0.16) !important;
}


/* ==========================================================
   6. SAĞLAYICI LOGOLARI
========================================================== */

main#main.providers-page .provider-item .image,
main.providers-page .provider-item .image {
    position: relative;
    z-index: 2;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Logo görseli */

main#main.providers-page .provider-item .image img,
main.providers-page .provider-item .image img {
    width: auto !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: 38px !important;

    object-fit: contain !important;

    opacity: 0.94;

    filter:
        brightness(0)
        invert(1);

    transform: translateZ(0);

    transition:
        opacity 0.22s ease,
        filter 0.22s ease,
        transform 0.22s ease;
}


/* Hover logo */

main#main.providers-page
.provider-item:hover
.image img,

main.providers-page
.provider-item:hover
.image img {
    opacity: 1;

    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.12));

    transform: scale(1.045);
}


/* ==========================================================
   7. İSTENİRSE SEÇİLİ / AKTİF KART
========================================================== */

/*
   Sistem karta active veya selected class ekliyorsa
   bu tasarım otomatik uygulanır.
*/

main#main.providers-page
.provider-item.active
.provider-item__inner,

main#main.providers-page
.provider-item.selected
.provider-item__inner,

main.providers-page
.provider-item.active
.provider-item__inner,

main.providers-page
.provider-item.selected
.provider-item__inner {
    background:
        linear-gradient(
            180deg,
            rgba(56, 189, 248, 0.18),
            #010627
        ) !important;

    border-color: #3494EB !important;

    box-shadow:
        inset 0 0 18px rgba(56, 189, 248, 0.05),
        0 0 16px rgba(56, 189, 248, 0.18) !important;
}


/* ==========================================================
   8. RESPONSIVE
========================================================== */

@media (max-width: 767px) {
    /* Ana sayfa sağlayıcı başlığı */

    .provider-carousel .section-header {
        min-height: 38px;
        margin-bottom: 13px;
    }

    .provider-carousel .section-header .section-title {
        min-height: 36px;
        padding-right: 10px;
    }

    .provider-carousel .section-header .section-title .icon {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }

    .provider-carousel .section-header .section-title .icon img {
        width: 17px !important;
        max-width: 17px !important;
        height: 17px !important;
        max-height: 17px !important;
    }

    .provider-carousel .section-header .section-title .title {
        padding-left: 8px !important;

        font-size: 13px !important;
    }

    .provider-carousel .section-header .section-title::after {
        left: 39px;
        width: 66px;
    }


    /* Sağlayıcı detay sayfası */

    main#main.providers-page .main-search,
    main.providers-page .main-search {
        min-height: 44px;
        margin-bottom: 16px;
    }

    main#main.providers-page .provider-item__inner,
    main.providers-page .provider-item__inner {
        min-height: 70px !important;
        padding: 13px 14px !important;
    }

    main#main.providers-page .provider-item .image img,
    main.providers-page .provider-item .image img {
        max-height: 31px !important;
    }
}


@media (max-width: 420px) {
    main#main.providers-page .provider-item__inner,
    main.providers-page .provider-item__inner {
        min-height: 66px !important;
        padding: 11px 12px !important;

        border-radius: 8px !important;
    }

    main#main.providers-page .provider-item .image img,
    main.providers-page .provider-item .image img {
        max-height: 28px !important;
    }
}

/* ==================================================
   SAĞLAYICI LİSTESİ - MEVCUT FLEX YAPISINI KORU
================================================== */

main#main.providers-page .provider-grid,
main.providers-page .provider-grid {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    align-items: stretch !important;

    gap: 6px !important;
}


/* Masaüstünde kart genişliği */

main#main.providers-page .provider-grid__item,
main.providers-page .provider-grid__item {
    width: calc((100% - 30px) / 6) !important;
    min-width: 0 !important;
    flex: 0 0 calc((100% - 30px) / 6) !important;
}


/* Kart ve link tam geniÅŸlik */

main#main.providers-page .provider-item,
main.providers-page .provider-item,
main#main.providers-page .provider-item__inner,
main.providers-page .provider-item__inner {
    width: 100% !important;
}


/* Orta ekran */

@media (max-width: 1199px) {
    main#main.providers-page .provider-grid__item,
    main.providers-page .provider-grid__item {
        width: calc((100% - 24px) / 5) !important;
        flex-basis: calc((100% - 24px) / 5) !important;
    }
}


/* Tablet */

@media (max-width: 991px) {
    main#main.providers-page .provider-grid__item,
    main.providers-page .provider-grid__item {
        width: calc((100% - 18px) / 4) !important;
        flex-basis: calc((100% - 18px) / 4) !important;
    }
}


/* Mobil */

@media (max-width: 767px) {
    main#main.providers-page .provider-grid,
    main.providers-page .provider-grid {
        gap: 10px !important;
    }

    main#main.providers-page .provider-grid__item,
    main.providers-page .provider-grid__item {
        width: calc(50% - 5px) !important;
        flex: 0 0 calc(50% - 5px) !important;
    }
}


/* Çok küçük ekran */

@media (max-width: 420px) {
    main#main.providers-page .provider-grid,
    main.providers-page .provider-grid {
        gap: 8px !important;
    }

    main#main.providers-page .provider-grid__item,
    main.providers-page .provider-grid__item {
        width: calc(50% - 4px) !important;
        flex-basis: calc(50% - 4px) !important;
    }
}

@media (max-width: 575px) {
  div.main-search form.search-form, .search-box, .search-form{
    margin: 0 15px !important;
  }
  main#main.providers-page .main-search, main.providers-page .main-search{
    padding: 0 15px;
  }
  main#main.providers-page .provider-listing, main.providers-page .provider-listing{
    padding: 0 15px !important;
  }
  
}
@media (max-width: 991px) {
    .search-menu .search-form .search-form-container{
      width: 100% !important;
    }
    .search-menu form.search-form button{
      border: none !important;
    }
    .search-menu form.search-form button{
      border: none !important;
      background-color: transparent !important;
      background: transparent !important;
    }
}

@media (max-width: 991px) {
    .search-menu .search-form .search-form-container,
    .search-menu .search-form .search-form-container:focus-within {
        width: 100% !important;
    }

    .search-menu form.search-form button,
    .search-menu form.search-form:focus-within button {
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .search-menu form.search-form,
    .search-menu form.search-form:focus-within {
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .search-menu .search-form .search-form-container:focus-within {
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
}

.modal-dialog.modal-dialog-centered {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: none !important;
    justify-content: center !important;
    align-items: center !important;
}

.modal-content {
    width: 100% !important;
    max-width: 612px !important;
    justify-content: center !important;
    align-items: center !important;
}

.modal-body {
    width: 100% !important;
    max-width: 612px !important;
}

.global-modal__head {
    position: relative;
    width: 100%;
}

.global-modal__close {
    position: absolute !important;
    bottom: 5px !important;
    right: 11px !important;
    z-index: 10;
}
.auth-logo img, .auth-logo svg{
  width: 100% !important;
  opacity: 1 !important;
}

/* Aktif menü butonu */
.sb-top > .sb-top-btn.active {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow:
        inset 0 0 12px rgba(56, 189, 248, 0.05),
        0 0 8px rgba(56, 189, 248, 0.08) !important;
}

/* Border üzerinde gezen altın ışık */
.sb-top > .sb-top-btn.active::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 20px !important;
    height: 3px !important;
    border-radius: 50px !important;
    box-shadow:
        0 0 5px #3494EB,
        0 0 10px rgba(56, 189, 248, 0.9),
        0 0 18px rgba(56, 189, 248, 0.55) !important;

    offset-path: inset(1px round 8px);
    offset-distance: 0%;
    offset-rotate: auto;
    offset-anchor: center;

    animation: sb-active-border-run 7s linear infinite !important;

    z-index: 20 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Buton içeriği animasyonun altında kalmasın */
.sb-top > .sb-top-btn.active > * {
    position: relative;
    z-index: 2;
}

@keyframes sb-active-border-run {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}


#header.gb-desktop-header-v5{
  padding-left: 20px !important;
}

/* ==========================================================================
   GÜNCEL MAVİ TEMA — GLOBAL BİLEŞENLER
   ========================================================================== */
:root {
  --accent: #286EEA !important;
  --accent-rgb: 37, 99, 235 !important;
  --active: var(--accent) !important;
  --gradient-primary: linear-gradient(135deg, #3494EB 0%, #286EEA 52%, #286EEA 100%) !important;
  --gradient-primary-horizontal: linear-gradient(90deg, #286EEA 0%, #286EEA 52%, #3494EB 100%) !important;
  --btn-primary-bg: var(--gradient-primary) !important;
  --btn-primary-color: #F4F3FA !important;
  --header-register-bg: var(--gradient-primary) !important;
  --header-register-color: #F4F3FA !important;
  --wallet-btn-gradient: var(--gradient-primary-horizontal) !important;
  --wallet-deposit-bg: var(--gradient-primary) !important;
  --tab-active-bg: var(--accent) !important;
  --tab-active-border: #3494EB !important;
  --game-play-btn-bg: var(--gradient-primary) !important;
  --slider-pagination-dot-active: #3494EB !important;
  --input-border-focus: rgba(56, 189, 248, 0.72) !important;
}

/* Sol menü kabuğu ve eski arka plan görselinin kaldırılması */
#responsive-menu.responsive-menu,
#responsive-menu.responsive-menu.active-menu,
#responsive-menu.responsive-menu:not(.active-menu),
#responsive-menu.responsive-menu .sidebar-wrapper,
#responsive-menu.responsive-menu .sidebar-content {
  background-color: var(--surface-bg) !important;
  background-image: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-bg) 100%) !important;
  border-color: var(--surface-border) !important;
}

#responsive-menu.responsive-menu .sidebar-wrapper.sb-fade-slide::before,
#responsive-menu.responsive-menu .sidebar-wrapper.sb-fade-slide::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

#responsive-menu.responsive-menu .menu-body {
  padding: 10px !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top {
  gap: 8px !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn,
#responsive-menu.responsive-menu.active-menu .sl-acc__head,
#responsive-menu.responsive-menu .menu a,
#responsive-menu.responsive-menu .submenu a,
#responsive-menu.responsive-menu .accordion-menu a {
  min-height: 44px !important;
  margin-bottom: 6px !important;
  padding: 0 12px !important;
  color: var(--text-secondary) !important;
  background: linear-gradient(180deg, rgba(16, 29, 49, 0.92), rgba(7, 16, 32, 0.96)) !important;
  border: 1px solid rgba(143, 170, 211, 0.20) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn:not(.active):hover,
#responsive-menu.responsive-menu.active-menu .sl-acc__head:hover,
#responsive-menu.responsive-menu .menu a:not(.active):hover,
#responsive-menu.responsive-menu .submenu a:not(.active):hover,
#responsive-menu.responsive-menu .accordion-menu a:not(.active):hover {
  color: #F4F3FA !important;
  border-color: rgba(56, 189, 248, 0.52) !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.20), rgba(11, 22, 40, 0.96)) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn.active,
#responsive-menu.responsive-menu.active-menu .sl-acc__section.is-open > .sl-acc__head,
#responsive-menu.responsive-menu .menu a.active,
#responsive-menu.responsive-menu .submenu a.active,
#responsive-menu.responsive-menu .accordion-menu a.active {
  color: #F4F3FA !important;
  border-color: rgba(56, 189, 248, 0.72) !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.42), rgba(11, 22, 40, 0.98) 78%) !important;
  box-shadow: inset 3px 0 0 #3494EB, 0 0 18px rgba(37, 99, 235, 0.18) !important;
}

#responsive-menu.responsive-menu a svg,
#responsive-menu.responsive-menu button svg {
  color: #3494EB !important;
}

/* Telefon butonu/ikonu: img, SVG ve icon-font yapılarının tamamına destek */
#responsive-menu.responsive-menu a[href^="tel:"],
#responsive-menu.responsive-menu [class*="phone"],
#responsive-menu.responsive-menu [class*="call"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#responsive-menu.responsive-menu a[href^="tel:"] img,
#responsive-menu.responsive-menu a[href^="tel:"] svg,
#responsive-menu.responsive-menu [class*="phone"] img,
#responsive-menu.responsive-menu [class*="phone"] svg,
#responsive-menu.responsive-menu [class*="call"] img,
#responsive-menu.responsive-menu [class*="call"] svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #3494EB !important;
  fill: currentColor !important;
  filter: none !important;
}

/* Ortak sarı butonları mavi tema sistemine bağla */
header#header .button.register,
header#header a.wallet-button,
.btn-primary,
.button.primary,
button[type="submit"],
.common-form-button .button,
form.general-form .form-buttons button,
.auth-form .form-buttons button,
.register-button,
.wallet-button.deposit,
.wallet-buttons .button.deposit,
.game-item .game-opener .button:not(.demo),
.game-play .game-buttons .button.real,
.tournament-button,
.bonus-request-button {
  color: #F4F3FA !important;
  background-color: #286EEA !important;
  background-image: var(--gradient-primary) !important;
  border-color: rgba(56, 189, 248, 0.58) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28) !important;
}

header#header .button.register:hover,
header#header a.wallet-button:hover,
.btn-primary:hover,
.button.primary:hover,
button[type="submit"]:hover,
.common-form-button .button:hover,
form.general-form .form-buttons button:hover,
.auth-form .form-buttons button:hover,
.register-button:hover,
.wallet-button.deposit:hover,
.wallet-buttons .button.deposit:hover,
.game-item .game-opener .button:not(.demo):hover {
  color: #F4F3FA !important;
  border-color: #2EC2F5 !important;
  filter: brightness(1.08);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.38) !important;
}

.hero-area-slider .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active,
.progress-bar .progress,
.progressbar .progress,
.active-indicator {
  background: var(--gradient-primary-horizontal) !important;
  border-color: rgba(56, 189, 248, 0.58) !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.34) !important;
}

/* ==========================================================================
   CANLI Ä°KON VE YÃœZEY PALETÄ°
   Mavi + camgöbeği + mor; durum renklerinde yeşil ve mercan.
   ========================================================================== */
:root {
  --palette-blue: #286EEA;
  --palette-blue-light: #3494EB;
  --palette-cyan: #3494EB;
  --palette-cyan-light: #2EC2F5;
  --palette-purple: #6C2DE0;
  --palette-purple-light: #8123EC;
  --palette-green: #34d399;
  --palette-coral: #fb7185;
  --palette-white: #F4F3FA;
  --palette-on-color: #F4F3FA;
}

/* Menü ikonlarının ortak görünümü */
#responsive-menu.responsive-menu .sl-acc__icon,
#responsive-menu.responsive-menu .sl-acc__itemIcon,
#responsive-menu.responsive-menu .menu .icon,
#responsive-menu.responsive-menu .submenu .icon,
#responsive-menu.responsive-menu .accordion-menu .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  color: var(--palette-cyan-light) !important;
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.20), rgba(37, 99, 235, 0.10)) !important;
  border: 1px solid rgba(103, 232, 249, 0.30) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 5px 14px rgba(37, 99, 235, 0.16) !important;
}

#responsive-menu.responsive-menu .sl-acc__icon svg,
#responsive-menu.responsive-menu .sl-acc__itemIcon svg,
#responsive-menu.responsive-menu .menu .icon svg,
#responsive-menu.responsive-menu .submenu .icon svg,
#responsive-menu.responsive-menu .accordion-menu .icon svg {
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  filter: drop-shadow(0 0 5px rgba(103, 232, 249, 0.28)) !important;
}

#responsive-menu.responsive-menu .sl-acc__section:nth-of-type(3n + 2) .sl-acc__icon,
#responsive-menu.responsive-menu .sl-acc__item:nth-of-type(3n + 2) .sl-acc__itemIcon,
#responsive-menu.responsive-menu .menu li:nth-child(3n + 2) .icon {
  color: var(--palette-purple-light) !important;
  background: linear-gradient(145deg, rgba(167, 139, 250, 0.22), rgba(124, 58, 237, 0.10)) !important;
  border-color: rgba(167, 139, 250, 0.34) !important;
}

#responsive-menu.responsive-menu .sl-acc__section:nth-of-type(3n) .sl-acc__icon,
#responsive-menu.responsive-menu .sl-acc__item:nth-of-type(3n) .sl-acc__itemIcon,
#responsive-menu.responsive-menu .menu li:nth-child(3n) .icon {
  color: var(--palette-green) !important;
  background: linear-gradient(145deg, rgba(52, 211, 153, 0.20), rgba(5, 150, 105, 0.08)) !important;
  border-color: rgba(52, 211, 153, 0.30) !important;
}

#responsive-menu.responsive-menu a:hover .icon,
#responsive-menu.responsive-menu button:hover .icon,
#responsive-menu.responsive-menu .sl-acc__item:hover .sl-acc__itemIcon {
  color: #F4F3FA !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
  filter: brightness(1.12);
}

/* Casino ve Spor seçim ikonları */
.p2seg.casino .p2bgIcon,
.p2seg.sportsbook .p2bgIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  color: #F4F3FA !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

.p2seg.casino .p2bgIcon {
  background: linear-gradient(145deg, var(--palette-purple-light), var(--palette-purple)) !important;
}

.p2seg.sportsbook .p2bgIcon {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, var(--palette-cyan), var(--palette-blue)) !important;
}

/* Hatalı kedi patisi görselini kaldır; spor için temiz top simgesi kullan */
.p2seg.sportsbook .p2bgIcon img,
.p2seg.sportsbook .p2bgIcon svg,
.p2seg.sportsbook .p2bgIcon [class*="paw"],
.p2seg.sportsbook .p2bgIcon [class*="cat"] {
  display: none !important;
}

.p2seg.sportsbook .p2bgIcon::before {
  content: "âš½" !important;
  display: block !important;
  color: #F4F3FA !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
  font-size: 23px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30));
}

/* Kayıt ol: yüksek özgüllüklü eski siyah metni kaldır */
header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register,
header#header .login-buttons .button.register,
header#header a.button.register,
.button.register,
a.register-button {
  color: #F4F3FA !important;
  -webkit-text-fill-color: #F4F3FA !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

header#header a.button.register *,
.button.register *,
a.register-button * {
  color: #F4F3FA !important;
  -webkit-text-fill-color: #F4F3FA !important;
  fill: currentColor !important;
}

/* Slider kabuğu, kartlar ve Tümünü Gör kontrolleri */
.hero-area-slider,
.hero-slider,
.slider-wrapper,
.swiper,
.owl-carousel,
.game-carousel,
.provider-carousel {
  border-color: rgba(56, 189, 248, 0.24) !important;
}

.hero-area-slider:hover,
.hero-slider:hover,
.game-carousel:hover,
.provider-carousel:hover {
  border-color: rgba(96, 165, 250, 0.48) !important;
}

.show-all,
.view-all,
.owl-view-all,
.owl-nav.owl-nav--header .owl-view-all,
.section-button,
a.show-all,
button.show-all {
  color: var(--palette-cyan-light) !important;
  -webkit-text-fill-color: var(--palette-cyan-light) !important;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.20), rgba(139, 92, 246, 0.16)) !important;
  border-color: rgba(103, 232, 249, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 18px rgba(37, 99, 235, 0.14) !important;
}

.show-all:hover,
.view-all:hover,
.owl-view-all:hover,
.owl-nav.owl-nav--header .owl-view-all:hover,
.section-button:hover,
a.show-all:hover,
button.show-all:hover {
  color: #F4F3FA !important;
  -webkit-text-fill-color: #F4F3FA !important;
  background: linear-gradient(145deg, var(--palette-blue), var(--palette-purple)) !important;
  border-color: var(--palette-cyan-light) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.30), 0 0 14px rgba(103, 232, 249, 0.14) !important;
}

.swiper-button-prev,
.swiper-button-next,
.owl-prev,
.owl-next,
.carousel-nav button,
.slider-navigation button,
.slider-nav button {
  color: var(--palette-cyan-light) !important;
  background: rgba(7, 16, 32, 0.90) !important;
  border-color: rgba(96, 165, 250, 0.38) !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover,
.owl-prev:hover,
.owl-next:hover,
.carousel-nav button:hover,
.slider-navigation button:hover,
.slider-nav button:hover {
  color: #F4F3FA !important;
  background: linear-gradient(145deg, var(--palette-blue), var(--palette-purple)) !important;
  border-color: var(--palette-cyan-light) !important;
}

/* Eski sarı kart sınırlarını kontrollü, çok renkli yüzeylere dönüştür */
.game-item,
.game-card,
.category-item,
.home-category-item,
.provider-item,
.provider-card,
.promotion-item,
.bonus-card,
.wallet-box,
.league-card,
.card,
.panel {
  border-color: rgba(96, 165, 250, 0.22) !important;
}

.game-item:hover,
.game-card:hover,
.category-item:hover,
.home-category-item:hover,
.provider-item:hover,
.provider-card:hover,
.promotion-item:hover,
.bonus-card:hover,
.league-card:hover {
  border-color: rgba(103, 232, 249, 0.52) !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.16), 0 0 16px rgba(139, 92, 246, 0.10) !important;
}

/* ==========================================================================
   AYDINLIK VE CANLI GECE PALETÄ°
   ========================================================================== */
:root {
  --brand-primary: #286EEA !important;
  --brand-primary-rgb: 59, 130, 246 !important;
  --brand-secondary: #2EC2F5 !important;
  --brand-secondary-rgb: 34, 211, 238 !important;
  --accent: #286EEA !important;
  --accent-rgb: 59, 130, 246 !important;

  --surface-bg: #0b1633 !important;
  --surface-bg-rgb: 11, 22, 51 !important;
  --surface-1: #102348 !important;
  --surface-2: #17315f !important;
  --surface-3: #1d3f73 !important;
  --surface-4: #28538e !important;
  --surface-card: rgba(23, 49, 95, 0.88) !important;
  --surface-modal: #102348 !important;
  --surface-elevated: #1d3f73 !important;

  --surface-border: rgba(125, 211, 252, 0.30) !important;
  --surface-border-soft: rgba(147, 197, 253, 0.20) !important;
  --surface-border-strong: rgba(34, 211, 238, 0.62) !important;

  --palette-blue: #286EEA;
  --palette-blue-light: #93c5fd;
  --palette-cyan: #2EC2F5;
  --palette-cyan-light: #a5f3fc;
  --palette-purple: #6C2DE0;
  --palette-purple-light: #8123EC;
  --palette-green: #4ade80;
  --palette-coral: #fb7185;

  --gradient-primary: linear-gradient(135deg, #2EC2F5 0%, #286EEA 48%, #6C2DE0 100%) !important;
  --gradient-primary-horizontal: linear-gradient(90deg, #6C2DE0 0%, #286EEA 50%, #2EC2F5 100%) !important;
  --gradient-surface: linear-gradient(145deg, rgba(40, 83, 142, 0.88), rgba(16, 35, 72, 0.96)) !important;
  --input-bg: linear-gradient(180deg, rgba(29, 63, 115, 0.82), rgba(16, 35, 72, 0.92)) !important;
  --input-border: rgba(147, 197, 253, 0.30) !important;
  --input-border-focus: rgba(34, 211, 238, 0.82) !important;
}

html,
body,
#root,
#__next {
  background-color: var(--surface-bg) !important;
}

body {
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(34, 211, 238, 0.16), transparent 62%),
    radial-gradient(760px 420px at 88% 4%, rgba(139, 92, 246, 0.14), transparent 60%),
    linear-gradient(180deg, #0b1633 0%, #102348 52%, #0d1b3b 100%) !important;
}

header#header,
header#header .middle-header,
header#header .menu-header,
.top-header,
.middle-header,
.menu-header {
  background: rgba(16, 35, 72, 0.92) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
  box-shadow: 0 12px 34px rgba(3, 12, 32, 0.34), inset 0 -1px 0 rgba(34, 211, 238, 0.14) !important;
}

#responsive-menu.responsive-menu,
#responsive-menu.responsive-menu.active-menu,
#responsive-menu.responsive-menu:not(.active-menu),
#responsive-menu.responsive-menu .sidebar-wrapper,
#responsive-menu.responsive-menu .sidebar-content {
  background: linear-gradient(180deg, rgba(23, 49, 95, 0.98), rgba(11, 22, 51, 0.98)) !important;
  border-color: rgba(125, 211, 252, 0.26) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn,
#responsive-menu.responsive-menu.active-menu .sl-acc__head,
#responsive-menu.responsive-menu .menu a,
#responsive-menu.responsive-menu .submenu a,
#responsive-menu.responsive-menu .accordion-menu a {
  background: linear-gradient(145deg, rgba(40, 83, 142, 0.72), rgba(16, 35, 72, 0.90)) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn:not(.active):hover,
#responsive-menu.responsive-menu.active-menu .sl-acc__head:hover,
#responsive-menu.responsive-menu .menu a:not(.active):hover,
#responsive-menu.responsive-menu .submenu a:not(.active):hover,
#responsive-menu.responsive-menu .accordion-menu a:not(.active):hover {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.25), rgba(59, 130, 246, 0.28), rgba(139, 92, 246, 0.20)) !important;
  border-color: rgba(165, 243, 252, 0.68) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn.active,
#responsive-menu.responsive-menu.active-menu .sl-acc__section.is-open > .sl-acc__head,
#responsive-menu.responsive-menu .menu a.active,
#responsive-menu.responsive-menu .submenu a.active,
#responsive-menu.responsive-menu .accordion-menu a.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.34), rgba(59, 130, 246, 0.44), rgba(139, 92, 246, 0.30)) !important;
  border-color: rgba(165, 243, 252, 0.82) !important;
  box-shadow: inset 3px 0 0 #a5f3fc, 0 8px 22px rgba(59, 130, 246, 0.20) !important;
}

.game-item,
.game-card,
.category-item,
.home-category-item,
.provider-item,
.provider-card,
.promotion-item,
.bonus-card,
.wallet-box,
.league-card,
.card,
.panel {
  background-color: rgba(23, 49, 95, 0.66) !important;
  border-color: rgba(147, 197, 253, 0.26) !important;
}

.show-all,
.view-all,
.owl-view-all,
.owl-nav.owl-nav--header .owl-view-all,
.section-button,
a.show-all,
button.show-all {
  color: #a5f3fc !important;
  -webkit-text-fill-color: #a5f3fc !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.22), rgba(139, 92, 246, 0.24)) !important;
  border-color: rgba(165, 243, 252, 0.58) !important;
}

/* Alt sayfalar: eski siyah yüzeyleri daha açık tema katmanına bağla */
main#main,
main,
.page,
.page-body,
.page-content,
.main-content,
.content-wrapper,
.listing-page,
.providers-page,
.promotions-page,
.tournaments-page,
.settings-page {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.page-header,
.general-header,
.main-search,
.form-block,
.settings-content,
.settings-block,
.modal-content,
.dropdown-menu,
.notification-item,
.provider-listing,
.game-listing {
  background-color: rgba(23, 49, 95, 0.78) !important;
  background-image: linear-gradient(145deg, rgba(40, 83, 142, 0.40), rgba(16, 35, 72, 0.72)) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
}

input,
select,
textarea,
.search-form,
.search-form-container {
  color: #F4F3FA !important;
  background-color: rgba(29, 63, 115, 0.72) !important;
  border-color: rgba(147, 197, 253, 0.32) !important;
}

/* Tüm ok/chevron katmanlarında sarı kaynaklarını iptal et */
.arrow,
.caret,
.chevron,
[class*="arrow"],
[class*="caret"],
[class*="chevron"],
.sb-top-arrow,
.sl-acc__arrow,
.swiper-button-prev,
.swiper-button-next,
.owl-prev,
.owl-next {
  color: #a5f3fc !important;
  border-color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
}

.arrow svg,
.caret svg,
.chevron svg,
[class*="arrow"] svg,
[class*="caret"] svg,
[class*="chevron"] svg,
.sb-top-arrow svg,
.sl-acc__arrow svg,
.swiper-button-prev svg,
.swiper-button-next svg,
.owl-prev svg,
.owl-next svg,
.arrow svg *,
.caret svg *,
.chevron svg *,
[class*="arrow"] svg *,
[class*="caret"] svg *,
[class*="chevron"] svg * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}

.owl-nav.owl-nav--header .owl-prev::after,
.owl-nav.owl-nav--header .owl-next::after {
  width: 9px !important;
  height: 9px !important;
  background: none !important;
  background-image: none !important;
  border-top: 2px solid #a5f3fc !important;
  border-right: 2px solid #a5f3fc !important;
  filter: none !important;
}

.owl-nav.owl-nav--header .owl-next::after {
  transform: rotate(45deg) !important;
}

.owl-nav.owl-nav--header .owl-prev::after {
  transform: rotate(-135deg) !important;
}

/* Eski sarı ikon filtrelerini tema genelinde kaldır */
#responsive-menu img,
#responsive-menu svg,
.category img,
.category svg,
.section-title img,
.section-title svg,
.owl-nav img,
.owl-nav svg {
  filter: none !important;
}

/* Sidebar açık/kapalı geometrisi ve taşma kontrolü */
#responsive-menu.responsive-menu {
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: width 0.22s ease, min-width 0.22s ease, max-width 0.22s ease !important;
}

#responsive-menu.responsive-menu.active-menu {
  width: 224px !important;
  min-width: 224px !important;
  max-width: 224px !important;
}

#responsive-menu.responsive-menu:not(.active-menu) {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  overflow-x: hidden !important;
}

#responsive-menu.responsive-menu .sidebar-wrapper,
#responsive-menu.responsive-menu .sidebar-content,
#responsive-menu.responsive-menu .menu-body {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sidebar-wrapper,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-content,
#responsive-menu.responsive-menu:not(.active-menu) .menu-body {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .menu-head,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-section-title,
#responsive-menu.responsive-menu:not(.active-menu) .to-search-modal,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-lang-footer,
#responsive-menu.responsive-menu:not(.active-menu) .sb-top-title,
#responsive-menu.responsive-menu:not(.active-menu) .sb-top-arrow,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__itemText,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__title,
#responsive-menu.responsive-menu:not(.active-menu) .menu a span:not(.icon),
#responsive-menu.responsive-menu:not(.active-menu) .submenu {
  display: none !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sb-top,
#responsive-menu.responsive-menu:not(.active-menu) .accordion-menu,
#responsive-menu.responsive-menu:not(.active-menu) .menu {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sb-top-btn,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__head,
#responsive-menu.responsive-menu:not(.active-menu) .menu a {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  padding: 0 !important;
  margin: 6px 0 !important;
  justify-content: center !important;
  overflow: hidden !important;
  transform: none !important;
}

/* ==========================================================================
   GÖRSEL GERİ BİLDİRİM — DAHA AYDINLIK CANVAS VE SIDEBAR ALT İKONLARI
   ========================================================================== */
:root {
  --surface-bg: #12264b !important;
  --surface-bg-rgb: 18, 38, 75 !important;
  --surface-1: #071450 !important;
  --surface-2: #204579 !important;
  --surface-3: #285994 !important;
  --surface-4: #3470b6 !important;
  --surface-card: rgba(32, 69, 121, 0.88) !important;
  --surface-modal: #071450 !important;
  --surface-elevated: #285994 !important;
  --text-muted: rgba(224, 237, 255, 0.72) !important;
  --text-soft: rgba(224, 237, 255, 0.58) !important;
}

body {
  background:
    radial-gradient(960px 520px at 10% -8%, rgba(34, 211, 238, 0.22), transparent 62%),
    radial-gradient(820px 480px at 92% 0%, rgba(167, 139, 250, 0.20), transparent 60%),
    linear-gradient(180deg, #12264b 0%, #071450 50%, #142c55 100%) !important;
}

body main#main,
body main#main[class],
body .page,
body .page-body,
body .page-content,
body .main-content,
body .content-wrapper {
  background-color: rgba(18, 38, 75, 0.74) !important;
  background-image:
    radial-gradient(720px 300px at 82% 0%, rgba(139, 92, 246, 0.12), transparent 68%),
    linear-gradient(180deg, rgba(24, 51, 95, 0.76), rgba(18, 38, 75, 0.88)) !important;
}

.page-header,
.general-header,
.main-search,
.form-block,
.settings-content,
.settings-block,
.modal-content,
.dropdown-menu,
.provider-listing,
.game-listing,
.challenge-filter,
.challenge-controls,
.challenge-dropdown {
  background-color: rgba(32, 69, 121, 0.84) !important;
  background-image: linear-gradient(145deg, rgba(52, 112, 182, 0.34), rgba(24, 51, 95, 0.76)) !important;
  border-color: rgba(165, 243, 252, 0.30) !important;
}

/* Sidebar akordeon panelinin siyah zeminini kaldır */
#responsive-menu.responsive-menu.active-menu .sl-acc__section,
#responsive-menu.responsive-menu.active-menu .sl-acc__body,
#responsive-menu.responsive-menu.active-menu .sl-acc__items {
  background-color: rgba(24, 51, 95, 0.94) !important;
  background-image: linear-gradient(180deg, rgba(32, 69, 121, 0.74), rgba(24, 51, 95, 0.92)) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__itemInner {
  position: relative !important;
  min-height: 38px !important;
  padding: 5px 8px 5px 38px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}

/* Alt menüdeki düz beyaz dosya ikonlarını renkli kategori rozetine dönüştür */
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemIcon,
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner > img,
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner > svg,
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner > i {
  display: none !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner::before {
  content: "â—†" !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  width: 23px !important;
  height: 23px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a5f3fc !important;
  font-size: 10px !important;
  line-height: 1 !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.30), rgba(59, 130, 246, 0.30)) !important;
  border: 1px solid rgba(165, 243, 252, 0.42) !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 10px rgba(14, 165, 233, 0.14) !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(3n + 2) .sl-acc__itemInner::before {
  color: #8123EC !important;
  background: linear-gradient(145deg, rgba(167, 139, 250, 0.32), rgba(124, 58, 237, 0.28)) !important;
  border-color: rgba(196, 181, 253, 0.48) !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(3n) .sl-acc__itemInner::before {
  color: #86efac !important;
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.28), rgba(5, 150, 105, 0.24)) !important;
  border-color: rgba(134, 239, 172, 0.42) !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__itemText {
  color: rgba(232, 242, 255, 0.82) !important;
}

/* Carousel oklarını uzak görselden tamamen bağımsız çiz */
.owl-nav.owl-nav--header .owl-prev,
.owl-nav.owl-nav--header .owl-next,
.swiper-button-prev,
.swiper-button-next {
  color: #a5f3fc !important;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.38), rgba(139, 92, 246, 0.28)) !important;
  border-color: rgba(165, 243, 252, 0.60) !important;
}

.owl-nav.owl-nav--header .owl-prev::after,
.owl-nav.owl-nav--header .owl-next::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 9px !important;
  height: 9px !important;
  opacity: 1 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 2px solid #a5f3fc !important;
  border-right: 2px solid #a5f3fc !important;
  filter: none !important;
}

.owl-nav.owl-nav--header .owl-next::after {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

.owl-nav.owl-nav--header .owl-prev::after {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

.owl-nav.owl-nav--header .owl-prev:hover::after,
.owl-nav.owl-nav--header .owl-next:hover::after {
  border-color: #F4F3FA !important;
  filter: drop-shadow(0 0 4px rgba(165, 243, 252, 0.55)) !important;
}

/* ==========================================================================
   SIDEBAR RAIL DÜZELTMESİ — TEKRAR AÇILABİLİR, TAŞMASIZ
   ========================================================================== */
header#header {
  position: relative !important;
  z-index: 4000 !important;
}

header#header .menu-header,
header#header [class*="menu-toggle"],
header#header [class*="menu-button"],
header#header [class*="menu-opener"],
header#header [class*="hamburger"] {
  position: relative !important;
  z-index: 4001 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#responsive-menu.responsive-menu {
  z-index: 2000 !important;
  contain: layout paint !important;
}

#responsive-menu.responsive-menu:not(.active-menu) {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  overflow: hidden !important;
  clip-path: inset(0) !important;
}

#responsive-menu.responsive-menu:not(.active-menu),
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-wrapper,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-content,
#responsive-menu.responsive-menu:not(.active-menu) .menu-body {
  background-image: none !important;
  background-color: #071450 !important;
}

#responsive-menu.responsive-menu:not(.active-menu)::before,
#responsive-menu.responsive-menu:not(.active-menu)::after,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-wrapper::before,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-wrapper::after,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-content::before,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-content::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
}

#responsive-menu.responsive-menu:not(.active-menu) * {
  max-width: 60px !important;
  box-sizing: border-box !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sb-top-btn,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__head,
#responsive-menu.responsive-menu:not(.active-menu) .menu a {
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   ALT MENÜ İKON SETİ — ESKİ DOSYA İKONLARINI KALDIR
   ========================================================================== */
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner .icon,
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner [class*="Icon"],
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner [class*="icon"],
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner picture,
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner img,
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner svg,
#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner i {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(n + 2) .sl-acc__itemInner::before {
  content: "✦" !important;
  transform: translateY(-50%) !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(2) .sl-acc__itemInner::before {
  content: "★" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(3) .sl-acc__itemInner::before {
  content: "%" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(4) .sl-acc__itemInner::before {
  content: "â—†" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(5) .sl-acc__itemInner::before {
  content: "✹" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(6) .sl-acc__itemInner::before {
  content: "＋" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(7) .sl-acc__itemInner::before {
  content: "â—‰" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(8) .sl-acc__itemInner::before {
  content: "â™›" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(9) .sl-acc__itemInner::before {
  content: "âš¡" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(10) .sl-acc__itemInner::before {
  content: "◎" !important;
}

#responsive-menu.responsive-menu.active-menu .sl-acc__item:nth-child(11) .sl-acc__itemInner::before {
  content: "NEW" !important;
  font-size: 7px !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   SIDEBAR AÇ/KAPAT KONTROLÜ VE DAR MOD HİZALAMASI
   ========================================================================== */
#responsive-menu.responsive-menu:not(.active-menu) .menu-head {
  display: flex !important;
  position: relative !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  min-height: 54px !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .menu-head .head-left {
  display: flex !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Dar modda sekmeleri gizle; açma/kapatma kontrolünü görünür bırak */
#responsive-menu.responsive-menu:not(.active-menu) .menu-head .head-tabs,
#responsive-menu.responsive-menu:not(.active-menu) .menu-head .head-tabs--plain,
#responsive-menu.responsive-menu:not(.active-menu) .menu-head .head-tab-btn,
#responsive-menu.responsive-menu:not(.active-menu) .menu-head .head-tab-btn__label {
  display: none !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .menu-head button:not(.head-tab-btn),
#responsive-menu.responsive-menu:not(.active-menu) .menu-head [role="button"]:not(.head-tab-btn),
#responsive-menu.responsive-menu:not(.active-menu) .menu-head [class*="toggle"],
#responsive-menu.responsive-menu:not(.active-menu) .menu-head [class*="trigger"],
#responsive-menu.responsive-menu:not(.active-menu) .menu-head [class*="opener"],
#responsive-menu.responsive-menu:not(.active-menu) .menu-head [class*="hamburger"] {
  display: inline-flex !important;
  position: relative !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  color: #F4F3FA !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.30), rgba(59, 130, 246, 0.42)) !important;
  border: 1px solid rgba(165, 243, 252, 0.58) !important;
  border-radius: 10px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 32 !important;
}

/* Dar rail içindeki ikonları gerçek merkeze al */
#responsive-menu.responsive-menu:not(.active-menu) .sb-top-btn,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__head,
#responsive-menu.responsive-menu:not(.active-menu) .menu a,
#responsive-menu.responsive-menu:not(.active-menu) .submenu a,
#responsive-menu.responsive-menu:not(.active-menu) .accordion-menu a {
  display: flex !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  min-height: 48px !important;
  padding: 0 !important;
  margin: 6px 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sb-top-btn > *,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__head > *,
#responsive-menu.responsive-menu:not(.active-menu) .menu a > *,
#responsive-menu.responsive-menu:not(.active-menu) .accordion-menu a > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__icon,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__itemIcon,
#responsive-menu.responsive-menu:not(.active-menu) .menu .icon,
#responsive-menu.responsive-menu:not(.active-menu) .accordion-menu .icon {
  position: static !important;
  inset: auto !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* ==========================================================================
   HAREKETLİ IŞIK — HEADER ALT ÇİZGİSİ VE SIDEBAR SAĞ KENARI
   ========================================================================== */
header#header {
  overflow: visible !important;
  isolation: isolate !important;
}

header#header::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -28% !important;
  bottom: -1px !important;
  width: 28% !important;
  height: 2px !important;
  z-index: 50 !important;
  pointer-events: none !important;
  opacity: 0.95 !important;
  background: linear-gradient(90deg, transparent, #2EC2F5 30%, #F4F3FA 52%, #8123EC 72%, transparent) !important;
  box-shadow: 0 0 7px rgba(34, 211, 238, 0.72), 0 0 14px rgba(167, 139, 250, 0.42) !important;
  animation: gambleron-header-light 5.2s linear infinite !important;
}

#responsive-menu.responsive-menu::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -24% !important;
  right: 0 !important;
  width: 2px !important;
  height: 24% !important;
  z-index: 60 !important;
  pointer-events: none !important;
  opacity: 0.95 !important;
  background: linear-gradient(180deg, transparent, #2EC2F5 28%, #F4F3FA 52%, #8123EC 76%, transparent) !important;
  box-shadow: 0 0 7px rgba(34, 211, 238, 0.82), 0 0 15px rgba(167, 139, 250, 0.46) !important;
  animation: gambleron-sidebar-light 4.4s linear infinite !important;
}

#responsive-menu.responsive-menu:not(.active-menu)::after {
  content: "" !important;
  display: block !important;
  width: 2px !important;
  height: 24% !important;
  top: -24% !important;
  right: 0 !important;
  background: linear-gradient(180deg, transparent, #2EC2F5 28%, #F4F3FA 52%, #8123EC 76%, transparent) !important;
  box-shadow: 0 0 7px rgba(34, 211, 238, 0.82), 0 0 15px rgba(167, 139, 250, 0.46) !important;
  opacity: 0.95 !important;
  animation: gambleron-sidebar-light 4.4s linear infinite !important;
}

@keyframes gambleron-header-light {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(460%);
  }
}

@keyframes gambleron-sidebar-light {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(520%);
  }
}

@media (prefers-reduced-motion: reduce) {
  header#header::after,
  #responsive-menu.responsive-menu::after {
    animation: none !important;
    opacity: 0.55 !important;
  }
}

/* ==========================================================================
   SIDEBAR SON HÄ°ZALAMA VE MENU-HEAD AYIRICI
   ========================================================================== */
#responsive-menu.responsive-menu {
  width: 224px !important;
}

#responsive-menu.responsive-menu:not(.active-menu) {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .menu-head,
#responsive-menu.responsive-menu:not(.active-menu) .menu-head .head-left {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sidebar-wrapper,
#responsive-menu.responsive-menu:not(.active-menu) .sidebar-content,
#responsive-menu.responsive-menu:not(.active-menu) .menu-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sb-top,
#responsive-menu.responsive-menu:not(.active-menu) .accordion-menu,
#responsive-menu.responsive-menu:not(.active-menu) .menu,
#responsive-menu.responsive-menu:not(.active-menu) .submenu {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .sb-top-btn,
#responsive-menu.responsive-menu:not(.active-menu) .sl-acc__head,
#responsive-menu.responsive-menu:not(.active-menu) .menu a,
#responsive-menu.responsive-menu:not(.active-menu) .submenu a,
#responsive-menu.responsive-menu:not(.active-menu) .accordion-menu a {
  margin: 6px auto !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .menu-head::after,
#responsive-menu.responsive-menu.active-menu .menu-head::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -1px !important;
  width: calc(100% - 20px) !important;
  max-width: 204px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 0.95 !important;
  background:
    linear-gradient(90deg, transparent 0%, #2EC2F5 30%, #F4F3FA 50%, #8123EC 70%, transparent 100%) !important;
  background-size: 220% 100% !important;
  box-shadow:
    0 0 6px rgba(34, 211, 238, 0.72),
    0 0 12px rgba(167, 139, 250, 0.38) !important;
  transform: translateX(-50%) !important;
  animation: gambleron-menu-divider-light 3.6s linear infinite !important;
  z-index: 40 !important;
}

#responsive-menu.responsive-menu:not(.active-menu) .menu-head::after {
  width: 48px !important;
}

#responsive-menu.responsive-menu .menu-head {
  position: relative !important;
  margin-bottom: 10px !important;
}

@keyframes gambleron-menu-divider-light {
  from {
    background-position: 100% 0;
    filter: brightness(0.88);
  }
  50% {
    filter: brightness(1.34);
  }
  to {
    background-position: -120% 0;
    filter: brightness(0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  #responsive-menu.responsive-menu .menu-head::after {
    animation: none !important;
  }
}

/* Compact görünüm: yalnızca butonları ortala, layout kapsayıcılarına dokunma */
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head .head-left,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-btn,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__head,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu a {
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
}

/* Menü altındaki sade çift yönlü ışık */
#responsive-menu.responsive-menu .menu-head::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -1px !important;
  width: calc(100% - 20px) !important;
  height: 1px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    #8123EC 0%,
    transparent 24%,
    rgba(165, 243, 252, 0.76) 44%,
    #F4F3FA 50%,
    rgba(165, 243, 252, 0.76) 56%,
    transparent 76%,
    #8123EC 100%
  ) !important;
  background-size: 180% 100% !important;
  transform: translateX(-50%) !important;
  animation: gambleron-menu-light-safe 3s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head::after {
  width: 48px !important;
}

@keyframes gambleron-menu-light-safe {
  0% {
    background-position: 0% 0;
    opacity: 0.28;
    box-shadow: -7px 0 5px rgba(167, 139, 250, 0.42);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.58);
  }
  100% {
    background-position: 100% 0;
    opacity: 0.28;
    box-shadow: 7px 0 5px rgba(167, 139, 250, 0.42);
  }
}

/* ==========================================================================
   AÇIK/KAPALI MENÜ ÖLÇÜ EŞLEŞMESİ — DIŞ LAYOUT'A DOKUNMAZ
   ========================================================================== */
body:not(.sb-collapsed) #responsive-menu.responsive-menu {
  contain: none !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
}

body:not(.sb-collapsed) #responsive-menu.responsive-menu .sidebar-content,
body:not(.sb-collapsed) #responsive-menu.responsive-menu .menu-head,
body:not(.sb-collapsed) #responsive-menu.responsive-menu .sidebar-wrapper {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Compact öğeler: parent layout'u değiştirmeden kesin yatay boşluk */
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head .head-left,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-btn,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__head,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu a {
  left: 0 !important;
  right: auto !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 9px !important;
  margin-right: 9px !important;
  transform: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu {
  contain: none !important;
}

/* Hamburger + Menü satırının altında çalışan ışık */
#responsive-menu.responsive-menu .menu-head {
  position: relative !important;
}

#responsive-menu.responsive-menu .menu-head::after,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 1px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      #8123EC 0%,
      rgba(167, 139, 250, 0.18) 20%,
      transparent 36%,
      #F4F3FA 50%,
      transparent 64%,
      rgba(167, 139, 250, 0.18) 80%,
      #8123EC 100%
    ) !important;
  background-size: 200% 100% !important;
  opacity: 0.35 !important;
  transform: none !important;
  animation: gambleron-menu-head-light 2.8s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head::after {
  left: 9px !important;
  right: 9px !important;
}

@keyframes gambleron-menu-head-light {
  0% {
    background-position: 0% 0;
    opacity: 0.25;
    box-shadow: -8px 0 6px rgba(167, 139, 250, 0.46);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(165, 243, 252, 0.72);
  }
  100% {
    background-position: 100% 0;
    opacity: 0.25;
    box-shadow: 8px 0 6px rgba(167, 139, 250, 0.46);
  }
}

@media (max-width: 991px) {
  body:not(.sb-collapsed) #responsive-menu.responsive-menu {
    width: min(82vw, 260px) !important;
    min-width: min(82vw, 260px) !important;
    max-width: min(82vw, 260px) !important;
  }

  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head .head-left,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-btn,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__head,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu a {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

@media (max-width: 575px) {
  body:not(.sb-collapsed) #responsive-menu.responsive-menu {
    width: min(86vw, 248px) !important;
    min-width: min(86vw, 248px) !important;
    max-width: min(86vw, 248px) !important;
  }

  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head .head-left,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-btn,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__head,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu a {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    margin-left: 7px !important;
    margin-right: 7px !important;
  }
}

/* ==========================================================================
   CANLI SAYFA DOĞRULAMASI — COMPACT RAIL + MENU HEAD LIGHT
   78px rayda eski 10px dış padding taşmaya ve sağa kaymaya neden oluyordu.
   ========================================================================== */
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact {
  box-sizing: border-box !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .sidebar-content,
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .menu-head,
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .sidebar-wrapper {
  box-sizing: border-box !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .sidebar-content {
  padding: 0 0 120px !important;
}

body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .sidebar-wrapper {
  padding: 2px 0 !important;
  align-items: stretch !important;
}

body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .menu-head {
  padding: 7px 8px !important;
  justify-content: center !important;
  align-items: center !important;
}

body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .menu-head .title,
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .menu-head .head-left,
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .sb-top-btn,
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .menu a,
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .accordion-menu a {
  margin-left: auto !important;
  margin-right: auto !important;
}

body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .p2seg {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Menü başlığının altında görünür, çift yönlü ışık hareketi */
#responsive-menu.responsive-menu.gb-sidebar-compact .menu-head {
  overflow: visible !important;
}

#responsive-menu.responsive-menu.gb-sidebar-compact .menu-head::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 0 !important;
  width: auto !important;
  height: 2px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(
      90deg,
      #6C2DE0 0%,
      rgba(139, 92, 246, 0.15) 18%,
      transparent 38%,
      #e0f2fe 50%,
      transparent 62%,
      rgba(34, 211, 238, 0.15) 82%,
      #2EC2F5 100%
    ) !important;
  background-size: 240% 100% !important;
  box-shadow:
    -8px 0 10px rgba(139, 92, 246, 0.48),
    8px 0 10px rgba(34, 211, 238, 0.48) !important;
  animation: gambleron-menu-head-live 2.2s ease-in-out infinite alternate !important;
}

@keyframes gambleron-menu-head-live {
  0% {
    background-position: 0% 50%;
    filter: brightness(0.8);
    box-shadow:
      -10px 0 14px rgba(139, 92, 246, 0.82),
      6px 0 7px rgba(34, 211, 238, 0.22);
  }

  50% {
    background-position: 50% 50%;
    filter: brightness(1.35);
    box-shadow:
      0 0 13px rgba(224, 242, 254, 0.78),
      0 0 5px rgba(34, 211, 238, 0.48);
  }

  100% {
    background-position: 100% 50%;
    filter: brightness(0.9);
    box-shadow:
      -6px 0 7px rgba(139, 92, 246, 0.22),
      10px 0 14px rgba(34, 211, 238, 0.82);
  }
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact,
  body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .sidebar-content,
  body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .menu-head,
  body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .sidebar-wrapper {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact .menu-head {
    padding: 7px !important;
  }

  #responsive-menu.responsive-menu.gb-sidebar-compact .menu-head::after {
    left: 7px !important;
    right: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #responsive-menu.responsive-menu.gb-sidebar-compact .menu-head::after {
    animation: none !important;
  }
}

/* Compact rail: DevTools'ta doÄŸrulanan nihai merkezleme */
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ==========================================================================
   COMPACT RAIL — REFERANS GÖRSELDEKİ TEK KOLON HİZALAMA
   ========================================================================== */
body.sb-collapsed #responsive-menu.gb-sidebar-compact {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  background: linear-gradient(180deg, #111827 0%, #0b1220 100%) !important;
  border-right: 1px solid rgba(125, 211, 252, 0.24) !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-content {
  box-sizing: border-box !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head .head-left {
  box-sizing: border-box !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head button:not(.head-tab-btn),
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head [role="button"]:not(.head-tab-btn),
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head [class*="toggle"],
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-btn,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__head,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .submenu a,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu a,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-social a,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .social-links a,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-lang-footer a,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-lang-footer button {
  box-sizing: border-box !important;
  display: flex !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 !important;
  margin: 5px auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-indent: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  color: #eaf6ff !important;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 5px 12px rgba(0, 0, 0, 0.22) !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-btn:hover,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__head:hover,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a:hover,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu a:hover,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-social a:hover,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .social-links a:hover {
  color: #F4F3FA !important;
  border-color: rgba(165, 243, 252, 0.64) !important;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.38), rgba(139, 92, 246, 0.28)) !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-btn.active,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__section.is-open > .sl-acc__head,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a.active,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu a.active {
  color: #F4F3FA !important;
  border-color: rgba(165, 243, 252, 0.78) !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.30), rgba(59, 130, 246, 0.40)) !important;
  box-shadow: inset 2px 0 0 #a5f3fc, 0 0 13px rgba(34, 211, 238, 0.18) !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-title,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-arrow,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__title,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__itemText,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a span:not(.icon),
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-lang-footer .text {
  display: none !important;
}

body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__icon,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__itemIcon,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu .icon,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu .icon,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-social .icon,
body.sb-collapsed #responsive-menu.gb-sidebar-compact .social-links .icon {
  position: static !important;
  inset: auto !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.gb-sidebar-compact,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-content,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head .head-left {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head button:not(.head-tab-btn),
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head [role="button"]:not(.head-tab-btn),
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu-head [class*="toggle"],
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .sb-top-btn,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .sl-acc__head,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .menu a,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .accordion-menu a,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .sidebar-social a,
  body.sb-collapsed #responsive-menu.gb-sidebar-compact .social-links a {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}

/* ==========================================================================
   COMPACT MENU — CANLI DOM STATE (body.sb-collapsed)
   Daraltma sonrasında gb-sidebar-compact sınıfı kaldırıldığı için state doğrudan
   body üzerinden yönetilir.
   ========================================================================== */
body.sb-collapsed #responsive-menu.responsive-menu {
  box-sizing: border-box !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sidebar-content,
body.sb-collapsed #responsive-menu.responsive-menu .menu-head,
body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper {
  box-sizing: border-box !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sidebar-content {
  padding: 0 0 120px !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .menu-head {
  position: relative !important;
  padding: 7px 8px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .menu-head .title {
  margin: 0 auto !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper {
  padding: 8px 0 2px !important;
  align-items: stretch !important;
}

/* Casino ve Spor kutularını 78px rayın tam merkezine getirir. */
body.sb-collapsed #responsive-menu.responsive-menu .p2seg {
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sb-top-btn,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .menu a,
body.sb-collapsed #responsive-menu.responsive-menu .accordion-menu a {
  left: auto !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/*
 * Menü başlığının altındaki çizgi:
 * Çizgi 7px aşağıda; parlak merkez gradient içinde soldan sağa hareket eder.
 */
body.sb-collapsed #responsive-menu.responsive-menu .menu-head::after {
  content: "" !important;
  position: absolute !important;
  z-index: 10 !important;
  left: 7px !important;
  right: 7px !important;
  bottom: -7px !important;
  width: auto !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(139, 92, 246, 0.52) 0%,
      rgba(139, 92, 246, 0.14) 22%,
      rgba(255, 255, 255, 0.04) 40%,
      #F4F3FA 50%,
      rgba(255, 255, 255, 0.04) 60%,
      rgba(34, 211, 238, 0.14) 78%,
      rgba(34, 211, 238, 0.52) 100%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 260% 100% !important;
  box-shadow:
    -5px 0 8px rgba(139, 92, 246, 0.45),
    5px 0 8px rgba(34, 211, 238, 0.45) !important;
  animation: gambleron-compact-head-beam 2.15s ease-in-out infinite alternate !important;
}

@keyframes gambleron-compact-head-beam {
  0% {
    background-position: 0% 50%;
    filter: brightness(0.85);
    box-shadow:
      -9px 0 12px rgba(139, 92, 246, 0.88),
      4px 0 6px rgba(34, 211, 238, 0.18);
  }

  50% {
    background-position: 50% 50%;
    filter: brightness(1.55);
    box-shadow:
      0 0 13px rgba(255, 255, 255, 0.82),
      0 0 8px rgba(125, 211, 252, 0.60);
  }

  100% {
    background-position: 100% 50%;
    filter: brightness(0.9);
    box-shadow:
      -4px 0 6px rgba(139, 92, 246, 0.18),
      9px 0 12px rgba(34, 211, 238, 0.88);
  }
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu,
  body.sb-collapsed #responsive-menu.responsive-menu .sidebar-content,
  body.sb-collapsed #responsive-menu.responsive-menu .menu-head,
  body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .p2seg {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .menu-head::after {
    left: 6px !important;
    right: 6px !important;
    bottom: -6px !important;
  }
}

/* ==========================================================================
   COMPACT ACCORDION FLYOUT — İŞLEVSEL DAR MENÜ
   ========================================================================== */

/* Dar moddaki akordeon ikonları tekrar tıklanabilir. */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/*
 * Alt seçenekler kolonun boyunu/genişliğini değiştirmez.
 * Açıldığında 78px rayın sağında bağımsız bir panel olarak görünür.
 */
body.sb-collapsed #responsive-menu.responsive-menu,
body.sb-collapsed #responsive-menu.responsive-menu .sidebar-content,
body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper,
body.sb-collapsed #responsive-menu.responsive-menu .sb-content-animate,
body.sb-collapsed #responsive-menu.responsive-menu .menu-body,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
  overflow: visible !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section {
  position: relative !important;
  z-index: 20 !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
  z-index: 80 !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__body {
  display: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
  box-sizing: border-box !important;
  display: block !important;
  position: absolute !important;
  z-index: 100 !important;
  left: 64px !important;
  top: 5px !important;
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(520px, calc(100vh - 90px)) !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  color: #eaf6ff !important;
  background:
    radial-gradient(260px 160px at 0% 0%, rgba(34, 211, 238, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(20, 43, 82, 0.99), rgba(10, 23, 49, 0.99)) !important;
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow:
    16px 18px 38px rgba(2, 8, 23, 0.46),
    inset 1px 0 0 rgba(255, 255, 255, 0.05) !important;
  animation: gambleron-compact-flyout-in 0.18s ease-out both !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body a,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body button,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body .sl-acc__item {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 38px !important;
  margin: 3px 0 !important;
  padding: 7px 9px !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body a:hover,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body button:hover,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body .sl-acc__item:hover {
  transform: none !important;
}

@keyframes gambleron-compact-flyout-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
    left: 59px !important;
    width: min(224px, calc(100vw - 70px)) !important;
    min-width: min(224px, calc(100vw - 70px)) !important;
    max-width: min(224px, calc(100vw - 70px)) !important;
    max-height: calc(100vh - 76px) !important;
  }
}

/* ==========================================================================
   SIDEBAR SECTION SEPARATOR — NEON PULSE
   ========================================================================== */
#responsive-menu.responsive-menu
  .sidebar-section-title.gb-empty-separator
  .sidebar-section-title__line {
  position: relative !important;
  overflow: visible !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(56, 189, 248, 0.18) 18%,
    rgba(125, 211, 252, 0.42) 50%,
    rgba(139, 92, 246, 0.18) 82%,
    transparent
  ) !important;
}

#responsive-menu.responsive-menu
  .sidebar-section-title.gb-empty-separator
  .sidebar-section-title__line::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: -1px 0 !important;
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  margin: auto 0 !important;
  pointer-events: none !important;
  opacity: 0.16;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(103, 232, 249, 0.18) 18%,
    #2EC2F5 42%,
    #F4F3FA 50%,
    #8123EC 58%,
    rgba(167, 139, 250, 0.18) 82%,
    transparent 100%
  ) !important;
  border-radius: 999px !important;
  filter:
    drop-shadow(0 0 3px rgba(103, 232, 249, 0.70))
    drop-shadow(0 0 7px rgba(34, 211, 238, 0.42))
    drop-shadow(0 0 11px rgba(139, 92, 246, 0.28)) !important;
  transform: scaleX(0.72);
  transform-origin: center;
  animation: sidebar-separator-neon-pulse 2.4s ease-in-out infinite !important;
}

@keyframes sidebar-separator-neon-pulse {
  0%,
  100% {
    opacity: 0.10;
    transform: scaleX(0.68);
    filter:
      drop-shadow(0 0 2px rgba(103, 232, 249, 0.26))
      drop-shadow(0 0 5px rgba(139, 92, 246, 0.14));
  }

  45%,
  55% {
    opacity: 1;
    transform: scaleX(1);
    filter:
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.76))
      drop-shadow(0 0 9px rgba(34, 211, 238, 0.82))
      drop-shadow(0 0 15px rgba(139, 92, 246, 0.48));
  }
}

@media (prefers-reduced-motion: reduce) {
  #responsive-menu.responsive-menu
    .sidebar-section-title.gb-empty-separator
    .sidebar-section-title__line::after {
    animation: none !important;
    opacity: 0.55;
    transform: none;
  }
}

/* ==========================================================================
   VERTICAL LIVE WINS — DOM VIEW
   ========================================================================== */
.latestWins.gb-vertical-wins-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.gb-vertical-wins {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 210px !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 18px 0 22px !important;
  padding: 16px !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  background:
    radial-gradient(720px 220px at 10% 0%, rgba(34, 211, 238, 0.10), transparent 72%),
    radial-gradient(420px 200px at 100% 10%, rgba(139, 92, 246, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(15, 36, 72, 0.97), rgba(8, 21, 46, 0.99)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 38px rgba(2, 8, 23, 0.28) !important;
}

.gb-vertical-wins__main {
  min-width: 0 !important;
}

.gb-vertical-wins__heading {
  display: flex !important;
  height: 28px !important;
  margin-bottom: 8px !important;
  gap: 9px !important;
  align-items: center !important;
  color: #F4F3FA !important;
  font-family: var(--font-heading-strong) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.025em !important;
}

.gb-vertical-wins__pulse {
  display: block !important;
  width: 4px !important;
  height: 18px !important;
  border-radius: 99px !important;
  background: linear-gradient(180deg, #2EC2F5, #6C2DE0) !important;
  box-shadow:
    0 0 6px rgba(103, 232, 249, 0.68),
    0 0 12px rgba(139, 92, 246, 0.34) !important;
  animation: gb-wins-title-pulse 1.8s ease-in-out infinite alternate !important;
}

.gb-vertical-wins__list {
  display: grid !important;
  gap: 5px !important;
}

.gb-vertical-wins__row {
  box-sizing: border-box !important;
  display: grid !important;
  position: relative !important;
  grid-template-columns: 4px 44px minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 4px 10px 4px 0 !important;
  gap: 9px !important;
  align-items: center !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  text-decoration: none !important;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.10), rgba(30, 64, 175, 0.12), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid rgba(125, 211, 252, 0.16) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  transform: none !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}

.gb-vertical-wins__row:hover {
  color: #F4F3FA !important;
  border-color: rgba(165, 243, 252, 0.66) !important;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.18), rgba(139, 92, 246, 0.10)) !important;
  box-shadow:
    inset 0 0 14px rgba(34, 211, 238, 0.06),
    0 0 10px rgba(34, 211, 238, 0.20) !important;
  filter: brightness(1.07);
  transform: none !important;
}

.gb-vertical-wins__row.is-new::after {
  content: "" !important;
  position: absolute !important;
  inset: -40% auto -40% -28% !important;
  z-index: 4 !important;
  width: 18% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(103, 232, 249, 0.10) 25%,
      rgba(255, 255, 255, 0.94) 49%,
      rgba(96, 165, 250, 0.34) 56%,
      transparent 100%
    ) !important;
  filter:
    blur(1px)
    drop-shadow(0 0 7px rgba(103, 232, 249, 0.95))
    drop-shadow(0 0 14px rgba(139, 92, 246, 0.60)) !important;
  transform: skewX(-16deg) translateX(0) !important;
  animation: gb-wins-lightning-arrival 1.05s cubic-bezier(.16, .72, .22, 1) both !important;
}

.gb-vertical-wins__row.is-new .gb-vertical-wins__accent {
  animation: gb-wins-new-accent 1.15s ease-out both !important;
}

.gb-vertical-wins__accent {
  align-self: stretch !important;
  width: 4px !important;
  margin: -4px 0 !important;
  border-radius: 99px !important;
  background: #2EC2F5 !important;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.58) !important;
}

.gb-vertical-wins__accent.tone-2 {
  background: #3494EB !important;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.58) !important;
}

.gb-vertical-wins__accent.tone-3 {
  background: #8123EC !important;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.56) !important;
}

.gb-vertical-wins__game-image {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
}

.gb-vertical-wins__info {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.gb-vertical-wins__game-name,
.gb-vertical-wins__secondary {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gb-vertical-wins__game-name {
  color: #F4F3FA !important;
  font-family: var(--font-heading-strong) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.gb-vertical-wins__secondary {
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: 10px !important;
  font-weight: 550 !important;
}

.gb-vertical-wins__amount {
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: #5eead4 !important;
  font-family: var(--font-heading-strong) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  text-shadow: 0 0 8px rgba(45, 212, 191, 0.24) !important;
}

.gb-vertical-wins__currency {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
}

.gb-vertical-wins__promo {
  box-sizing: border-box !important;
  display: flex !important;
  min-height: 100% !important;
  padding: 14px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  background:
    radial-gradient(180px 150px at 50% 34%, rgba(56, 189, 248, 0.19), transparent 72%),
    linear-gradient(155deg, rgba(18, 48, 94, 0.98), rgba(8, 20, 49, 0.99) 60%, rgba(48, 24, 90, 0.94)) !important;
  border: 1px solid rgba(125, 211, 252, 0.34) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 28px rgba(56, 189, 248, 0.035) !important;
}

.gb-vertical-wins__promo-top {
  display: flex !important;
  gap: 7px !important;
  align-items: center !important;
  color: #bae6fd !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
}

.gb-vertical-wins__live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #2EC2F5 !important;
  box-shadow: 0 0 9px rgba(34, 211, 238, 0.92) !important;
  animation: gb-wins-live-dot 1.35s ease-in-out infinite alternate !important;
}

.gb-vertical-wins__promo-visual {
  display: grid !important;
  width: 108px !important;
  height: 108px !important;
  margin: 5px auto 3px !important;
  place-items: center !important;
}

.gb-vertical-wins__promo-visual svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.22)) !important;
}

.gb-promo-orbit {
  fill: none !important;
  stroke: rgba(125, 211, 252, 0.32) !important;
  stroke-width: 1.4 !important;
  stroke-dasharray: 5 7 !important;
  transform-origin: 60px 60px !important;
}

.gb-promo-orbit--outer {
  animation: gb-wins-orbit 11s linear infinite !important;
}

.gb-promo-orbit--inner {
  stroke: rgba(167, 139, 250, 0.42) !important;
  animation: gb-wins-orbit 8s linear infinite reverse !important;
}

.gb-promo-bolt {
  fill: url("#gbWinsBolt") !important;
  stroke: rgba(255, 255, 255, 0.82) !important;
  stroke-width: 1 !important;
  filter:
    drop-shadow(0 0 7px rgba(103, 232, 249, 0.80))
    drop-shadow(0 0 15px rgba(139, 92, 246, 0.44)) !important;
}

.gb-promo-spark {
  fill: #2EC2F5 !important;
  filter: drop-shadow(0 0 5px #2EC2F5) !important;
}

.gb-promo-spark--two,
.gb-promo-star {
  fill: #8123EC !important;
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.85)) !important;
}

.gb-vertical-wins__promo strong {
  margin-bottom: 5px !important;
  color: #F4F3FA !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.gb-vertical-wins__promo > span {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.gb-vertical-wins__promo-chips {
  display: flex !important;
  margin-top: 10px !important;
  gap: 6px !important;
}

.gb-vertical-wins__promo-chips span {
  padding: 4px 7px !important;
  color: #bae6fd !important;
  background: rgba(14, 165, 233, 0.10) !important;
  border: 1px solid rgba(125, 211, 252, 0.19) !important;
  border-radius: 99px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.gb-vertical-wins__promo-link {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 36px !important;
  margin-top: auto !important;
  padding: 0 11px 0 13px !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #F4F3FA !important;
  text-decoration: none !important;
  background: linear-gradient(110deg, rgba(14, 165, 233, 0.90), rgba(79, 70, 229, 0.94)) !important;
  border: 1px solid rgba(165, 243, 252, 0.72) !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 7px 18px rgba(2, 8, 23, 0.26) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  transition: filter 0.2s ease, box-shadow 0.2s ease !important;
}

.gb-vertical-wins__promo-link svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.gb-vertical-wins__promo-link:hover {
  color: #F4F3FA !important;
  filter: brightness(1.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 15px rgba(56, 189, 248, 0.32) !important;
}

@keyframes gb-wins-title-pulse {
  from {
    opacity: 0.40;
    filter: brightness(0.8);
  }
  to {
    opacity: 1;
    filter: brightness(1.35);
  }
}

@keyframes gb-wins-lightning-arrival {
  0% {
    left: -28%;
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  30% {
    opacity: 0.18;
  }
  43% {
    opacity: 1;
  }
  70% {
    opacity: 0.48;
  }
  100% {
    left: 118%;
    opacity: 0;
  }
}

@keyframes gb-wins-new-accent {
  0%, 20% {
    filter: brightness(2.8);
    box-shadow: 0 0 5px #F4F3FA, 0 0 18px rgba(34, 211, 238, 1);
  }
  36% {
    filter: brightness(0.75);
  }
  52% {
    filter: brightness(2);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes gb-wins-live-dot {
  from { opacity: 0.45; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1.12); }
}

@keyframes gb-wins-orbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
  .gb-vertical-wins {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 14px 0 18px !important;
    padding: 12px !important;
  }

  .gb-vertical-wins__promo {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .gb-vertical-wins {
    margin: 10px 0 14px !important;
    padding: 9px !important;
    border-radius: 11px !important;
  }

  .gb-vertical-wins__heading {
    height: 24px !important;
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }

  .gb-vertical-wins__row {
    grid-template-columns: 3px 38px minmax(0, 1fr) auto !important;
    height: 48px !important;
    gap: 7px !important;
    padding-right: 7px !important;
    border-radius: 8px !important;
  }

  .gb-vertical-wins__row:nth-child(n + 5) {
    display: none !important;
  }

  .gb-vertical-wins__game-image {
    width: 36px !important;
    height: 36px !important;
    border-radius: 7px !important;
  }

  .gb-vertical-wins__game-name {
    font-size: 11px !important;
  }

  .gb-vertical-wins__secondary {
    font-size: 9px !important;
  }

  .gb-vertical-wins__amount {
    gap: 4px !important;
    font-size: 11px !important;
  }

  .gb-vertical-wins__currency {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gb-vertical-wins__pulse,
  .gb-vertical-wins__row.is-new::after,
  .gb-vertical-wins__row.is-new .gb-vertical-wins__accent,
  .gb-vertical-wins__live-dot,
  .gb-promo-orbit {
    animation: none !important;
  }
}

/* ==========================================================================
   FINAL ICON VISIBILITY + BONUS CENTERING
   ========================================================================== */

/* Spor: DOM'daki beğenilen SVG kesin görünür, pseudo üretimler kapalı. */
#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]
  > svg {
  display: block !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]::before,
#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]::after {
  content: none !important;
  display: none !important;
}

/* Klonlanan Promosyonlar ikonunun iç SVG'sini görünür ve canlı yap. */
#responsive-menu.responsive-menu .gb-feature-promotions > .icon {
  color: #2EC2F5 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#responsive-menu.responsive-menu .gb-feature-promotions > .icon > span {
  display: inline-flex !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#responsive-menu.responsive-menu .gb-feature-promotions > .icon svg {
  display: block !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  color: #2EC2F5 !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter:
    drop-shadow(0 0 4px rgba(103, 232, 249, 0.70))
    drop-shadow(0 0 8px rgba(14, 165, 233, 0.35)) !important;
}

/* Bonus ikon ve yazısı tek bir içerik grubu olarak tam merkezlenir. */
#responsive-menu.responsive-menu .gb-feature-bonus-request {
  display: flex !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  align-items: center !important;
  justify-content: center !important;
}

#responsive-menu.responsive-menu .gb-feature-bonus-content {
  box-sizing: border-box !important;
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  height: 38px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#responsive-menu.responsive-menu
  .gb-feature-bonus-content
  .gb-feature-bonus-icon {
  flex: 0 0 38px !important;
  margin: 0 !important;
}

#responsive-menu.responsive-menu
  .gb-feature-bonus-content
  .gb-feature-bonus-text {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sb-top,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc,
body.sb-collapsed #responsive-menu.responsive-menu .p2tabs.p2tabs--sidebar {
  padding-top: 15px !important;
}

/* ==========================================================================
   HOMEPAGE DISCOVERY DECK - HERO ALTI
   ========================================================================== */
#gb-discovery-deck {
  box-sizing: border-box !important;
  width: min(100% - 28px, 1240px) !important;
  margin: 14px auto 18px !important;
  color: #F4F3FA !important;
}

.gb-discovery-quickbar {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  padding: 8px !important;
  overflow: hidden !important;
  background:
    radial-gradient(520px 100px at 0% 50%, rgba(34, 211, 238, 0.10), transparent 75%),
    radial-gradient(480px 120px at 100% 50%, rgba(139, 92, 246, 0.12), transparent 75%),
    linear-gradient(180deg, rgba(18, 43, 82, 0.96), rgba(9, 23, 50, 0.98)) !important;
  border: 1px solid rgba(125, 211, 252, 0.26) !important;
  border-radius: 15px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 32px rgba(2, 8, 23, 0.22) !important;
}

.gb-discovery-quick {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 24px !important;
  min-width: 0 !important;
  min-height: 60px !important;
  padding: 7px 12px !important;
  gap: 10px !important;
  align-items: center !important;
  color: #F4F3FA !important;
  text-decoration: none !important;
  border-right: 1px solid rgba(148, 163, 184, 0.13) !important;
  border-radius: 10px !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.gb-discovery-quick:last-child {
  border-right-color: transparent !important;
}

.gb-discovery-quick:hover {
  color: #F4F3FA !important;
  background: linear-gradient(110deg, rgba(34, 211, 238, 0.11), rgba(99, 102, 241, 0.09)) !important;
  box-shadow: inset 0 0 16px rgba(56, 189, 248, 0.055) !important;
}

.gb-discovery-icon,
.gb-discovery-card__icon {
  display: inline-grid !important;
  place-items: center !important;
  color: #2EC2F5 !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.15), rgba(99, 102, 241, 0.16)) !important;
  border: 1px solid rgba(125, 211, 252, 0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 12px rgba(34, 211, 238, 0.08) !important;
}

.gb-discovery-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

.gb-discovery-icon svg,
.gb-discovery-card__icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.gb-discovery-copy,
.gb-discovery-card__content {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.gb-discovery-copy strong,
.gb-discovery-card__content strong {
  overflow: hidden !important;
  color: #F4F3FA !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gb-discovery-copy small,
.gb-discovery-card__content small {
  overflow: hidden !important;
  color: rgba(226, 232, 240, 0.60) !important;
  font-size: 9px !important;
  font-weight: 550 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gb-discovery-arrow {
  display: grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  color: #2EC2F5 !important;
  font-size: 17px !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.gb-discovery-quick:hover .gb-discovery-arrow {
  color: #F4F3FA !important;
  transform: translateX(3px) !important;
}

.gb-discovery-cards {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  margin-top: 12px !important;
  gap: 10px !important;
}

.gb-discovery-card {
  box-sizing: border-box !important;
  display: flex !important;
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  height: 134px !important;
  padding: 12px !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  text-decoration: none !important;
  background:
    linear-gradient(155deg, rgba(22, 52, 99, 0.96), rgba(8, 20, 46, 0.99)) !important;
  border: 1px solid rgba(125, 211, 252, 0.20) !important;
  border-radius: 13px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 24px rgba(2, 8, 23, 0.18) !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
}

.gb-discovery-card__glow {
  position: absolute !important;
  z-index: -1 !important;
  top: -54px !important;
  right: -40px !important;
  width: 142px !important;
  height: 142px !important;
  opacity: 0.60 !important;
  background:
    radial-gradient(circle, rgba(34, 211, 238, 0.26), rgba(37, 99, 235, 0.08) 42%, transparent 70%) !important;
  transition: opacity 0.22s ease, transform 0.35s ease !important;
}

.gb-discovery-card.tone-violet .gb-discovery-card__glow {
  background:
    radial-gradient(circle, rgba(167, 139, 250, 0.30), rgba(79, 70, 229, 0.08) 44%, transparent 70%) !important;
}

.gb-discovery-card.tone-blue .gb-discovery-card__glow {
  background:
    radial-gradient(circle, rgba(96, 165, 250, 0.30), rgba(14, 165, 233, 0.07) 44%, transparent 70%) !important;
}

.gb-discovery-card__icon {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
}

.gb-discovery-card__arrow {
  display: grid !important;
  position: absolute !important;
  right: 11px !important;
  bottom: 11px !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  color: #a5f3fc !important;
  background: rgba(8, 47, 73, 0.46) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.gb-discovery-card__content {
  padding-right: 30px !important;
}

.gb-discovery-card:hover {
  color: #F4F3FA !important;
  border-color: rgba(103, 232, 249, 0.68) !important;
  box-shadow:
    inset 0 0 20px rgba(34, 211, 238, 0.06),
    0 0 16px rgba(34, 211, 238, 0.18) !important;
  transform: translateY(-3px) !important;
}

.gb-discovery-card:hover .gb-discovery-card__glow {
  opacity: 1 !important;
  transform: scale(1.14) !important;
}

.gb-discovery-card:hover .gb-discovery-card__arrow {
  transform: rotate(45deg) !important;
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.35) !important;
}

@media (max-width: 991px) {
  #gb-discovery-deck {
    width: calc(100% - 20px) !important;
    margin: 10px auto 14px !important;
  }

  .gb-discovery-quickbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gb-discovery-quick:nth-child(2) {
    border-right-color: transparent !important;
  }

  .gb-discovery-cards {
    display: flex !important;
    padding: 2px 1px 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  .gb-discovery-cards::-webkit-scrollbar {
    display: none !important;
  }

  .gb-discovery-card {
    flex: 0 0 176px !important;
    scroll-snap-align: start !important;
  }
}

@media (max-width: 575px) {
  #gb-discovery-deck {
    width: calc(100% - 16px) !important;
    margin-top: 8px !important;
  }

  .gb-discovery-quickbar {
    display: flex !important;
    padding: 6px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  .gb-discovery-quickbar::-webkit-scrollbar {
    display: none !important;
  }

  .gb-discovery-quick {
    flex: 0 0 194px !important;
    min-height: 54px !important;
    padding: 6px 9px !important;
    border-right: 1px solid rgba(148, 163, 184, 0.13) !important;
    scroll-snap-align: start !important;
  }

  .gb-discovery-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .gb-discovery-card {
    flex-basis: 154px !important;
    height: 120px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gb-discovery-quick,
  .gb-discovery-arrow,
  .gb-discovery-card,
  .gb-discovery-card__glow,
  .gb-discovery-card__arrow {
    transition: none !important;
  }
}

/* ==========================================================================
   MAIN SEARCH - NORMAL / HOVER / ACTIVE / RESULT LAYER
   ========================================================================== */
div.main-search[data-mode="inline"] {
  isolation: isolate !important;
  z-index: 40 !important;
}

div.main-search[data-mode="inline"] > form.search-form {
  box-sizing: border-box !important;
  min-height: 56px !important;
  padding: 5px 8px !important;
  background:
    radial-gradient(240px 70px at 0% 50%, rgba(34, 211, 238, 0.10), transparent 72%),
    linear-gradient(115deg, rgba(20, 54, 102, 0.97), rgba(11, 30, 66, 0.99)) !important;
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  border-radius: 15px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 9px 22px rgba(2, 8, 23, 0.18) !important;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease !important;
}

div.main-search[data-mode="inline"] > form.search-form:hover {
  background:
    radial-gradient(260px 76px at 0% 50%, rgba(34, 211, 238, 0.15), transparent 72%),
    linear-gradient(115deg, rgba(24, 65, 119, 0.98), rgba(13, 35, 76, 0.99)) !important;
  border-color: rgba(103, 232, 249, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 15px rgba(34, 211, 238, 0.10) !important;
}

div.main-search[data-mode="inline"] > form.search-form:focus-within {
  background:
    radial-gradient(300px 84px at 5% 50%, rgba(34, 211, 238, 0.18), transparent 72%),
    linear-gradient(120deg, rgba(24, 67, 124, 0.99), rgba(14, 37, 81, 0.99) 68%, rgba(43, 31, 93, 0.96)) !important;
  border-color: rgba(103, 232, 249, 0.82) !important;
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.11),
    0 12px 30px rgba(2, 8, 23, 0.28),
    0 0 20px rgba(56, 189, 248, 0.16) !important;
}

div.main-search[data-mode="inline"] > form.search-form > button {
  flex: 0 0 42px !important;
  color: #2EC2F5 !important;
  background:
    linear-gradient(145deg, rgba(34, 211, 238, 0.13), rgba(99, 102, 241, 0.14)) !important;
  border: 1px solid rgba(125, 211, 252, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 10px rgba(34, 211, 238, 0.07) !important;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

div.main-search[data-mode="inline"] > form.search-form > button:hover {
  color: #F4F3FA !important;
  background:
    linear-gradient(145deg, rgba(34, 211, 238, 0.26), rgba(99, 102, 241, 0.25)) !important;
  border-color: rgba(165, 243, 252, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 12px rgba(34, 211, 238, 0.26) !important;
  transform: scale(1.04) !important;
}

div.main-search[data-mode="inline"] > form.search-form:focus-within > button {
  color: #F4F3FA !important;
  background:
    linear-gradient(145deg, rgba(6, 182, 212, 0.32), rgba(79, 70, 229, 0.30)) !important;
  border-color: rgba(165, 243, 252, 0.74) !important;
  box-shadow:
    0 0 12px rgba(34, 211, 238, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

div.main-search[data-mode="inline"] > form.search-form > button span,
div.main-search[data-mode="inline"] > form.search-form > button svg {
  color: inherit !important;
}

div.main-search[data-mode="inline"] > form.search-form > input[name="top-search"] {
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 12px !important;
  color: #F4F3FA !important;
  caret-color: #2EC2F5 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

div.main-search[data-mode="inline"]
  > form.search-form
  > input[name="top-search"]::placeholder {
  color: rgba(219, 234, 254, 0.58) !important;
  opacity: 1 !important;
}

div.main-search[data-mode="inline"] > .search-layer[data-search-layer="true"] {
  margin-top: 9px !important;
  overflow: hidden !important;
  background:
    radial-gradient(460px 200px at 0% 0%, rgba(34, 211, 238, 0.11), transparent 72%),
    radial-gradient(380px 200px at 100% 0%, rgba(139, 92, 246, 0.13), transparent 74%),
    linear-gradient(150deg, rgba(18, 49, 94, 0.985), rgba(8, 23, 53, 0.99) 62%, rgba(34, 25, 75, 0.98)) !important;
  border: 1px solid rgba(125, 211, 252, 0.30) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.28) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 50px rgba(2, 8, 23, 0.42),
    0 0 22px rgba(34, 211, 238, 0.10) !important;
  animation: gb-search-layer-open 180ms cubic-bezier(.16, .72, .22, 1) both !important;
}

div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"]::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 8% !important;
  width: 84% !important;
  height: 1px !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent, #2EC2F5 38%, #8123EC 62%, transparent) !important;
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.48) !important;
}

div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"]
  > div {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(56, 189, 248, 0.52) rgba(15, 40, 77, 0.72) !important;
}

div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"]
  > div::-webkit-scrollbar {
  width: 7px !important;
}

div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"]
  > div::-webkit-scrollbar-track {
  background: rgba(15, 40, 77, 0.72) !important;
}

div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"]
  > div::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2EC2F5, #6366f1) !important;
  border-radius: 99px !important;
}

div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"]
  > div
  > div[style*="place-items"] {
  min-height: 210px !important;
  color: rgba(219, 234, 254, 0.72) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.075), transparent 36%) !important;
}

div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"]
  > div
  > div[style*="place-items"]
  > div
  > div:first-child {
  color: #F4F3FA !important;
  font-size: 15px !important;
  text-shadow: 0 0 12px rgba(103, 232, 249, 0.16) !important;
}

div.main-search[data-mode="inline"]
  > .search-layer[data-search-layer="true"]
  > div
  > div[style*="place-items"]
  > div
  > div:last-child {
  color: rgba(219, 234, 254, 0.64) !important;
}

@keyframes gb-search-layer-open {
  from {
    opacity: 0;
    transform: translateY(-7px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 575px) {
  div.main-search[data-mode="inline"] > form.search-form {
    min-height: 50px !important;
    padding: 3px 6px !important;
    border-radius: 13px !important;
  }

  div.main-search[data-mode="inline"] > form.search-form > button {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 10px !important;
  }

  div.main-search[data-mode="inline"] > form.search-form > input[name="top-search"] {
    height: 40px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  div.main-search[data-mode="inline"] > .search-layer[data-search-layer="true"] {
    margin-top: 7px !important;
    border-radius: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  div.main-search[data-mode="inline"] > form.search-form,
  div.main-search[data-mode="inline"] > form.search-form > button,
  div.main-search[data-mode="inline"] > .search-layer[data-search-layer="true"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   TYPOGRAPHY + OPEN SIDEBAR FEATURE CARDS
   ========================================================================== */
:root {
  --font-ui:
    "Segoe UI Variable Text",
    "Inter",
    "Manrope",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Arial,
    sans-serif;
  --font-display:
    "Segoe UI Variable Display",
    "Inter",
    "Manrope",
    "Segoe UI",
    system-ui,
    sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
#responsive-menu.responsive-menu .menu-head .text,
#responsive-menu.responsive-menu .sb-top-title,
#responsive-menu.responsive-menu .sl-acc__headTitle {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
}

#responsive-menu.responsive-menu .sb-top-title,
#responsive-menu.responsive-menu .sl-acc__headTitle,
#responsive-menu.responsive-menu .sl-acc__itemText {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

/* Açık menüde Casino / Spor özellik kartları */
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: calc(100% - 16px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 8px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg {
  box-sizing: border-box !important;
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  background:
    radial-gradient(90px 70px at 12% 50%, rgba(34, 211, 238, 0.22), transparent 70%),
    linear-gradient(145deg, rgba(20, 44, 84, 0.98), rgba(8, 20, 43, 0.99)) !important;
  border: 1px solid rgba(56, 189, 248, 0.72) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 18px rgba(37, 99, 235, 0.08),
    0 8px 18px rgba(2, 8, 23, 0.25) !important;
  transform: none !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg:hover,
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg:focus-visible {
  color: #F4F3FA !important;
  border-color: #2EC2F5 !important;
  background:
    radial-gradient(100px 76px at 14% 50%, rgba(34, 211, 238, 0.34), transparent 72%),
    linear-gradient(145deg, rgba(29, 78, 216, 0.52), rgba(13, 28, 57, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(165, 243, 252, 0.18),
    0 10px 24px rgba(8, 145, 178, 0.20) !important;
  filter: brightness(1.06);
  transform: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  .p2bgIcon {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 0 16px rgba(34, 211, 238, 0.24) !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  .p2content {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transform: none !important;
}

/*
 * Bonus Talep bileşeni giriş/hesap durumuna göre DOM'a eklendiğinde aynı
 * görsel sistem otomatik uygulanır. İşlevsiz pseudo-button üretilmez.
 */
#responsive-menu.responsive-menu
  :is(
    .bonus-request,
    .bonus-claim,
    .claim-bonus,
    .bonus-request-button,
    .bonus-claim-button
  ) {
  box-sizing: border-box !important;
  display: flex !important;
  width: calc(100% - 16px) !important;
  min-height: 58px !important;
  margin: 8px !important;
  padding: 10px 16px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #F4F3FA !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em !important;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.20), rgba(99, 102, 241, 0.20)),
    rgba(8, 20, 43, 0.98) !important;
  border: 1px solid rgba(103, 232, 249, 0.72) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 9px 22px rgba(2, 8, 23, 0.28) !important;
  transform: none !important;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY — STRONG OVERRIDE
   İkon fontları kapsam dışında bırakılarak metin tipografisi güçlendirilir.
   ========================================================================== */
:root {
  --font-ui-strong:
    "Segoe UI Variable Text",
    "Inter",
    "Manrope",
    "Aptos",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Arial,
    sans-serif !important;
  --font-heading-strong:
    "Segoe UI Variable Display",
    "Inter",
    "Manrope",
    "Aptos Display",
    "Segoe UI",
    system-ui,
    sans-serif !important;
}

html,
body,
body input,
body textarea,
body select,
body option,
body button,
body a,
body p,
body label,
body small,
body strong,
body em,
body li,
body td,
body th,
body figcaption,
body blockquote {
  font-family: var(--font-ui-strong) !important;
}

html,
body {
  font-weight: 500 !important;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body a,
body button,
body label,
body th,
body strong {
  font-weight: 650 !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .title,
body .section-title,
body .page-title,
body .card-title,
body .modal-title {
  font-family: var(--font-heading-strong) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
}

#responsive-menu.responsive-menu .menu-head .text,
#responsive-menu.responsive-menu .sb-top-title,
#responsive-menu.responsive-menu .sl-acc__headTitle,
#responsive-menu.responsive-menu .sl-acc__itemText,
#responsive-menu.responsive-menu .p2content {
  font-family: var(--font-heading-strong) !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
}

header#header a,
header#header button,
.show-all,
.view-all,
.owl-view-all,
.button,
button,
[role="button"] {
  font-family: var(--font-ui-strong) !important;
  font-weight: 700 !important;
  letter-spacing: -0.008em !important;
}

/* Form alanlarında kalınlık okunabilir seviyede tutulur. */
body input,
body textarea,
body select,
body option {
  font-weight: 550 !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   SIDEBAR FEATURE ACTIONS — PROMOSYONLAR + BONUS TALEP ET
   sidebar-feature-actions.js tarafından oluşturulan alan.
   ========================================================================== */
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-promotions-source {
  display: none !important;
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .gb-sidebar-feature-actions {
  display: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-sidebar-feature-actions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: calc(100% - 16px) !important;
  margin: 2px 8px 10px !important;
  padding: 0 !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-feature-promotions,
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-feature-bonus-request {
  box-sizing: border-box !important;
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  gap: 11px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  font-family: var(--font-heading-strong) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: -0.012em !important;
  text-decoration: none !important;
  background:
    radial-gradient(190px 90px at 8% 50%, rgba(34, 211, 238, 0.20), transparent 72%),
    linear-gradient(135deg, rgba(25, 65, 124, 0.98), rgba(10, 23, 49, 0.99)) !important;
  border: 1px solid rgba(56, 189, 248, 0.68) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 20px rgba(2, 8, 23, 0.26) !important;
  transform: none !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-feature-bonus-request {
  justify-content: center !important;
  background:
    radial-gradient(220px 100px at 50% 0%, rgba(167, 139, 250, 0.22), transparent 72%),
    linear-gradient(135deg, rgba(30, 64, 175, 0.84), rgba(91, 33, 182, 0.76)) !important;
  border-color: rgba(165, 243, 252, 0.76) !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-feature-promotions:hover,
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-feature-bonus-request:hover {
  color: #F4F3FA !important;
  border-color: #a5f3fc !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 22px rgba(34, 211, 238, 0.20),
    0 10px 24px rgba(2, 8, 23, 0.30) !important;
  filter: brightness(1.08);
  transform: none !important;
}

#responsive-menu.responsive-menu .gb-feature-promotions .icon,
#responsive-menu.responsive-menu .gb-feature-bonus-icon {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2EC2F5 !important;
  font-size: 20px !important;
  border: 1px solid rgba(103, 232, 249, 0.38) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.20), rgba(59, 130, 246, 0.16)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#responsive-menu.responsive-menu .gb-feature-promotions .sb-top-title,
#responsive-menu.responsive-menu .gb-feature-bonus-text {
  display: block !important;
  color: inherit !important;
  font: inherit !important;
}

#responsive-menu.responsive-menu .gb-feature-promotions .sb-top-arrow {
  display: block !important;
  margin-left: auto !important;
  color: #2EC2F5 !important;
}

/* ==========================================================================
   CASINO / SPOR — CLEAN FLEX + NEON HOVER
   ========================================================================== */
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg {
  display: flex !important;
  position: relative !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 7px 9px !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(56, 189, 248, 0.58) !important;
  border-radius: 12px !important;
  transform: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg.casino {
  background:
    radial-gradient(110px 70px at 5% 50%, rgba(34, 211, 238, 0.22), transparent 72%),
    linear-gradient(145deg, rgba(20, 53, 101, 0.98), rgba(8, 22, 48, 0.99)) !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg.sportsbook {
  background:
    radial-gradient(110px 70px at 5% 50%, rgba(139, 92, 246, 0.23), transparent 72%),
    linear-gradient(145deg, rgba(29, 51, 104, 0.98), rgba(10, 21, 48, 0.99)) !important;
}

/* Eski ikinci ikon katmanı açık menüde kaldırılır. */
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  > .p2bgIcon {
  display: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  > .p2bg {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.32 !important;
  pointer-events: none !important;
  transform: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  > .p2content {
  box-sizing: border-box !important;
  display: flex !important;
  position: relative !important;
  z-index: 2 !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  transform: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  .p2chip {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 3px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(103, 232, 249, 0.42) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.14)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 12px rgba(34, 211, 238, 0.15) !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg.sportsbook
  .p2chip {
  border-color: rgba(167, 139, 250, 0.48) !important;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.22), rgba(59, 130, 246, 0.15)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 12px rgba(139, 92, 246, 0.17) !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  .p2icon,
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  .p2icon
  svg {
  display: block !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  .p2label {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #F4F3FA !important;
  font-family: var(--font-heading-strong) !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: -0.018em !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg:hover,
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg:focus-visible {
  color: #F4F3FA !important;
  border-color: #a5f3fc !important;
  filter: brightness(1.08) saturate(1.12) !important;
  transform: none !important;
  animation: p2-card-neon-hover 1.25s ease-in-out infinite alternate !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg.sportsbook:hover,
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg.sportsbook:focus-visible {
  border-color: #8123EC !important;
  animation-name: p2-card-neon-purple !important;
}

@keyframes p2-card-neon-hover {
  from {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 5px rgba(34, 211, 238, 0.35),
      0 0 11px rgba(14, 165, 233, 0.18);
  }

  to {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 9px rgba(103, 232, 249, 0.72),
      0 0 20px rgba(14, 165, 233, 0.38);
  }
}

@keyframes p2-card-neon-purple {
  from {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 5px rgba(139, 92, 246, 0.38),
      0 0 11px rgba(99, 102, 241, 0.20);
  }

  to {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 9px rgba(196, 181, 253, 0.72),
      0 0 20px rgba(139, 92, 246, 0.40);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.sb-collapsed)
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar
    .p2seg:hover,
  body:not(.sb-collapsed)
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar
    .p2seg:focus-visible {
    animation: none !important;
  }
}

/* Spor sekmesi: pati gibi görünen eski SVG yerine net futbol topu. */
#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"] {
  display: inline-flex !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: #F4F3FA !important;
}

#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]
  > svg {
  display: none !important;
}

#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: -5px !important;
  top: 7px !important;
  display: block !important;
  width: 14px !important;
  height: 16px !important;
  background:
    linear-gradient(90deg, transparent 0 8%, #3494EB 30%, #2EC2F5 100%)
      0 0 / 11px 2px no-repeat,
    linear-gradient(90deg, transparent 0%, #286EEA 22%, #3494EB 100%)
      0 7px / 14px 3px no-repeat,
    linear-gradient(90deg, transparent 0 15%, #3494EB 38%, #2EC2F5 100%)
      2px 14px / 10px 2px no-repeat !important;
  border-radius: 999px !important;
  filter:
    drop-shadow(0 0 3px rgba(56, 189, 248, 0.85))
    drop-shadow(0 0 6px rgba(34, 211, 238, 0.45)) !important;
  pointer-events: none !important;
  transform: none !important;
}

#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]::after {
  content: "" !important;
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23f8fbff' stroke='%2338bdf8' stroke-width='1.6'/%3E%3Cpath d='M16 8.1l4.2 3.1-1.6 5h-5.2l-1.6-5L16 8.1z' fill='%230f1f3a'/%3E%3Cpath d='M7.1 12.8l4.7-1.6 1.6 5-3.1 4.2-4-2.9.8-4.7zm17.8 0l.8 4.7-4 2.9-3.1-4.2 1.6-5 4.7 1.6zM11 25l-.7-4.6 3.1-4.2h5.2l3.1 4.2L21 25l-5 2.2L11 25z' fill='%23243b60'/%3E%3Cpath d='M16 8.1V3.2M7.1 12.8L3.6 10M24.9 12.8l3.5-2.8M11 25l-3.5 2M21 25l3.5 2' fill='none' stroke='%230f1f3a' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 28px 28px !important;
  filter: drop-shadow(-2px 0 4px rgba(56, 189, 248, 0.34)) !important;
  transform: none !important;
}

/* ==========================================================================
   SIDEBAR NEON HOVER — BOX SHADOW
   ========================================================================== */
#responsive-menu.responsive-menu
  :is(
    .sb-top-btn,
    .sl-acc__head,
    .sl-acc__item,
    .p2seg,
    .gb-feature-promotions,
    .gb-feature-bonus-request,
    .supportbtn
  ) {
  transform: none !important;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.24s ease,
    filter 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #responsive-menu.responsive-menu
    :is(
      .sb-top-btn,
      .sl-acc__head,
      .sl-acc__item,
      .p2seg,
      .gb-feature-promotions,
      .gb-feature-bonus-request,
      .supportbtn
    ):hover {
    z-index: 12 !important;
    color: #F4F3FA !important;
    border-color: rgba(165, 243, 252, 0.92) !important;
    background-color: rgba(20, 50, 96, 0.98) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 0 16px rgba(34, 211, 238, 0.11),
      0 0 5px rgba(255, 255, 255, 0.38),
      0 0 11px rgba(34, 211, 238, 0.66),
      0 0 22px rgba(14, 165, 233, 0.42),
      0 0 32px rgba(139, 92, 246, 0.24) !important;
    filter: brightness(1.1) saturate(1.12) !important;
    transform: none !important;
    animation: sidebar-neon-box-hover 1.25s ease-in-out infinite alternate !important;
  }
}

#responsive-menu.responsive-menu
  :is(
    .sb-top-btn,
    .sl-acc__head,
    .sl-acc__item,
    .p2seg,
    .gb-feature-promotions,
    .gb-feature-bonus-request,
    .supportbtn
  ):focus-visible {
  z-index: 12 !important;
  outline: 2px solid rgba(165, 243, 252, 0.92) !important;
  outline-offset: 2px !important;
  border-color: #a5f3fc !important;
  box-shadow:
    inset 0 0 14px rgba(34, 211, 238, 0.12),
    0 0 6px rgba(255, 255, 255, 0.42),
    0 0 14px rgba(34, 211, 238, 0.70),
    0 0 26px rgba(139, 92, 246, 0.30) !important;
  transform: none !important;
}

@keyframes sidebar-neon-box-hover {
  from {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      inset 0 0 12px rgba(34, 211, 238, 0.08),
      0 0 4px rgba(255, 255, 255, 0.28),
      0 0 9px rgba(34, 211, 238, 0.48),
      0 0 17px rgba(14, 165, 233, 0.30),
      0 0 24px rgba(139, 92, 246, 0.16);
  }

  to {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.12),
      inset 0 0 20px rgba(34, 211, 238, 0.16),
      0 0 7px rgba(255, 255, 255, 0.52),
      0 0 16px rgba(34, 211, 238, 0.84),
      0 0 28px rgba(14, 165, 233, 0.52),
      0 0 40px rgba(139, 92, 246, 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  #responsive-menu.responsive-menu
    :is(
      .sb-top-btn,
      .sl-acc__head,
      .sl-acc__item,
      .p2seg,
      .gb-feature-promotions,
      .gb-feature-bonus-request,
      .supportbtn
    ):hover {
    animation: none !important;
  }
}

/* ==========================================================================
   COMPACT CASINO / SPORTS + VERTICAL SPACING
   ========================================================================== */
body.sb-collapsed #responsive-menu.responsive-menu .menu-head {
  margin-bottom: 12px !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper {
  box-sizing: border-box !important;
  padding-top: 12px !important;
  padding-bottom: 18px !important;
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar {
  box-sizing: border-box !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sb-top {
  box-sizing: border-box !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc {
  box-sizing: border-box !important;
  gap: 10px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg {
  display: grid !important;
  position: relative !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(96, 165, 250, 0.42) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(64px 52px at 50% 40%, rgba(34, 211, 238, 0.18), transparent 72%),
    linear-gradient(145deg, rgba(27, 58, 108, 0.98), rgba(11, 25, 53, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 7px 16px rgba(2, 8, 23, 0.24) !important;
  transform: none !important;
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg.sportsbook {
  background:
    radial-gradient(64px 52px at 50% 40%, rgba(139, 92, 246, 0.20), transparent 72%),
    linear-gradient(145deg, rgba(34, 48, 105, 0.98), rgba(12, 23, 54, 0.99)) !important;
  border-color: rgba(167, 139, 250, 0.46) !important;
}

/* Dar modda eski arka plan ikonu yerine p2chip kullanılır. */
body.sb-collapsed
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  > .p2bgIcon {
  display: none !important;
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  > .p2content {
  box-sizing: border-box !important;
  display: grid !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  overflow: visible !important;
  transform: none !important;
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  .p2label {
  display: none !important;
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .p2tabs.p2tabs--sidebar
  .p2seg
  .p2chip {
  box-sizing: border-box !important;
  display: inline-flex !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-radius: 10px !important;
  transform: none !important;
}

@media (max-width: 575px) {
  body.sb-collapsed
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar
    .p2seg {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .menu-head {
    margin-bottom: 10px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }
}

/* Açık menüde Spor ikonu, compact raydaki görünümle aynıdır. */
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2chip {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 1px solid rgba(167, 139, 250, 0.48) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.24), transparent 68%),
    linear-gradient(145deg, rgba(139, 92, 246, 0.24), rgba(37, 99, 235, 0.17)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 12px rgba(139, 92, 246, 0.18) !important;
  transform: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"] {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  overflow: visible !important;
}

/* Spor ikonu açık/kapalı menüde birebir aynı render edilir. */
#responsive-menu.responsive-menu .p2seg.sportsbook .p2chip {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 1px solid rgba(167, 139, 250, 0.58) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.30), transparent 66%),
    linear-gradient(145deg, rgba(124, 58, 237, 0.34), rgba(37, 99, 235, 0.22)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 8px rgba(56, 189, 248, 0.34),
    0 0 14px rgba(139, 92, 246, 0.22) !important;
  transform: none !important;
}

#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"] {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  transform: none !important;
}

#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]::before {
  left: -5px !important;
  top: 7px !important;
  width: 14px !important;
  height: 16px !important;
}

#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]::after {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  background-position: center !important;
  background-size: 28px 28px !important;
}

/* Spor ikonunda beğenilen orijinal SVG kullanılır; CSS üretimi kaldırılır. */
#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]
  > svg.gb-tab-svg {
  display: block !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  overflow: visible !important;
}

#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]::before,
#responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2icon[data-gb-icon="sport"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#responsive-menu.responsive-menu .p2seg.sportsbook .p2content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2label {
  display: block !important;
  white-space: nowrap !important;
}

body.sb-collapsed
  #responsive-menu.responsive-menu
  .p2seg.sportsbook
  .p2label {
  display: none !important;
}

#responsive-menu.responsive-menu
  :is(
    .bonus-request,
    .bonus-claim,
    .claim-bonus,
    .bonus-request-button,
    .bonus-claim-button
  ):hover {
  border-color: #a5f3fc !important;
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.34), rgba(99, 102, 241, 0.30)),
    rgba(8, 20, 43, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 20px rgba(34, 211, 238, 0.20) !important;
  transform: none !important;
}

/* ==========================================================================
   COMPACT CHALLENGES — LINK AKTİF, DROPDOWN PASİF
   Meydan Okumalar .sb-top-btn bağlantısı çalışır; sayfadaki akordeon ikonları
   yalnızca görsel olarak kalır ve dar modda alt menü açmaz.
   ========================================================================== */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  pointer-events: none !important;
  cursor: default !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__body,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
  display: none !important;
  position: static !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
  overflow: hidden !important;
}

/* Ana sayfa bağlantıları dar modda tıklanabilir kalır. */
body.sb-collapsed #responsive-menu.responsive-menu a.sb-top-btn,
body.sb-collapsed #responsive-menu.responsive-menu a.sb-top-btn.active {
  pointer-events: auto !important;
  cursor: pointer !important;
}

@media (prefers-reduced-motion: reduce) {
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sb-collapsed #responsive-menu.responsive-menu .menu-head::after {
    animation: none !important;
  }
}

/* ==========================================================================
   SIDEBAR STATE STABILITY — CASINO/SPORTS + HOVER/ACTIVE
   ========================================================================== */

/* İlk yerleşimdeki tek kolon mantığı: grup rayın merkezinde kalır. */
body.sb-collapsed #responsive-menu.responsive-menu .p2tabs.p2tabs--sidebar {
  box-sizing: border-box !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  grid-template-columns: 60px !important;
  justify-items: center !important;
  align-items: center !important;
  transform: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .p2seg {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 auto !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  transform: none !important;
}

/* Casino ve Spor aynı katman/hizalama modelini kullanır. */
body.sb-collapsed #responsive-menu.responsive-menu .p2seg .p2bg {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .p2seg .p2bgIcon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .p2seg.casino .p2content {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .p2seg.sportsbook .p2content {
  display: none !important;
}

/* Hover, focus ve active yalnızca renk değiştirir; kutunun konumu değişmez. */
#responsive-menu.responsive-menu .sb-top-btn,
#responsive-menu.responsive-menu .sl-acc__head,
#responsive-menu.responsive-menu .menu a,
#responsive-menu.responsive-menu .submenu a,
#responsive-menu.responsive-menu .accordion-menu a,
#responsive-menu.responsive-menu .p2seg {
  box-sizing: border-box !important;
  translate: none !important;
  transition:
    color 0.20s ease,
    background-color 0.20s ease,
    background 0.20s ease,
    border-color 0.20s ease,
    box-shadow 0.20s ease,
    filter 0.20s ease !important;
}

#responsive-menu.responsive-menu .sb-top-btn:hover,
#responsive-menu.responsive-menu .sb-top-btn:focus,
#responsive-menu.responsive-menu .sb-top-btn:focus-visible,
#responsive-menu.responsive-menu .sb-top-btn:active,
#responsive-menu.responsive-menu .sb-top-btn.active,
#responsive-menu.responsive-menu .sl-acc__head:hover,
#responsive-menu.responsive-menu .sl-acc__head:focus,
#responsive-menu.responsive-menu .sl-acc__head:active,
#responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head,
#responsive-menu.responsive-menu .menu a:hover,
#responsive-menu.responsive-menu .menu a:focus,
#responsive-menu.responsive-menu .menu a:active,
#responsive-menu.responsive-menu .menu a.active,
#responsive-menu.responsive-menu .submenu a:hover,
#responsive-menu.responsive-menu .submenu a:focus,
#responsive-menu.responsive-menu .submenu a:active,
#responsive-menu.responsive-menu .submenu a.active,
#responsive-menu.responsive-menu .accordion-menu a:hover,
#responsive-menu.responsive-menu .accordion-menu a:focus,
#responsive-menu.responsive-menu .accordion-menu a:active,
#responsive-menu.responsive-menu .accordion-menu a.active,
#responsive-menu.responsive-menu .p2seg:hover,
#responsive-menu.responsive-menu .p2seg:focus,
#responsive-menu.responsive-menu .p2seg:focus-visible,
#responsive-menu.responsive-menu .p2seg:active,
#responsive-menu.responsive-menu .p2seg.active {
  left: auto !important;
  right: auto !important;
  translate: none !important;
  transform: none !important;
}

/* Active border kalınlığı ölçüyü değiştirmesin. */
#responsive-menu.responsive-menu .sb-top-btn,
#responsive-menu.responsive-menu .sl-acc__head,
#responsive-menu.responsive-menu .menu a,
#responsive-menu.responsive-menu .submenu a,
#responsive-menu.responsive-menu .accordion-menu a,
#responsive-menu.responsive-menu .p2seg {
  border-width: 1px !important;
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu .p2tabs.p2tabs--sidebar {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    grid-template-columns: 54px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .p2seg {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}

/* ==========================================================================
   COMPACT ACCORDION SAFETY — MEYDAN OKUMALAR / SLOTLAR
   ========================================================================== */

/*
 * Dar menüde ana animasyon kapsayıcısı ray genişliğinde kalır.
 * İçindeki 60px navigasyon ve akordeon kolonları ayrı ayrı ortalanır.
 */
body.sb-collapsed #responsive-menu.responsive-menu .sb-content-animate {
  box-sizing: border-box !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sb-top,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc {
  box-sizing: border-box !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
}

/*
 * Dar modda akordeon sadece ikon başlığını gösterir.
 * JavaScript is-open sınıfını değiştirse bile alt menü raya açılamaz.
 */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
  box-sizing: border-box !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 5px 2px !important;
  overflow: hidden !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  box-sizing: border-box !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__body,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__arrow,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__headArrow,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__chevron {
  display: none !important;
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu .sb-content-animate {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .sb-top,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 5px 2px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}

/* ==========================================================================
   COMPACT MODE — FIXED CENTER + DISABLED ACCORDION TOGGLE
   ========================================================================== */

body.sb-collapsed #responsive-menu.responsive-menu,
body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding: 0 !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sidebar-content,
body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper,
body.sb-collapsed #responsive-menu.responsive-menu .categories,
body.sb-collapsed #responsive-menu.responsive-menu .sb-content-animate {
  box-sizing: border-box !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sb-top,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc {
  box-sizing: border-box !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sb-top-btn,
body.sb-collapsed #responsive-menu.responsive-menu .sb-top-btn.active,
body.sb-collapsed #responsive-menu.responsive-menu .sb-top-btn.supportbtn,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin: 5px auto !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

/*
 * Kapalı rayda akordeon açma davranışı devre dışıdır.
 * Açık menüde bu kural uygulanmadığından Slotlar normal çalışmaya devam eder.
 */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  pointer-events: none !important;
  cursor: default !important;
}

/* is-open yalnızca state olarak kalabilir; dar modda görsel/geometrik fark yaratmaz. */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  color: inherit !important;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 5px 12px rgba(0, 0, 0, 0.22) !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head::before,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head::after {
  animation: none !important;
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu,
  body.sb-collapsed #responsive-menu.responsive-menu.gb-sidebar-compact,
  body.sb-collapsed #responsive-menu.responsive-menu .sidebar-content,
  body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper,
  body.sb-collapsed #responsive-menu.responsive-menu .categories,
  body.sb-collapsed #responsive-menu.responsive-menu .sb-content-animate {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .sb-top,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .sb-top-btn,
  body.sb-collapsed #responsive-menu.responsive-menu .sb-top-btn.active,
  body.sb-collapsed #responsive-menu.responsive-menu .sb-top-btn.supportbtn,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 5px auto !important;
  }
}

/* Flyout davranışının önceki compact güvenlik kurallarından sonra son önceliği. */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  pointer-events: auto !important;
  cursor: pointer !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
  overflow: visible !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
  display: block !important;
  position: absolute !important;
  left: 64px !important;
  top: 5px !important;
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(520px, calc(100vh - 90px)) !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
    left: 59px !important;
    width: min(224px, calc(100vw - 70px)) !important;
    min-width: min(224px, calc(100vw - 70px)) !important;
    max-width: min(224px, calc(100vw - 70px)) !important;
  }
}

/* Nihai compact davranış: ana linkler aktif, akordeon dropdownları kapalı. */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  pointer-events: none !important;
  cursor: default !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__body,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
  display: none !important;
  position: static !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu a.sb-top-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ==========================================================================
   REFERENCE COMPACT CHALLENGES
   gambleron323.com/tr üzerindeki dar menü ölçü ve davranışları.
   ========================================================================== */

/* Meydan Okumalar her zaman normal sayfa bağlantısıdır. */
body.sb-collapsed
  #responsive-menu.responsive-menu
  a.sb-top-btn[href="/tr/casino/challenges"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/*
 * Referans ölçüleri:
 * menu-body / sl-acc / section: 57px
 * accordion head: 52x52px
 */
body.sb-collapsed #responsive-menu.responsive-menu .menu-body {
  box-sizing: border-box !important;
  width: 57px !important;
  min-width: 57px !important;
  max-width: 57px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc {
  box-sizing: border-box !important;
  display: grid !important;
  width: 57px !important;
  min-width: 57px !important;
  max-width: 57px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  gap: 10px !important;
  overflow: visible !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
  box-sizing: border-box !important;
  position: relative !important;
  width: 57px !important;
  min-width: 57px !important;
  max-width: 57px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
  box-sizing: border-box !important;
  display: grid !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  place-items: center !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transform: none !important;
}

/*
 * DOM'da is-open bulunabilir; referanstaki gibi alt gövde hiçbir zaman
 * kompakt rayda ölçü veya görünür panel oluşturmaz.
 */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__body,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
  display: none !important;
  position: static !important;
  inset: auto !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu .menu-body,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }
}

/* Compact akordeon ikonları ilk tıklamayı JS'e iletebilmelidir. */
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__head,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__head * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ==========================================================================
   NATIVE MENU INTERACTION
   Özel JS kullanılmaz; uygulamanın ilk tıklama davranışı korunur.
   ========================================================================== */
#responsive-menu.responsive-menu .menu-head,
#responsive-menu.responsive-menu .menu-head .title,
#responsive-menu.responsive-menu .menu-head .title *,
#responsive-menu.responsive-menu a.sb-top-btn,
#responsive-menu.responsive-menu .sl-acc__head,
#responsive-menu.responsive-menu .sl-acc__head * {
  pointer-events: auto !important;
}

#responsive-menu.responsive-menu .menu-head .title,
#responsive-menu.responsive-menu a.sb-top-btn,
#responsive-menu.responsive-menu .sl-acc__head {
  cursor: pointer !important;
}

#responsive-menu.responsive-menu .menu-head .title {
  position: relative !important;
  z-index: 20 !important;
}

#responsive-menu.responsive-menu .menu-head::before,
#responsive-menu.responsive-menu .menu-head::after {
  pointer-events: none !important;
}

/* ==========================================================================
   COMPACT SUBMENU — TIKLANABİLİR ALT BAĞLANTILAR
   ========================================================================== */
body.sb-collapsed #responsive-menu.responsive-menu,
body.sb-collapsed #responsive-menu.responsive-menu .sidebar-content,
body.sb-collapsed #responsive-menu.responsive-menu .sidebar-wrapper,
body.sb-collapsed #responsive-menu.responsive-menu .menu-body,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section {
  overflow: visible !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section {
  position: relative !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__body {
  display: none !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
  box-sizing: border-box !important;
  display: block !important;
  position: absolute !important;
  z-index: 200 !important;
  left: 57px !important;
  top: 0 !important;
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(520px, calc(100vh - 80px)) !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  color: #eaf6ff !important;
  background:
    radial-gradient(260px 150px at 0% 0%, rgba(34, 211, 238, 0.13), transparent 72%),
    linear-gradient(180deg, rgba(20, 43, 82, 0.99), rgba(10, 23, 49, 0.99)) !important;
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: 16px 18px 38px rgba(2, 8, 23, 0.46) !important;
  transform: none !important;
  animation: compact-submenu-enter 0.18s ease-out both !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body *,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body a,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body button,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body .sl-acc__item {
  pointer-events: auto !important;
}

body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body a,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body button,
body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body .sl-acc__item {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 38px !important;
  margin: 3px 0 !important;
  padding: 7px 9px !important;
  transform: none !important;
}

@keyframes compact-submenu-enter {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 575px) {
  body.sb-collapsed #responsive-menu.responsive-menu .sl-acc__section.is-open > .sl-acc__body {
    left: 54px !important;
    width: min(224px, calc(100vw - 64px)) !important;
    min-width: min(224px, calc(100vw - 64px)) !important;
    max-width: min(224px, calc(100vw - 64px)) !important;
  }
}

/* ==========================================================================
   FINAL LIVE LOBBY + MODAL OVERRIDES
   Bu blok dosyanın sonunda kalmalı; eski tema kurallarını kesin olarak ezer.
   ========================================================================== */

/* Canlı lobi kartlarını grid hücresinin tamamına yay ve görselleri geri getir. */
html body #app main#main .general-tabs
  .slots-tabs-listing.standart-tabs-listing > .item {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

html body #app main#main .general-tabs
  .slots-tabs-listing.standart-tabs-listing > .item > .game-item {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(155deg, #173d72, #0b1d3e) !important;
  border: 1px solid rgba(125, 211, 252, 0.30) !important;
  border-radius: 13px !important;
}

html body #app main#main .general-tabs .game-item > .game-top,
html body #app main#main .general-tabs .game-item > .game-top > figure.game-image {
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

html body #app main#main .general-tabs
  .game-item > .game-top > figure.game-image > img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body #app main#main .general-tabs
  .slots-tabs-listing.standart-tabs-listing > .item > .game-item:hover {
  overflow: visible !important;
  border-color: #2EC2F5 !important;
  box-shadow:
    0 16px 30px rgba(2, 8, 23, 0.34),
    0 0 17px rgba(34, 211, 238, 0.34),
    0 0 29px rgba(139, 92, 246, 0.16) !important;
  transform: translateY(-6px) scale(1.025) !important;
}

/* Kategori ikonlarını eski klasör görsellerinden bağımsız hale getir. */
html body #app main#main .general-tabs
  .general-tabs-buttons > a > .icon > img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body #app main#main .general-tabs
  .general-tabs-buttons > a > .icon::before {
  display: block !important;
  color: #2EC2F5 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.78) !important;
}

html body #app main#main .general-tabs
  .general-tabs-buttons > a[href*="popular-live-games"] > .icon::before {
  content: "✦" !important;
}

html body #app main#main .general-tabs
  .general-tabs-buttons > a[href*="game-show"] > .icon::before {
  content: "â™›" !important;
}

html body #app main#main .general-tabs
  .general-tabs-buttons > a[href*="blackjack"] > .icon::before {
  content: "â™ " !important;
}

html body #app main#main .general-tabs
  .general-tabs-buttons > a[href*="roulette"] > .icon::before {
  content: "â—‰" !important;
}

html body #app main#main .general-tabs
  .general-tabs-buttons > a[href*="baccarat"] > .icon::before {
  content: "â—†" !important;
}

/* Üst lobi sekmelerini eski bağımsız siyah yüzeyden çıkar. */
html body #app main#main .ato-wrap.general-nav {
  padding: 9px !important;
  background:
    radial-gradient(500px 90px at 0% 50%, rgba(34, 211, 238, 0.13), transparent 72%),
    linear-gradient(105deg, #173d72, #132957) !important;
  border: 1px solid rgba(125, 211, 252, 0.34) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 25px rgba(2, 8, 23, 0.22) !important;
}

html body #app main#main .ato-wrap.general-nav .ato-btn {
  color: #dbeafe !important;
  background: linear-gradient(145deg, rgba(39, 82, 145, 0.88), rgba(16, 38, 81, 0.96)) !important;
  border: 1px solid rgba(147, 197, 253, 0.34) !important;
  border-radius: 10px !important;
}

html body #app main#main .ato-wrap.general-nav .ato-btn:hover,
html body #app main#main .ato-wrap.general-nav .ato-btn.is-active {
  color: #F4F3FA !important;
  background: linear-gradient(110deg, rgba(34, 211, 238, 0.34), rgba(59, 130, 246, 0.78), rgba(139, 92, 246, 0.46)) !important;
  border-color: #a5f3fc !important;
  box-shadow:
    0 0 16px rgba(34, 211, 238, 0.34),
    0 0 28px rgba(139, 92, 246, 0.18) !important;
}

/* Global popup her zaman arama alanı ve arama sonuç katmanının önünde kalır. */
html body.modal-open #global-modal,
html body.modal-open.search-focus #global-modal,
html body.modal-open:has(.main-search:focus-within) #global-modal,
html body.modal-open:has(.main-search .search-layer) #global-modal {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 50020 !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
}

html body.modal-open .modal-backdrop,
html body.modal-open .modal-backdrop.fade.show {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 50010 !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(4, 16, 39, 0.68) !important;
  backdrop-filter: blur(5px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(112%) !important;
}

html body.modal-open #global-modal .modal-dialog,
html body.modal-open #global-modal .modal-content {
  position: relative !important;
  z-index: 50021 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body.modal-open #app main#main .main-search,
html body.modal-open #app main#main .main-search > form.search-form,
html body.modal-open #app main#main
  .main-search > .search-layer[data-search-layer="true"] {
  z-index: 50 !important;
}

/* Oyun pusulasında kaynak karttan gelen "3 Çevrim içi / oyuncu" metnini gizle. */
html body #gb-game-picker .gb-picker-card > span {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Promosyonlar ikonu her sayfada JS tarafından üretilen sabit SVG'dir. */
html body #responsive-menu.responsive-menu
  .gb-feature-promotions > .icon.gb-owned-promotions-icon {
  display: inline-grid !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
  place-items: center !important;
  color: #2EC2F5 !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.24), rgba(59, 130, 246, 0.20)) !important;
  border: 1px solid rgba(103, 232, 249, 0.48) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 12px rgba(34, 211, 238, 0.18) !important;
}

html body #responsive-menu.responsive-menu
  .gb-feature-promotions > .icon.gb-owned-promotions-icon > svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
  filter: drop-shadow(0 0 5px rgba(103, 232, 249, 0.62)) !important;
}

/* Üst lobi alanında içte kalan siyah rail yüzeyini kaldır ve dikey boşluğu eşitle. */
html body #app main#main .ato-wrap.general-nav {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-height: 68px !important;
  margin: 0 0 18px !important;
  padding: 10px !important;
  align-items: center !important;
  background:
    radial-gradient(620px 100px at 4% 50%, rgba(34, 211, 238, 0.15), transparent 74%),
    linear-gradient(105deg, rgba(24, 65, 122, 0.96), rgba(22, 43, 91, 0.98)) !important;
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  border-radius: 14px !important;
}

html body #app main#main .ato-wrap.general-nav > .ato-rail {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 9px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #app main#main .ato-wrap.general-nav > .ato-rail::before,
html body #app main#main .ato-wrap.general-nav > .ato-rail::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 767px) {
  html body #app main#main .ato-wrap.general-nav {
    min-height: 0 !important;
    padding: 8px !important;
  }

  html body #app main#main .ato-wrap.general-nav > .ato-rail {
    gap: 7px !important;
  }
}

/* ==========================================================================
   GAMBLERON ALT SAYFA THEME BRIDGE
   Native alt sayfalar + sportsbook dış kabuğu
   ========================================================================== */

:root {
  --gb-subpage-bg: #08052F;
  --gb-subpage-bg-deep: #05031F;
  --gb-subpage-surface: #160A57;
  --gb-subpage-surface-hover: #281080;
  --gb-subpage-border: rgba(129, 35, 236, 0.38);
  --gb-subpage-border-active: rgba(194, 27, 238, 0.82);
  --gb-subpage-cyan: #2EC2F5;
  --gb-subpage-blue: #3494EB;
  --gb-subpage-violet: #8b7cff;
  --gb-subpage-text: #F4F3FA;
  --gb-subpage-muted: #aec5e8;
  --gb-subpage-shadow: 0 14px 34px rgba(2, 12, 32, 0.28);
}

body.dark-mode,
body.dark-mode #app,
body.dark-mode #general-container,
body.dark-mode main#main {
  color: var(--gb-subpage-text) !important;
  background-color: var(--gb-subpage-bg) !important;
}

body.dark-mode #app,
body.dark-mode #general-container {
  background-image: none !important;
  background-attachment: fixed !important;
}

body.dark-mode main#main {
  background: transparent !important;
}

body.dark-mode main#main h1,
body.dark-mode main#main h2,
body.dark-mode main#main h3,
body.dark-mode main#main h4,
body.dark-mode main#main h5,
body.dark-mode main#main h6,
body.dark-mode main#main strong {
  color: var(--gb-subpage-text) !important;
}

body.dark-mode main#main p,
body.dark-mode main#main small,
body.dark-mode main#main .description,
body.dark-mode main#main [class*="subtitle"],
body.dark-mode main#main [class*="description"] {
  color: var(--gb-subpage-muted) !important;
}

/* Casino / canlı casino / slot / turnuva filtre ve sekmeleri */
body.dark-mode main#main .general-header,
body.dark-mode main#main .header-options,
body.dark-mode main#main .general-tabs,
body.dark-mode main#main .standart-tabs,
body.dark-mode main#main .slots-tabs-buttons,
body.dark-mode main#main .filter-area,
body.dark-mode main#main .filters,
body.dark-mode main#main [class*="filter-bar"],
body.dark-mode main#main [class*="toolbar"],
body.dark-mode main#main [class*="tab-list"],
body.dark-mode main#main [class*="tabs-list"] {
  color: var(--gb-subpage-text) !important;
  background:
    linear-gradient(135deg, rgba(31, 79, 143, 0.94), rgba(18, 51, 98, 0.96)) !important;
  border: 1px solid var(--gb-subpage-border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode main#main .general-header,
body.dark-mode main#main .header-options {
  padding: 10px 12px !important;
}

/* Casino Lobisi / Slot Lobisi / Canlı Casino üst navigasyonu */
body.dark-mode main#main .ato-wrap.general-nav {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 68px !important;
  margin-bottom: 18px !important;
  padding: 10px !important;
  background:
    radial-gradient(520px 90px at 12% 50%, rgba(56, 215, 255, 0.16), transparent 72%),
    linear-gradient(110deg, rgba(28, 74, 135, 0.98), rgba(18, 48, 94, 0.98)) !important;
  border: 1px solid var(--gb-subpage-border) !important;
  border-radius: 14px !important;
  box-shadow:
    var(--gb-subpage-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body.dark-mode main#main .ato-wrap.general-nav > .ato-rail {
  display: flex !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 !important;
  gap: 9px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.dark-mode main#main .ato-wrap.general-nav > .ato-rail::before,
body.dark-mode main#main .ato-wrap.general-nav > .ato-rail::after {
  content: none !important;
  display: none !important;
}

body.dark-mode main#main .ato-btn,
body.dark-mode main#main .slot-tabs-buttons button,
body.dark-mode main#main .general-tabs button,
body.dark-mode main#main [role="tab"] {
  min-height: 40px !important;
  color: var(--gb-subpage-muted) !important;
  background: linear-gradient(180deg, rgba(29, 70, 128, 0.96), rgba(16, 43, 84, 0.98)) !important;
  border: 1px solid rgba(125, 211, 252, 0.28) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease !important;
}

body.dark-mode main#main .ato-btn:hover,
body.dark-mode main#main .slot-tabs-buttons button:hover,
body.dark-mode main#main .general-tabs button:hover,
body.dark-mode main#main [role="tab"]:hover {
  color: #fff !important;
  border-color: var(--gb-subpage-border-active) !important;
  background: linear-gradient(135deg, rgba(31, 91, 164, 0.98), rgba(70, 65, 157, 0.98)) !important;
  box-shadow:
    0 0 0 1px rgba(56, 215, 255, 0.15),
    0 0 18px rgba(56, 215, 255, 0.22) !important;
  transform: translateY(-1px);
}

body.dark-mode main#main .ato-btn.is-active,
body.dark-mode main#main .ato-btn.active,
body.dark-mode main#main [role="tab"][aria-selected="true"],
body.dark-mode main#main .slot-tabs-buttons button.active {
  color: #fff !important;
  background: linear-gradient(135deg, #27bdf2 0%, #3479e8 58%, #7868ed 100%) !important;
  border-color: rgba(165, 243, 252, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(56, 215, 255, 0.15),
    0 0 20px rgba(56, 215, 255, 0.28) !important;
}

body.dark-mode main#main .ato-btn .icon,
body.dark-mode main#main .slot-tabs-buttons .icon {
  color: var(--gb-subpage-cyan) !important;
  filter: drop-shadow(0 0 5px rgba(56, 215, 255, 0.44));
}

/* Form, select ve dropdown yüzeyleri */
body.dark-mode main#main input,
body.dark-mode main#main select,
body.dark-mode main#main textarea,
body.dark-mode main#main .pfw__btn,
body.dark-mode main#main .sd__btn,
body.dark-mode main#main [class*="dropdown"] > button,
body.dark-mode main#main [class*="select"] > button {
  color: var(--gb-subpage-text) !important;
  caret-color: var(--gb-subpage-cyan) !important;
  background: rgba(11, 35, 72, 0.96) !important;
  border: 1px solid rgba(125, 211, 252, 0.32) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode main#main input:focus,
body.dark-mode main#main select:focus,
body.dark-mode main#main textarea:focus,
body.dark-mode main#main .pfw__btn:focus-visible,
body.dark-mode main#main .sd__btn:focus-visible {
  outline: 0 !important;
  border-color: var(--gb-subpage-border-active) !important;
  box-shadow:
    0 0 0 3px rgba(56, 215, 255, 0.13),
    0 0 20px rgba(56, 215, 255, 0.14) !important;
}

body.dark-mode main#main input::placeholder,
body.dark-mode main#main textarea::placeholder {
  color: #9db7de !important;
  opacity: 1 !important;
}

body.dark-mode main#main [class*="dropdown-menu"],
body.dark-mode main#main [class*="select-menu"],
body.dark-mode main#main [class*="popover"] {
  color: var(--gb-subpage-text) !important;
  background: linear-gradient(180deg, rgba(21, 58, 112, 0.99), rgba(9, 29, 61, 0.99)) !important;
  border: 1px solid var(--gb-subpage-border) !important;
  border-radius: 11px !important;
  box-shadow: 0 20px 44px rgba(2, 12, 32, 0.44) !important;
}

/* Alt sayfa kartları ve tablolar */
body.dark-mode main#main .card:not(.game-item),
body.dark-mode main#main .list-group-item,
body.dark-mode main#main [class*="promotion-card"],
body.dark-mode main#main [class*="tournament-card"],
body.dark-mode main#main [class*="account-card"],
body.dark-mode main#main [class*="content-box"],
body.dark-mode main#main [class*="panel"] {
  color: var(--gb-subpage-text) !important;
  background:
    radial-gradient(360px 150px at 0 0, rgba(56, 215, 255, 0.08), transparent 72%),
    linear-gradient(145deg, rgba(25, 65, 122, 0.97), rgba(13, 40, 80, 0.98)) !important;
  border: 1px solid var(--gb-subpage-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gb-subpage-shadow) !important;
}

body.dark-mode main#main table,
body.dark-mode main#main thead,
body.dark-mode main#main tbody,
body.dark-mode main#main tr,
body.dark-mode main#main th,
body.dark-mode main#main td {
  color: var(--gb-subpage-text) !important;
  border-color: rgba(125, 211, 252, 0.18) !important;
}

body.dark-mode main#main thead,
body.dark-mode main#main th {
  background: rgba(27, 69, 128, 0.94) !important;
}

body.dark-mode main#main tbody tr:nth-child(odd) {
  background: rgba(19, 53, 102, 0.7) !important;
}

body.dark-mode main#main tbody tr:nth-child(even) {
  background: rgba(13, 41, 82, 0.74) !important;
}

body.dark-mode main#main tbody tr:hover {
  background: rgba(36, 85, 151, 0.8) !important;
}

/* Sarı kalan slider okları ve yön ikonları */
body.dark-mode main#main .swiper-button-prev,
body.dark-mode main#main .swiper-button-next,
body.dark-mode main#main [class*="arrow"],
body.dark-mode main#main [class*="chev"],
body.dark-mode main#main [class*="caret"] {
  color: var(--gb-subpage-cyan) !important;
  border-color: rgba(103, 232, 249, 0.52) !important;
}

body.dark-mode main#main .swiper-button-prev:hover,
body.dark-mode main#main .swiper-button-next:hover {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(124, 92, 255, 0.2)) !important;
  box-shadow: 0 0 18px rgba(56, 215, 255, 0.24) !important;
}

/* Sportsbook içeriği harici sağlayıcı iframe'idir.
   Buradaki kurallar siteye ait kabuğu ve iframe yüzeyini düzenler. */
body.sportsbook-page,
body.sportsbook-page #app,
body.sportsbook-page #general-container {
  background:
    radial-gradient(720px 320px at 76% 4%, rgba(96, 165, 250, 0.15), transparent 70%),
    linear-gradient(180deg, #153565 0%, #0c254a 100%) !important;
}

body.sportsbook-page #general-container {
  min-height: 100vh !important;
}

body.sportsbook-page iframe[title="sportsbook"],
body.sportsbook-page iframe.cool-scroll,
body.sportsbook-page #general-container > iframe {
  box-sizing: border-box !important;
  display: block !important;
  width: calc(100% - 24px) !important;
  max-width: calc(100% - 24px) !important;
  margin: 12px !important;
  background: var(--gb-subpage-bg-deep) !important;
  border: 1px solid var(--gb-subpage-border) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(56, 215, 255, 0.07),
    0 18px 44px rgba(2, 12, 32, 0.34) !important;
}

@media (max-width: 991px) {
  body.dark-mode main#main .general-header,
  body.dark-mode main#main .header-options,
  body.dark-mode main#main .general-tabs,
  body.dark-mode main#main .slots-tabs-buttons {
    border-radius: 10px !important;
  }

  body.dark-mode main#main .ato-wrap.general-nav {
    min-height: 58px !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }

  body.sportsbook-page iframe[title="sportsbook"],
  body.sportsbook-page iframe.cool-scroll,
  body.sportsbook-page #general-container > iframe {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin: 6px !important;
    border-radius: 10px !important;
  }
}

/* Hero genişliği: dosyanın sonundaki kesin override. */
html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
  width: min(calc(100% - 4px), 1720px) !important;
  max-width: 1720px !important;
  padding: 9px !important;
}

@media (max-width: 767px) {
  html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
    width: calc(100% - 6px) !important;
    padding: 5px !important;
  }
}

/* HERO SHOWCASE V8 FINAL LAYOUT OVERRIDE */
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable {
  --gb-hero-gap: 12px;
  --gb-hero-main-width: calc((100% - var(--gb-hero-gap)) * .5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--gb-hero-gap) !important;
  height: clamp(310px, 25vw, 438px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .main-slider,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail {
  width: 100% !important;
  height: 100% !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .hero-slider-controls {
  width: var(--gb-hero-main-width) !important;
}

@media (max-width: 991px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    display: block !important;
    width: calc(100% - 10px) !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    padding: 5px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    display: none !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .hero-slider-controls {
    inset: 5px !important;
    width: auto !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V8 — %50 SLIDER + %25 SPOR + %25 CASINO
   CDN görselleri 1200x1200 kare olarak hazırlanmıştır.
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable {
  --gb-hero-gap: 12px;
  --gb-hero-main-width: calc((100% - var(--gb-hero-gap)) * .5);

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  height: clamp(310px, 25vw, 438px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .main-slider {
  width: 100% !important;
  height: 100% !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  height: 100% !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature.tone-violet,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature.tone-blue {
  background-color: #071a36 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(4,18,42,.02) 0%,
      rgba(4,18,42,.04) 48%,
      rgba(4,18,42,.76) 76%,
      rgba(3,14,34,.97) 100%
    ),
    var(--gb-feature-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__icon {
  top: auto !important;
  right: 15px !important;
  bottom: 66px !important;
  left: auto !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  opacity: .92 !important;
  transform: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__copy {
  padding-right: 48px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__copy
  strong {
  overflow: hidden !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature__copy
  small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .hero-slider-controls {
  width: var(--gb-hero-main-width) !important;
}

@media (max-width: 1180px) and (min-width: 992px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    --gb-hero-main-width: calc((100% - 10px) * .5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    height: clamp(300px, 29vw, 350px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    gap: 9px !important;
  }
}

@media (max-width: 991px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    display: block !important;
    width: calc(100% - 10px) !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    padding: 5px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .main-slider {
    width: 100% !important;
    height: 100% !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    display: none !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .hero-slider-controls {
    inset: 5px !important;
    width: auto !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V7 — GERÇEK 3 KUTULU GRID
   [ slider ] [ spor | casino ]
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable {
  --gb-hero-gap: 12px;
  --gb-hero-main-width: calc((100% - var(--gb-hero-gap)) * .667);

  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--gb-hero-gap) !important;
  align-items: stretch !important;
  width: min(calc(100% - 4px), 1720px) !important;
  max-width: 1720px !important;
  height: clamp(300px, 25vw, 430px) !important;
  min-height: 0 !important;
  padding: 9px !important;
  overflow: visible !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .main-slider {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--gb-hero-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .hero-slider-controls {
  position: absolute !important;
  top: 9px !important;
  bottom: 9px !important;
  left: 9px !important;
  right: auto !important;
  z-index: 70 !important;
  width: var(--gb-hero-main-width) !important;
  height: auto !important;
  margin: 0 !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-area-slider-nav {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 5 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn.owl-prev {
  left: -18px !important;
  right: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn.owl-next {
  right: -18px !important;
  left: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-slider-pagination {
  left: 50% !important;
  right: auto !important;
  bottom: 11px !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 1180px) and (min-width: 768px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    --gb-hero-main-width: calc((100% - 10px) * .62);
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, 1fr) !important;
    gap: 10px !important;
    height: clamp(270px, 31vw, 370px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    gap: 9px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .gb-hero-feature {
    padding: 12px !important;
  }
}

@media (max-width: 767px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    display: block !important;
    width: calc(100% - 6px) !important;
    height: auto !important;
    aspect-ratio: 8 / 3 !important;
    padding: 5px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .main-slider {
    width: 100% !important;
    height: 100% !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    display: none !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .hero-slider-controls {
    inset: 5px !important;
    width: auto !important;
    height: auto !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .hero-nav-btn.owl-prev {
    left: 7px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .hero-nav-btn.owl-next {
    right: 7px !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V4 — SABİT GEOMETRİ, KESİLMEYEN ANA GÖRSEL, SVG OK
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-wrapper {
  height: clamp(260px, 23vw, 380px) !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide-active {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  transition:
    opacity .32s ease,
    filter .32s ease,
    transform .32s ease !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide
  .hero-slide-link,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide
  .hero-slide-card,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide
  .hero-slide-media {
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide-active
  .hero-slide-media {
  background:
    radial-gradient(circle at 50% 50%, rgba(39,85,151,.20), transparent 72%),
    #020712 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide-active
  .hero-slide-media
  img {
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide:not(.swiper-slide-active)
  .hero-slide-media
  img {
  object-fit: cover !important;
  object-position: center !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn {
  top: 50% !important;
  bottom: auto !important;
  line-height: 0 !important;
  transform: translateY(-50%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn:hover {
  transform: translateY(-50%) scale(1.06) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .hero-nav-btn
  .gb-hero-chevron {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  overflow: visible !important;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 6px rgba(103,232,249,.72)) !important;
  transform: none !important;
}

@media (max-width: 1100px) and (min-width: 768px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-wrapper {
    height: clamp(235px, 30vw, 340px) !important;
  }
}

@media (max-width: 767px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-wrapper {
    height: auto !important;
    aspect-ratio: 16 / 7 !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide-active
    .hero-slide-media
    img {
    object-fit: cover !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .hero-nav-btn
    .gb-hero-chevron {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V2 — GÖRÜNÜR AMBIENT IŞIK, DAHA BÜYÜK BANNER
   ========================================================================== */

html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
  width: min(calc(100% - 12px), 1580px) !important;
  min-height: 0 !important;
  padding: 10px !important;
  isolation: isolate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .gb-hero-ambient {
  position: absolute !important;
  inset: -42px !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border-radius: 48px !important;
  opacity: .92 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .gb-hero-ambient
  .gb-hero-ambient__light {
  position: absolute !important;
  display: block !important;
  width: clamp(260px, 34vw, 620px) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  filter: blur(54px) saturate(1.55) !important;
  mix-blend-mode: screen !important;
  will-change: transform, opacity !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .gb-hero-ambient
  .light-a {
  top: -44% !important;
  left: -18% !important;
  background: radial-gradient(circle, rgba(44,225,255,.88), rgba(37,99,235,.52) 46%, transparent 72%) !important;
  animation: gb-ambient-orbit-a 7.8s ease-in-out infinite alternate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .gb-hero-ambient
  .light-b {
  right: -16% !important;
  bottom: -52% !important;
  background: radial-gradient(circle, rgba(176,128,255,.86), rgba(88,71,255,.50) 45%, transparent 72%) !important;
  animation: gb-ambient-orbit-b 9.4s ease-in-out -2.6s infinite alternate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .gb-hero-ambient
  .light-c {
  top: 18% !important;
  left: 38% !important;
  width: clamp(180px, 23vw, 390px) !important;
  background: radial-gradient(circle, rgba(80,240,255,.68), rgba(105,92,255,.35) 48%, transparent 72%) !important;
  animation: gb-ambient-pulse 4.8s ease-in-out infinite !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .main-slider,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .hero-slider-controls {
  position: relative !important;
  z-index: 2 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide {
  width: calc((42% - 42px) / 3) !important;
  min-height: clamp(250px, 25vw, 420px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .swiper-slide-active {
  width: 58% !important;
}

@keyframes gb-ambient-orbit-a {
  0% {
    opacity: .28;
    transform: translate3d(-8%, -7%, 0) scale(.82);
  }
  45% {
    opacity: .88;
    transform: translate3d(92%, 44%, 0) scale(1.18);
  }
  100% {
    opacity: .42;
    transform: translate3d(205%, -4%, 0) scale(.92);
  }
}

@keyframes gb-ambient-orbit-b {
  0% {
    opacity: .38;
    transform: translate3d(7%, 8%, 0) scale(.88);
  }
  52% {
    opacity: .90;
    transform: translate3d(-108%, -46%, 0) scale(1.16);
  }
  100% {
    opacity: .34;
    transform: translate3d(-218%, 2%, 0) scale(.90);
  }
}

@keyframes gb-ambient-pulse {
  0%, 100% {
    opacity: .18;
    transform: translate3d(-18%, 5%, 0) scale(.72);
  }
  50% {
    opacity: .72;
    transform: translate3d(28%, -8%, 0) scale(1.22);
  }
}

@media (max-width: 1100px) and (min-width: 768px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide {
    width: calc((38% - 28px) / 2) !important;
    min-height: clamp(235px, 32vw, 380px) !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide-active {
    width: 62% !important;
  }
}

@media (max-width: 767px) {
  html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
    width: calc(100% - 12px) !important;
    min-height: auto !important;
    padding: 6px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide,
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    .swiper-slide-active {
    width: 100% !important;
    min-height: auto !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    > .gb-hero-ambient {
    inset: -18px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    > .gb-hero-ambient
    .gb-hero-ambient__light {
    width: 260px !important;
    filter: blur(42px) saturate(1.4) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase
    > .gb-hero-ambient
    .gb-hero-ambient__light {
    animation: none !important;
  }
}

/* HERO SHOWCASE FINAL WIDTH */
html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
  width: min(calc(100% - 4px), 1720px) !important;
  max-width: 1720px !important;
  padding: 9px !important;
}

@media (max-width: 767px) {
  html body #app main#main > .hp-hero-wrap .hero-area-slider.gb-hero-showcase {
    width: calc(100% - 6px) !important;
    padding: 5px !important;
  }
}

/* HERO SHOWCASE ABSOLUTE FINAL: %50 + %25 + %25 */
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable {
  --gb-hero-gap: 12px;
  --gb-hero-main-width: calc((100% - var(--gb-hero-gap)) * .5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--gb-hero-gap) !important;
  height: clamp(310px, 25vw, 438px) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .main-slider,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail {
  width: 100% !important;
  height: 100% !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .hero-slider-controls {
  width: var(--gb-hero-main-width) !important;
}

@media (max-width: 991px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    display: block !important;
    width: calc(100% - 10px) !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    padding: 5px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    display: none !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .hero-slider-controls {
    inset: 5px !important;
    width: auto !important;
  }
}

/* ==========================================================================
   HERO SHOWCASE V10 — DOĞRULANMIŞ 4:1 DIŞ ORAN
   Slider 2:1, Spor 1:1, Casino 1:1.
   ========================================================================== */

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable {
  box-sizing: border-box !important;
  width: min(calc(100% - 4px), 1720px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 1 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .main-slider,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  > .gb-hero-preview-rail,
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .gb-hero-feature {
  height: 100% !important;
  min-height: 0 !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-area-slider-nav {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn {
  top: 50% !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn.owl-prev {
  left: 12px !important;
  right: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn.owl-next {
  right: 12px !important;
  left: auto !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-slider-pagination {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 12px !important;
  left: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  transform: translateX(-50%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-slider-pagination
  .swiper-pagination-bullet {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  transform: none !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-slider-pagination
  .swiper-pagination-bullet-active {
  width: 24px !important;
}

@media (max-width: 991px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable {
    display: block !important;
    width: calc(100% - 10px) !important;
    height: auto !important;
    aspect-ratio: 3 / 1 !important;
    padding: 5px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    > .gb-hero-preview-rail {
    display: none !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    .hero-slide-media.gb-hero-media-ready
    > img {
    object-fit: cover !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    > .hero-slider-controls
  .hero-nav-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
}

/* HERO KONTROLLERİ — SON KOMPAKT ÖLÇÜ */
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .main-slider
  > .hero-slider-controls
  .hero-nav-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase--stable
  .hero-nav-btn
  .gb-hero-chevron {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2 !important;
}

@media (max-width: 991px) {
  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .main-slider
    > .hero-slider-controls
    .hero-nav-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
  }

  html body #app main#main
    > .hp-hero-wrap
    .hero-area-slider.gb-hero-showcase--stable
    .hero-nav-btn
    .gb-hero-chevron {
    width: 13px !important;
    height: 13px !important;
  }
}

/* PROMOSYON KAPAKLARI — NİHAİ 16:7 ORAN KİLİDİ */
html body #app main#main
  .promotions-box
  .promotion-list.promo-anim
  > .row
  > a.listing-block.promo-anim__item
  .item-top {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 7 !important;
  overflow: hidden !important;
}

html body #app main#main
  .promotions-box
  .promotion-list.promo-anim
  > .row
  > a.listing-block.promo-anim__item
  .item-front,
html body #app main#main
  .promotions-box
  .promotion-list.promo-anim
  > .row
  > a.listing-block.promo-anim__item
  .item-front
  > figure.image {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body #app main#main
  .promotions-box
  .promotion-list.promo-anim
  > .row
  > a.listing-block.promo-anim__item
  .item-front
  > figure.image
  > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

html body #app main#main
  .promotions-box
  .promotion-list.promo-anim
  > .row
  > a.listing-block.promo-anim__item
  .item-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}


/* ==========================================================================
   BÖLÜM 3: morsite-theme.css
   ========================================================================== */

/* ==========================================================================
   GAMBLERON — MORSITE THEME CONTRACT
   Ana sitede morsite.css dosyasından SONRA yüklenir.
   Sportsbook farklı sunucuda sportsbook-theme.css ile ayrıca ezilir.
   Tema değişiklikleri öncelikle yalnızca bu değişkenlerden yapılmalıdır.
   ========================================================================== */

:root {
  /* Verilen ana palet */
  --ms-night: #010627;
  --ms-shell: #030D44;
  --ms-card: #071450;
  --ms-card-hover: #091A6C;
  --ms-blue: #286EEA;
  --ms-blue-bright: #3494EB;
  --ms-cyan: #2EC2F5;
  --ms-purple: #6C2DE0;
  --ms-purple-bright: #8123EC;
  --ms-fuchsia: #C21BEE;
  --ms-text: #F4F3FA;
  --ms-muted: #8D8A9E;
  --ms-gold: #F5B51B;

  --ms-night-rgb: 1, 6, 39;
  --ms-shell-rgb: 3, 13, 68;
  --ms-card-rgb: 7, 20, 80;
  --ms-card-hover-rgb: 9, 26, 108;
  --ms-blue-rgb: 40, 110, 234;
  --ms-blue-bright-rgb: 52, 148, 235;
  --ms-cyan-rgb: 46, 194, 245;
  --ms-purple-rgb: 108, 45, 224;
  --ms-purple-bright-rgb: 129, 35, 236;
  --ms-fuchsia-rgb: 194, 27, 238;
  --ms-text-rgb: 244, 243, 250;
  --ms-muted-rgb: 141, 138, 158;
  --ms-gold-rgb: 245, 181, 27;

  /* Mevcut global tema sözleşmesiyle uyumluluk */
  --brand-primary: var(--ms-purple);
  --brand-primary-rgb: var(--ms-purple-rgb);
  --brand-primary-contrast: var(--ms-text);
  --brand-secondary: var(--ms-blue);
  --brand-secondary-rgb: var(--ms-blue-rgb);
  --accent: var(--ms-fuchsia);
  --accent-rgb: var(--ms-fuchsia-rgb);
  --active: var(--ms-purple-bright);

  --surface-bg: var(--ms-night);
  --surface-bg-rgb: var(--ms-night-rgb);
  --surface-1: var(--ms-shell);
  --surface-2: var(--ms-card);
  --surface-3: var(--ms-card-hover);
  --surface-4: #0C247F;
  --surface-card: var(--ms-card);
  --surface-modal: var(--ms-shell);
  --surface-elevated: var(--ms-card);
  --surface-border: rgba(var(--ms-blue-bright-rgb), .28);
  --surface-border-soft: rgba(var(--ms-blue-bright-rgb), .16);
  --surface-border-strong: rgba(var(--ms-cyan-rgb), .64);

  --text-primary: var(--ms-text);
  --text-secondary: rgba(var(--ms-text-rgb), .86);
  --text-muted: var(--ms-muted);
  --text-soft: rgba(var(--ms-muted-rgb), .72);
  --text-disabled: rgba(var(--ms-muted-rgb), .46);
  --text-on-accent: var(--ms-text);

  --accent-soft: rgba(var(--ms-cyan-rgb), .14);
  --accent-soft-2: rgba(var(--ms-blue-rgb), .10);
  --accent-soft-3: rgba(var(--ms-purple-rgb), .18);
  --accent-border: rgba(var(--ms-purple-bright-rgb), .42);
  --accent-border-strong: rgba(var(--ms-fuchsia-rgb), .72);
  --accent-glow: rgba(var(--ms-fuchsia-rgb), .34);

  --legacy-bg-1: var(--ms-shell);
  --legacy-bg-2: var(--ms-card);
  --legacy-bg-3: var(--ms-card-hover);
  --legacy-text-muted: var(--ms-muted);

  --success: #38DFA0;
  --success-rgb: 56, 223, 160;
  --warning: var(--ms-gold);
  --warning-rgb: var(--ms-gold-rgb);
  --danger: #FF4778;
  --danger-rgb: 255, 71, 120;
  --info: var(--ms-blue-bright);
  --info-rgb: var(--ms-blue-bright-rgb);

  --shadow-accent-sm: 0 6px 16px rgba(var(--ms-blue-rgb), .22);
  --shadow-accent-md: 0 10px 26px rgba(var(--ms-purple-rgb), .3);
  --shadow-accent-lg: 0 15px 36px rgba(var(--ms-fuchsia-rgb), .28);

  /* Header / sidebar aliases */
  --header-bg: var(--ms-shell);
  --sidebar-bg: var(--ms-shell);
  --sidebar-card-bg: var(--ms-card);
  --sidebar-card-hover: var(--ms-card-hover);
  --sidebar-border: rgba(var(--ms-cyan-rgb), .34);

  /* Sportsbook uygulama deÄŸiÅŸkenleri */
  --sb-brand: var(--ms-blue);
  --sb-brand-rgb: var(--ms-blue-rgb);
  --sb-brand-hover: var(--ms-blue-bright);
  --sb-brand-active: #1E56C4;
  --sb-brand-soft: rgba(var(--ms-blue-rgb), .18);
  --sb-brand-border: rgba(var(--ms-blue-rgb), .52);
  --sb-on-brand: var(--ms-text);

  --sb-accent: var(--ms-purple);
  --sb-accent-rgb: var(--ms-purple-rgb);
  --sb-accent-hover: var(--ms-purple-bright);
  --sb-accent-soft: rgba(var(--ms-purple-rgb), .18);
  --sb-on-accent: var(--ms-text);

  --sb-bg: var(--ms-night);
  --sb-bg-rgb: var(--ms-night-rgb);
  --sb-bg-strong: var(--ms-night);
  --sb-bg-soft: var(--ms-shell);
  --sb-bg-elevated: var(--ms-card);
  --sb-bg-overlay: rgba(var(--ms-night-rgb), .92);
  --sb-page-bg:
    radial-gradient(circle at 10% 8%, rgba(var(--ms-purple-rgb), .22), transparent 22rem),
    radial-gradient(circle at 88% 4%, rgba(var(--ms-fuchsia-rgb), .14), transparent 28rem),
    linear-gradient(180deg, var(--ms-shell), var(--ms-night));
  --sb-shell-bg: var(--ms-night);
  --sb-header-bg: rgba(var(--ms-shell-rgb), .9);
  --sb-sidebar-bg: var(--ms-shell);
  --sb-betslip-bg: var(--ms-night);

  --sb-surface: var(--ms-card);
  --sb-surface-rgb: var(--ms-card-rgb);
  --sb-surface-2: var(--ms-shell);
  --sb-surface-3: var(--ms-night);
  --sb-surface-hover: var(--ms-card-hover);
  --sb-surface-active: #102A91;
  --sb-surface-active-hover: #1535AC;
  --sb-card-bg: rgba(var(--ms-card-rgb), .95);
  --sb-card-bg-hover: rgba(var(--ms-card-hover-rgb), .97);
  --sb-card-border: rgba(var(--ms-cyan-rgb), .28);
  --sb-card-inner-bg: rgba(var(--ms-night-rgb), .78);
  --sb-panel-bg: rgba(var(--ms-card-rgb), .94);
  --sb-panel-bg-strong: rgba(var(--ms-shell-rgb), .97);
  --sb-panel-border: rgba(var(--ms-purple-bright-rgb), .3);
  --sb-panel-inner-bg: rgba(var(--ms-night-rgb), .8);

  --sb-text: var(--ms-text);
  --sb-text-rgb: var(--ms-text-rgb);
  --sb-text-strong: #FFFFFF;
  --sb-text-strong-rgb: 255, 255, 255;
  --sb-text-muted: var(--ms-muted);
  --sb-text-muted-rgb: var(--ms-muted-rgb);
  --sb-text-subtle: #777590;
  --sb-link: var(--ms-cyan);
  --sb-link-hover: #72D9FA;

  --sb-border: #273B91;
  --sb-border-rgb: 39, 59, 145;
  --sb-border-soft: rgba(var(--sb-border-rgb), .58);
  --sb-border-strong: var(--ms-cyan);
  --sb-divider: rgba(var(--ms-blue-bright-rgb), .5);

  --sb-odd-bg: rgba(var(--ms-night-rgb), .82);
  --sb-odd-bg-hover: linear-gradient(135deg, var(--ms-blue), var(--ms-purple));
  --sb-odd-bg-selected: linear-gradient(135deg, var(--ms-blue), var(--ms-purple));
  --sb-odd-border-selected: rgba(var(--ms-cyan-rgb), .62);
  --sb-odd-text: var(--ms-text);
  --sb-odd-price: var(--ms-gold);
  --sb-odd-price-selected: #FFFFFF;

  --sb-input-bg: rgba(var(--ms-night-rgb), .8);
  --sb-input-border: rgba(var(--ms-blue-bright-rgb), .4);
  --sb-input-border-focus: var(--ms-cyan);
  --sb-input-text: var(--ms-text);
  --sb-input-placeholder: var(--ms-muted);
  --sb-dropdown-bg: var(--ms-card);
  --sb-dropdown-border: rgba(var(--ms-purple-bright-rgb), .36);
  --sb-dropdown-item-bg-hover: var(--ms-card-hover);
  --sb-dropdown-item-bg-active: var(--ms-purple);

  --sb-tabs-bg: rgba(var(--ms-night-rgb), .82);
  --sb-tab-bg-hover: rgba(var(--ms-cyan-rgb), .1);
  --sb-tab-bg-active: linear-gradient(135deg, var(--ms-blue), var(--ms-purple));
  --sb-button-bg: var(--ms-card-hover);
  --sb-button-bg-hover: #102A91;
  --sb-button-primary-bg: var(--ms-blue);
  --sb-button-primary-bg-hover: var(--ms-blue-bright);
  --sb-button-primary-text: var(--ms-text);
  --sb-modal-overlay: rgba(var(--ms-night-rgb), .9);
  --sb-modal-bg: var(--ms-shell);
  --sb-modal-card-bg: var(--ms-card);
  --sb-modal-border: rgba(var(--ms-cyan-rgb), .42);
}

html,
body,
#app,
#general-container,
main#main {
  color: var(--ms-text) !important;
  background-color: var(--ms-night) !important;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--ms-purple-rgb), .28), transparent 30rem),
    radial-gradient(circle at 86% 3%, rgba(var(--ms-fuchsia-rgb), .18), transparent 34rem),
    linear-gradient(180deg, var(--ms-shell) 0%, var(--ms-night) 42%, var(--ms-night) 100%) !important;
}

#header,
#responsive-menu.responsive-menu,
#responsive-menu.responsive-menu .sidebar-content {
  background:
    linear-gradient(145deg, rgba(var(--ms-purple-rgb), .13), transparent 42%),
    var(--ms-shell) !important;
}

#responsive-menu.responsive-menu .sb-top-btn,
#responsive-menu.responsive-menu .gb-feature-promotions,
#responsive-menu.responsive-menu .sidebar-lang-trigger {
  color: var(--ms-text) !important;
  background: linear-gradient(135deg, rgba(var(--ms-card-rgb), .97), rgba(var(--ms-shell-rgb), .98)) !important;
  border-color: rgba(var(--ms-blue-bright-rgb), .32) !important;
}

#responsive-menu.responsive-menu .sb-top-btn:hover,
#responsive-menu.responsive-menu .gb-feature-promotions:hover {
  background: linear-gradient(135deg, rgba(var(--ms-purple-rgb), .68), rgba(var(--ms-card-hover-rgb), .96)) !important;
  border-color: rgba(var(--ms-purple-bright-rgb), .82) !important;
  box-shadow: 0 0 20px rgba(var(--ms-fuchsia-rgb), .28) !important;
}

#responsive-menu.responsive-menu .sb-top-btn.active {
  background: linear-gradient(135deg, rgba(var(--ms-purple-rgb), .96), rgba(var(--ms-fuchsia-rgb), .76)) !important;
  border-color: rgba(var(--ms-fuchsia-rgb), .88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 0 24px rgba(var(--ms-fuchsia-rgb), .38) !important;
}

button,
.btn,
[class*="button"] {
  accent-color: var(--ms-blue);
}

::selection {
  color: #FFFFFF;
  background: rgba(var(--ms-purple-bright-rgb), .72);
}

/* ==========================================================================
   GÖRÜNÜR MOR / FUŞYA KATMANI
   Bu bölüm eski CSS içindeki mavi ağırlıklı bileşenleri son sırada ezer.
   ========================================================================== */

#header {
  border-bottom-color: rgba(var(--ms-purple-bright-rgb), .58) !important;
  box-shadow:
    0 1px 0 rgba(var(--ms-fuchsia-rgb), .18),
    0 12px 34px rgba(var(--ms-purple-rgb), .16) !important;
}

#responsive-menu.responsive-menu {
  border-right-color: rgba(var(--ms-purple-bright-rgb), .48) !important;
  box-shadow: 12px 0 34px rgba(var(--ms-purple-rgb), .16) !important;
}

#responsive-menu.responsive-menu .menu-head::after,
#responsive-menu.responsive-menu .sidebar-section-title__line::after,
#responsive-menu.responsive-menu .sb-top-btn::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--ms-purple-bright-rgb), .4),
    var(--ms-fuchsia),
    rgba(var(--ms-cyan-rgb), .86),
    transparent
  ) !important;
  box-shadow:
    0 0 8px rgba(var(--ms-fuchsia-rgb), .72),
    0 0 15px rgba(var(--ms-purple-bright-rgb), .48) !important;
}

#responsive-menu.responsive-menu .gb-feature-promotions {
  background:
    linear-gradient(135deg, rgba(var(--ms-purple-rgb), .82), rgba(var(--ms-fuchsia-rgb), .52)),
    var(--ms-card) !important;
  border-color: rgba(var(--ms-purple-bright-rgb), .8) !important;
  box-shadow: 0 0 20px rgba(var(--ms-fuchsia-rgb), .25) !important;
}

#responsive-menu.responsive-menu .gb-feature-bonus,
#responsive-menu.responsive-menu .gb-feature-bonus-request {
  background: linear-gradient(135deg, var(--ms-purple), var(--ms-fuchsia)) !important;
  border-color: rgba(var(--ms-fuchsia-rgb), .86) !important;
  color: var(--ms-text) !important;
}

/* Hero container genişliği: iç slider oranları ve görsel ölçüleri korunur. */
@media (min-width: 992px) {
  html body #app main#main .container.gb-hero-wide-container {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: 1600px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

.main-search,
.search-form,
.search-layer,
.top-search-form,
[data-search-layer="true"] {
  border-color: rgba(var(--ms-purple-bright-rgb), .52) !important;
}

.main-search:focus-within,
.search-form:focus-within,
.top-search-form:focus-within {
  border-color: var(--ms-fuchsia) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ms-purple-bright-rgb), .56),
    0 0 24px rgba(var(--ms-fuchsia-rgb), .24) !important;
}

.hp-hero-wrap,
.hero-showcase,
.gb-hero-showcase,
[class*="hero-showcase"] {
  border-color: rgba(var(--ms-purple-bright-rgb), .58) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ms-fuchsia-rgb), .16),
    0 0 36px rgba(var(--ms-purple-rgb), .26) !important;
}

.hp-hero-wrap::before,
.hero-showcase::before,
.gb-hero-showcase::before,
[class*="hero-showcase"]::before {
  background:
    radial-gradient(circle at 20% 15%, rgba(var(--ms-purple-bright-rgb), .38), transparent 35%),
    radial-gradient(circle at 82% 76%, rgba(var(--ms-fuchsia-rgb), .25), transparent 34%) !important;
}

.hero-area-slider-nav button,
.hero-area-slider-nav .slick-arrow,
.hero-area-slider-nav .swiper-button-prev,
.hero-area-slider-nav .swiper-button-next,
.slick-arrow,
.swiper-button-prev,
.swiper-button-next {
  color: var(--ms-text) !important;
  background: linear-gradient(145deg, rgba(var(--ms-purple-rgb), .94), rgba(var(--ms-blue-rgb), .88)) !important;
  border-color: rgba(var(--ms-fuchsia-rgb), .78) !important;
  box-shadow:
    0 0 12px rgba(var(--ms-purple-bright-rgb), .46),
    0 0 24px rgba(var(--ms-fuchsia-rgb), .22) !important;
}

.slick-dots .slick-active button,
.swiper-pagination-bullet-active,
[class*="pagination"] .active {
  background: linear-gradient(90deg, var(--ms-purple-bright), var(--ms-fuchsia)) !important;
  box-shadow: 0 0 12px rgba(var(--ms-fuchsia-rgb), .68) !important;
}

.listing-block,
.item,
.game-card,
.gb-game-card,
.gb-feature-card,
.gb-discovery-card {
  border-color: rgba(var(--ms-purple-bright-rgb), .2) !important;
}

.listing-block:hover,
.item:hover,
.game-card:hover,
.gb-game-card:hover,
.gb-feature-card:hover,
.gb-discovery-card:hover {
  border-color: rgba(var(--ms-fuchsia-rgb), .68) !important;
  box-shadow:
    0 12px 28px rgba(var(--ms-purple-rgb), .2),
    0 0 18px rgba(var(--ms-fuchsia-rgb), .18) !important;
}

.section-title-icon,
.gb-section-icon,
[class*="section-title"] [class*="icon"] {
  color: var(--ms-text) !important;
  background: linear-gradient(145deg, rgba(var(--ms-purple-rgb), .84), rgba(var(--ms-fuchsia-rgb), .56)) !important;
  border-color: rgba(var(--ms-fuchsia-rgb), .62) !important;
  box-shadow: 0 0 18px rgba(var(--ms-purple-bright-rgb), .34) !important;
}

.section-title::after,
.section-title__line::after,
[class*="section-title"]::after {
  background: linear-gradient(
    90deg,
    transparent,
    var(--ms-purple-bright),
    var(--ms-fuchsia),
    transparent
  ) !important;
  box-shadow: 0 0 10px rgba(var(--ms-fuchsia-rgb), .58) !important;
}

.btn-primary,
button[type="submit"],
.login-buttons .register,
.register-button,
[class*="bonus-button"] {
  color: var(--ms-text) !important;
  background: linear-gradient(135deg, var(--ms-purple), var(--ms-fuchsia)) !important;
  border-color: rgba(var(--ms-fuchsia-rgb), .82) !important;
  box-shadow: 0 8px 22px rgba(var(--ms-purple-rgb), .3) !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.login-buttons .register:hover,
.register-button:hover,
[class*="bonus-button"]:hover {
  background: linear-gradient(135deg, var(--ms-purple-bright), var(--ms-fuchsia)) !important;
  box-shadow:
    0 10px 26px rgba(var(--ms-purple-rgb), .34),
    0 0 20px rgba(var(--ms-fuchsia-rgb), .3) !important;
}

/* ==========================================================================
   MOR YÜZEY DERİNLİĞİ
   Lacivert tabanı korur; kart ve panellerde mor/fuşya görünürlüğünü artırır.
   ========================================================================== */

#general-container,
main#main,
.home,
.page,
.page-content,
.content-wrapper {
  background:
    radial-gradient(circle at 78% 4%, rgba(var(--ms-fuchsia-rgb), .12), transparent 28rem),
    radial-gradient(circle at 18% 34%, rgba(var(--ms-purple-rgb), .2), transparent 34rem),
    linear-gradient(180deg, #090B3B 0%, var(--ms-night) 72%) !important;
}

.container > .row,
.home-discovery,
.gb-game-picker,
.latestWins,
.game-listing,
.provider-listing,
.promotion-listing,
.slots-tabs-listing {
  border-color: rgba(var(--ms-purple-bright-rgb), .22) !important;
}

.game-item,
.game-card,
.category-item,
.home-category-item,
.provider-item,
.provider-card,
.promotion-item,
.bonus-card,
.wallet-box,
.league-card,
.card,
.panel,
.gb-discovery-card,
.gb-feature-card {
  background:
    linear-gradient(145deg, rgba(var(--ms-purple-rgb), .15), transparent 52%),
    rgba(var(--ms-card-rgb), .94) !important;
  border-color: rgba(var(--ms-purple-bright-rgb), .28) !important;
}

.game-item:hover,
.game-card:hover,
.category-item:hover,
.home-category-item:hover,
.provider-item:hover,
.provider-card:hover,
.promotion-item:hover,
.bonus-card:hover,
.wallet-box:hover,
.league-card:hover,
.card:hover,
.panel:hover,
.gb-discovery-card:hover,
.gb-feature-card:hover {
  background:
    linear-gradient(145deg, rgba(var(--ms-purple-rgb), .32), rgba(var(--ms-fuchsia-rgb), .1)),
    var(--ms-card-hover) !important;
  border-color: rgba(var(--ms-fuchsia-rgb), .62) !important;
}

.show-all,
.view-all,
.owl-view-all,
.section-button,
a.show-all,
button.show-all {
  color: var(--ms-text) !important;
  -webkit-text-fill-color: var(--ms-text) !important;
  background: linear-gradient(135deg, rgba(var(--ms-purple-rgb), .74), rgba(var(--ms-fuchsia-rgb), .44)) !important;
  border-color: rgba(var(--ms-purple-bright-rgb), .72) !important;
  box-shadow: 0 0 16px rgba(var(--ms-fuchsia-rgb), .18) !important;
}

/* ==========================================================================
   SIDEBAR GEOMETRİSİ — ikon, yazı ve ok kolonları değişmez.
   ========================================================================== */

#responsive-menu.responsive-menu.active-menu {
  width: 248px !important;
  min-width: 248px !important;
  max-width: 248px !important;
}

#responsive-menu.responsive-menu.active-menu .sidebar-wrapper,
#responsive-menu.responsive-menu.active-menu .sidebar-content,
#responsive-menu.responsive-menu.active-menu .menu-body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-inline: 6px !important;
  overflow-x: hidden !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top,
#responsive-menu.responsive-menu.active-menu .accordion-menu,
#responsive-menu.responsive-menu.active-menu .menu {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

#responsive-menu.responsive-menu.active-menu a.sb-top-btn,
#responsive-menu.responsive-menu.active-menu .sl-acc__head,
#responsive-menu.responsive-menu.active-menu .menu > a {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  column-gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 48px !important;
  margin: 0 0 8px !important;
  padding: 4px 10px !important;
  overflow: hidden !important;
  transform: none !important;
}

#responsive-menu.responsive-menu.active-menu
  a.sb-top-btn > .icon.gb-vivid-icon-host {
  grid-column: 1 !important;
  justify-self: center !important;
  flex: none !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  inset: auto !important;
  translate: none !important;
  transform: none !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-title,
#responsive-menu.responsive-menu.active-menu .sl-acc__title,
#responsive-menu.responsive-menu.active-menu a.sb-top-btn > span:not(.icon),
#responsive-menu.responsive-menu.active-menu a.gb-feature-promotions > span:not(.icon) {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: none !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-arrow,
#responsive-menu.responsive-menu.active-menu .sl-acc__arrow,
#responsive-menu.responsive-menu.active-menu a.sb-top-btn > :last-child:not(.sb-top-title):not(.icon) {
  grid-column: 3 !important;
  justify-self: center !important;
  width: 12px !important;
  min-width: 12px !important;
  margin: 0 !important;
  inset: auto !important;
  transform-origin: center !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn:hover,
#responsive-menu.responsive-menu.active-menu .sb-top-btn.active,
#responsive-menu.responsive-menu.active-menu .gb-feature-promotions:hover {
  translate: none !important;
  transform: none !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn::before,
#responsive-menu.responsive-menu.active-menu .sb-top-btn::after {
  max-width: 100% !important;
  pointer-events: none !important;
}

@media (max-width: 991px) {
  #responsive-menu.responsive-menu.active-menu {
    width: min(248px, 84vw) !important;
    min-width: min(248px, 84vw) !important;
    max-width: min(248px, 84vw) !important;
  }
}

/* ==========================================================================
   SIDEBAR ÖZEL AKSİYONLAR — Promosyonlar / Bonus Talep Et
   Genel menü gridinden bağımsızdır; iç elemanlar ayrıca boyanmaz.
   ========================================================================== */

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-sidebar-feature-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: calc(100% - 12px) !important;
  max-width: calc(100% - 12px) !important;
  margin: 4px 6px 12px !important;
  padding: 0 !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-sidebar-feature-actions
  > .gb-feature-promotions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  column-gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  color: var(--ms-text) !important;
  background:
    radial-gradient(circle at 12% 40%, rgba(var(--ms-fuchsia-rgb), .2), transparent 42%),
    linear-gradient(135deg, rgba(var(--ms-purple-rgb), .72), rgba(var(--ms-card-rgb), .96)) !important;
  border: 1px solid rgba(var(--ms-purple-bright-rgb), .72) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 8px 20px rgba(var(--ms-purple-rgb), .18) !important;
  transform: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-sidebar-feature-actions
  > .gb-feature-promotions
  > .icon {
  grid-column: 1 !important;
  justify-self: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  transform: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-feature-promotions
  > .sb-top-title {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: transparent !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-feature-promotions
  > .sb-top-arrow {
  display: grid !important;
  grid-column: 3 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  color: var(--ms-fuchsia) !important;
  background: transparent !important;
  transform: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-sidebar-feature-actions
  > .gb-feature-bonus-request {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: var(--ms-text) !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(var(--ms-fuchsia-rgb), .34), transparent 48%),
    linear-gradient(135deg, var(--ms-purple), #5417B8 56%, rgba(var(--ms-fuchsia-rgb), .86)) !important;
  border: 1px solid rgba(var(--ms-fuchsia-rgb), .84) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 0 20px rgba(var(--ms-fuchsia-rgb), .22) !important;
  transform: none !important;
}

#responsive-menu.responsive-menu .gb-feature-bonus-content {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  height: 40px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#responsive-menu.responsive-menu .gb-feature-bonus-icon {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  transform: none !important;
}

#responsive-menu.responsive-menu .gb-feature-bonus-text {
  display: block !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--ms-text) !important;
  -webkit-text-fill-color: var(--ms-text) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-sidebar-feature-actions
  > .gb-feature-promotions:hover,
body:not(.sb-collapsed)
  #responsive-menu.responsive-menu
  .gb-sidebar-feature-actions
  > .gb-feature-bonus-request:hover {
  border-color: var(--ms-fuchsia) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 0 24px rgba(var(--ms-fuchsia-rgb), .34) !important;
  filter: brightness(1.08) saturate(1.08) !important;
  translate: none !important;
  transform: none !important;
}

/* ==========================================================================
   HERO ALTI HIZLI İŞLEMLER VE KATEGORİ İKON RENKLERİ
   ========================================================================== */

.gb-discovery-quickbar {
  background:
    radial-gradient(circle at 12% 50%, rgba(var(--ms-purple-rgb), .3), transparent 34%),
    radial-gradient(circle at 88% 50%, rgba(var(--ms-fuchsia-rgb), .16), transparent 36%),
    linear-gradient(135deg, rgba(var(--ms-card-rgb), .98), rgba(var(--ms-shell-rgb), .98)) !important;
  border-color: rgba(var(--ms-purple-bright-rgb), .46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 12px 30px rgba(var(--ms-purple-rgb), .2) !important;
}

.gb-discovery-quick {
  border-right-color: rgba(var(--ms-purple-bright-rgb), .18) !important;
}

.gb-discovery-quick:hover {
  background: linear-gradient(110deg, rgba(var(--ms-purple-rgb), .3), rgba(var(--ms-fuchsia-rgb), .13)) !important;
  box-shadow: inset 0 0 20px rgba(var(--ms-fuchsia-rgb), .08) !important;
  transform: none !important;
}

.gb-discovery-quick:nth-child(1) .gb-discovery-icon {
  color: #2EC2F5 !important;
  background: linear-gradient(145deg, rgba(46, 194, 245, .24), rgba(40, 110, 234, .22)) !important;
  border-color: rgba(46, 194, 245, .5) !important;
}

.gb-discovery-quick:nth-child(2) .gb-discovery-icon {
  color: #E6C7FF !important;
  background: linear-gradient(145deg, rgba(129, 35, 236, .38), rgba(194, 27, 238, .22)) !important;
  border-color: rgba(194, 27, 238, .56) !important;
}

.gb-discovery-quick:nth-child(3) .gb-discovery-icon {
  color: #FFD86B !important;
  background: linear-gradient(145deg, rgba(245, 181, 27, .32), rgba(108, 45, 224, .2)) !important;
  border-color: rgba(245, 181, 27, .52) !important;
}

.gb-discovery-quick:nth-child(4) .gb-discovery-icon {
  color: #F7B6FF !important;
  background: linear-gradient(145deg, rgba(194, 27, 238, .36), rgba(108, 45, 224, .25)) !important;
  border-color: rgba(194, 27, 238, .56) !important;
}

.gb-discovery-card {
  background:
    radial-gradient(circle at 82% 12%, rgba(var(--ms-fuchsia-rgb), .13), transparent 44%),
    linear-gradient(155deg, rgba(var(--ms-purple-rgb), .28), rgba(var(--ms-card-rgb), .98) 58%) !important;
  border-color: rgba(var(--ms-purple-bright-rgb), .34) !important;
}

.gb-discovery-card:hover {
  border-color: rgba(var(--ms-fuchsia-rgb), .72) !important;
  box-shadow:
    inset 0 0 22px rgba(var(--ms-purple-rgb), .12),
    0 0 20px rgba(var(--ms-fuchsia-rgb), .24) !important;
  transform: none !important;
}

.gb-discovery-card:nth-child(6n + 1) .gb-discovery-card__icon {
  color: #2EC2F5 !important;
}
.gb-discovery-card:nth-child(6n + 2) .gb-discovery-card__icon {
  color: #C8A5FF !important;
}
.gb-discovery-card:nth-child(6n + 3) .gb-discovery-card__icon {
  color: #F59DFF !important;
}
.gb-discovery-card:nth-child(6n + 4) .gb-discovery-card__icon {
  color: #FFD86B !important;
}
.gb-discovery-card:nth-child(6n + 5) .gb-discovery-card__icon {
  color: #D5B8FF !important;
}
.gb-discovery-card:nth-child(6n + 6) .gb-discovery-card__icon {
  color: #65D9FF !important;
}

.gb-discovery-card__icon {
  background: linear-gradient(145deg, rgba(var(--ms-purple-rgb), .32), rgba(var(--ms-fuchsia-rgb), .16)) !important;
  border-color: currentColor !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 14px rgba(var(--ms-purple-bright-rgb), .22) !important;
}

/* ==========================================================================
   MOR TEMA — KESİN SON KATMAN
   ========================================================================== */

:root {
  --ms-purple-page: #08052F;
  --ms-purple-shell: #100744;
  --ms-purple-panel: #160A57;
  --ms-purple-card: #1B0D65;
  --ms-purple-hover: #281080;
}

html,
body,
#app,
#general-container,
main#main,
.home,
.page,
.page-content,
.content-wrapper {
  background-color: var(--ms-purple-page) !important;
}

body,
#general-container,
main#main {
  background-image:
    radial-gradient(circle at 12% 12%, rgba(var(--ms-purple-bright-rgb), .26), transparent 30rem),
    radial-gradient(circle at 86% 6%, rgba(var(--ms-fuchsia-rgb), .19), transparent 32rem),
    linear-gradient(180deg, var(--ms-purple-shell), var(--ms-purple-page) 72%) !important;
}

#header,
#responsive-menu.responsive-menu,
#responsive-menu.responsive-menu .sidebar-content,
#responsive-menu.responsive-menu .sidebar-wrapper {
  background:
    radial-gradient(circle at 15% 8%, rgba(var(--ms-fuchsia-rgb), .16), transparent 18rem),
    linear-gradient(180deg, #13074D, #08052F) !important;
  border-color: rgba(var(--ms-purple-bright-rgb), .48) !important;
}

.latestWins,
.game-listing,
.provider-listing,
.promotion-listing,
.page-header,
.general-header,
.main-search,
.search-form,
.search-form-container,
.form-block,
.settings-content,
.settings-block,
.modal-content,
.dropdown-menu {
  background:
    linear-gradient(145deg, rgba(var(--ms-purple-rgb), .18), transparent 54%),
    rgba(16, 7, 68, .94) !important;
  border-color: rgba(var(--ms-purple-bright-rgb), .32) !important;
}

/* Kart satırının dış kabı görünmez; yalnızca kartlar görünür. */
#gb-discovery-deck,
#gb-discovery-deck .gb-discovery-cards {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#gb-discovery-deck .gb-discovery-card {
  background:
    radial-gradient(circle at 88% 8%, rgba(var(--ms-fuchsia-rgb), .17), transparent 44%),
    linear-gradient(150deg, var(--ms-purple-card), #0D0640 72%) !important;
  border: 1px solid rgba(var(--ms-purple-bright-rgb), .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 10px 24px rgba(var(--ms-purple-rgb), .16) !important;
}

#gb-discovery-deck .gb-discovery-card:hover {
  background:
    radial-gradient(circle at 82% 12%, rgba(var(--ms-fuchsia-rgb), .28), transparent 48%),
    linear-gradient(150deg, var(--ms-purple-hover), #160852 72%) !important;
  border-color: var(--ms-fuchsia) !important;
  box-shadow: 0 0 22px rgba(var(--ms-fuchsia-rgb), .3) !important;
  translate: none !important;
  transform: none !important;
}

/* Hızlı işlem ikonları: her öğe kendi rengini korur. */
#gb-discovery-deck .gb-discovery-quick.tone-cyan .gb-discovery-icon {
  color: #5CDEFF !important;
  background: linear-gradient(145deg, rgba(46,194,245,.3), rgba(40,110,234,.24)) !important;
  border-color: #2EC2F5 !important;
}

#gb-discovery-deck .gb-discovery-quick.tone-violet .gb-discovery-icon {
  color: #DAB9FF !important;
  background: linear-gradient(145deg, rgba(129,35,236,.48), rgba(108,45,224,.28)) !important;
  border-color: #8123EC !important;
}

#gb-discovery-deck .gb-discovery-quick.tone-gold .gb-discovery-icon {
  color: #FFE28A !important;
  background: linear-gradient(145deg, rgba(245,181,27,.42), rgba(108,45,224,.2)) !important;
  border-color: #F5B51B !important;
}

#gb-discovery-deck .gb-discovery-quick.tone-fuchsia .gb-discovery-icon {
  color: #F4C1FF !important;
  background: linear-gradient(145deg, rgba(194,27,238,.48), rgba(108,45,224,.3)) !important;
  border-color: #C21BEE !important;
}

/* Altı kategori ikonunun renkleri görünür biçimde ayrılır. */
#gb-discovery-deck .gb-discovery-card.tone-cyan .gb-discovery-card__icon {
  color: #5CDEFF !important;
  background: linear-gradient(145deg, rgba(46,194,245,.3), rgba(40,110,234,.2)) !important;
  border-color: #2EC2F5 !important;
}

#gb-discovery-deck .gb-discovery-card.tone-blue .gb-discovery-card__icon {
  color: #7DB9FF !important;
  background: linear-gradient(145deg, rgba(52,148,235,.34), rgba(108,45,224,.24)) !important;
  border-color: #3494EB !important;
}

#gb-discovery-deck .gb-discovery-card.tone-violet .gb-discovery-card__icon {
  color: #E0C2FF !important;
  background: linear-gradient(145deg, rgba(129,35,236,.48), rgba(194,27,238,.22)) !important;
  border-color: #8123EC !important;
}

#gb-discovery-deck .gb-discovery-card:nth-child(4) .gb-discovery-card__icon {
  color: #FFE28A !important;
  background: linear-gradient(145deg, rgba(245,181,27,.4), rgba(108,45,224,.2)) !important;
  border-color: #F5B51B !important;
}

#gb-discovery-deck .gb-discovery-card:nth-child(5) .gb-discovery-card__icon {
  color: #F4C1FF !important;
  background: linear-gradient(145deg, rgba(194,27,238,.46), rgba(108,45,224,.28)) !important;
  border-color: #C21BEE !important;
}

#gb-discovery-deck .gb-discovery-icon svg,
#gb-discovery-deck .gb-discovery-card__icon svg,
#gb-discovery-deck .gb-discovery-icon svg *,
#gb-discovery-deck .gb-discovery-card__icon svg * {
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
  filter: drop-shadow(0 0 5px currentColor) !important;
}

/* Scriptin ürettiği iki özel sidebar aksiyonu. */
#responsive-menu.responsive-menu .gb-feature-promotions::before,
#responsive-menu.responsive-menu .gb-feature-promotions::after,
#responsive-menu.responsive-menu .gb-feature-bonus-request::before,
#responsive-menu.responsive-menu .gb-feature-bonus-request::after {
  content: none !important;
  display: none !important;
}

#responsive-menu.responsive-menu
  .gb-sidebar-feature-actions
  > .gb-feature-promotions {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 14px !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  align-items: center !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(var(--ms-purple-rgb), .82), rgba(16,7,68,.98)) !important;
  border: 1px solid rgba(var(--ms-purple-bright-rgb), .78) !important;
  border-radius: 12px !important;
  transform: none !important;
}

#responsive-menu.responsive-menu
  .gb-feature-promotions
  > .gb-feature-promotions-label {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ms-text) !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: transparent !important;
}

#responsive-menu.responsive-menu
  .gb-feature-promotions
  > .gb-feature-promotions-arrow {
  display: grid !important;
  width: 14px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  color: #E382FF !important;
  background: transparent !important;
}

#responsive-menu.responsive-menu
  .gb-sidebar-feature-actions
  > .gb-feature-bonus-request {
  display: grid !important;
  grid-template-columns: 40px minmax(0, auto) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: var(--ms-text) !important;
  background: linear-gradient(135deg, var(--ms-purple), var(--ms-purple-bright) 55%, var(--ms-fuchsia)) !important;
  border: 1px solid rgba(var(--ms-fuchsia-rgb), .84) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 22px rgba(var(--ms-fuchsia-rgb), .28) !important;
  transform: none !important;
}

#responsive-menu.responsive-menu .gb-feature-bonus-request > .gb-feature-bonus-text {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--ms-text) !important;
  -webkit-text-fill-color: var(--ms-text) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Sidebar ikon paletini ilgili menü satırına taşır. */
#responsive-menu.responsive-menu a.sb-top-btn[data-gb-menu-tone],
#responsive-menu.responsive-menu .sidebar-wrapper a[data-gb-menu-tone] {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--gb-menu-a) 16%, transparent),
      rgba(22, 10, 87, .94) 42%,
      rgba(10, 5, 51, .96)
    ) !important;
  border-color: color-mix(in srgb, var(--gb-menu-a) 52%, transparent) !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--gb-menu-a) 72%, transparent),
    0 6px 15px rgba(1, 6, 39, .22) !important;
  transform: none !important;
}

#responsive-menu.responsive-menu a.sb-top-btn[data-gb-menu-tone]:hover,
#responsive-menu.responsive-menu .sidebar-wrapper a[data-gb-menu-tone]:hover {
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--gb-menu-a) 27%, transparent),
      rgba(33, 13, 112, .97) 46%,
      rgba(16, 7, 68, .98)
    ) !important;
  border-color: var(--gb-menu-a) !important;
  box-shadow:
    inset 3px 0 0 var(--gb-menu-a),
    0 0 19px color-mix(in srgb, var(--gb-menu-a) 25%, transparent) !important;
}

#responsive-menu.responsive-menu [data-gb-menu-tone="gold"],
#responsive-menu.responsive-menu [data-gb-menu-tone="orange"] {
  --gb-menu-a: #F5B51B !important;
}
#responsive-menu.responsive-menu [data-gb-menu-tone="violet"] {
  --gb-menu-a: #B86BFF !important;
}
#responsive-menu.responsive-menu [data-gb-menu-tone="rainbow"],
#responsive-menu.responsive-menu [data-gb-menu-tone="royal"] {
  --gb-menu-a: #C21BEE !important;
}
#responsive-menu.responsive-menu [data-gb-menu-tone="blue"] {
  --gb-menu-a: #3494EB !important;
}
#responsive-menu.responsive-menu [data-gb-menu-tone="green"] {
  --gb-menu-a: #35E19A !important;
}
#responsive-menu.responsive-menu [data-gb-menu-tone="aqua"] {
  --gb-menu-a: #2EC2F5 !important;
}
#responsive-menu.responsive-menu [data-gb-menu-tone="teal"] {
  --gb-menu-a: #45E6C3 !important;
}

/* ==========================================================
   MASAÜSTÜ SIDEBAR ÇERÇEVESİ
   Sidebar artık viewport'u tamamen kaplamaz; üst ve altta
   eşit boşlukla ortalanır. İçerik kendi içinde kaydırılır.
========================================================== */
@property --ms-sidebar-orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes ms-sidebar-border-orbit {
  to {
    --ms-sidebar-orbit: 360deg;
  }
}

@media (min-width: 992px) {
  #responsive-menu.responsive-menu {
    position: sticky !important;
    top: 14px !important;
    align-self: flex-start !important;
    height: calc(100dvh - 28px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 28px) !important;
    margin-block: 14px !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(var(--ms-purple-bright-rgb), .62) !important;
    border-right: 1px solid rgba(var(--ms-cyan-rgb), .56) !important;
    border-bottom: 1px solid rgba(var(--ms-purple-bright-rgb), .62) !important;
    border-left: 0 !important;
    border-radius: 0 16px 16px 0 !important;
    box-shadow:
      10px 0 32px rgba(var(--ms-purple-rgb), .20),
      0 0 20px rgba(var(--ms-cyan-rgb), .08) !important;
  }

  #responsive-menu.responsive-menu .sidebar-content {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ms-purple-bright-rgb), .55) transparent;
  }

  #responsive-menu.responsive-menu .sidebar-wrapper {
    box-sizing: border-box !important;
    min-height: 100% !important;
    height: auto !important;
  }

  /* Eski yalnızca sağ kenarda ilerleyen ışığın yerine
     üst + sağ + alt boyunca dönen yumuşak neon çerçeve. */
  #responsive-menu.responsive-menu::after,
  #responsive-menu.responsive-menu:not(.active-menu)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 80 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 2px !important;
    pointer-events: none !important;
    opacity: .94 !important;
    background:
      conic-gradient(
        from var(--ms-sidebar-orbit),
        transparent 0deg 248deg,
        rgba(var(--ms-purple-bright-rgb), .10) 268deg,
        var(--ms-fuchsia) 292deg,
        #F4F3FA 304deg,
        var(--ms-cyan) 318deg,
        transparent 342deg 360deg
      ) !important;
    border-radius: inherit !important;
    clip-path: polygon(3px 0, 100% 0, 100% 100%, 3px 100%) !important;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    filter:
      drop-shadow(0 0 4px rgba(var(--ms-cyan-rgb), .82))
      drop-shadow(0 0 8px rgba(var(--ms-fuchsia-rgb), .48)) !important;
    animation: ms-sidebar-border-orbit 5.6s linear infinite !important;
    transform: none !important;
  }
}

@media (max-width: 991.98px) {
  #responsive-menu.responsive-menu {
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin-block: 0 !important;
    border-radius: 0 !important;
  }
}

/* ==========================================================
   PANEL FINAL OVERRIDE
   Eski runtime stili CSS'ten sonra çalışsa bile bu katmanın
   özgüllüğü daha yüksektir. Panelde sadece morsite-all.css
   güncellendiğinde de masaüstü sidebar ölçüsü uygulanır.
========================================================== */
@media (min-width: 992px) {
  html body #app #general-container #responsive-menu.responsive-menu {
    position: fixed !important;
    inset: 14px auto 14px 0 !important;
    top: 14px !important;
    bottom: 14px !important;
    align-self: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(var(--ms-purple-bright-rgb), .62) !important;
    border-right: 1px solid rgba(var(--ms-cyan-rgb), .62) !important;
    border-bottom: 1px solid rgba(var(--ms-purple-bright-rgb), .62) !important;
    border-left: 0 !important;
    border-radius: 0 16px 16px 0 !important;
  }

  html body #app #general-container
    #responsive-menu.responsive-menu
    > .sidebar-content {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body #app #general-container
    #responsive-menu.responsive-menu
    > .sidebar-content
    > .sidebar-wrapper {
    min-height: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  html body #app #general-container #responsive-menu.responsive-menu::after,
  html body #app #general-container
    #responsive-menu.responsive-menu:not(.active-menu)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 80 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 2px !important;
    pointer-events: none !important;
    opacity: .96 !important;
    background:
      conic-gradient(
        from var(--ms-sidebar-orbit),
        transparent 0deg 244deg,
        rgba(var(--ms-purple-bright-rgb), .12) 264deg,
        var(--ms-fuchsia) 288deg,
        #F4F3FA 302deg,
        var(--ms-cyan) 320deg,
        transparent 344deg 360deg
      ) !important;
    border-radius: inherit !important;
    clip-path: polygon(3px 0, 100% 0, 100% 100%, 3px 100%) !important;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    filter:
      drop-shadow(0 0 5px rgba(var(--ms-cyan-rgb), .86))
      drop-shadow(0 0 10px rgba(var(--ms-fuchsia-rgb), .52)) !important;
    animation: ms-sidebar-border-orbit 5.6s linear infinite !important;
    transform: none !important;
  }
}


/* ==========================================================================
   BÖLÜM 4: sportsbook-theme.css
   ========================================================================== */


:root {
    --gb-sb-canvas: #010627;
    --gb-sb-canvas-soft: #030D44;
    --gb-sb-surface: #071450;
    --gb-sb-surface-2: #091A6C;
    --gb-sb-surface-hover: #091A6C;
    --gb-sb-panel: #071450;
    --gb-sb-panel-deep: #030D44;
    --gb-sb-border: rgba(46, 194, 245, 0.30);
    --gb-sb-border-soft: rgba(52, 148, 235, 0.18);
    --gb-sb-border-strong: rgba(46, 194, 245, 0.74);
    --gb-sb-cyan: #2EC2F5;
    --gb-sb-blue: #286EEA;
    --gb-sb-violet: #3494EB;
    --gb-sb-text: #F4F3FA;
    --gb-sb-muted: #8D8A9E;
    --gb-sb-success: #42e8bb;
    --gb-sb-danger: #fb7185;
    --gb-sb-shadow: 0 16px 38px rgba(1, 10, 28, 0.32);
    --gb-sb-glow: 0 0 22px rgba(72, 221, 255, 0.22);
    --gb-sb-gradient:
        linear-gradient(135deg, var(--gb-sb-cyan) 0%, var(--gb-sb-blue) 54%, var(--gb-sb-violet) 100%);

    /* Sportsbook uygulamasının kendi değişkenleri — Gambleron mavi/cyan */
    --sb-brand: #286EEA;
    --sb-brand-rgb: 40, 110, 234;
    --sb-brand-hover: #3494EB;
    --sb-brand-active: #286EEA;
    --sb-brand-soft: rgba(var(--sb-brand-rgb), .16);
    --sb-brand-border: rgba(var(--sb-brand-rgb), .48);
    --sb-on-brand: #031426;

    --sb-accent: #3494EB;
    --sb-accent-rgb: 52, 148, 235;
    --sb-accent-hover: #2EC2F5;
    --sb-accent-soft: rgba(var(--sb-accent-rgb), .16);
    --sb-on-accent: #F4F3FA;

    --sb-bg: #010627;
    --sb-bg-rgb: 1, 6, 39;
    --sb-bg-strong: #010627;
    --sb-bg-soft: #030D44;
    --sb-bg-elevated: #071450;
    --sb-bg-overlay: rgba(3, 14, 32, .92);
    --sb-page-bg:
        radial-gradient(circle at 10% 8%, rgba(32, 191, 243, .17), transparent 22rem),
        radial-gradient(circle at 88% 4%, rgba(75, 127, 255, .13), transparent 28rem),
        linear-gradient(180deg, #0c2a55 0%, #010627 46%, #010627 100%);
    --sb-shell-bg: #010627;
    --sb-header-bg: rgba(3, 13, 68, .92);
    --sb-sidebar-bg: #030D44;
    --sb-betslip-bg: #06162f;

    --sb-surface: #071450;
    --sb-surface-rgb: 18, 54, 101;
    --sb-surface-2: #071450;
    --sb-surface-3: #071b39;
    --sb-surface-hover: #091A6C;
    --sb-surface-active: #091A6C;
    --sb-surface-active-hover: #276aa8;
    --sb-surface-disabled: rgba(18, 54, 101, .55);

    --sb-card-bg: rgba(18, 54, 101, .94);
    --sb-card-bg-hover: rgba(25, 71, 125, .97);
    --sb-card-border: rgba(72, 221, 255, .24);
    --sb-card-shadow: 0 .85rem 2rem rgba(1, 10, 28, .28);
    --sb-card-inner-bg: rgba(5, 22, 47, .78);

    --sb-panel-bg: rgba(14, 45, 88, .94);
    --sb-panel-bg-strong: rgba(8, 31, 64, .97);
    --sb-panel-border: rgba(72, 221, 255, .27);
    --sb-panel-shadow: 0 1rem 2.4rem rgba(1, 10, 28, .34);
    --sb-panel-inner-bg: rgba(5, 22, 47, .8);

    --sb-accordion-bg: rgba(17, 53, 98, .95);
    --sb-accordion-header-bg: rgba(22, 67, 119, .97);
    --sb-accordion-body-bg: rgba(10, 38, 76, .96);
    --sb-accordion-border: rgba(72, 221, 255, .22);
    --sb-accordion-title: var(--sb-text);

    --sb-market-bg: rgba(16, 50, 94, .94);
    --sb-market-header-bg: rgba(22, 67, 119, .97);
    --sb-market-border: rgba(72, 221, 255, .24);
    --sb-bet-card-bg: rgba(16, 50, 94, .96);
    --sb-bet-card-border: rgba(103, 207, 255, .25);
    --sb-bet-card-active-border: rgba(66, 232, 187, .5);
    --sb-bet-card-won-border: var(--sb-success);
    --sb-bet-card-lost-border: var(--sb-danger);
    --sb-bet-card-settled-bg: rgba(14, 45, 88, .94);
    --sb-receipt-bg: rgba(14, 45, 88, .97);
    --sb-receipt-inner-bg: rgba(5, 22, 47, .82);
    --sb-receipt-border: rgba(72, 221, 255, .3);
    --sb-receipt-success-border: var(--sb-success);

    --sb-text: #F4F3FA;
    --sb-text-rgb: 247, 251, 255;
    --sb-text-strong: #F4F3FA;
    --sb-text-strong-rgb: 255, 255, 255;
    --sb-text-muted: #8D8A9E;
    --sb-text-muted-rgb: 171, 196, 232;
    --sb-text-subtle: #789bc9;
    --sb-text-disabled: rgba(171, 196, 232, .48);
    --sb-link: #2EC2F5;
    --sb-link-hover: #85ecff;

    --sb-border: #285c91;
    --sb-border-rgb: 40, 92, 145;
    --sb-border-soft: rgba(var(--sb-border-rgb), .58);
    --sb-border-strong: #48b9e8;
    --sb-divider: rgba(80, 151, 211, .58);

    --sb-odd-bg: rgba(5, 22, 47, .8);
    --sb-odd-bg-hover: linear-gradient(180deg, #27c8f5 0%, #238adf 100%);
    --sb-odd-bg-selected: linear-gradient(180deg, #27c8f5 0%, #238adf 100%);
    --sb-odd-bg-disabled: rgba(8, 27, 54, .72);
    --sb-odd-border-selected: rgba(var(--sb-brand-rgb), .58);
    --sb-odd-text: var(--sb-text);
    --sb-odd-price: #5ee8ff;
    --sb-odd-price-selected: #041426;
    --sb-odd-suspended: rgba(171, 196, 232, .55);

    --sb-success: #42e8bb;
    --sb-success-rgb: 66, 232, 187;
    --sb-success-soft: rgba(var(--sb-success-rgb), .16);
    --sb-success-border: rgba(var(--sb-success-rgb), .46);
    --sb-on-success: #03251d;
    --sb-danger: #fb7185;
    --sb-danger-rgb: 251, 113, 133;
    --sb-danger-soft: rgba(var(--sb-danger-rgb), .18);
    --sb-danger-border: rgba(var(--sb-danger-rgb), .48);
    --sb-on-danger: #F4F3FA;
    --sb-warning: #F5B51B;
    --sb-warning-rgb: 255, 209, 95;
    --sb-warning-soft: rgba(var(--sb-warning-rgb), .18);
    --sb-warning-border: rgba(var(--sb-warning-rgb), .48);
    --sb-on-warning: #241300;
    --sb-info: #2EC2F5;
    --sb-info-rgb: 72, 221, 255;
    --sb-info-soft: rgba(var(--sb-info-rgb), .15);
    --sb-info-border: rgba(var(--sb-info-rgb), .42);
    --sb-live: #ff4778;
    --sb-live-rgb: 255, 71, 120;
    --sb-live-soft: rgba(var(--sb-live-rgb), .17);
    --sb-live-bg: var(--sb-live);
    --sb-live-text: #F4F3FA;
    --sb-won: var(--sb-success);
    --sb-lost: var(--sb-danger);
    --sb-void: var(--sb-text-subtle);
    --sb-pending: var(--sb-info);
    --sb-special: #6f86ff;
    --sb-special-rgb: 111, 134, 255;
    --sb-odds-up: #42e8bb;
    --sb-odds-up-rgb: 66, 232, 187;
    --sb-odds-down: #fb7185;
    --sb-odds-down-rgb: 251, 113, 133;

    --sb-input-bg: rgba(5, 22, 47, .78);
    --sb-input-border: rgba(72, 221, 255, .3);
    --sb-input-border-focus: #2EC2F5;
    --sb-input-text: var(--sb-text);
    --sb-input-placeholder: var(--sb-text-muted);
    --sb-dropdown-bg: #071450;
    --sb-dropdown-border: rgba(72, 221, 255, .3);
    --sb-dropdown-item-bg-hover: #091A6C;
    --sb-dropdown-item-bg-active: #2064a5;
    --sb-dropdown-text: var(--sb-text);
    --sb-dropdown-text-muted: var(--sb-text-muted);

    --sb-tabs-bg: rgba(5, 22, 47, .78);
    --sb-tab-bg: transparent;
    --sb-tab-bg-hover: rgba(72, 221, 255, .1);
    --sb-tab-bg-active: linear-gradient(180deg, #1e6fac 0%, #174e82 100%);
    --sb-tab-text: var(--sb-text);
    --sb-tab-text-muted: var(--sb-text-muted);

    --sb-button-bg: #091A6C;
    --sb-button-bg-hover: #205f99;
    --sb-button-text: var(--sb-text);
    --sb-button-primary-bg: #20bff3;
    --sb-button-primary-bg-hover: #4bd8ff;
    --sb-button-primary-text: #041426;
    --sb-button-disabled-opacity: .42;

    --sb-score-bg: rgba(5, 22, 47, .7);
    --sb-score-border: rgba(72, 221, 255, .27);
    --sb-modal-overlay: rgba(2, 10, 24, .88);
    --sb-modal-bg: #010627;
    --sb-modal-card-bg: #071450;
    --sb-modal-border: #285c91;
    --sb-skeleton-bg: #091A6C;
    --sb-skeleton-highlight: rgba(247, 251, 255, .14);

    --sb-shadow-sm: 0 .25rem .75rem rgba(1, 10, 28, .22);
    --sb-shadow-md: 0 1rem 2.4rem rgba(1, 10, 28, .34);
    --sb-shadow-lg: 0 1.4rem 3.5rem rgba(1, 10, 28, .46);
    --sb-glow-brand: 0 0 0 1px var(--sb-brand-border), 0 .9rem 2rem rgba(var(--sb-brand-rgb), .24);

    --sb-radius-xs: .25rem;
    --sb-radius-sm: .375rem;
    --sb-radius-md: .5rem;
    --sb-radius-lg: .75rem;
    --sb-font-body: proxima-nova, ui-sans-serif, -apple-system, system-ui, sans-serif;
    --sb-font-semibold: proxima-nova, ui-sans-serif, -apple-system, system-ui, sans-serif;
    --sb-font-bold: proxima-nova, ui-sans-serif, -apple-system, system-ui, sans-serif;
}

html,
body,
#__next,
.sportsbook-app-shell,
.sportsbook-app-shell .main,
.sportsbook-app-shell .main__content,
.sportsbook-app-shell .main__container {
    color: var(--gb-sb-text) !important;
    background-color: var(--gb-sb-canvas) !important;
}

body {
    background:
        radial-gradient(circle at 14% 8%, rgba(72, 221, 255, 0.13), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(91, 157, 255, 0.11), transparent 28%),
        linear-gradient(145deg, var(--gb-sb-canvas-soft), var(--gb-sb-canvas)) !important;
}

.sportsbook-app-shell .main__content {
    background:
        radial-gradient(620px 260px at 12% 0%, rgba(72, 221, 255, .08), transparent 72%),
        radial-gradient(560px 260px at 88% 3%, rgba(91, 157, 255, .07), transparent 72%),
        repeating-linear-gradient(128deg, rgba(139, 201, 255, .018) 0 1px, transparent 1px 28px),
        var(--gb-sb-canvas) !important;
}

/* Arama */
.sportsbook-app-shell .search {
    min-height: 52px !important;
    color: var(--gb-sb-text) !important;
    background: linear-gradient(135deg, rgba(19, 61, 113, 0.96), rgba(12, 39, 78, 0.98)) !important;
    border: 1px solid var(--gb-sb-border) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--gb-sb-shadow) !important;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

.sportsbook-app-shell .search:hover,
.sportsbook-app-shell .search:focus-within {
    border-color: var(--gb-sb-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(57,216,255,.08), 0 0 24px rgba(57,216,255,.18) !important;
}

.sportsbook-app-shell .search__input {
    color: var(--gb-sb-text) !important;
    background: transparent !important;
}

.sportsbook-app-shell .search__input::placeholder {
    color: var(--gb-sb-muted) !important;
    opacity: .78 !important;
}

.sportsbook-app-shell .search__icon,
.sportsbook-app-shell .search__close {
    color: var(--gb-sb-cyan) !important;
}

/* Ãœst sportsbook navigasyonu */
.sportsbook-app-shell .tabs-nav,
.sportsbook-app-shell .tabs-nav__content,
.sportsbook-app-shell .tabs-nav__rail,
.sportsbook-app-shell .tabs-nav__wrapper {
    color: var(--gb-sb-text) !important;
    background: rgba(6, 25, 51, 0.94) !important;
    border-color: var(--gb-sb-border) !important;
}

.sportsbook-app-shell .tabs-nav {
    padding: 6px !important;
    border: 1px solid rgba(83,205,255,.20) !important;
    border-radius: 18px !important;
    box-shadow: var(--gb-sb-shadow) !important;
}

.sportsbook-app-shell .tabs-nav__btn,
.sportsbook-app-shell .tabs__item {
    min-height: 43px !important;
    color: var(--gb-sb-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.sportsbook-app-shell .tabs-nav__btn:hover,
.sportsbook-app-shell .tabs__item:hover {
    color: var(--gb-sb-text) !important;
    background: rgba(57,216,255,.10) !important;
    border-color: rgba(57,216,255,.28) !important;
    box-shadow: 0 0 16px rgba(57,216,255,.14) !important;
}

.sportsbook-app-shell .tabs-nav__btn.active,
.sportsbook-app-shell .tabs__item.active {
    color: #fff !important;
    background: var(--gb-sb-gradient) !important;
    border-color: rgba(133,231,255,.88) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.13) inset, 0 7px 22px rgba(45,144,255,.32) !important;
}

.sportsbook-app-shell .wallet-pill {
    color: var(--gb-sb-text) !important;
    background: linear-gradient(135deg, rgba(25,72,127,.96), rgba(32,46,103,.96)) !important;
    border-color: rgba(91,157,255,.46) !important;
}

/* Bölüm başlıkları ve slider okları */
.sportsbook-app-shell .section__title,
.sportsbook-app-shell .section__header {
    color: var(--gb-sb-text) !important;
}

.sportsbook-app-shell .section__title svg,
.sportsbook-app-shell .section__header svg {
    color: var(--gb-sb-cyan) !important;
    fill: currentColor !important;
}

.sportsbook-app-shell .section__nav,
.sportsbook-app-shell .splide__arrows {
    background: transparent !important;
}

.sportsbook-app-shell .splide__arrow,
.sportsbook-app-shell .section__nav button {
    color: var(--gb-sb-text) !important;
    background: rgba(15,48,91,.95) !important;
    border: 1px solid var(--gb-sb-border) !important;
    box-shadow: 0 7px 18px rgba(1,10,28,.22) !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.sportsbook-app-shell .splide__arrow:hover,
.sportsbook-app-shell .section__nav button:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #168fc8, #397fdd) !important;
    border-color: rgba(117,229,255,.82) !important;
    box-shadow: 0 0 20px rgba(57,216,255,.27) !important;
    transform: translateY(-1px) !important;
}

/* Maç kartları */
.sportsbook-app-shell .match-card,
.sportsbook-app-shell .top-match-card {
    color: var(--gb-sb-text) !important;
    background:
        linear-gradient(145deg, rgba(24,66,116,.96), rgba(10,35,68,.98)) !important;
    border: 1px solid rgba(90,194,255,.20) !important;
    border-radius: 14px !important;
    box-shadow: var(--gb-sb-shadow) !important;
    overflow: hidden !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.sportsbook-app-shell .match-card:hover,
.sportsbook-app-shell .top-match-card:hover {
    border-color: rgba(80,218,255,.55) !important;
    box-shadow: 0 14px 32px rgba(1,10,28,.32), 0 0 22px rgba(57,216,255,.13) !important;
    transform: translateY(-2px) !important;
}

.sportsbook-app-shell .match-card__content,
.sportsbook-app-shell .match-card__head,
.sportsbook-app-shell .match-card__meta,
.sportsbook-app-shell .match-card__cellar {
    color: var(--gb-sb-text) !important;
    background: transparent !important;
    border-color: rgba(125,190,239,.17) !important;
}

.sportsbook-app-shell .match-card time,
.sportsbook-app-shell .match__badges > *,
.sportsbook-app-shell [class*="badge"] {
    color: #dff8ff !important;
    background: rgba(41,119,177,.40) !important;
    border-color: rgba(80,211,255,.24) !important;
}

/* Bahis/oran butonları */
.sportsbook-app-shell .match__btn,
.sportsbook-app-shell .bet-btn,
.sportsbook-app-shell .match__selection {
    color: var(--gb-sb-text) !important;
    background: rgba(4,24,49,.82) !important;
    border: 1px solid rgba(77,156,255,.15) !important;
    border-radius: 10px !important;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.sportsbook-app-shell .match__btn:hover,
.sportsbook-app-shell .bet-btn:hover,
.sportsbook-app-shell .match__selection:hover {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(19,111,176,.94), rgba(62,77,174,.94)) !important;
    border-color: rgba(87,221,255,.62) !important;
    box-shadow: 0 0 16px rgba(57,216,255,.19) !important;
    transform: translateY(-1px) !important;
}

.sportsbook-app-shell .match__btn.active,
.sportsbook-app-shell .match__btn.selected,
.sportsbook-app-shell .bet-btn.active,
.sportsbook-app-shell .bet-btn.selected,
.sportsbook-app-shell [aria-pressed="true"].match__btn,
.sportsbook-app-shell [aria-pressed="true"].bet-btn {
    color: #fff !important;
    background: var(--gb-sb-gradient) !important;
    border-color: #99efff !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset, 0 0 20px rgba(57,216,255,.34) !important;
}

.sportsbook-app-shell .match__btn strong,
.sportsbook-app-shell .bet-btn strong,
.sportsbook-app-shell [class*="odds"] {
    color: var(--gb-sb-cyan) !important;
}

.sportsbook-app-shell .match__btn.active strong,
.sportsbook-app-shell .match__btn.selected strong,
.sportsbook-app-shell .bet-btn.active strong,
.sportsbook-app-shell .bet-btn.selected strong {
    color: #fff !important;
}

.sportsbook-app-shell .match__btn--odds-down,
.sportsbook-app-shell [class*="odds-down"] {
    color: var(--gb-sb-danger) !important;
}

.sportsbook-app-shell .match__btn--odds-up,
.sportsbook-app-shell [class*="odds-up"] {
    color: var(--gb-sb-success) !important;
}

/* Kuponlar, popüler sporlar ve ikincil paneller */
.sportsbook-app-shell [class*="coupon-card"],
.sportsbook-app-shell [class*="high-stake"],
.sportsbook-app-shell [class*="high-bet"],
.sportsbook-app-shell [class*="popular-sport"],
.sportsbook-app-shell [class*="sports-list"] {
    color: var(--gb-sb-text) !important;
    background: linear-gradient(145deg, rgba(20,59,108,.96), rgba(8,31,62,.98)) !important;
    border-color: rgba(83,205,255,.24) !important;
    box-shadow: var(--gb-sb-shadow) !important;
}

.sportsbook-app-shell [class*="coupon"] [class*="amount"],
.sportsbook-app-shell [class*="coupon"] [class*="odd"],
.sportsbook-app-shell [class*="high-bet"] [class*="amount"] {
    color: var(--gb-sb-cyan) !important;
}

.sportsbook-app-shell button,
.sportsbook-app-shell a {
    -webkit-tap-highlight-color: transparent;
}

.sportsbook-app-shell * {
    scrollbar-width: thin;
    scrollbar-color: rgba(68,181,255,.72) rgba(5,24,49,.65);
}

.sportsbook-app-shell *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.sportsbook-app-shell *::-webkit-scrollbar-track {
    background: rgba(5,24,49,.65);
}

.sportsbook-app-shell *::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--gb-sb-cyan), var(--gb-sb-violet));
    border-radius: 999px;
}

/* Açılır paneller ve modal yüzeyleri */
.sportsbook-app-shell [role="dialog"],
.sportsbook-app-shell [role="listbox"],
.sportsbook-app-shell [class*="dropdown"],
.sportsbook-app-shell [class*="popover"] {
    color: var(--gb-sb-text) !important;
    background: rgba(8,31,62,.98) !important;
    border-color: var(--gb-sb-border) !important;
    box-shadow: 0 20px 50px rgba(0,7,20,.46) !important;
}

@media (max-width: 991px) {
    .sportsbook-app-shell .main__content {
        padding-inline: 10px !important;
    }

    .sportsbook-app-shell .tabs-nav {
        border-radius: 14px !important;
        overflow-x: auto !important;
    }

    .sportsbook-app-shell .tabs-nav__btn,
    .sportsbook-app-shell .tabs__item {
        min-height: 40px !important;
        white-space: nowrap !important;
    }

    .sportsbook-app-shell .match-card,
    .sportsbook-app-shell .top-match-card {
        border-radius: 12px !important;
    }
}

@media (max-width: 575px) {
    .sportsbook-app-shell .main__content {
        padding-inline: 7px !important;
    }

    .sportsbook-app-shell .search {
        min-height: 46px !important;
        border-radius: 12px !important;
    }

    .sportsbook-app-shell .tabs-nav {
        padding: 4px !important;
    }

    .sportsbook-app-shell .tabs-nav__btn,
    .sportsbook-app-shell .tabs__item {
        min-height: 38px !important;
        font-size: 12px !important;
    }

    .sportsbook-app-shell .match__btn,
    .sportsbook-app-shell .bet-btn,
    .sportsbook-app-shell .match__selection {
        min-height: 45px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sportsbook-app-shell *,
    .sportsbook-app-shell *::before,
    .sportsbook-app-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


.sportsbook-app-shell {
    color-scheme: dark !important;
    --primary: var(--gb-sb-cyan) !important;
    --primary-color: var(--gb-sb-cyan) !important;
    --accent: var(--gb-sb-cyan) !important;
    --accent-color: var(--gb-sb-cyan) !important;
    --secondary: var(--gb-sb-violet) !important;
    --background: var(--gb-sb-canvas) !important;
    --background-color: var(--gb-sb-canvas) !important;
    --surface: var(--gb-sb-surface) !important;
    --card-background: var(--gb-sb-panel) !important;
    --text-color: var(--gb-sb-text) !important;
    --border-color: var(--gb-sb-border) !important;
}

.sportsbook-app-shell .main__container {
    width: min(100%, 1500px) !important;
    margin-inline: auto !important;
    padding: 18px clamp(12px, 2vw, 28px) 32px !important;
}

.sportsbook-app-shell .section {
    margin-block: 22px !important;
}

.sportsbook-app-shell .section__header {
    min-height: 44px !important;
    margin-bottom: 12px !important;
}

.sportsbook-app-shell .section__title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 850 !important;
    letter-spacing: -.015em !important;
}

.sportsbook-app-shell .section__title::after {
    content: "" !important;
    display: block !important;
    width: 66px !important;
    height: 2px !important;
    margin-left: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--gb-sb-cyan), var(--gb-sb-violet), transparent) !important;
    box-shadow: 0 0 12px rgba(72,221,255,.48) !important;
}

.sportsbook-app-shell .tabs-nav__content {
    padding: 5px !important;
    border-radius: 16px !important;
}

.sportsbook-app-shell .tabs-nav__rail {
    gap: 5px !important;
}

.sportsbook-app-shell .tabs-nav__btn svg,
.sportsbook-app-shell .tabs__item svg {
    color: var(--gb-sb-cyan) !important;
    fill: currentColor !important;
    filter: drop-shadow(0 0 5px rgba(72,221,255,.32)) !important;
}

.sportsbook-app-shell .tabs-nav__btn.active svg,
.sportsbook-app-shell .tabs__item.active svg {
    color: #fff !important;
}

.sportsbook-app-shell .top-match-card,
.sportsbook-app-shell .match-card {
    background:
        radial-gradient(260px 130px at 0 0, rgba(72,221,255,.08), transparent 72%),
        linear-gradient(145deg, rgba(22,61,111,.98), rgba(8,29,59,.99)) !important;
}

.sportsbook-app-shell .top-match-card::before,
.sportsbook-app-shell .match-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 2px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent, var(--gb-sb-cyan), var(--gb-sb-violet), transparent) !important;
    opacity: .68 !important;
    box-shadow: 0 0 10px rgba(72,221,255,.48) !important;
}

.sportsbook-app-shell .top-match-card,
.sportsbook-app-shell .match-card {
    position: relative !important;
}

.sportsbook-app-shell .match__action,
.sportsbook-app-shell .match__selection,
.sportsbook-app-shell .match__selection--3 {
    gap: 7px !important;
}

.sportsbook-app-shell .match__btn,
.sportsbook-app-shell .bet-btn {
    min-height: 52px !important;
    padding: 8px 11px !important;
    background: linear-gradient(180deg, rgba(8,31,62,.97), rgba(5,22,46,.99)) !important;
}

.sportsbook-app-shell .match__btn > span:first-child,
.sportsbook-app-shell .bet-btn > span:first-child {
    color: var(--gb-sb-text) !important;
}

.sportsbook-app-shell .match__btn > span:last-child,
.sportsbook-app-shell .bet-btn > span:last-child {
    color: var(--gb-sb-cyan) !important;
    font-weight: 850 !important;
}

.sportsbook-app-shell [class*="ticket"],
.sportsbook-app-shell [class*="coupon"],
.sportsbook-app-shell [class*="high-stake"],
.sportsbook-app-shell [class*="high-bet"] {
    color: var(--gb-sb-text) !important;
    background:
        radial-gradient(280px 130px at 0 0, rgba(72,221,255,.07), transparent 72%),
        linear-gradient(145deg, rgba(20,57,105,.98), rgba(8,28,57,.99)) !important;
    border-color: rgba(103,207,255,.26) !important;
}

.sportsbook-app-shell [class*="ticket"]:hover,
.sportsbook-app-shell [class*="coupon"]:hover,
.sportsbook-app-shell [class*="high-stake"]:hover,
.sportsbook-app-shell [class*="high-bet"]:hover {
    border-color: rgba(103,232,249,.60) !important;
    box-shadow: 0 14px 32px rgba(1,10,28,.30), 0 0 20px rgba(72,221,255,.14) !important;
}

.sportsbook-app-shell [class*="popular"] {
    color: var(--gb-sb-text) !important;
    background: linear-gradient(145deg, rgba(17,51,96,.96), rgba(6,25,51,.98)) !important;
    border-color: var(--gb-sb-border-soft) !important;
}

.sportsbook-app-shell [class*="popular"] button,
.sportsbook-app-shell [class*="sport-item"] {
    color: var(--gb-sb-muted) !important;
    background: rgba(13,43,82,.78) !important;
    border-color: transparent !important;
    border-radius: 11px !important;
}

.sportsbook-app-shell [class*="popular"] button:hover,
.sportsbook-app-shell [class*="sport-item"]:hover,
.sportsbook-app-shell [class*="sport-item"].active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(30,115,181,.88), rgba(76,73,171,.88)) !important;
    border-color: rgba(103,232,249,.48) !important;
    box-shadow: 0 0 17px rgba(72,221,255,.18) !important;
}

.sportsbook-app-shell [class*="amount"],
.sportsbook-app-shell [class*="payout"],
.sportsbook-app-shell [class*="possible-win"] {
    color: var(--gb-sb-cyan) !important;
}

.sportsbook-app-shell [class*="currency"],
.sportsbook-app-shell [class*="balance"] {
    color: var(--gb-sb-text) !important;
}

.sportsbook-app-shell [class*="counter"],
.sportsbook-app-shell [class*="count"],
.sportsbook-app-shell [class*="time"] {
    color: #dff8ff !important;
    background: rgba(39,105,164,.35) !important;
    border-color: rgba(103,207,255,.20) !important;
}

.sportsbook-app-shell [class*="empty"],
.sportsbook-app-shell [class*="loading"] {
    color: var(--gb-sb-muted) !important;
    background: rgba(8,29,59,.72) !important;
}

.sportsbook-app-shell [class*="skeleton"] {
    background:
        linear-gradient(
            100deg,
            rgba(22,61,111,.74) 20%,
            rgba(64,135,196,.52) 42%,
            rgba(22,61,111,.74) 64%
        ) !important;
    background-size: 220% 100% !important;
}

@media (max-width: 767px) {
    .sportsbook-app-shell .main__container {
        padding: 10px 7px 22px !important;
    }

    .sportsbook-app-shell .section {
        margin-block: 16px !important;
    }

    .sportsbook-app-shell .section__title::after {
        width: 34px !important;
    }

    .sportsbook-app-shell .match__btn,
    .sportsbook-app-shell .bet-btn {
        min-height: 47px !important;
        padding: 7px 8px !important;
    }
}

/* ==========================================================================
   MORSITE PURPLE SPORTSBOOK — KESİN SON KATMAN
   Bu bölüm farklı sunucudaki orijinal sportsbook CSS'inden sonra yüklenir.
   ========================================================================== */

:root {
    --gb-sb-canvas: #08052F;
    --gb-sb-canvas-soft: #100744;
    --gb-sb-surface: #160A57;
    --gb-sb-surface-2: #1B0D65;
    --gb-sb-surface-hover: #281080;
    --gb-sb-panel: #160A57;
    --gb-sb-panel-deep: #0D063D;
    --gb-sb-border: rgba(129, 35, 236, .38);
    --gb-sb-border-soft: rgba(129, 35, 236, .22);
    --gb-sb-border-strong: rgba(194, 27, 238, .76);
    --gb-sb-cyan: #2EC2F5;
    --gb-sb-blue: #6C2DE0;
    --gb-sb-violet: #C21BEE;
    --gb-sb-text: #F4F3FA;
    --gb-sb-muted: #8D8A9E;
    --gb-sb-glow: 0 0 24px rgba(194, 27, 238, .26);
    --gb-sb-gradient:
        linear-gradient(135deg, #6C2DE0 0%, #8123EC 54%, #C21BEE 100%);

    --sb-brand: #6C2DE0;
    --sb-brand-rgb: 108, 45, 224;
    --sb-brand-hover: #8123EC;
    --sb-brand-active: #5417B8;
    --sb-brand-soft: rgba(108, 45, 224, .2);
    --sb-brand-border: rgba(129, 35, 236, .58);
    --sb-on-brand: #F4F3FA;

    --sb-accent: #C21BEE;
    --sb-accent-rgb: 194, 27, 238;
    --sb-accent-hover: #DC63FA;
    --sb-accent-soft: rgba(194, 27, 238, .18);
    --sb-on-accent: #F4F3FA;

    --sb-bg: #08052F;
    --sb-bg-rgb: 8, 5, 47;
    --sb-bg-strong: #05031F;
    --sb-bg-soft: #100744;
    --sb-bg-elevated: #160A57;
    --sb-bg-overlay: rgba(5, 3, 31, .93);
    --sb-page-bg:
        radial-gradient(circle at 10% 8%, rgba(129, 35, 236, .3), transparent 23rem),
        radial-gradient(circle at 88% 4%, rgba(194, 27, 238, .2), transparent 28rem),
        linear-gradient(180deg, #100744 0%, #08052F 48%, #05031F 100%);
    --sb-shell-bg: #08052F;
    --sb-header-bg: rgba(16, 7, 68, .94);
    --sb-sidebar-bg: #100744;
    --sb-betslip-bg: #0D063D;

    --sb-surface: #160A57;
    --sb-surface-rgb: 22, 10, 87;
    --sb-surface-2: #100744;
    --sb-surface-3: #0D063D;
    --sb-surface-hover: #281080;
    --sb-surface-active: #36109B;
    --sb-surface-active-hover: #4815BA;
    --sb-surface-disabled: rgba(22, 10, 87, .56);

    --sb-card-bg: rgba(22, 10, 87, .95);
    --sb-card-bg-hover: rgba(40, 16, 128, .97);
    --sb-card-border: rgba(129, 35, 236, .34);
    --sb-card-inner-bg: rgba(8, 5, 47, .82);
    --sb-panel-bg: rgba(22, 10, 87, .95);
    --sb-panel-bg-strong: rgba(16, 7, 68, .98);
    --sb-panel-border: rgba(129, 35, 236, .38);
    --sb-panel-inner-bg: rgba(8, 5, 47, .84);

    --sb-accordion-bg: rgba(22, 10, 87, .96);
    --sb-accordion-header-bg: rgba(40, 16, 128, .97);
    --sb-accordion-body-bg: rgba(16, 7, 68, .97);
    --sb-accordion-border: rgba(129, 35, 236, .32);

    --sb-market-bg: rgba(22, 10, 87, .95);
    --sb-market-header-bg: rgba(40, 16, 128, .97);
    --sb-market-border: rgba(129, 35, 236, .34);
    --sb-bet-card-bg: rgba(22, 10, 87, .97);
    --sb-bet-card-border: rgba(129, 35, 236, .34);
    --sb-bet-card-settled-bg: rgba(16, 7, 68, .95);
    --sb-receipt-bg: rgba(22, 10, 87, .98);
    --sb-receipt-inner-bg: rgba(8, 5, 47, .86);
    --sb-receipt-border: rgba(194, 27, 238, .4);

    --sb-text: #F4F3FA;
    --sb-text-rgb: 244, 243, 250;
    --sb-text-strong: #FFFFFF;
    --sb-text-muted: #AAA5BE;
    --sb-text-muted-rgb: 170, 165, 190;
    --sb-text-subtle: #8D8A9E;
    --sb-link: #E382FF;
    --sb-link-hover: #F0C6FF;

    --sb-border: #4A238C;
    --sb-border-rgb: 74, 35, 140;
    --sb-border-soft: rgba(129, 35, 236, .32);
    --sb-border-strong: #8123EC;
    --sb-divider: rgba(129, 35, 236, .46);

    --sb-odd-bg: rgba(8, 5, 47, .86);
    --sb-odd-bg-hover:
        linear-gradient(135deg, #6C2DE0, #8123EC 58%, #C21BEE);
    --sb-odd-bg-selected:
        linear-gradient(135deg, #6C2DE0, #8123EC 58%, #C21BEE);
    --sb-odd-border-selected: rgba(194, 27, 238, .72);
    --sb-odd-text: #F4F3FA;
    --sb-odd-price: #F5B51B;
    --sb-odd-price-selected: #FFFFFF;

    --sb-info: #2EC2F5;
    --sb-info-rgb: 46, 194, 245;
    --sb-special: #C21BEE;
    --sb-special-rgb: 194, 27, 238;

    --sb-input-bg: rgba(8, 5, 47, .84);
    --sb-input-border: rgba(129, 35, 236, .42);
    --sb-input-border-focus: #C21BEE;
    --sb-dropdown-bg: #160A57;
    --sb-dropdown-border: rgba(129, 35, 236, .4);
    --sb-dropdown-item-bg-hover: #281080;
    --sb-dropdown-item-bg-active: #6C2DE0;

    --sb-tabs-bg: rgba(8, 5, 47, .84);
    --sb-tab-bg-hover: rgba(194, 27, 238, .13);
    --sb-tab-bg-active:
        linear-gradient(135deg, #6C2DE0, #8123EC 60%, #C21BEE);
    --sb-button-bg: #281080;
    --sb-button-bg-hover: #36109B;
    --sb-button-primary-bg: #6C2DE0;
    --sb-button-primary-bg-hover: #8123EC;
    --sb-button-primary-text: #FFFFFF;

    --sb-score-bg: rgba(8, 5, 47, .76);
    --sb-score-border: rgba(129, 35, 236, .36);
    --sb-modal-overlay: rgba(5, 3, 31, .9);
    --sb-modal-bg: #100744;
    --sb-modal-card-bg: #160A57;
    --sb-modal-border: #8123EC;
    --sb-skeleton-bg: #281080;
    --sb-skeleton-highlight: rgba(244, 243, 250, .15);
    --sb-glow-brand:
        0 0 0 1px rgba(129, 35, 236, .58),
        0 .9rem 2rem rgba(194, 27, 238, .24);
}

html,
body,
#__next,
.sportsbook-app-shell,
.sportsbook-app-shell .main,
.sportsbook-app-shell .main__content,
.sportsbook-app-shell .main__container {
    color: #F4F3FA !important;
    background-color: #08052F !important;
}

body,
.sportsbook-app-shell .main__content {
    background-image:
        radial-gradient(circle at 12% 8%, rgba(129,35,236,.28), transparent 30rem),
        radial-gradient(circle at 88% 5%, rgba(194,27,238,.18), transparent 32rem),
        linear-gradient(180deg, #100744, #08052F 72%) !important;
}

.sportsbook-app-shell .header,
.sportsbook-app-shell .sidebar,
.sportsbook-app-shell .betslip {
    background:
        linear-gradient(145deg, rgba(108,45,224,.18), transparent 48%),
        var(--sb-header-bg) !important;
    border-color: rgba(129,35,236,.44) !important;
}

.sportsbook-app-shell .card,
.sportsbook-app-shell [class*="card"],
.sportsbook-app-shell .panel,
.sportsbook-app-shell [class*="market"],
.sportsbook-app-shell [class*="event"] {
    border-color: rgba(129,35,236,.32) !important;
}

.sportsbook-app-shell .card:hover,
.sportsbook-app-shell [class*="card"]:hover,
.sportsbook-app-shell [class*="market"]:hover,
.sportsbook-app-shell [class*="event"]:hover {
    border-color: rgba(194,27,238,.62) !important;
    box-shadow: 0 0 20px rgba(194,27,238,.18) !important;
}

.sportsbook-app-shell button[aria-selected="true"],
.sportsbook-app-shell .active,
.sportsbook-app-shell [class*="active"] {
    border-color: rgba(194,27,238,.72) !important;
}

.sportsbook-app-shell input:focus,
.sportsbook-app-shell select:focus,
.sportsbook-app-shell textarea:focus {
    border-color: #C21BEE !important;
    box-shadow: 0 0 0 1px rgba(194,27,238,.48), 0 0 18px rgba(194,27,238,.2) !important;
}

/* ==========================================================================
   ORİJİNAL OYUNLAR — KART/GÖRSEL ORANI KORUMASI
   ========================================================================== */
html body main#main .slots-tabs-listing .game-item,
html body main#main .game-carousel .game-item,
html body main#main .originalGamesHero__games .game-item {
    min-width: 0 !important;
    overflow: hidden !important;
}

html body main#main .slots-tabs-listing .game-item .figure-image,
html body main#main .game-carousel .game-item .figure-image,
html body main#main .originalGamesHero__games .game-item .figure-image,
html body main#main .slots-tabs-listing .game-item picture,
html body main#main .game-carousel .game-item picture,
html body main#main .originalGamesHero__games .game-item picture {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    background: #08052F !important;
}

html body main#main .slots-tabs-listing .game-item img,
html body main#main .game-carousel .game-item img,
html body main#main .originalGamesHero__games .game-item img,
html body #gb-game-picker .gb-picker-card img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

html body #gb-game-picker .gb-picker-card {
    contain: layout paint !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(108,45,224,.12), transparent 42%),
        #08052F !important;
}

/* ==========================================================================
   CASINO ETİKETİ + OYUN PUSULASI MOR TEMA — FINAL OVERRIDES
   ========================================================================== */
@media (min-width: 992px) {
    html body:not(.sb-collapsed)
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar .p2seg {
        padding-inline: 5px !important;
    }

    html body:not(.sb-collapsed)
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar .p2seg > .p2content {
        gap: 4px !important;
    }

    html body:not(.sb-collapsed)
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar .p2seg .p2chip {
        flex-basis: 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 34px !important;
        padding: 1px !important;
    }

    html body:not(.sb-collapsed)
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar .p2seg .p2icon,
    html body:not(.sb-collapsed)
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar .p2seg .p2icon svg {
        width: 27px !important;
        min-width: 27px !important;
        max-width: 27px !important;
        height: 27px !important;
    }

    html body:not(.sb-collapsed)
    #responsive-menu.responsive-menu
    .p2tabs.p2tabs--sidebar .p2seg .p2label {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 44px !important;
        max-width: none !important;
        overflow: visible !important;
        font-size: 12.5px !important;
        letter-spacing: -.025em !important;
        text-overflow: clip !important;
    }
}

html body main#main #gb-game-picker {
    position: relative !important;
    padding: 10px !important;
    background:
        radial-gradient(circle at 9% 18%, rgba(194, 27, 238, .22), transparent 25rem),
        radial-gradient(circle at 88% 12%, rgba(108, 45, 224, .30), transparent 31rem),
        linear-gradient(135deg, rgba(40, 16, 128, .42), rgba(8, 5, 47, .14)) !important;
    border: 1px solid rgba(129, 35, 236, .34) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 rgba(244, 243, 250, .06),
        0 0 28px rgba(108, 45, 224, .16) !important;
}

html body main#main #gb-game-picker .gb-picker-control {
    background:
        radial-gradient(circle at 8% 9%, rgba(194, 27, 238, .34), transparent 11rem),
        radial-gradient(circle at 100% 100%, rgba(46, 194, 245, .13), transparent 13rem),
        linear-gradient(145deg, #35108F 0%, #220B69 50%, #120843 100%) !important;
    border-color: rgba(194, 27, 238, .58) !important;
    box-shadow:
        inset 0 1px 0 rgba(244, 243, 250, .10),
        0 0 0 1px rgba(129, 35, 236, .15),
        0 16px 34px rgba(5, 3, 31, .34),
        0 0 24px rgba(194, 27, 238, .15) !important;
}

html body main#main #gb-game-picker .gb-picker-control::after {
    color: rgba(227, 130, 255, .13) !important;
    text-shadow: 0 0 24px rgba(194, 27, 238, .26) !important;
}

html body main#main #gb-game-picker .gb-picker-control__eyebrow {
    color: #E382FF !important;
    text-shadow: 0 0 10px rgba(194, 27, 238, .52) !important;
}

html body main#main #gb-game-picker .gb-picker-control small {
    color: rgba(244, 243, 250, .72) !important;
}

html body main#main #gb-game-picker .gb-picker-spin {
    background:
        linear-gradient(115deg, #6C2DE0 0%, #8123EC 50%, #C21BEE 100%) !important;
    border-color: rgba(227, 130, 255, .76) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 0 15px rgba(129, 35, 236, .42),
        0 0 25px rgba(194, 27, 238, .20) !important;
}

html body main#main #gb-game-picker .gb-picker-reels {
    background:
        radial-gradient(38rem 15rem at 0% 0%, rgba(108, 45, 224, .25), transparent 70%),
        radial-gradient(32rem 15rem at 100% 0%, rgba(194, 27, 238, .20), transparent 72%),
        linear-gradient(150deg, rgba(31, 11, 99, .97), rgba(8, 5, 47, .99)) !important;
    border-color: rgba(129, 35, 236, .48) !important;
    box-shadow:
        inset 0 1px 0 rgba(244, 243, 250, .07),
        0 0 22px rgba(108, 45, 224, .14),
        0 16px 34px rgba(5, 3, 31, .30) !important;
}

html body main#main #gb-game-picker .gb-picker-group {
    padding: 5px !important;
    background:
        linear-gradient(180deg, rgba(129, 35, 236, .10), transparent 42%) !important;
    border-radius: 12px !important;
}

html body main#main #gb-game-picker .gb-picker-group__title {
    color: rgba(244, 243, 250, .76) !important;
}

html body main#main #gb-game-picker
.gb-picker-group:nth-child(1) .gb-picker-group__title::before {
    background: #2EC2F5 !important;
    box-shadow: 0 0 9px rgba(46, 194, 245, .88) !important;
}

html body main#main #gb-game-picker
.gb-picker-group:nth-child(2) .gb-picker-group__title::before {
    background: #8123EC !important;
    box-shadow: 0 0 9px rgba(129, 35, 236, .90) !important;
}

html body main#main #gb-game-picker
.gb-picker-group:nth-child(3) .gb-picker-group__title::before {
    background: #C21BEE !important;
    box-shadow: 0 0 9px rgba(194, 27, 238, .90) !important;
}

/* ==========================================================================
   SİTE ANA ZEMİNİ — MENÜYLE UYUMLU KOYU MOR
   Kartların kendi yüzeylerine dokunmadan görünür mavi sayfa boşluklarını ezer.
   ========================================================================== */
html,
html body,
html body #app,
html body #app #general-container,
html body #app #general-container > main#main,
html body #app #general-container > main#main.home {
    background-color: #08052F !important;
    background-image:
        radial-gradient(circle at 10% 14%, rgba(108, 45, 224, .28), transparent 30rem),
        radial-gradient(circle at 84% 7%, rgba(194, 27, 238, .18), transparent 34rem),
        linear-gradient(180deg, #100744 0%, #08052F 58%, #05031F 100%) !important;
    background-attachment: fixed !important;
}

html body #app #general-container > main#main.home > .container,
html body #app #general-container > main#main.home > .container-fluid,
html body #app #general-container > main#main.home > section:not(.hp-hero-wrap),
html body #app #general-container > main#main.home
  .main-search[data-mode="inline"] {
    background-color: transparent !important;
}

html body #app #general-container > main#main.home::before {
    content: "" !important;
    position: fixed !important;
    z-index: -1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(135deg, rgba(129, 35, 236, .08), transparent 38%),
        radial-gradient(circle at 50% 30%, rgba(194, 27, 238, .08), transparent 38rem) !important;
}

/* ==========================================================================
   HERO/BANNER ZEMİNİ — MAVİDEN ALTTAKİ MOR SAYFA ZEMİNİNE GEÇİŞ
   ========================================================================== */
html body #app #general-container
  > main#main.home
  > .hp-hero-wrap {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background-color: #100744 !important;
    background-image:
        radial-gradient(42rem 18rem at 18% 12%, rgba(46, 194, 245, .16), transparent 72%),
        radial-gradient(48rem 22rem at 78% 24%, rgba(108, 45, 224, .30), transparent 74%),
        linear-gradient(
            180deg,
            #071450 0%,
            #10105D 44%,
            #160A57 72%,
            #100744 88%,
            #08052F 100%
        ) !important;
}

html body #app #general-container
  > main#main.home
  > .hp-hero-wrap::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 46% !important;
    pointer-events: none !important;
    background:
        radial-gradient(34rem 9rem at 50% 100%, rgba(194, 27, 238, .20), transparent 74%),
        linear-gradient(180deg, transparent 0%, rgba(22, 10, 87, .62) 50%, #08052F 100%) !important;
}

html body #app #general-container
  > main#main.home
  > .hp-hero-wrap
  > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Dark-mode eski alt-sayfa köprüsünü kesin olarak mor tema ile değiştirir. */
html body.dark-mode #app,
html body.dark-mode #general-container {
    background-color: #08052F !important;
    background-image:
        radial-gradient(54rem 28rem at 78% 4%, rgba(129, 35, 236, .23), transparent 68%),
        radial-gradient(45rem 23rem at 20% 32%, rgba(194, 27, 238, .13), transparent 72%),
        linear-gradient(180deg, #100744 0%, #08052F 52%, #05031F 100%) !important;
    background-attachment: fixed !important;
}

/* ==========================================================================
   FINAL MOR SAHNE — SIDEBAR, HEADER VE HERO ARKASINDA MAVİ KALMAZ
   ========================================================================== */
@keyframes ms-purple-hero-drift {
    0% {
        opacity: .38;
        transform: translate3d(-12%, -8%, 0) scale(.88);
    }
    50% {
        opacity: .82;
        transform: translate3d(48%, 12%, 0) scale(1.12);
    }
    100% {
        opacity: .44;
        transform: translate3d(112%, -5%, 0) scale(.94);
    }
}

@keyframes ms-purple-hero-drift-reverse {
    0% {
        opacity: .34;
        transform: translate3d(15%, 8%, 0) scale(.9);
    }
    50% {
        opacity: .76;
        transform: translate3d(-42%, -10%, 0) scale(1.16);
    }
    100% {
        opacity: .4;
        transform: translate3d(-96%, 4%, 0) scale(.96);
    }
}

html body #app #general-container #responsive-menu.responsive-menu,
html body #app #general-container #responsive-menu.responsive-menu .sidebar-content,
html body #app #general-container #responsive-menu.responsive-menu .sidebar-wrapper {
    background-color: #100744 !important;
    background-image:
        radial-gradient(22rem 34rem at 18% 12%, rgba(194, 27, 238, .24), transparent 72%),
        radial-gradient(20rem 30rem at 92% 78%, rgba(108, 45, 224, .28), transparent 74%),
        linear-gradient(180deg, #180858 0%, #100744 48%, #08052F 100%) !important;
}

html body #app #general-container > #header,
html body #app #general-container #header {
    background-color: #100744 !important;
    background-image:
        radial-gradient(34rem 8rem at 18% 0%, rgba(194, 27, 238, .18), transparent 74%),
        linear-gradient(90deg, #160852 0%, #100744 54%, #0B0537 100%) !important;
    border-bottom-color: rgba(194, 27, 238, .56) !important;
    box-shadow:
        0 1px 0 rgba(129, 35, 236, .48),
        0 10px 30px rgba(108, 45, 224, .20) !important;
}

html body #app #general-container
  > main#main.home
  > .hp-hero-wrap {
    background-color: #100744 !important;
    background-image:
        radial-gradient(52rem 24rem at 14% 18%, rgba(108, 45, 224, .36), transparent 72%),
        radial-gradient(48rem 22rem at 82% 28%, rgba(194, 27, 238, .25), transparent 74%),
        linear-gradient(180deg, #160852 0%, #100744 56%, #08052F 100%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .gb-hero-ambient
  .light-a {
    background: radial-gradient(circle, rgba(194, 27, 238, .88), rgba(108, 45, 224, .54) 46%, transparent 72%) !important;
    animation: ms-purple-hero-drift 8.4s ease-in-out infinite alternate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .gb-hero-ambient
  .light-b {
    background: radial-gradient(circle, rgba(129, 35, 236, .88), rgba(194, 27, 238, .46) 46%, transparent 72%) !important;
    animation: ms-purple-hero-drift-reverse 10.2s ease-in-out -2.2s infinite alternate !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  > .gb-hero-ambient
  .light-c {
    background: radial-gradient(circle, rgba(228, 93, 255, .68), rgba(108, 45, 224, .38) 48%, transparent 72%) !important;
}

html body #app #general-container
  > main#main.home
  > .hp-hero-wrap::before {
    background:
        radial-gradient(42rem 16rem at 18% 24%, rgba(129, 35, 236, .30), transparent 72%),
        radial-gradient(38rem 14rem at 82% 64%, rgba(194, 27, 238, .24), transparent 74%) !important;
}

html body #app #general-container
  > main#main.home
  > .hp-hero-wrap::after {
    background:
        radial-gradient(36rem 10rem at 50% 100%, rgba(194, 27, 238, .28), transparent 74%),
        linear-gradient(180deg, transparent 0%, rgba(16, 7, 68, .74) 52%, #08052F 100%) !important;
}

/* Header'ın kendi iç katmanları dış kabukla aynı mor yüzeyi kullanır. */
html body #app header#header,
html body #app header#header .middle-header,
html body #app header#header .middle-header-container,
html body #app header#header [class*="header-container"],
html body #app header#header [class*="header-inner"] {
    background-color: #100744 !important;
    background-image: none !important;
    background: #100744 !important;
}

html body #app header#header .middle-header,
html body #app header#header .middle-header-container {
    border-color: rgba(129, 35, 236, .42) !important;
    box-shadow: none !important;
}

/* Duyuru şeridi: eski lacivert/cyan yüzeyleri tamamen mor palete alır. */
html body #app #gb-guest-marquee,
html body #app #gb-guest-marquee .gb-marquee-container,
html body #app #gb-guest-marquee .gb-marquee-box,
html body #app #gb-guest-marquee .gb-marquee-viewport {
    background-color: #100744 !important;
}

html body #app #gb-guest-marquee .gb-marquee-box {
    background-image:
        radial-gradient(34rem 6rem at 50% 0%, rgba(194, 27, 238, .20), transparent 74%),
        linear-gradient(180deg, #180858 0%, #0B0537 100%) !important;
    border-color: rgba(129, 35, 236, .42) !important;
}

html body #app #gb-guest-marquee .gb-marquee-light {
    background: linear-gradient(90deg, transparent, #8123EC, #F4F3FA, #C21BEE, transparent) !important;
    filter:
        drop-shadow(0 0 5px rgba(194, 27, 238, .94))
        drop-shadow(0 0 10px rgba(129, 35, 236, .58)) !important;
}

html body #app #gb-guest-marquee .gb-marquee-separator {
    background: #C21BEE !important;
    box-shadow: 0 0 9px rgba(194, 27, 238, .86) !important;
}

html body #app #gb-guest-marquee .gb-marquee-button {
    background: linear-gradient(135deg, #6C2DE0, #8123EC 56%, #C21BEE) !important;
    border-color: rgba(228, 93, 255, .82) !important;
}

/* Slider içindeki eski mavi bulanık ışıklar da mor/fuşya olur. */
html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider::before {
    background: radial-gradient(circle, rgba(194, 27, 238, .74), rgba(108, 45, 224, .44) 44%, transparent 72%) !important;
}

html body #app main#main
  > .hp-hero-wrap
  .hero-area-slider.gb-hero-showcase
  .main-slider::after {
    background: radial-gradient(circle, rgba(129, 35, 236, .70), rgba(194, 27, 238, .38) 46%, transparent 73%) !important;
}

/* ==========================================================================
   CANLI KAZANÇLAR — HER SATIR İÇİN BAĞIMSIZ MOR TON
   ========================================================================== */
.gb-vertical-wins__row {
    --gb-win-tone: #8123EC;
    --gb-win-rgb: 129, 35, 236;
    background:
        radial-gradient(30rem 5rem at 8% 50%, rgba(var(--gb-win-rgb), .34), transparent 76%),
        linear-gradient(90deg, rgba(var(--gb-win-rgb), .46), rgba(var(--gb-win-rgb), .27) 46%, rgba(16, 7, 68, .88) 100%) !important;
    border-color: rgba(var(--gb-win-rgb), .64) !important;
    box-shadow:
        inset 5px 0 0 var(--gb-win-tone),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 3px 10px rgba(var(--gb-win-rgb), .12) !important;
}

.gb-vertical-wins__row:nth-child(6n + 1) {
    --gb-win-tone: #5B21B6;
    --gb-win-rgb: 91, 33, 182;
}

.gb-vertical-wins__row:nth-child(6n + 2) {
    --gb-win-tone: #6D28D9;
    --gb-win-rgb: 109, 40, 217;
}

.gb-vertical-wins__row:nth-child(6n + 3) {
    --gb-win-tone: #7C3AED;
    --gb-win-rgb: 124, 58, 237;
}

.gb-vertical-wins__row:nth-child(6n + 4) {
    --gb-win-tone: #9333EA;
    --gb-win-rgb: 147, 51, 234;
}

.gb-vertical-wins__row:nth-child(6n + 5) {
    --gb-win-tone: #A855F7;
    --gb-win-rgb: 168, 85, 247;
}

.gb-vertical-wins__row:nth-child(6n + 6) {
    --gb-win-tone: #C026D3;
    --gb-win-rgb: 192, 38, 211;
}

.gb-vertical-wins__row:hover {
    background:
        radial-gradient(34rem 6rem at 10% 50%, rgba(var(--gb-win-rgb), .48), transparent 78%),
        linear-gradient(90deg, rgba(var(--gb-win-rgb), .62), rgba(var(--gb-win-rgb), .34) 48%, rgba(16, 7, 68, .92) 100%) !important;
    border-color: rgba(var(--gb-win-rgb), .92) !important;
    box-shadow:
        inset 6px 0 0 var(--gb-win-tone),
        inset 0 0 20px rgba(var(--gb-win-rgb), .16),
        0 0 16px rgba(var(--gb-win-rgb), .38) !important;
}

.gb-vertical-wins__accent,
.gb-vertical-wins__accent.tone-1,
.gb-vertical-wins__accent.tone-2,
.gb-vertical-wins__accent.tone-3,
.gb-vertical-wins__accent.tone-4,
.gb-vertical-wins__accent.tone-5,
.gb-vertical-wins__accent.tone-6 {
    background: var(--gb-win-tone) !important;
    box-shadow:
        0 0 7px rgba(var(--gb-win-rgb), .82),
        0 0 14px rgba(var(--gb-win-rgb), .42) !important;
}

.gb-vertical-wins {
    background:
        radial-gradient(46rem 14rem at 10% 0%, rgba(129, 35, 236, .18), transparent 72%),
        radial-gradient(30rem 14rem at 100% 12%, rgba(194, 27, 238, .14), transparent 72%),
        linear-gradient(180deg, rgba(24, 8, 88, .98), rgba(8, 5, 47, .99)) !important;
    border-color: rgba(129, 35, 236, .38) !important;
}