/*!
 * ritzbet211 — webcustom.css (desktop skin)
 * Replaces the partner slot: /plat/prd/Img/Partners/1269/CustomCSS/customWeb.css
 *
 * Section hooks (`[data-rb-section]`) are stamped by custom.js. Prefer them
 * over nth-child so CMS row reordering cannot break the layout.
 * Available: billboard, featured, jackpot, big-wins, provider-banners,
 *            promo-banners, banner-row, games-grid, games, sport, seo-text,
 *            winners, empty, empty-banner, unknown.
 * big-wins, banner-row and games-grid are injected by custom.js, not the CMS.
 *
 * The platform loads this file after partners/1269.css, so plain specificity
 * is enough here — reach for !important only against inline styles.
 */

/* ==================================================================
   1. Tokens
   ================================================================== */
:root {
  --rb-gap: 16px;
  --rb-radius: 8px;
  --rb-section-gap: 24px;
  --rb-content-max: 1546px;

  --rb-text-on-green: var(--cwHeaderTxt, #fff);
  --rb-text-on-gold: var(--cwAccentTxt, #000);
}

/* ==================================================================
   1.1 Marka renkleri — lacivert/sarı yerine koyu yeşil/altın

   Platform her yüzeyi partners/1269.css içindeki `--cw*` değişkenlerinden
   boyar, dolayısıyla siteyi yeniden renklendirmek seçici avlamak yerine bu
   değişkenleri ezmek demek. Aşağıdaki blok `tools/palette.mjs` tarafından
   üretilir: her ailenin (Header, Footer, Tab, Accent, Button, ...) Bg / Bg2 /
   Bg3, hover, Border, RGBA, Shadow rolleri iki skalaya bağlanır.

   Skalalarda büyük numara = daha koyu. Marka renkleri: green-900 (#052712),
   gold-400 (#f0cf6d).

   Yeniden üretmek için:  node tools/palette.mjs desktop
   ================================================================== */
:root {
  --rb-green-975: #020e06;
  --rb-green-950: #031b0d;
  --rb-green-900: #052712; /* marka rengi */
  --rb-green-850: #073619;
  --rb-green-800: #09441f;
  --rb-green-700: #0b5628;
  --rb-green-600: #0d6830;
  --rb-green-500: #107f3a;
  --rb-green-400: #139545;
  --rb-green-250: #94ad9e; /* yeşil üzerine kısık metin (tarih, etiket) */
  --rb-green-200: #7fbd97; /* yeşil üzerine soluk metin */
  --rb-green-150: #d0e1d7; /* yeşil üzerine ikincil metin */
  --rb-green-100: #b8d5c3; /* yeşil üzerine açık metin */
  --rb-green-50: #ecf4ef; /* yeşil üzerine birincil metin */

  --rb-gold-900: #453607; /* altın üzerine koyu metin */
  --rb-gold-700: #8b6b0e;
  --rb-gold-600: #d0a115;
  --rb-gold-500: #ebbf3d;
  --rb-gold-400: #f0cf6d; /* marka rengi */
  --rb-gold-300: #f3d98b;
  --rb-gold-200: #f6e4ac;
  --rb-gold-100: #faf0d1;

  /* Sayfa gövdesi. Bu aile üreteçten geçmiyor: zemin skala adımı değil, verilen
     kesin marka rengi. Ton `body` kuralıyla paylaşılsın diye token'a alındı.

     Metin rolleri de çevrilmek zorunda — platform `.main-wrapper` ve
     `.dyn_homepage` üzerinde `background-color: var(--cwBodyBg)` ile birlikte
     `color: var(--cwBodyTxt)` veriyor, yani zemin koyulaşırken miras alınan
     metin siyah (#000) kalırdı. */
  --rb-body-bg: #04160c;
  --cwBodyG: var(--rb-body-bg);
  --cwBodyBg: var(--rb-body-bg);
  --cwBodyBg2: var(--rb-green-950);
  --cwBodyBg3: var(--rb-green-900);
  --cwBodyBgHover: var(--rb-green-950);
  --cwBodyBg2Hover: var(--rb-green-900);
  --cwBodyBg3Hover: var(--rb-green-850);
  --cwBodyTxt: var(--rb-green-50);
  --cwBodyTxt2: var(--rb-green-150);
  --cwBodyTxt3: var(--rb-green-250);
  --cwBodyBorder: var(--rb-green-850);
  --cwBodyRGBA: rgba(4, 22, 12, 0.7);
  --cwBodyRGBA2: rgba(4, 22, 12, 0.5);
  --cwBodyRGBA3: rgba(4, 22, 12, 0.3);
  --cwBodyShadow: rgba(2, 14, 6, 0.7);
  --cwBodyShadowFade: rgba(2, 14, 6, 0);

  /* Bileşen vurgu renkleri (hepsi aynı altın tonu) */
  --cwBodyAccent: var(--rb-gold-400);
  --cwDominantAccent: var(--rb-gold-400);
  --cwCardAccent: var(--rb-gold-400);
  --cwGameAccent: var(--rb-gold-400);
  --cwJackpotAccent: var(--rb-gold-400);
  --cwSignInButtonAccent: var(--rb-gold-400);
  --cwNavbarAccent: var(--rb-gold-400);
  --cwSliderAccent: var(--rb-gold-400);
  --cwSubHeaderAccent: var(--rb-gold-400);
  --cwInputAccent: var(--rb-gold-400);
  --cwInputSecondaryAccent: var(--rb-gold-400);
  --cwFilterAccent: var(--rb-gold-400);
  --cwTooltipAccent: var(--rb-gold-400);
  --cwModalAccent: var(--rb-gold-400);
  --cwLoginAccent: var(--rb-gold-400);
  --cwRegisterAccent: var(--rb-gold-400);
  --cwOverlayAccent: var(--rb-gold-400);
  --cwButtonSecondaryAccent: var(--rb-gold-400);
  --cwHeaderAccent: var(--rb-gold-400);
  --cwHeaderSecondaryAccent: var(--rb-gold-400);
  --cwFooterAccent: var(--rb-gold-400);
  --cwTabAccent: var(--rb-gold-400);
  --cwTabActiveAccent: var(--rb-gold-400);
  --cwAccentAccent: var(--rb-gold-400);
  --cwButtonAccent: var(--rb-gold-400);
  --cwDepositButtonAccent: var(--rb-gold-400);

  /* Vurgu */
  --cwAccentG: var(--rb-gold-400);
  --cwAccentBg: var(--rb-gold-400);
  --cwAccentBg2: var(--rb-gold-300);
  --cwAccentBg3: var(--rb-gold-200);
  --cwAccentBgHover: var(--rb-gold-300);
  --cwAccentBg2Hover: var(--rb-gold-200);
  --cwAccentBg3Hover: var(--rb-gold-100);
  --cwAccentTxt2: var(--rb-gold-900);
  --cwAccentTxt3: var(--rb-gold-700);
  --cwAccentRGBA: rgba(240, 207, 109, 0.7);
  --cwAccentRGBA2: rgba(240, 207, 109, 0.5);
  --cwAccentRGBA3: rgba(240, 207, 109, 0.3);
  --cwAccentShadow: rgba(208, 161, 21, 0.7);
  --cwAccentShadowFade: rgba(208, 161, 21, 0);
  --cwAccentBorder: var(--rb-gold-500);

  /* Birincil buton */
  --cwButtonG: var(--rb-gold-400);
  --cwButtonBg: var(--rb-gold-400);
  --cwButtonBg2: var(--rb-gold-300);
  --cwButtonBg3: var(--rb-gold-200);
  --cwButtonBgHover: var(--rb-gold-300);
  --cwButtonBg2Hover: var(--rb-gold-200);
  --cwButtonBg3Hover: var(--rb-gold-100);
  --cwButtonTxt2: var(--rb-gold-900);
  --cwButtonTxt3: var(--rb-gold-700);
  --cwButtonRGBA: rgba(240, 207, 109, 0.7);
  --cwButtonRGBA2: rgba(240, 207, 109, 0.5);
  --cwButtonRGBA3: rgba(240, 207, 109, 0.3);
  --cwButtonShadow: rgba(208, 161, 21, 0.7);
  --cwButtonShadowFade: rgba(208, 161, 21, 0);
  --cwButtonBorder: var(--rb-gold-500);

  /* Para yatır butonu */
  --cwDepositButtonG: var(--rb-gold-400);
  --cwDepositButtonBg: var(--rb-gold-400);
  --cwDepositButtonBg2: var(--rb-gold-300);
  --cwDepositButtonBg3: var(--rb-gold-200);
  --cwDepositButtonBgHover: var(--rb-gold-300);
  --cwDepositButtonBg2Hover: var(--rb-gold-200);
  --cwDepositButtonBg3Hover: var(--rb-gold-100);
  --cwDepositButtonTxt2: var(--rb-gold-900);
  --cwDepositButtonTxt3: var(--rb-gold-700);
  --cwDepositButtonRGBA: rgba(240, 207, 109, 0.7);
  --cwDepositButtonRGBA2: rgba(240, 207, 109, 0.5);
  --cwDepositButtonRGBA3: rgba(240, 207, 109, 0.3);
  --cwDepositButtonShadow: rgba(208, 161, 21, 0.7);
  --cwDepositButtonShadowFade: rgba(208, 161, 21, 0);
  --cwDepositButtonBorder: var(--rb-gold-500);

  /* Üst bar */
  --cwHeaderG: var(--rb-green-900);
  --cwHeaderBg: var(--rb-green-900);
  --cwHeaderBg2: var(--rb-green-700);
  --cwHeaderBg3: var(--rb-green-500);
  --cwHeaderBgHover: var(--rb-green-800);
  --cwHeaderBg2Hover: var(--rb-green-600);
  --cwHeaderBg3Hover: var(--rb-green-400);
  --cwHeaderTxt2: var(--rb-green-200);
  --cwHeaderTxt3: var(--rb-green-100);
  --cwHeaderRGBA: rgba(5, 39, 18, 0.7);
  --cwHeaderRGBA2: rgba(5, 39, 18, 0.5);
  --cwHeaderRGBA3: rgba(5, 39, 18, 0.3);
  --cwHeaderShadow: rgba(3, 27, 13, 0.7);
  --cwHeaderShadowFade: rgba(3, 27, 13, 0);
  --cwHeaderBorder: var(--rb-green-800);

  /* Alt bar */
  --cwFooterG: var(--rb-green-900);
  --cwFooterBg: var(--rb-green-900);
  --cwFooterBg2: var(--rb-green-950);
  --cwFooterBg3: var(--rb-green-975);
  --cwFooterBgHover: var(--rb-green-850);
  --cwFooterBg2Hover: var(--rb-green-900);
  --cwFooterBg3Hover: var(--rb-green-950);
  --cwFooterTxt2: var(--rb-green-200);
  --cwFooterTxt3: var(--rb-green-100);
  --cwFooterRGBA: rgba(5, 39, 18, 0.7);
  --cwFooterRGBA2: rgba(5, 39, 18, 0.5);
  --cwFooterRGBA3: rgba(5, 39, 18, 0.3);
  --cwFooterShadow: rgba(3, 27, 13, 0.7);
  --cwFooterShadowFade: rgba(3, 27, 13, 0);
  --cwFooterBorder: var(--rb-green-850);

  /* Sekmeler */
  --cwTabG: var(--rb-green-850);
  --cwTabBg: var(--rb-green-850);
  --cwTabBg2: var(--rb-green-700);
  --cwTabBg3: var(--rb-green-500);
  --cwTabBgHover: var(--rb-green-800);
  --cwTabBg2Hover: var(--rb-green-600);
  --cwTabBg3Hover: var(--rb-green-400);
  --cwTabRGBA: rgba(7, 54, 25, 0.7);
  --cwTabRGBA2: rgba(7, 54, 25, 0.5);
  --cwTabRGBA3: rgba(7, 54, 25, 0.3);
  --cwTabShadow: rgba(3, 27, 13, 0.7);
  --cwTabShadowFade: rgba(3, 27, 13, 0);
  --cwTabBorder: var(--rb-green-800);

  /* Aktif sekme */
  --cwTabActiveG: var(--rb-green-950);
  --cwTabActiveBg: var(--rb-green-950);
  --cwTabActiveBg2: var(--rb-green-700);
  --cwTabActiveBg3: var(--rb-green-500);
  --cwTabActiveBgHover: var(--rb-green-800);
  --cwTabActiveBg2Hover: var(--rb-green-600);
  --cwTabActiveBg3Hover: var(--rb-green-400);
  --cwTabActiveRGBA: rgba(3, 27, 13, 0.7);
  --cwTabActiveRGBA2: rgba(3, 27, 13, 0.5);
  --cwTabActiveRGBA3: rgba(3, 27, 13, 0.3);
  --cwTabActiveShadow: rgba(3, 27, 13, 0.7);
  --cwTabActiveShadowFade: rgba(3, 27, 13, 0);
  --cwTabActiveBorder: var(--rb-green-800);

  /* Diyalog */
  --cwModalG: var(--rb-green-900);
  --cwModalBg: var(--rb-green-900);
  --cwModalBg2: var(--rb-green-950);
  --cwModalBg3: var(--rb-green-975);
  --cwModalBgHover: var(--rb-green-850);
  --cwModalBg2Hover: var(--rb-green-900);
  --cwModalBg3Hover: var(--rb-green-950);
  --cwModalTxt: var(--rb-green-50);
  --cwModalTxt2: var(--rb-green-150);
  --cwModalTxt3: var(--rb-green-250);
  --cwModalRGBA: rgba(5, 39, 18, 0.7);
  --cwModalRGBA2: rgba(5, 39, 18, 0.5);
  --cwModalRGBA3: rgba(5, 39, 18, 0.3);
  --cwModalShadow: rgba(3, 27, 13, 0.7);
  --cwModalShadowFade: rgba(3, 27, 13, 0);
  --cwModalBorder: var(--rb-gold-500);

  /* Giriş popup */
  --cwLoginG: var(--rb-green-900);
  --cwLoginBg: var(--rb-green-900);
  --cwLoginBg2: var(--rb-green-950);
  --cwLoginBg3: var(--rb-green-975);
  --cwLoginBgHover: var(--rb-green-850);
  --cwLoginBg2Hover: var(--rb-green-900);
  --cwLoginBg3Hover: var(--rb-green-950);
  --cwLoginTxt: var(--rb-green-50);
  --cwLoginTxt2: var(--rb-green-150);
  --cwLoginTxt3: var(--rb-green-250);
  --cwLoginRGBA: rgba(5, 39, 18, 0.7);
  --cwLoginRGBA2: rgba(5, 39, 18, 0.5);
  --cwLoginRGBA3: rgba(5, 39, 18, 0.3);
  --cwLoginShadow: rgba(3, 27, 13, 0.7);
  --cwLoginShadowFade: rgba(3, 27, 13, 0);
  --cwLoginBorder: var(--rb-gold-500);

  /* Kayıt popup */
  --cwRegisterG: var(--rb-green-900);
  --cwRegisterBg: var(--rb-green-900);
  --cwRegisterBg2: var(--rb-green-950);
  --cwRegisterBg3: var(--rb-green-975);
  --cwRegisterBgHover: var(--rb-green-850);
  --cwRegisterBg2Hover: var(--rb-green-900);
  --cwRegisterBg3Hover: var(--rb-green-950);
  --cwRegisterTxt: var(--rb-green-50);
  --cwRegisterTxt2: var(--rb-green-150);
  --cwRegisterTxt3: var(--rb-green-250);
  --cwRegisterRGBA: rgba(5, 39, 18, 0.7);
  --cwRegisterRGBA2: rgba(5, 39, 18, 0.5);
  --cwRegisterRGBA3: rgba(5, 39, 18, 0.3);
  --cwRegisterShadow: rgba(3, 27, 13, 0.7);
  --cwRegisterShadowFade: rgba(3, 27, 13, 0);
  --cwRegisterBorder: var(--rb-gold-500);

  /* Baskın yüzey */
  --cwDominantG: var(--rb-green-900);
  --cwDominantBg: var(--rb-green-900);
  --cwDominantBg2: var(--rb-green-700);
  --cwDominantBg3: var(--rb-green-500);
  --cwDominantBgHover: var(--rb-green-800);
  --cwDominantBg2Hover: var(--rb-green-600);
  --cwDominantBg3Hover: var(--rb-green-400);
  --cwDominantTxt: var(--rb-green-50);
  --cwDominantTxt2: var(--rb-green-150);
  --cwDominantTxt3: var(--rb-green-250);
  --cwDominantRGBA: rgba(5, 39, 18, 0.7);
  --cwDominantRGBA2: rgba(5, 39, 18, 0.5);
  --cwDominantRGBA3: rgba(5, 39, 18, 0.3);
  --cwDominantShadow: rgba(3, 27, 13, 0.7);
  --cwDominantShadowFade: rgba(3, 27, 13, 0);
  --cwDominantBorder: var(--rb-green-800);

  /* Kartlar */
  --cwCardG: var(--rb-green-900);
  --cwCardBg: var(--rb-green-900);
  --cwCardBg2: var(--rb-green-700);
  --cwCardBg3: var(--rb-green-500);
  --cwCardBgHover: var(--rb-green-800);
  --cwCardBg2Hover: var(--rb-green-600);
  --cwCardBg3Hover: var(--rb-green-400);
  --cwCardTxt: var(--rb-green-50);
  --cwCardTxt2: var(--rb-green-150);
  --cwCardTxt3: var(--rb-green-250);
  --cwCardRGBA: rgba(5, 39, 18, 0.7);
  --cwCardRGBA2: rgba(5, 39, 18, 0.5);
  --cwCardRGBA3: rgba(5, 39, 18, 0.3);
  --cwCardShadow: rgba(3, 27, 13, 0.7);
  --cwCardShadowFade: rgba(3, 27, 13, 0);
  --cwCardBorder: var(--rb-green-800);

  /* Alt başlık şeridi */
  --cwSubHeaderG: var(--rb-green-900);
  --cwSubHeaderBg: var(--rb-green-900);
  --cwSubHeaderBg2: var(--rb-green-700);
  --cwSubHeaderBg3: var(--rb-green-500);
  --cwSubHeaderBgHover: var(--rb-green-800);
  --cwSubHeaderBg2Hover: var(--rb-green-600);
  --cwSubHeaderBg3Hover: var(--rb-green-400);
  --cwSubHeaderTxt: var(--rb-green-50);
  --cwSubHeaderTxt2: var(--rb-green-150);
  --cwSubHeaderTxt3: var(--rb-green-250);
  --cwSubHeaderRGBA: rgba(5, 39, 18, 0.7);
  --cwSubHeaderRGBA2: rgba(5, 39, 18, 0.5);
  --cwSubHeaderRGBA3: rgba(5, 39, 18, 0.3);
  --cwSubHeaderShadow: rgba(3, 27, 13, 0.7);
  --cwSubHeaderShadowFade: rgba(3, 27, 13, 0);
  --cwSubHeaderBorder: var(--rb-green-800);

  /* Jackpot */
  --cwJackpotG: var(--rb-green-900);
  --cwJackpotBg: var(--rb-green-900);
  --cwJackpotBg2: var(--rb-green-700);
  --cwJackpotBg3: var(--rb-green-500);
  --cwJackpotBgHover: var(--rb-green-800);
  --cwJackpotBg2Hover: var(--rb-green-600);
  --cwJackpotBg3Hover: var(--rb-green-400);
  --cwJackpotTxt: var(--rb-green-50);
  --cwJackpotTxt2: var(--rb-green-150);
  --cwJackpotTxt3: var(--rb-green-250);
  --cwJackpotRGBA: rgba(5, 39, 18, 0.7);
  --cwJackpotRGBA2: rgba(5, 39, 18, 0.5);
  --cwJackpotRGBA3: rgba(5, 39, 18, 0.3);
  --cwJackpotShadow: rgba(3, 27, 13, 0.7);
  --cwJackpotShadowFade: rgba(3, 27, 13, 0);
  --cwJackpotBorder: var(--rb-green-800);

  /* İkincil buton */
  --cwButtonSecondaryG: var(--rb-green-850);
  --cwButtonSecondaryBg: var(--rb-green-850);
  --cwButtonSecondaryBg2: var(--rb-green-700);
  --cwButtonSecondaryBg3: var(--rb-green-500);
  --cwButtonSecondaryBgHover: var(--rb-green-800);
  --cwButtonSecondaryBg2Hover: var(--rb-green-600);
  --cwButtonSecondaryBg3Hover: var(--rb-green-400);
  --cwButtonSecondaryTxt: var(--rb-green-50);
  --cwButtonSecondaryTxt2: var(--rb-green-150);
  --cwButtonSecondaryTxt3: var(--rb-green-250);
  --cwButtonSecondaryRGBA: rgba(7, 54, 25, 0.7);
  --cwButtonSecondaryRGBA2: rgba(7, 54, 25, 0.5);
  --cwButtonSecondaryRGBA3: rgba(7, 54, 25, 0.3);
  --cwButtonSecondaryShadow: rgba(3, 27, 13, 0.7);
  --cwButtonSecondaryShadowFade: rgba(3, 27, 13, 0);
  --cwButtonSecondaryBorder: var(--rb-green-800);
}

/* ==================================================================
   2. Global / layout
   ================================================================== */

:root {
  /* Site genelinde içerik kutusunun dış genişliği (kenar boşluğu dahil). */
  --rb-content-max: 1440px;
  --rb-rays: url('https://nmd-777.s3.eu-central-1.amazonaws.com/ritz/img/bg-rays.jpg');
}

/* Gövde rengi bilinçli olarak `body`de değil `html`de.

   Tuvalin (ekranın boş kalan her yerinin) rengi kök öğeden gelir; kökün kendi
   zemini yoksa tarayıcı `body`nin zeminini tuvale **aktarır**. Platform `html`e
   zaten bir zemin yazdığı için o aktarım gerçekleşmiyordu: `body` kendi opak
   kutusunu boyuyor ve altındaki `z-index: -1` ışın katmanını örtüyordu.

   Renk köke alınıp `body` saydama çekiliyor. Böylece tuvali `html` boyuyor, ışın
   katmanı onun önüne, içerik de katmanın önüne düşüyor. */
html {
  background: var(--rb-body-bg);
}

body {
  background: transparent;
}

.tl_container {
  max-width: var(--rb-content-max);
}

/* Işınlar sayfayla birlikte kaymıyor: ekrana sabitlenmiş bir katmanda duruyorlar,
   böylece aşağı inildikçe kaybolmuyor, arka plan boyunca görünmeye devam ediyor.

   `background-attachment: fixed` yerine `position: fixed` bir katman kullanılıyor.
   İkisi de aynı sonucu vermeli, ama sabit arka plan eki iOS Safari'de güvenilir
   çalışmıyor (çoğu durumda `scroll` gibi davranıyor); sabit konumlu öğe her yerde
   çalışıyor ve iki iskelette de aynı teknik kullanılabiliyor.

   `z-index: -1` katmanı içeriğin arkasına, tuval rengin önüne koyuyor. Bu ancak
   arada opak bir kutu kalmazsa işe yarar — bu yüzden `main-wrapper`'ın zemini
   aşağıda saydama alınıyor.

   Genişlik içerik kutusuna bağlı: ışınlar daha önce `.dyn_homepage` üzerindeydi
   ve o kutuyla aynı genişlikteydi, o çerçeveleme korunuyor. Tam ekran genişliğine
   yayılması istenirse `width` satırı `100%` yapılması yeterli. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: min(100%, var(--rb-content-max));
  transform: translateX(-50%);
  background-image: var(--rb-rays);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  pointer-events: none;
}

/* Platform bu sarmalayıcıya `--cwBodyBg`yi opak olarak yazıyor; body ile aynı
   renk olduğu için görünürde bir kaybı yok, ama sabit ışın katmanını örtüyordu. */
main.main-wrapper {
  background-color: transparent;
}

.dyn_homepage {
  max-width: var(--rb-content-max);
  margin-inline: auto;
  background-color: transparent;
}

/* ==================================================================
   3. Header — #header_fix .header__fixed / .tl_header_bot_row
   ================================================================== */

/* Tasarımdaki tonlar marka skalasına birebir oturmuyor (ör. nav alt çizgisi
   #a8862f, --rb-gold-700 değil), bu yüzden header'a özel token seti. */
:root {
  --rb-hdr-h: 68px;
  --rb-hdr-max: 1320px;
  --rb-nav-h: 46px;
  --rb-nav-max: 1368px;

  --rb-hdr-bg: linear-gradient(180deg, #02120a 0%, #06301a 55%, #052712 100%);
  --rb-nav-bg: linear-gradient(180deg, #04240f 0%, #031a0c 100%);
  --rb-chip-bg: linear-gradient(180deg, rgba(16, 62, 32, 0.95), rgba(4, 24, 12, 0.95));

  --rb-hdr-gold: #e8c355;
  --rb-hdr-gold-line: rgba(232, 195, 85, 0.34);
  --rb-hdr-gold-text: #f0d788;
  --rb-hdr-gold-hover: #fdf2b5;
  --rb-nav-line: #a8862f;
  --rb-nav-text: #cfe0d3;
  --rb-hdr-muted: #8fb89c;
  --rb-hdr-muted-2: #93ac9b;
}

/* ---- 3.1 Üst satır ---- */

#header_fix.tl_header_top_row {
  background: var(--rb-hdr-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

#header_fix .header__fixed {
  align-items: center;
  gap: 12px;
  height: var(--rb-hdr-h);
  padding: 0 max(24px, calc((100% - var(--rb-hdr-max)) / 2));
  background: none;
}

#header_fix .header__fixed-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#header_fix .header__logo img {
  height: 38px;
  width: auto;
  display: block;
}

#header_fix .tl_time {
  flex: none;
  color: var(--rb-hdr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 3.2 Hızlı linkler ---- */

/* custom.js sprite <img>'lerini ikon + etiket yapısına dönüştürür. */
#header_fix .header__top-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

#header_fix .header__top-links a[data-rb-tool='pill'] {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
  height: 34px;
  padding: 0 15px 0 4px;
  border: 1px solid var(--rb-hdr-gold-line);
  border-radius: 999px;
  background: var(--rb-chip-bg);
  color: var(--rb-hdr-gold-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#header_fix .header__top-links a[data-rb-tool='pill'] .rb-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(232, 195, 85, 0.4);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #11592a, #05230f 75%);
}

#header_fix .header__top-links a[data-rb-tool='pill'] .rb-ic svg {
  width: 15px;
  height: 15px;
}

#header_fix .header__top-links a[data-rb-tool='pill']:hover {
  border-color: var(--rb-hdr-gold);
  color: var(--rb-hdr-gold-hover);
  box-shadow: 0 0 12px rgba(232, 195, 85, 0.28);
}

#header_fix .header__top-links a[data-rb-tool='mini'] {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  gap: 2px;
  padding: 0 5px;
  color: var(--rb-hdr-gold-text);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

#header_fix .header__top-links a[data-rb-tool='mini'] svg {
  width: 21px;
  height: 21px;
}

#header_fix .header__top-links a[data-rb-tool='mini'] .rb-lbl {
  color: var(--rb-hdr-muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

#header_fix .header__top-links a[data-rb-tool='mini']:hover {
  color: var(--rb-hdr-gold-hover);
  transform: translateY(-2px);
}

/* ---- 3.3 Giriş / kayıt / dil ---- */

#header_fix .header__fixed-right {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  margin-left: auto;
}

/* .tl_btn tümünü büyük harfe çeviriyor, tasarımda ise "Kayıt Ol". */
#header_fix .header__fixed-right > a.registerDialog,
#header_fix .header__fixed-right > a.loginDialog,
#header_fix .tl_acc_lang {
  text-transform: none;
}

#header_fix .header__fixed-right > a.registerDialog,
#header_fix .header__fixed-right > a.loginDialog {
  display: flex;
  align-items: center;
  flex: none;
  height: 38px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-decoration: none;
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

#header_fix .header__fixed-right > a.registerDialog {
  border: 1.5px solid var(--rb-hdr-gold);
  background: linear-gradient(180deg, rgba(20, 40, 20, 0.9), rgba(5, 20, 10, 0.9));
  color: #f3d97c;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(232, 195, 85, 0.35), inset 0 0 6px rgba(232, 195, 85, 0.15);
}

#header_fix .header__fixed-right > a.registerDialog:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(232, 195, 85, 0.55), inset 0 0 8px rgba(232, 195, 85, 0.25);
}

#header_fix .header__fixed-right > a.loginDialog {
  border: 0;
  background: linear-gradient(180deg, #ffffff, #e8e8e8);
  color: #111;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#header_fix .header__fixed-right > a.loginDialog:hover {
  background: #fff;
  transform: translateY(-1px);
}

#header_fix .tl_acc_lang {
  display: flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--rb-hdr-gold-line);
  border-radius: 10px;
  background: var(--rb-chip-bg);
  color: var(--rb-hdr-gold-text);
  cursor: pointer;
  transition: border-color 0.18s ease;
}

#header_fix .tl_acc_lang:hover {
  border-color: var(--rb-hdr-gold);
}

#header_fix .tl_acc_lang .lang {
  border-radius: 2px;
}

#header_fix .tl_acc_lang .dynamic_icon {
  font-size: 12px;
  color: currentColor;
}

/* ---- 3.4 Kategori menüsü ---- */

/* Satır, üstteki sabit satırın yüksekliğini padding olarak rezerve eder
   (platformda 56px), bu yüzden ikisi aynı token'dan beslenmeli. */
.tl_header_bot_row.header__bottom {
  height: calc(var(--rb-hdr-h) + var(--rb-nav-h));
  padding-top: var(--rb-hdr-h);
  background: var(--rb-nav-bg);
  border-top: 1px solid rgba(232, 195, 85, 0.16);
  border-bottom: 1.5px solid var(--rb-nav-line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Sayfa kaydırıldığında üst satır gizlenir ve rezerv padding kalkar. */
.fixed_header_all .tl_header_bot_row.header__bottom {
  height: var(--rb-nav-h);
  padding-top: 0;
}

.tl_header_bot_row #js_dy_hdr_cont {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: var(--rb-nav-h);
  max-width: var(--rb-nav-max);
  margin: 0 auto;
  padding: 0 24px;
}

.tl_header_bot_row .header_nav__more {
  height: var(--rb-nav-h);
  padding: 0 10px;
  color: var(--rb-nav-text);
  font-size: 12px;
  font-weight: 700;
}

.tl_header_bot_row #js_dy_hdr {
  display: flex;
  align-items: stretch;
}

.tl_header_bot_row a.tl_main_nav_item {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--rb-nav-h);
  padding: 0 10px;
  border-bottom: 2px solid transparent;
  color: var(--rb-nav-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

/* Platform bu sarmalayıcıya 0 12px padding verir; boşluk artık dış <a>'da
   olduğu için sıfırlanmalı, aksi halde her öğe 24px şişer ve son kategori
   "Daha Fazlası" açılır menüsüne taşar. */
.tl_header_bot_row a.tl_main_nav_item .tl_main_nav_item-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  height: auto;
  padding: 0;
}

/* Platformun ikon fontu yerine custom.js'in yerleştirdiği SVG kullanılıyor. */
.tl_header_bot_row a.tl_main_nav_item .dynamic_icon {
  display: none;
}

.tl_header_bot_row .rb-nav-ic {
  display: flex;
  flex: none;
}

.tl_header_bot_row .rb-nav-ic svg {
  width: 19px;
  height: 19px;
}

.tl_header_bot_row a.tl_main_nav_item:hover,
.tl_header_bot_row a.tl_main_nav_item.active,
.tl_header_bot_row a.tl_main_nav_item.selected {
  color: var(--rb-hdr-gold-hover);
  border-bottom-color: var(--rb-hdr-gold);
}

.tl_header_bot_row .rb-nav-new {
  position: absolute;
  top: 3px;
  right: 0;
  padding: 1px 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f7e08c, #d9ab3c);
  color: #1c1303;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

/* CMS badge'i yerine .rb-nav-new gösteriliyor. */
.tl_header_bot_row a.tl_main_nav_item .lb_card_badge_wrapper,
.tl_header_bot_row a.tl_main_nav_item .dynamic_bagge {
  display: none;
}

/* custom.js taşan öğeleri geri satıra alabildiğinde açılır menü gereksizleşir. */
#js_dy_hdr_more[data-rb-empty='1'] {
  display: none;
}

/* ==================================================================
   4. Homepage sections
   ================================================================== */

/* 4.1 Billboard slider        [data-rb-section='billboard']        */

/* Slider görselleri 1500×300 hazırlanıyor, ama bileşen kutuya viewport'la
   ölçeklenen sabit bir yükseklik veriyor —

     .billboard_container .banners_billboard:not(.empty_banner) {
       height: calc(272px + (444 - 272) * (100vw - 1200px) / (1920 - 1200)) }

   1600px'te bu 367.6px'e denk geliyor. Görsel `object-fit: cover` ile o kutuya
   sığdırıldığı için, 5:1'lik sanat eseri 3.8:1'lik kutuyu doldurmak üzere
   büyütülüp yanlardan kırpılıyordu (1392 genişlikte doğru yükseklik 278px).

   Sabit yükseklik yerine kutuya görselin oranı veriliyor. `height: auto` tek
   başına yetmez: swiper slaytları `height: 100%` ile bu kutuya bağlı, belirsiz
   yükseklikte sıfıra çökerler. `aspect-ratio` genişlikten belirli bir yükseklik
   türettiği için ikisi de korunuyor ve düzen her genişlikte akışkan kalıyor.

   Oran, görsellerin hazırlandığı ölçünün kendisi olarak yazıldı; sanat eseri
   şablonu değişirse tek yer güncellenir. */
:root {
  --rb-billboard-ratio: 1500 / 300;
}

[data-rb-section='billboard'] .banners_billboard:not(.empty_banner) {
  height: auto;
  aspect-ratio: var(--rb-billboard-ratio);
}

/* Bileşen aynı sabit yüksekliği görselin ve video bağlantısının kendisine de
   yazıyor; kutuyu takip etsinler diye %100'e alınıyorlar. */
[data-rb-section='billboard'] .banners_billboard_slider .dynamicBanners_img,
[data-rb-section='billboard'] .banners_billboard_slider .dynamicBanners_item.lca-banner-video-link {
  height: 100%;
}

/* 4.3 Jackpot ticker          [data-rb-section='jackpot']          */

/* 4.2 Featured categories     [data-rb-section='featured']         */

/* Kartların kendi zemini/çerçevesi kaldırıldı; öne çıkan görseller doğrudan
   sayfa zemininde duruyor. Platform bu üçünü skinner-layout_desk.css içinde
   `!important` ile yazdığı için (`background-color: var(--cwCardBg)`,
   `border: 1px solid var(--cwCardBgHover)`) aynı ağırlık gerekiyor.

   Çerçeve `none` değil saydam: 1px korunmazsa kart 2px küçülüp dizilim kayıyor. */
.dynamic_featured_item,
.dynamic_featured_item:hover {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Bileşen `padding: 0 16px 16px` veriyor. Kartın kutusu ve altın çerçevesi
   CMS görselinin içine gömülü olduğu için bu boşluk kartı küçültmekten başka
   bir iş yapmıyor; 1px'e çekilince görseller hücreyi dolduruyor. Üst değer
   zaten 0, dokunulmadı.

   `!important` şart: kuralı yazan dynamicFeaturedItems.css bizim slotumuzdan
   **sonra** yükleniyor, eşit özgüllükte belge sırasıyla kazanıyor. Bu bloktaki
   zemin/çerçeve kuralları da aynı sebeple `!important`. */
.dynamic_featured_item {
  padding: 0 1px 1px !important;
}

/* Referansta kart üç parçalı: kademe etiketi üstte, altında ikon + tutar.
   Platform ise ikonu ve tutarı yan yana diziyor ve kademe etiketini hiç
   basmıyor (kademe yalnızca maça ikonundan anlaşılıyor) — etiketi custom.js
   ekliyor, yerleşimi de grid'e çevirerek referans düzenine getiriyoruz. */
:root {
  --rb-jp-ic: 38px;
  --rb-jp-card-bg: linear-gradient(180deg, rgba(14, 46, 24, 0.72), rgba(8, 30, 15, 0.72));
}

[data-rb-section='jackpot'] {
  padding-top: 12px;
}

.rb-jp-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.rb-jp-head .rb-line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #d8b64f 60%, #f7e08c);
}

.rb-jp-head .rb-line:last-child {
  background: linear-gradient(270deg, transparent, #d8b64f 60%, #f7e08c);
}

.rb-jp-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2.5px;
  white-space: nowrap;
  background: linear-gradient(180deg, #fdf2b5 0%, #f0cf6d 45%, #c89a35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rb-jp-title svg {
  flex: none;
  width: 32px;
  height: 22px;
}

/* Sağlayıcı seçici sekmesi. Tek sağlayıcı varken başlıkla aynı bilgiyi
   tekrar ettiği için gizleniyor; birden fazlaysa işlevsel olduğundan
   temaya uydurulup bırakılıyor. */
.topJackpot_section .rd_header_tabs:has(.rd_header_tab_item:only-child) {
  display: none;
}

.topJackpot_section .rd_header_tabs {
  justify-content: center;
  gap: 8px;
}

.topJackpot_section .rd_header_tab_item {
  border: 1px solid var(--rb-hdr-gold-line);
  background: var(--rb-chip-bg);
  color: var(--rb-hdr-gold-text);
  font-size: 12px;
  font-weight: 700;
}

.topJackpot_section .rd_header_tab_item.active {
  border-color: var(--rb-hdr-gold);
  background: linear-gradient(180deg, #fdf2b5 0%, #f0cf6d 45%, #d0a53c 100%);
  color: #06301a;
}

.js_jacpkpots_cont {
  column-gap: 18px;
}

.js_jacpkpots_cont .top_jackpots__block {
  display: grid;
  grid-template-areas: 'tier tier' 'icon value';
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding: 16px 20px 18px;
  border: 1px solid rgba(140, 205, 155, 0.16);
  border-radius: 14px;
  background: var(--rb-jp-card-bg);
}

.js_jacpkpots_cont .rb-jp-tier {
  grid-area: tier;
  color: var(--rb-hdr-muted-2);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2px;
}

.js_jacpkpots_cont .top_jackpot_icon {
  grid-area: icon;
}

.js_jacpkpots_cont .top_jackpots__content {
  grid-area: value;
  max-width: none;
  row-gap: 0;
}

/* Sprite dikey bir şerit; konumlar 96px referans ölçüsünden ölçekleniyor. */
.js_jacpkpots_cont .top_jackpot_icon {
  width: var(--rb-jp-ic);
  height: var(--rb-jp-ic);
  background-size: var(--rb-jp-ic) auto;
}

.js_jacpkpots_cont .top_jackpot_icon.ic_spade {
  background-position: 0 0;
}

.js_jacpkpots_cont .top_jackpot_icon.ic_heart {
  background-position: 0 calc(var(--rb-jp-ic) * -104 / 96);
}

.js_jacpkpots_cont .top_jackpot_icon.ic_diamond {
  background-position: 0 calc(var(--rb-jp-ic) * -209 / 96);
}

.js_jacpkpots_cont .top_jackpot_icon.ic_club {
  background-position: 0 calc(var(--rb-jp-ic) * -314 / 96);
}

/* Tutar animasyonlu bir hane kaydırıcısı: satır yüksekliği JS tarafından
   ölçüldüğü için font-size'a dokunulmuyor, yalnızca renk veriliyor. */
.js_jacpkpots_cont .top_jackpots__value,
.js_jacpkpots_cont .top_jackpots__crns {
  color: #f4d858;
}

.js_jacpkpots_cont .top_jackpots__crns {
  font-size: 0.7em;
}

.js_jacpkpots_cont .top_jackpots__hover_content {
  border-color: rgba(140, 205, 155, 0.16);
  background: linear-gradient(180deg, #0e2e18, #081e0f);
}

.js_jacpkpots_cont .top_jackpots__hover_winners {
  background: rgba(140, 205, 155, 0.12);
}

/* 4.35 Dev kazançlar          [data-rb-section='big-wins']         */

/* Referansta jackpot'un hemen altında; başlık bileşeni (.rb-jp-head) ikisinde
   ortak. Kartlar tam boy görsele açılıyor, metin görselin içinde basılı. */
.rb-wins-section {
  max-width: var(--rb-content-max);
  margin-inline: auto;
  padding: 40px 24px 0;
}

.rb-wins-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 8px;
}

.rb-win-card {
  display: block;
  overflow: hidden;
  border: 1.5px solid rgba(232, 195, 85, 0.55);
  border-radius: 14px;
  background: linear-gradient(180deg, #0c3a1c 0%, #062611 100%);
  line-height: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.rb-win-card:hover {
  transform: translateY(-5px);
  border-color: var(--rb-gold-400);
}

.rb-win-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* 4.4 Provider banners        [data-rb-section='provider-banners'] */
/* 4.5 Promo banners           [data-rb-section='promo-banners']    */

/* Bu iki satırdaki görseller kırpılıyordu. Sebep bileşenin kendisi:
   dynamicBanners_v1.0.css `.dynamicBanners_inner`'a viewport'la ölçeklenen
   sabit bir yükseklik veriyor —

     .banners_button .dynamicBanners_inner { height: calc(94px + (153.5 - 94) * (100vw - 1200px) / (1920 - 1200)) }
     .banners_square .dynamicBanners_inner { height: calc(185px + (306 - 185) * (100vw - 1200px) / (1920 - 1200)) }

   görsel de `height: 100%; object-fit: cover` ile o kutuya sığdırılıyor. Kutu
   oranı görselin oranıyla uyuşmadığı için taşan kısım kesiliyordu: 1600px'te
   3'lü şerit 456×127 basılıyor, oysa 516×302'lik görselin bu genişlikteki
   doğru yüksekliği ~267px.

   Sabit yükseklik kaldırılıp `height: auto` veriliyor; genişlik %100 kalınca
   yüksekliği görselin kendi oranı belirliyor. Böylece hem kırpma bitiyor hem de
   düzen her genişlikte akışkan kalıyor. Oran sabit yazılmadı: CMS görseli
   farklı ölçüde bir dosyayla değiştirse de kural çalışmaya devam eder.

   `!important` gerekmiyor — özgüllük platform kuralıyla eşit (iki sınıf), bu
   dosya da bileşenin stil sayfasından sonra yüklendiği için kaskadı kazanıyor. */
[data-rb-section='provider-banners'] .dynamicBanners_inner,
[data-rb-section='promo-banners'] .dynamicBanners_inner,
[data-rb-section='provider-banners'] .dynamicBanners_item,
[data-rb-section='promo-banners'] .dynamicBanners_item {
  height: auto;
}

/* object-fit artık devre dışı: kutu görselin oranına oturduğu için ölçekleme
   yapacak bir fazlalık kalmıyor. */
[data-rb-section='provider-banners'] .dynamicBanners_img,
[data-rb-section='promo-banners'] .dynamicBanners_img {
  height: auto;
  object-fit: fill;
}

/* 4.6 Banner satırı + canlı oyun ızgarası   .rb-banner-row / .rb-games-grid  */

/* Platformun "Popüler Slot Oyunları" slider'ı kaldırıldı; yerine referanstaki
   iki satır geliyor. İkisi de custom.js tarafından basılıyor (platform tarafında
   karşılığı olan bir bileşen yok, referansta da düz CMS görselleri).

   Slider gizleniyor ama DOM'da kalıyor: custom.js yeni satırları ona göre
   konumlandırıyor, silinse çapa kaybolurdu.

   Ana sayfaya kilitli olması şart: `games` sınıflandırması yalnızca anasayfa
   slider'ına özgü değil, kart bileşenini paylaşan her satır bu etiketi alıyor.
   Kapsamsız bırakılınca /promotions ve casino lobisi gibi sayfaların tüm
   içerik kabı da gizleniyordu. */
html[data-rb-page='home'] [data-rb-section='games'] {
  display: none;
}

.rb-banner-row,
.rb-games-grid {
  max-width: var(--rb-content-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.rb-banner-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
  padding-top: 34px;
}

.rb-banner-row img {
  display: block;
  width: 100%;
  border-radius: 18px;
}

.rb-banner img {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.rb-games-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding-top: 42px;
}

/* line-height sıfır: satır kutusu kalırsa görselin altında birkaç piksel boşluk
   oluşup köşe yarıçapı kırılıyor. */
.rb-games-grid a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(232, 195, 85, 0.3);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  line-height: 0;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rb-games-grid a:hover {
  transform: translateY(-5px);
  border-color: var(--rb-gold-400);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

.rb-games-grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* 4.7 Sport widget            [data-rb-section='sport']            */

/* Widget bir web component ve markupı shadow DOM içinde. Renkleri platformla
   aynı token yapısından (--bodyBg, --eventBg, --oddBg ...) okuyor, ama bu
   değişkenleri :host'un yanı sıra shadow root'un İÇİNDEKİ
   .dgw_event_widget_wrapper üzerinde de yeniden tanımlıyor. Daha yakın bir ata
   kalıtımı gölgelediği için dışarıdan ezmek mümkün değil — cascade çatışması
   değil, inheritance shadowing.

   Bu yüzden paleti custom.js shadow root'a enjekte ediyor (sport-theme
   modülü). Kalıcı çözüm widget'ın kendi slotu olurdu
   (custom_TopMatches.css, şu an 0 byte) ama o dosya spor sağlayıcısının
   CDN'inde. */

/* 4.8 Blank CMS rows          [data-rb-section='empty'], …'empty-banner'] */

/* ==================================================================
   5. Footer — #js_footer .tl_container
   ================================================================== */

/* Yerleşim custom.js'in kurduğu .rb-foot-main / .rb-foot-left ikilisine
   dayanıyor: platform sosyal ikonlarla dil seçicisini bağlantı listelerinden
   ayrı bir satırda gönderiyor, modül onları sol kolona taşıyor. Lisans
   mühürleri, lisans metni ve 18+ uyarısı referansta yok ama zorunlu içerik
   olduğu için yerinde bırakılıp alt bölgede biçimlendiriliyor. */
#js_footer.footer {
  margin-top: 56px;
  padding: 0;
  background: linear-gradient(180deg, #0a3a1e 0%, #073019 45%, #052512 100%);
  border-top: 1px solid rgba(232, 195, 85, 0.22);
}

#js_footer .tl_container {
  max-width: var(--rb-content-max);
  padding: 46px 24px 26px;
}

/* --- sponsorluk bandı (custom.js) --- */

/* Band tek bir görsel: kulüp armaları, "Resmi sponsorlarımız" yazısı ve iş
   ortağı işaretleri hepsi onun içinde. Eskiden parçalar ayrı düğümlerdi ve iki
   iskelette ayrı ayrı hizalanıyordu; artık tek iş görseli ortalamak.

   Görsel 2172×323 (~6.7:1). Genişlik kaba bağlı, yükseklik oranı takip ediyor;
   `max-width` doğal genişliği aşıp bulanıklaşmasını engelliyor. */
.rb-foot-sponsors {
  padding-bottom: 30px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(232, 195, 85, 0.16);
  text-align: center;
}

.rb-fs-strip {
  display: block;
  width: 100%;
  max-width: 1086px;
  height: auto;
  margin-inline: auto;
}

/* --- sol kolon + bağlantı listeleri (custom.js) --- */
/* Sol kolon 340px: 7 sosyal ikon (7×40 + 6×7 = 322px) tek satırda kalsın. */
.rb-foot-main {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}

.rb-foot-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Logo yatay bir kilit (1579×607, ~2.6:1). Eski kare markanın 172px'i burada
   66px yüksekliğe denk geldiği için genişlik büyütüldü; 240px, 340px'lik sol
   kolona rahat sığıyor ve yazıyı okunur bırakıyor. */
.rb-foot-logo {
  display: block;
  width: 240px;
  height: auto;
  margin-bottom: 20px;
}

/* --- dil seçici --- */
#js_footer .tl_acc_lang {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin-bottom: 18px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #04200f;
}

#js_footer .tl_acc_lang > a {
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  color: #fff;
}

#js_footer .tl_acc_lang .rb-lang-name {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#js_footer .tl_acc_lang .lang {
  width: 24px;
  height: 17px;
  border-radius: 3px;
}

#js_footer .tl_acc_lang .dynamic_icon-arrow {
  opacity: 0.75;
}

/* --- sosyal ikonlar: renkler platformdan geliyor, biçim referanstan --- */
#js_footer .footer_social-list {
  flex-wrap: wrap;
  gap: 7px;
  max-width: none;
}

#js_footer .footer_social-item {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 8px;
  transition: transform 0.18s ease;
}

#js_footer .footer_social-item:hover {
  transform: translateY(-3px);
}

/* --- bağlantı listeleri --- */
#js_footer .tl_footer_links {
  gap: 28px;
}

#js_footer .tl_footer_links_heading {
  margin-bottom: 14px;
  color: var(--rb-gold-400);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

#js_footer .tl_footer_link {
  padding: 7px 0;
  color: #a8c9b3;
  font-size: 13px;
  transition: color 0.18s ease;
}

#js_footer .tl_footer_link:hover {
  color: var(--rb-gold-400);
}

/* --- alt bölge: mühür, lisans metni, telif --- */

/* QR kutusu ve promosyon banner'ı referansta yok, kaldırıldı. Banner'ı saran
   bağlantıyla birlikte gitmesi gerekiyor; yoksa boş bir yükseklik kalıyor. */
#js_footer .tl_container > div:has(img[src*='footer_ban_web']) {
  display: none;
}

#js_footer img[src*='qr.png'] {
  display: none;
}

/* QR gidince satırda yalnızca GameCheck mührü kalıyor; tl_col-4'ün %33
   genişliğinden çıkarılıp satırın tamamına yayılınca gerçekten ortalanıyor. */
#js_footer #trust-seal-container {
  flex: 1 1 100%;
  max-width: none;
}

#js_footer .license_text {
  color: #7fa38b;
  font-size: 12px;
  line-height: 1.7;
}

#js_footer .tl_footer_copy {
  color: #7fa38b;
  font-size: 12px;
}

/* Referanstaki gibi ortalanmış kapanış satırı. 18+ simgesi ile telif metni
   ayrı kutular olduğu için ortalama satırın kendisine uygulanıyor. */
#js_footer .tl_container > .d-flex:last-child {
  justify-content: center;
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ==================================================================
   6. Fixed / floating UI
   .social_icons_fixed (right rail), #k2-quick-action, #js_to_top_cont
   ================================================================== */

/* Sosyal ray'de platform tüm konteyneri rotate(-90deg) ile çeviriyor, yani
   sekmeler kendi yerel ekseninde yatay duruyor. Bu yüzden yönlü değerler
   ekranda görünecek hâline göre değil, yerel eksene göre yazılmalı:
   yerel +x ekranda yukarı, yerel +y ekranda sağa gidiyor.

     ekran üst→alt gradient   = yerel 270deg (sola)
     ekranda sağ kenar        = yerel alt kenar
     ekran gölgesi (-3px, 4px) = yerel (-4px, -3px)

   Köşe yarıçapı sırası (TL TR BR BL) döndükten sonra ekranda
   (BL TL TR BR) olarak görünür; yani ilk iki değer ekranın sol kenarını
   yuvarlar. */
.social_icons_fixed .social_text {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: none;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(270deg, #fdf2b5 0%, #f0cf6d 45%, #d0a53c 100%);
  box-shadow: -4px -3px 14px rgba(0, 0, 0, 0.5);
  color: #06301a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.7px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.social_icons_fixed a:hover .social_text {
  background: linear-gradient(270deg, #fff8dc 0%, #f7e08c 45%, #e0b747 100%);
  box-shadow: -4px -6px 20px rgba(0, 0, 0, 0.6);
}

/* Hover'da yukarı kayıp görünen ikon paneli. */
.social_icons_fixed .social_icon,
.social_icons_fixed .social_icon-img {
  background-color: var(--rb-green-850);
  border: 1px solid rgba(232, 195, 85, 0.28);
  border-bottom: none;
}

/* partners/1269.css bu bileşeni değişken yerine sabit mavi (#1e5ba8 /
   #2670c9) ile boyuyor, bu yüzden kural bazında ezilmesi gerekiyor.

   Zemin marka yeşiline (900) çekildi; önceki 500 basamağı sayfanın geri kalanının
   yanında fazla parlak kalıyordu. Hover 800'de: gövde zemininden ayrışacak kadar
   açık, ama basamak farkı tek kademe olduğu için sıçrama yapmıyor. */
/* Çerçeve, zemin bu kadar koyuyken butonun kutusunu okunur tutmak için: 900
   basamağı gövde zemininden (#04160c) yalnızca bir tık açık, çerçevesiz kalınca
   buton kaybolup havada duran bir ikona dönüşüyordu. */
#k2-quick-action .k2-qa-btn,
#k2-quick-action.k2-opened .k2-qa-btn {
  background-color: var(--rb-green-900);
  border: 1px solid var(--rb-gold-line);
}

#k2-quick-action .k2-qa-btn:hover {
  background-color: var(--rb-green-800);
}

#k2-quick-action .k2-qa-menu a {
  border-bottom-color: var(--rb-green-500);
}

#k2-quick-action .k2-qa-menu a .iconify {
  color: var(--rb-green-500);
}

/* Balonun ikonu (görseli custom.js'in `qa-icon` modülü değiştiriyor).

   Buton 45×40, içindeki span ise `width: 100%` + `padding: 0 10px` — yani içeriğe
   25px kalıyor. Platform görsele `max-width: 100%` verdiği için genişlik o 25px'e
   kısılıyor, ama `height` niteliği 32px'te kaldığından kare kaynak 25×32 çiziliyor
   ve dikeyde geriliyordu. Modül niteliği kaldırıyor, ölçü buradan veriliyor.

   Yatay boşluk 6px'e çekiliyor: 45 − 12 = 33px, 32px kare ikon sığıyor ve eski
   dikey ağırlık korunuyor. Boşluk 10px kalsaydı ikon butonun dışına taşardı.

   Seçiciler platformun `#k2-quick-action .k2-qa-btn span[class*=k2-]` kuralıyla
   aynı özgüllükte (1,2,1) tutuldu; partners/1269.css bizim slotumuzdan sonra
   yüklendiği için eşitlikte belge sırasıyla o kazanıyor, bu yüzden `!important`. */
#k2-quick-action .k2-qa-btn span.k2-open {
  padding-inline: 6px !important;
}

#k2-quick-action .k2-qa-btn img.rb-qa-icon {
  width: 32px !important;
  height: 32px !important;
  max-width: none !important;
  object-fit: contain;
}

/* Canlı destek balonu. Comm100'ün kendi görseli 211×60'lık bir şeritti; yeni
   şeridin oranı ~2:1 olduğu için genişlik korunup yükseklik serbest bırakıldı,
   aksi halde görsel yatay eziliyor. Görseli custom.js'in `support-button`
   modülü değiştiriyor. */
.rb-support-img {
  width: 211px;
  height: auto;
}

/* ==================================================================
   7. Popups — registration / login / cashier
   ================================================================== */

/* Platform popup'ları jQuery UI dialog'u: .ui-widget-overlay arka plan,
   .tl_popup_container ise kutunun kendisi. Kayıt (.dyn_regPopup, 856px, solda
   260px banner) ve giriş (.tl_login_content, 336px) aynı konteyner sınıfını
   paylaşıyor, bu yüzden stil oraya yazılıyor.

   Referans modal tek kolon ve 400px; ölçülere dokunulmadı, yalnızca görsel dil
   aktarıldı. Aksi halde kayıt formunun iki kolonlu adım düzeni ve banner'ı
   bozulurdu. */

/* Yarıçapı platform kendi `!important` kurallarında bu değişkenlerden okuyor
   (ör. `.tl_login_content { border-radius: var(--cwLoginRadius) !important }`),
   yani seçiciyle güreşmek yerine değişkeni vermek yeterli. Renkler paletten
   geliyor; bunlar renk olmadığı için üreteç kapsamında değil. */
:root {
  --cwLoginRadius: 18px;
  --cwRegisterRadius: 18px;
  --cwModalRadius: 18px;

  /* Arka planı karartan örtünün rengi ve bulanıklığı.

     Platform iki ayrı popup türünü de bu ikiliden besliyor: jQuery UI
     diyaloğunun `.ui-widget-overlay`'i ve duyuru popup'ının `.dyn_popUp_root`'u.
     Üstelik `background: var(--cwOverlayBg) !important` yazıyor, yani seçiciyle
     güreşmek hem gereksiz hem eksik kalırdı — değişkeni vermek iki türü birden
     düzeltiyor.

     Varsayılan `rgba(221,221,225,.6)`, yani soluk gri bir perdeydi: popup
     sayfadan ayrışmıyor, siteyle birleşik duruyordu. */
  --cwOverlayBg: rgba(0, 8, 4, 0.82);
  --cwOverlayBlur: 8px;
}

/* Altın çerçeve iki katmanlı background ile çiziliyor: iç dolgu padding-box'a,
   çerçeve gradient'i border-box'a. Bu yüzden border rengi transparent kalmalı. */
.tl_popup_container {
  border: 2px solid transparent;
  border-radius: 18px;
  background: radial-gradient(110% 80% at 50% 0%, #10461f 0%, #072711 60%, #04170a 100%) padding-box,
    linear-gradient(140deg, #f7e08c, #b8892e 40%, #e6c463) border-box;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  /* Banner görselinin köşeleri altın çerçevenin dışına taşmasın. */
  overflow: hidden;
  animation: rb-modal-in 0.25s ease;
}

@keyframes rb-modal-in {
  from {
    transform: translateY(14px) scale(0.97);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

/* Başlık ve gövde kendi zeminleriyle geliyor; konteynerin radial gradient'i
   görünsün diye ikisi de saydamlaşıyor. Kayıt popup'ının dyn_ sınıflarında
   platform `!important` kullanmıyor, düz kural yetiyor. */
.tl_popup_container .dyn_regPopup_header,
.tl_popup_container .dyn_regPopup_content {
  border-radius: 0;
  background: transparent;
}

/* Giriş popup'ında ise platform kendi kurallarını `!important` ile yazıyor
   (`#loginContent .tl_popup_content.tl_popup_content { background: ... }`).
   Aynı özgüllük + `!important` ile sonra geldiğimiz için kazanıyoruz. */
#loginContent .tl_popup_header,
#registerForm .tl_popup_header,
#loginContent .tl_popup_content.tl_popup_content,
#registerForm .tl_popup_content.tl_popup_content {
  background: transparent !important;
}

.tl_popup_container .dyn_regPopup_header,
.tl_popup_container .tl_popup_header {
  border-bottom: 1px solid rgba(232, 195, 85, 0.22);
}

.tl_popup_container .dyn_regPopup_header_text,
.tl_popup_container .tl_head_text {
  background: linear-gradient(180deg, #fdf2b5, #c89a35);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Kapatma düğmesi. İnce çerçeve ve kısık altın, başlık şeridinin içinde bir
   düğme gibi okunmuyordu; çerçeve ve zemin kuvvetlendirilip glif büyütüldü.
   Hover'da dolu altına dönüyor — popup içindeki tek yıkıcı eylem olduğu için
   dokunulduğunun belli olması iyi. */
.tl_popup_container .tl_head_close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(240, 207, 109, 0.85);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(240, 207, 109, 0.12);
  color: #f7e5a8;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.tl_popup_container .tl_head_close:hover {
  border-color: #f7e5a8;
  background: var(--rb-gold-400);
  box-shadow: 0 0 0 4px rgba(240, 207, 109, 0.22);
  color: var(--rb-green-900);
}

/* --- duyuru popup'ı (popup-engine) --- */

/* "Yenileniyoruz" gibi duyurular jQuery UI diyaloğu değil; `popup-engine.js`
   kendi katmanını kuruyor:

     div#canvas-popup.dyn_popUp_root        <- tam ekran örtü
       div.dyn_popUp_wrapper.canvas_popup   <- kutu
         div.dyn_popUp_wrapper_close        <- çarpı
         ...

   Örtü zeminini yukarıdaki `--cwOverlayBg`'den alıyor, ama `.ui-widget-overlay`
   in aksine bulanıklık uygulamıyor — o yüzden burada ayrıca veriliyor. */
.dyn_popUp_root {
  backdrop-filter: blur(var(--cwOverlayBlur));
  -webkit-backdrop-filter: blur(var(--cwOverlayBlur));
}

/* Çarpı platformda zeminsiz ve çerçevesiz, yalnızca 16px'lik bir glif. Koyu
   duyuru görselinin üstünde neredeyse görünmüyordu; giriş popup'ındaki kapatma
   düğmesiyle aynı dile getiriliyor. Kutu ölçüsü (36px, yuvarlak) platformdan
   geliyor, dokunmaya gerek yok. */
.dyn_popUp_wrapper_close {
  border: 1.5px solid rgba(240, 207, 109, 0.85);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(240, 207, 109, 0.12);
  color: #f7e5a8;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dyn_popUp_wrapper_close:hover {
  border-color: #f7e5a8;
  background: var(--rb-gold-400);
  box-shadow: 0 0 0 4px rgba(240, 207, 109, 0.22);
  color: var(--rb-green-900);
}

/* Glif boyutu platformun kendi `--icoSize` değişkeninden okunuyor. */
.dyn_popUp_wrapper_close .cw_icon_close_v4 {
  --icoSize: 20px;
}

/* --- form alanları --- */
.tl_popup_container .dyn_label,
.tl_popup_container .dyn_login_label,
.tl_popup_container .checkBox_label {
  color: #9fd4ae;
}

.tl_popup_container .dyn_input,
.tl_popup_container .dyn_login_input,
.tl_popup_container .dyn_select {
  padding: 12px 13px;
  border: 1px solid rgba(232, 195, 85, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 14px;
}

.tl_popup_container .dyn_input:focus,
.tl_popup_container .dyn_login_input:focus,
.tl_popup_container .dyn_select:focus {
  border-color: #e8c355;
  box-shadow: 0 0 0 2px rgba(232, 195, 85, 0.2);
  outline: none;
}

.tl_popup_container .dyn_input::placeholder,
.tl_popup_container .dyn_login_input::placeholder {
  color: #8fb89c;
}

/* Yerel select açılır listesi koyu zeminde okunabilsin. */
.tl_popup_container .dyn_select option {
  background: #072711;
  color: #fff;
}

.tl_popup_container .dyn_eye_button,
.tl_popup_container .eye_block {
  color: #9fd4ae;
}

/* Hata balonu beyaz zeminle geliyor. */
.tl_popup_container .dyn_err_mess,
.tl_popup_container .reg_error_message {
  background: transparent;
  color: #ff9a8a;
}

/* --- butonlar ve bağlantılar --- */

/* İleri / giriş butonu palet üzerinden zaten altın; referansın gradient'i ve
   gölgesi ekleniyor. */
.tl_popup_container .dyn_button_next,
.tl_popup_container .login_btn {
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7e08c, #d9ab3c 60%, #b8892e);
  box-shadow: 0 3px 10px rgba(232, 195, 85, 0.35);
  color: #1c1303;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Geri butonu gri geliyor; ikincil olduğu için çerçeveli koyu forma alınıyor. */
.tl_popup_container .dyn_button_back {
  border: 1px solid rgba(232, 195, 85, 0.4);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: #f0d788;
}

.tl_popup_container .tl_popup_link,
.tl_popup_container .recover_btn {
  color: #9fd4ae;
}

.tl_popup_container .tl_popup_link:hover,
.tl_popup_container .recover_btn:hover {
  color: var(--rb-gold-400);
}

.tl_popup_container .tl_sup_link {
  border: 1px solid rgba(232, 195, 85, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: #f0d788;
}

.tl_popup_container .dyn_regPopup_progressInfo {
  color: #9fd4ae;
}

/* ==================================================================
   8. Promosyonlar — /tr/promotions/all + kural detayı
   ================================================================== */

/* Sayfanın tamamı `--cw*` üzerinden boyanıyor, sabit renk yok; zemin ve metin
   zaten palet (Body / Card / ButtonSecondary / Dominant / SubHeader) ile koyu
   yeşile döndü. Buradaki kurallar yalnızca "elegant soft" dili ekliyor: yumuşak
   yarıçap, ince altın detay, sakin geçişler.

   Detay görünümü aynı kaynaklı bir iframe (`/sections/promotion`) içinde açılıyor
   ve o iframe de customWeb.css'i yüklüyor — bu yüzden `.dynRules_*` kuralları
   buradan çalışıyor. */

:root {
  /* Altın detaylar hep aynı iki geçirgenlikte kullanılıyor. */
  --rb-gold-line: rgba(240, 207, 109, 0.22);
  --rb-gold-veil: rgba(240, 207, 109, 0.1);
}

/* --- liste: filtre çipleri --- */

.pn_category_item {
  border: 1px solid var(--rb-gold-line);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pn_category_item.active,
.pn_category_item:hover {
  border-color: transparent;
  background: linear-gradient(180deg, var(--rb-gold-300), var(--rb-gold-400) 60%, var(--rb-gold-600));
}

/* --- liste: kartlar --- */

.promoNews_section {
  --cwCardRadius: 16px;
}

.pn_card {
  border-color: var(--rb-gold-line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pn_card:hover {
  transform: translateY(-3px);
  border-color: rgba(240, 207, 109, 0.5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.pn_card_footer {
  border-top: 1px solid var(--rb-gold-line);
}

.pn_card_name {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Platform bu etiketi ters çeviriyor: zemin `--cwButtonSecondaryTxt`, yazı
   `--cwButtonSecondaryBg`. Yani palet neredeyse beyaz bir hap üretiyor —
   altın perdeye çekiliyor. */
.pn_card_category span {
  border: 1px solid var(--rb-gold-line);
  background-color: var(--rb-gold-veil);
  color: var(--rb-gold-300);
  font-weight: 600;
}

.pn_card_hover {
  background: rgba(3, 27, 13, 0.82);
  backdrop-filter: blur(2px);
}

.pn_card_descr {
  font-size: 17px;
  font-weight: 500;
}

.pn_card_button {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pn_card_button.h-bg-secondary {
  border: 1px solid var(--rb-gold-line);
}

.pn_card_button.h-bg-primary {
  background: linear-gradient(180deg, var(--rb-gold-300), var(--rb-gold-400) 60%, var(--rb-gold-600));
  box-shadow: 0 3px 10px rgba(232, 195, 85, 0.3);
}

/* --- detay: kural sayfası (iframe) --- */

.dynRules_logo {
  border-bottom: 1px solid var(--rb-gold-line);
}

.dynRules_left_sidebar,
.dynRules_content_inner {
  border-color: var(--rb-gold-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.dynRules_lmenu_item_inner {
  border-bottom-color: rgba(240, 207, 109, 0.12);
}

/* Aktif madde platformda dolu parlak yeşil (`--cwDominantBg2Hover`) geliyor.
   Yumuşak altın perde + sol kenar çizgisi daha sakin duruyor. */
.dynRules_lmenu_item.active:not(.open),
.dynRules_lmenu_subitem.active {
  position: relative;
  background: var(--rb-gold-veil);
}

.dynRules_lmenu_item.active:not(.open)::before,
.dynRules_lmenu_subitem.active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--rb-gold-400);
}

.dynRules_lmenu_item.active .dynRules_lmenu_text {
  color: var(--rb-gold-300);
}

.dynRules_lmenu_item:not(.active):hover {
  background: rgba(240, 207, 109, 0.05);
}

.dynRules_title {
  color: var(--rb-gold-300);
}

.dynRules_content_inner {
  line-height: 1.65;
}

/* Promosyon banner'ı istenmiyor. */
.dynRules_content_inner img {
  display: none;
}

/* İçerik CMS'ten geliyor ve açık tema için yazılmış: başlıklar satır içi sarı
   blok zemin + koyu yazı taşıyor, koyu yeşil üzerinde okunamaz. Satır içi stil
   olduğu için `!important` şart. */
.dynRules_content_inner [style] {
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
}

.dynRules_content_inner strong,
.dynRules_content_inner b,
.dynRules_content_inner h1,
.dynRules_content_inner h2,
.dynRules_content_inner h3,
.dynRules_content_inner h4 {
  color: var(--rb-gold-300) !important;
}

.dynRules_content_inner a {
  color: var(--rb-gold-400);
  text-decoration-color: var(--rb-gold-line);
}

.dynRules_content_inner li::marker {
  color: var(--rb-gold-400);
}

.dynRules_content_inner table td,
.dynRules_content_inner table tr {
  border-color: var(--rb-gold-line);
}

/* ==================================================================
   9. Responsive
   Desktop skin is served down to tablet widths; phones get mobilcustom.css.
   Kırılma noktaları: 1280px (tablet yatay), 1024px (tablet dikey).
   ================================================================== */

/* Header daraldıkça sırayla saat, nav ikonları ve mini bağlantılar düşer;
   10 kategori tek satırda kalabilsin diye. */
@media (max-width: 1365px) {
  #header_fix .header__fixed {
    gap: 10px;
  }

  #header_fix .header__logo img {
    height: 34px;
  }

  #header_fix .tl_time {
    display: none;
  }

  #header_fix .header__top-links {
    gap: 6px;
  }

  #header_fix .header__top-links a[data-rb-tool='pill'] {
    gap: 6px;
    height: 32px;
    padding: 0 11px 0 4px;
    font-size: 11px;
  }

  #header_fix .header__top-links a[data-rb-tool='pill'] .rb-ic {
    width: 24px;
    height: 24px;
  }

  #header_fix .header__fixed-right {
    gap: 7px;
  }

  #header_fix .header__fixed-right > a.registerDialog,
  #header_fix .header__fixed-right > a.loginDialog {
    padding: 0 15px;
    font-size: 12.5px;
  }

  .tl_header_bot_row a.tl_main_nav_item {
    padding: 0 10px;
    font-size: 11.5px;
    letter-spacing: 0.2px;
  }

  .tl_header_bot_row a.tl_main_nav_item .tl_main_nav_item-inner {
    gap: 0;
  }

  .tl_header_bot_row .rb-nav-ic {
    display: none;
  }
}

@media (max-width: 1199px) {
  #header_fix .header__top-links a[data-rb-tool='mini'] {
    display: none;
  }
}