/* =========================================================
   CATBET — Stil dosyası (referans düzen, CATBET siyah + altın)
   Kırılmalar: PC ≥1280 · Tablet 1024–1279 / 768–1023 · Mobil <768
   ========================================================= */
:root {
  --bg: #070707; --bg-band: #0E0D0B; --surface: #151515; --surface-2: #1E1D1A; --surface-3: #292824;
  --border: #353026; --gold: #D8AE46; --gold-bright: #FFE4A0; --gold-dark: #8F6A1E; --gold-soft: rgba(216, 174, 70, .15);
  --silver: #C9CBD0; --text: #F5F4EF; --muted: #A5A39B; --muted-2: #747168;
  --live: #E53935; --up: #2ECC71; --down: #E74C3C;
  --header-bg: linear-gradient(180deg, #19160E 0%, #0A0A09 100%);
  --radius: 4px; --header-h-pc: 106px; --header-h-mob: 52px; --subnav-h-mob: 40px; --bottombar-h: 60px;
  --hdr-h: 106px; --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); overflow-x: hidden; min-height: 100vh; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
input, select { outline: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::-webkit-scrollbar { width: 8px; height: 6px; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

.ico { display: inline-flex; width: 20px; height: 20px; flex: none; align-items: center; justify-content: center; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico svg.fill { fill: currentColor; stroke: none; }
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.container-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 12px; }
.m-only { display: none !important; }
.muted { color: var(--muted); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin: 0 5px 1px 0; vertical-align: middle; animation: pulse 1.4s infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Butonlar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: var(--radius); font-weight: 700; font-size: 14px; letter-spacing: .2px; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, filter .15s; }
.btn-gold { background: var(--gold); color: #111; }
.btn-gold:hover { filter: brightness(1.08); }
.btn-outline { border: 1px solid #cfcfcf; color: #fff; background: transparent; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline-gold { border: 1px solid var(--gold); color: var(--gold); background: transparent; }
.btn-outline-gold:hover { background: var(--gold); color: #111; }
.btn-dark { background: var(--surface-2); color: #fff; border: 1px solid var(--border); }
.btn-dark:hover { border-color: var(--gold); color: var(--gold); }
.btn-text { color: #fff; font-weight: 700; font-size: 14px; padding: 0 10px; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.btn-text:hover { color: var(--gold); }
.btn-block { width: 100%; }
.btn-lg { height: 44px; font-size: 15px; }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--gold); }
.icon-btn .ico { width: 24px; height: 24px; }
.link-gold { color: var(--gold); }

/* ---------- Sekme, hap, rozet, başlık ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; color: #d5d5d5; font-weight: 600; font-size: 15px; white-space: nowrap; flex: none; }
.tab:hover { color: #fff; }
.tab.active { color: var(--gold); }
.tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: var(--gold); border-radius: 2px 2px 0 0; }
.tab .live-dot { margin: 0 0 0 6px; }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.pills::-webkit-scrollbar { display: none; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--surface-2); color: #e6e6e6; font-weight: 600; font-size: 13.5px; white-space: nowrap; flex: none; border: 1px solid transparent; }
.pill:hover { border-color: #555; }
.pill.active { background: var(--gold); color: #111; }
.pill .ico { width: 16px; height: 16px; }
.flag { width: 20px; height: 14px; border-radius: 2px; flex: none; overflow: hidden; display: inline-block; }
.flag-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--gold); width: 20px; height: 20px; }
.flag-ico .ico { width: 16px; height: 16px; }
.pill.active .flag-ico { color: #111; }
.badge { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; pointer-events: none; }
.badge .ico { width: 12px; height: 12px; }
.badge-new { background: var(--live); color: #fff; }
.badge-popular, .badge-gold { background: var(--gold); color: #111; }
.badge-drops { background: #7B3FE4; color: #fff; text-transform: none; }
.badge-live { background: var(--live); color: #fff; }
.section-title { font-size: 20px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.see-all { display: inline-flex; align-items: center; gap: 4px; color: #d0d0d0; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.see-all b { color: var(--gold); }
.see-all .ico { width: 16px; height: 16px; }
.see-all:hover { color: var(--gold); }
.bar-title { position: relative; padding-left: 12px; font-size: 14px; font-weight: 800; letter-spacing: .3px; margin: 0 0 10px; }
.bar-title::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 4px; background: var(--gold); border-radius: 2px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); grid-column: 1 / -1; }
.empty.nf { margin-top: 24px; display: grid; gap: 14px; justify-items: center; }
.page-h { font-size: 20px; font-weight: 800; }

/* ---------- Yükleyici ---------- */
.preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #241d07 0%, #0d0c08 45%, #050505 100%); transition: opacity .35s, visibility .35s; }
.preloader.done { opacity: 0; visibility: hidden; }
.preloader.route { background: radial-gradient(circle at 50% 45%, rgba(36, 29, 7, .94) 0%, rgba(8, 8, 8, .96) 60%); }
.preloader-inner { display: grid; justify-items: center; gap: 22px; }
.pl-ring { width: 180px; height: 180px; border-radius: 50%; background: #070707; display: grid; place-items: center; position: relative; box-shadow: 0 0 0 3px var(--gold), 0 0 28px 6px rgba(216, 174, 70, .45); animation: breathe 1.6s ease-in-out infinite; }
.pl-ring::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gold); border-right-color: rgba(216, 174, 70, .4); animation: spin 1.1s linear infinite; }
#preloader-logo { width: 128px; }
#preloader-logo img { width: 100%; height: auto; }
.preloader-bar { width: 160px; height: 3px; background: #2a2a2a; border-radius: 3px; overflow: hidden; }
.preloader-bar span { display: block; height: 100%; width: 40%; background: var(--gold); animation: load 1s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 3px rgba(216, 174, 70, .35); } 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 38px 10px rgba(216, 174, 70, .55); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 900; background: var(--header-bg); border-bottom: 3px solid var(--gold); }
.header-top-inner { height: 103px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr 1fr; grid-template-areas: "brand actions" "brand nav"; column-gap: 24px; align-items: center; }
.hamburger { display: none; }
.brand { grid-area: brand; display: flex; align-items: center; }
.brand img { width: auto; height: 45px; max-width: 185px; object-fit: contain; mix-blend-mode: screen; }
.header-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 10px; align-self: end; }
.hdr-app { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--gold); border-radius: 6px; color: var(--gold); flex: none; }
.hdr-app:hover { background: var(--gold-soft); }
.hdr-app .ico { width: 20px; height: 20px; }
.hdr-lang { width: 56px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: #111; font-size: 11px; flex: none; }
.hdr-lang svg { width: 20px; height: 14px; border-radius: 2px; }
.main-nav { grid-area: nav; display: flex; align-items: center; justify-content: flex-end; gap: 24px; overflow-x: auto; scrollbar-width: none; align-self: stretch; min-width: 0; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 100%; font-size: 16px; font-weight: 500; color: #eaeaea; white-space: nowrap; flex: none; }
.main-nav a:hover { color: var(--gold); }
.main-nav a.active { color: var(--gold); }
.main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); }
.main-nav .nav-tg .ico { width: 16px; height: 16px; color: #29A9EB; }
/* PC header — Matbet ölçüleri (1438 px ekranda ölçüldü): 108 px + 4 px alt çizgi; üst satır 64 px
   (butonlar 14 px'ten başlar, 36 px), ince altın çizgi, 44 px nav satırı; logo iki satırı kaplar. */
@media (min-width: 1024px) {
  .site-header { border-bottom-width: 4px; }
  .header-top-inner { height: 108px; grid-template-rows: 64px 44px; column-gap: 28px; }
  /* Logo Jojobet logosuyla aynı yatay alanı kaplar (~181 px; logo oranı 2,44:1 -> 74 px yükseklik) */
  .brand img { height: 74px; max-width: 200px; }
  .header-actions { align-self: start; padding-top: 14px; gap: 20px; }
  .hdr-app { width: 37px; height: 36px; border-radius: 6px; }
  .hdr-app + .hdr-app { margin-left: -9px; }
  .header-actions .btn-register { height: 36px; padding: 0 15px; font-size: 14px; font-weight: 700; border-radius: 6px; }
  .header-actions .btn-login { height: 36px; padding: 0; font-size: 15px; font-weight: 700; }
  .hdr-lang { position: relative; width: 56px; height: 34px; margin-left: 1px; }
  .hdr-lang::before { content: ""; position: absolute; left: -11px; top: 0; bottom: 0; width: 1px; background: #3a3a3a; }
  .main-nav { justify-self: end; max-width: 100%; padding-left: 10px; border-top: 1px solid var(--gold); }
  .main-nav a { font-size: 15px; font-weight: 500; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .brand img { height: 58px; } }
.subnav { display: none; }
.side-rail { display: none; }
.app { min-height: 60vh; padding: 12px 0 40px; outline: none; }
body[data-page="canli-bahis"] .app { padding: 0; min-height: calc(100dvh - var(--hdr-h)); }
body[data-page="canli-bahis"] .site-footer,
body[data-page="canli-bahis"] .bottom-nav,
body[data-page="canli-bahis"] .side-rail,
body[data-page="canli-bahis"] .fab-support,
body[data-page="canli-bahis"] .fab-top,
body[data-page="canli-bahis"] .slip-fab { display: none !important; }
.catbet-sportsbook { position: relative; width: 100%; min-height: calc(100dvh - var(--hdr-h)); background: var(--bg); }
.catbet-sportsbook-frame { display: block; width: 100%; height: calc(100dvh - var(--hdr-h)); min-height: 600px; border: 0; background: var(--bg); }
.catbet-sportsbook-state { position: absolute; inset: 0; min-height: calc(100dvh - var(--hdr-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; color: var(--muted); }
.catbet-sportsbook-state h1 { color: var(--text); font-size: clamp(22px, 3vw, 32px); }
.catbet-sportsbook-state p { max-width: 520px; line-height: 1.6; }

/* ---------- Slider ---------- */
.slider { position: relative; overflow: hidden; border-radius: var(--radius); background: #111; }
.slider-track { display: flex; transition: transform .6s cubic-bezier(.4, .1, .2, 1); will-change: transform; }
.slider-slide { position: relative; flex: 0 0 100%; min-width: 100%; display: block; overflow: hidden; }
.slider-slide picture { display: block; }
.slider-slide img { display: block; width: 100%; height: auto; object-fit: cover; }
/* Dosyasında beyaz şerit olan görsel (slider-03): şerit görünmeyecek kadar büyütülür */
.slider-slide.trim img { transform: scale(var(--trim, 1)); }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.slider-arrow:hover { color: var(--gold); border-color: var(--gold); }
.slider-arrow .ico { width: 18px; height: 18px; }
.slider-arrow.prev { left: 10px; } .slider-arrow.next { right: 10px; }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.slider-dots button { pointer-events: auto; width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .45); transition: width .25s, background .25s; }
.slider-dots button.active { width: 22px; background: var(--gold); }
/* Üst resim slider'ı 30 görselli: noktalar küçük ve sıkı, dar ekrana sığar */
.hero-slider .slider-dots { gap: 4px; bottom: 8px; }
.hero-slider .slider-dots button { width: 6px; height: 6px; }
.hero-slider .slider-dots button.active { width: 16px; }
/* Ana slider: görseller kendi oranında (picture kırılımlarıyla aynı) — kırpma / boşluk yok */
.sb-slider .slider-slide img { aspect-ratio: 1560 / 800; }
@media (max-width: 1199px) { .sb-slider .slider-slide img { aspect-ratio: 1400 / 800; } }
@media (max-width: 767px) { .sb-slider .slider-slide img { aspect-ratio: 700 / 400; } }
/* PC (≥1200): Jojobet gibi ince ve geniş banner (orta kolon genişliği / 3,3). 1560×800 PC dosyalarının
   sol (0–68 px) ve sağ (1491–1559 px) altın dolgu şeritleri kesilir; asıl görsel (1422×800) ortada
   tam yükseklikte durur ve kenarları yumuşakça slayta özel geniş arka plana (--bg: assets/slider-bg)
   karışır — kutuda boşluk kalmaz. --vf: görselin gösterilen dikey oranı (1 = tamamı), --cy: o
   bölümün dikey merkezi (JS homeSlides FIT). */
:root { --sb-ratio: 3.3; }
@media (min-width: 1200px) {
  .sb-slider .slider-slide { --sh: calc(100cqw / var(--sb-ratio)); --ih: calc(var(--sh) / var(--vf, 1)); height: var(--sh); background: #0b0a07 var(--bg, none) center / cover no-repeat; isolation: isolate; }
  .sb-slider .slider-slide picture { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, calc(var(--ih) * 1422 / 800)); transform: translateX(-50%); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .sb-slider .slider-slide img { position: absolute; left: 50%; top: calc(var(--sh) / 2 - var(--ih) * var(--cy, .5)); width: auto; max-width: none; height: var(--ih); aspect-ratio: 1560 / 800; transform: translateX(-50%); }
}
/* PC orta kolon: spor şeridi, ülke hapları ve zaman sekmeleri referanstaki sıklıkta */
@media (min-width: 1024px) {
  .app:has(.sb-layout) { padding-top: 8px; }
  .sb-center .ss-wrap { margin-top: 6px; }
  .sb-center .ss-item { height: 56px; }
  .sb-center .pills { margin-top: 8px; gap: 6px; }
  .sb-center .pill { height: 32px; padding: 0 14px 0 9px; font-size: 13px; }
  .sb-center .time-tabs { margin-top: 4px; }
  .sb-center .time-tabs .tab { height: 38px; padding: 0 12px; font-size: 14px; }
  .sb-center .sb-list { margin-top: 6px; }
  .sb-center .day-head { padding: 6px 10px; margin: 0 0 4px; }
}

/* ---------- Spor: 3 kolon ---------- */
.sb-layout { display: grid; grid-template-columns: 275px minmax(0, 1fr) 296px; gap: 8px; align-items: start; }
.sb-left, .sb-right { position: sticky; top: calc(var(--hdr-h) + 8px); max-height: calc(100vh - var(--hdr-h) - 16px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; display: flex; flex-direction: column; gap: 8px; }
.sb-left > *, .sb-right > * { flex-shrink: 0; }
.sb-center { min-width: 0; container-type: inline-size; container-name: sbc; }
.ptiles { display: flex; flex-direction: column; gap: 6px; }
.ptile { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 14px; background: linear-gradient(90deg, #2A2208, #120F05); border: 1px solid rgba(216, 174, 70, .55); border-radius: var(--radius); transition: border-color .15s, filter .15s; }
.ptile:hover { border-color: var(--gold); filter: brightness(1.15); }
.ptile .ico { width: 44px; height: 44px; color: var(--gold); }
.ptile .ico svg { stroke-width: 1.4; }
.ptile > span:not(.ico) { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ptile small { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .5px; }
.ptile b { font-size: 16px; font-weight: 900; letter-spacing: .4px; }
.brand-tile { position: relative; height: 135px; display: grid; place-items: center; border: 2px solid var(--gold); border-radius: var(--radius); background: radial-gradient(circle at 50% 40%, #2a2208, #0e0e0e 72%); }
.brand-tile img { max-width: 180px; height: auto; margin-top: -14px; }
.bt-badge { position: absolute; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--gold); }
.bt-badge .ico { width: 18px; height: 18px; }
.side-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.side-search .ico { width: 18px; height: 18px; color: var(--muted); }
.side-search input { flex: 1; min-width: 0; background: none; border: 0; height: 100%; }
.side-box { background: var(--surface); border-radius: var(--radius); padding: 10px 8px; }
.side-h { font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .6px; margin: 2px 4px 6px; }
.side-links { display: flex; flex-direction: column; }
.side-links a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border-radius: var(--radius); color: #e6e6e6; font-size: 13.5px; }
.side-links a:hover { background: var(--surface-2); }
.side-links .ico { width: 18px; height: 18px; color: var(--gold); flex: none; }
.side-links a > span:not(.ico):not(.flag) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-links b { font-size: 12px; color: var(--muted); font-weight: 600; }
.side-links a.active { background: var(--gold); color: #111; font-weight: 700; }
.side-links a.active .ico, .side-links a.active b { color: #111; }

/* Spor ikon şeridi */
.ss-wrap { position: relative; margin-top: 8px; }
.sport-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-right: 34px; scroll-behavior: smooth; }
.sport-strip::-webkit-scrollbar { display: none; }
.ss-item { position: relative; flex: none; width: 62px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--surface); border-radius: var(--radius); color: #ddd; font-size: 10.5px; font-weight: 600; }
.ss-item:hover { background: var(--surface-2); }
.ss-item .ico { width: 22px; height: 22px; color: var(--gold); }
.ss-item img { width: 26px; height: 26px; border-radius: 6px; }
.ss-item span { max-width: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item.active { background: var(--gold); color: #111; }
.ss-item.active .ico { color: #111; }
.ss-count { position: absolute; top: 3px; right: 3px; min-width: 16px; padding: 0 4px; line-height: 15px; border-radius: 8px; background: #111; color: var(--gold); font-size: 9.5px; font-weight: 800; text-align: center; }
.ss-quick { display: none; }
.ss-next { position: absolute; right: 0; top: 0; bottom: 0; width: 30px; display: grid; place-items: center; color: var(--gold); background: linear-gradient(90deg, rgba(14, 14, 14, 0), var(--bg) 45%); }
.ss-next .ico { width: 22px; height: 22px; }
.sb-center .pills { margin-top: 10px; }
.time-tabs { margin-top: 6px; }
.lg-filter { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; background: var(--surface); border-radius: var(--radius); font-size: 13.5px; }
.lg-filter > .ico { width: 16px; height: 16px; color: var(--gold); }
.lg-filter a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-size: 12.5px; }
.lg-filter a .ico { width: 14px; height: 14px; }

/* Lig grubu ve maç satırı */
.sb-list { margin-top: 8px; }
.sb-empty { padding: 40px 16px; text-align: center; color: var(--muted); background: var(--surface); border-radius: var(--radius); }
.day-head { display: flex; align-items: center; padding: 8px 10px; margin: 2px 0 4px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--border); }
.lg-group { background: var(--surface); border-radius: var(--radius); overflow: hidden; margin-bottom: 6px; }
.lg-head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: #252525; }
.lg-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.lg-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-name .ico { width: 14px; height: 14px; color: var(--muted); }
.lg-name:hover b { color: var(--gold); }
.lg-mk { display: flex; gap: 8px; }
.mk-h { width: 164px; text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; }
.mk-sel { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.mk-sel select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #ddd; font-size: 12px; font-weight: 600; padding: 0 18px 0 4px; cursor: pointer; height: 30px; }
.mk-sel select option { background: #1e1e1e; color: #fff; }
.mk-sel .ico { position: absolute; right: 0; width: 14px; height: 14px; color: var(--gold); pointer-events: none; }
.mk-sel-m { display: none; }
.mrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 70px auto auto auto; gap: 8px; align-items: center; min-height: 66px; padding: 10px; border-top: 1px solid #2b2b2b; }
.m-status { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--muted); line-height: 1.25; }
.m-live { color: var(--live); font-weight: 800; font-size: 13px; }
.m-time { color: #fff; font-weight: 600; font-size: 13px; }
.m-teams { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-teams > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.m-teams b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc { font-style: normal; color: var(--gold); font-weight: 800; font-size: 13.5px; }
.m-sub { display: none; font-size: 11.5px; color: var(--muted); }
.m-extra { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); font-size: 12px; }
.m-stat { display: inline-flex; color: var(--muted); }
.m-stat .ico, .m-more .ico { width: 15px; height: 15px; }
.m-more { display: inline-flex; align-items: center; color: #ddd; font-weight: 600; }
.m-more:hover { color: var(--gold); }
.mk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 164px; }
.mk-3.m3-kg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.odd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; min-width: 0; background: var(--surface-2); border-radius: var(--radius); border-bottom: 2px solid transparent; transition: background .12s; }
.odd small { font-size: 9.5px; color: var(--muted); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
.odd b { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.2; }
button.odd:hover { background: var(--surface-3); }
.odd.selected { background: var(--gold); }
.odd.selected small, .odd.selected b { color: #111; }
.odd.up { border-bottom-color: var(--up); }
.odd.up b { color: var(--up); }
.odd.down { border-bottom-color: var(--down); }
.odd.down b { color: var(--down); }
.odd.selected.up b, .odd.selected.down b { color: #111; }
.odd.off { opacity: .45; }
.odd.off .ico { width: 13px; height: 13px; }
.odd.line { background: transparent; }
.odd.line b { color: var(--muted); font-weight: 600; }
@container sbc (max-width: 759px) { .mk-3, .mk-h.mk-3 { display: none; } }
@container sbc (max-width: 579px) { .mk-ou, .mk-h.mk-ou { display: none; } }

/* Bahis kuponu */
.slip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.slip-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.slip-tabs button { position: relative; height: 44px; font-weight: 700; font-size: 14px; color: #bdbdbd; }
.slip-tabs button.active { color: var(--gold); }
.slip-tabs button.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--gold); }
.slip-tabs b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-left: 4px; border-radius: 9px; background: var(--gold); color: #111; font-size: 11px; }
.slip-empty { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.slip-empty .ico { width: 34px; height: 34px; color: var(--gold); }
.slip-empty b { color: #fff; font-size: 15px; }
.slip-empty a { color: #fff; text-decoration: underline; }
.slip-body { max-height: 320px; overflow: auto; }
.slip-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #2a2a2a; }
.si-txt { display: flex; flex-direction: column; min-width: 0; }
.si-txt small { color: var(--muted); font-size: 11.5px; }
.si-txt em { font-style: normal; color: var(--gold); }
.si-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-odd { font-weight: 800; color: var(--gold); }
.slip-x { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); border-radius: var(--radius); }
.slip-x:hover { color: var(--live); background: var(--surface-2); }
.slip-x .ico { width: 17px; height: 17px; }
.slip-foot { display: grid; gap: 10px; padding: 12px; }
.slip-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.slip-row.win b { color: var(--gold); font-size: 16px; }
.stake { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 46px); gap: 6px; }
.stake input { height: 40px; min-width: 0; padding: 0 10px; background: #111; border: 1px solid var(--border); border-radius: var(--radius); }
.stake button { height: 40px; background: var(--surface-2); border-radius: var(--radius); font-weight: 700; }
.stake button:hover { color: var(--gold); }
.btn-text.btn-block { height: 34px; color: var(--muted); font-size: 13px; }

/* Sağ kolon */
.gsq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.gsq { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: #151515; }
.gsq:hover { filter: brightness(1.15); }
.r-banners { display: flex; flex-direction: column; gap: 6px; }
.r-game-card { position: relative; display: block; aspect-ratio: 1; overflow: hidden; isolation: isolate; border: 1px solid #9b7839; border-radius: var(--radius); background: #0d0d0c; box-shadow: inset 0 0 0 1px rgba(240, 194, 91, .22), 0 0 13px rgba(178, 122, 28, .11); }
.r-game-card.is-wide { aspect-ratio: 16 / 5; }
.r-game-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.r-game-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, #d8ae46 35%, #9c722b 72%, transparent); opacity: .85; pointer-events: none; }
.r-game-card::after { content: ""; position: absolute; inset: 42% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(transparent, rgba(3, 3, 3, .4) 45%, rgba(3, 3, 3, .96)); }
.r-game-logo { position: absolute; z-index: 2; top: 9px; right: 8px; display: grid; place-items: center; width: 97px; min-height: 27px; padding: 3px 5px; border: 1px solid rgba(244, 202, 104, .78); border-radius: 2px; background: rgba(5, 5, 5, .82); }
.r-game-logo img { display: block; width: 84px; height: auto; object-fit: contain; }
.r-game-copy { position: absolute; z-index: 2; inset: auto 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; pointer-events: none; }
.r-game-kicker { display: flex; align-items: center; gap: 8px; color: #e8c982; font-family: Bahnschrift, "Arial Narrow", Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .14em; }
.r-game-kicker::before, .r-game-kicker::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 197, 113, .85)); }
.r-game-kicker::after { transform: rotate(180deg); }
.r-game-copy strong { display: flex; flex-direction: column; align-items: center; max-width: 100%; font-family: Bahnschrift, "Arial Narrow", Arial, sans-serif; font-weight: 900; line-height: .95; letter-spacing: -.035em; filter: drop-shadow(0 2px 2px #000); }
.r-game-copy strong span { display: block; max-width: 100%; color: #fff6de; background: linear-gradient(180deg, #fff9e9 5%, #f2d593 65%, #c9973e); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 27px; white-space: nowrap; }
.r-game-copy strong span + span { font-size: 32px; }
.r-game-card.is-wide .r-game-logo { top: 6px; right: 7px; width: 78px; min-height: 20px; padding: 2px 4px; }
.r-game-card.is-wide .r-game-logo img { width: 68px; }
.r-game-card.is-wide .r-game-copy { inset: auto 9px 8px; gap: 0; }
.r-game-card.is-wide .r-game-kicker { display: none; }
.r-game-card.is-wide .r-game-copy strong { flex-direction: row; gap: 5px; }
.r-game-card.is-wide .r-game-copy strong span, .r-game-card.is-wide .r-game-copy strong span + span { font-size: 21px; }
.r-game-card:hover, .r-game-card:focus-visible { border-color: var(--gold); }
.r-game-card:hover img { filter: brightness(1.08); }

/* ---------- Oyun kartı ---------- */
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 165px)); gap: 8px; }
.game { min-width: 0; width: 100%; }
.g-thumb { position: relative; aspect-ratio: 165 / 221; border-radius: 10px; overflow: hidden; background: #151515; }
.g-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, hsl(var(--h) 62% 34%), hsl(var(--h) 55% 10%) 72%); }
.g-art img { width: 46%; max-width: 110px; height: auto; opacity: .92; }
.g-art b { position: absolute; right: 8px; bottom: 0; font-size: 26px; font-weight: 900; color: rgba(255, 255, 255, .16); letter-spacing: 1px; }
.g-art small { position: absolute; left: 8px; bottom: 5px; font-size: 10px; color: rgba(255, 255, 255, .72); max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-live .g-art small { display: none; }
.g-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.g-hit { position: absolute; inset: 0; z-index: 2; }
.g-over { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transition: opacity .15s; }
@media (hover: hover) { .g-thumb:hover .g-over { opacity: 1; pointer-events: auto; } }
.g-play { height: 34px; padding: 0 24px; }
.g-demo { font-size: 12px; color: #fff; text-decoration: underline; }
.g-prov { position: absolute; top: 6px; right: 6px; z-index: 3; font-size: 10px; padding: 2px 6px; border-radius: 3px; background: rgba(0, 0, 0, .7); pointer-events: none; }
.g-res { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; display: flex; gap: 3px; pointer-events: none; }
.g-res i { font-style: normal; min-width: 20px; height: 18px; padding: 0 3px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; border-radius: 3px; }
.g-res .r { background: #C62828; }
.g-res .b { background: #111; border: 1px solid #555; }
.g-res .z { background: var(--up); color: #111; }
.lim-hide { display: none; }
.more-wrap { display: flex; justify-content: center; margin-top: 16px; }
.more-wrap .btn { min-width: 200px; height: 44px; border-radius: 6px; }
.more-m { display: none; }

/* Ana sayfa alt bandı */
.band { background: var(--bg-band); margin-top: 24px; padding: 28px 0 32px; }
.band-inner { max-width: 1244px; margin: 0 auto; padding: 0 12px; display: flex; flex-direction: column; gap: 32px; }
.band .ggrid > .game:nth-child(n+8) { display: none; }

/* ---------- Casino tipi sayfalar ---------- */
.c-hero { position: relative; margin-top: -12px; }
.hero-slider { border-radius: 0; }
/* Üst resimler kendi oranında, kırpılmadan: PC 5120x760 kenardan kenara, tablet 1400x800, mobil 700x800 */
.hero-slider .slider-slide img { aspect-ratio: 5120 / 760; }
@media (max-width: 1023px) { .hero-slider .slider-slide img { aspect-ratio: 1536 / 636; } }
@media (max-width: 767px) { .hero-slider .slider-slide img { aspect-ratio: 840 / 464; } }
.winners { overflow: hidden; }
/* Kazananlar şeridi görselin üstüne binmez; hemen altında durur */
.winners.on-hero { position: relative; height: 64px; margin: 10px 24px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.w-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 100%; }
.w-track.enter { animation: wIn .45s ease; }
@keyframes wIn { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
.w-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; border-left: 1px solid rgba(255, 255, 255, .08); }
.w-item:first-child { border-left: 0; }
.w-img { position: relative; flex: none; width: 50px; height: 34px; border-radius: 3px; overflow: hidden; }
.w-img .g-art b, .w-img .g-art small, .qc-ico .g-art b, .gs-ico .g-art b, .gsq .g-art b { display: none; }
.w-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.w-txt small { color: var(--gold); font-size: 10px; letter-spacing: 2px; }
.w-txt b { font-size: 14px; font-weight: 800; }
.w-txt span { font-size: 11.5px; color: #c9c9c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winners.single { height: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.winners.single .w-track { grid-template-columns: 1fr; }
.winners.single .w-item:nth-child(n+2) { display: none; }
.winners.single .w-img { width: 56px; height: 40px; }
/* Kazananlar: görselli, "***** - tutar" üst satır + oyun adı. PC 5 / tablet 3 / mobil 1 öğe. */
.w-item { color: inherit; transition: background .15s; }
.w-item:hover { background: rgba(255, 255, 255, .04); }
.w-item:hover .w-name { color: var(--gold); }
.w-img { background: #151515; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.w-top { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; }
.w-top small { color: #8d8d8d; letter-spacing: 1.5px; font-size: 10px; }
.w-top i { font-style: normal; color: #777; font-size: 12px; }
.w-top b { font-size: 15px; font-weight: 800; color: #fff; }
.w-txt .w-name { font-size: 12.5px; color: #d6d6d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winners.on-hero .w-img { width: 64px; height: 42px; }
/* PC (≥1024): Jojobet gibi hero banner'ın sağ altına bindirilmiş, yarı saydam, sol kenarı eğik şerit;
   sekme çubuğu doğrudan banner'ın altına gelir. Slider noktaları sol yarıda ortalanır. */
@media (min-width: 1024px) {
  .c-hero .winners.on-hero { position: absolute; right: 0; bottom: 0; z-index: 4; width: min(50%, 760px); height: 58px; margin: 0; padding-left: 30px; border: 0; border-radius: 0; background: rgba(10, 10, 10, .8); backdrop-filter: blur(6px); clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%); }
  .c-hero .winners.on-hero .w-item { padding: 0 12px; border-left-color: rgba(255, 255, 255, .1); }
  .c-hero .winners.on-hero .w-item:first-child { border-left: 0; }
  .c-hero:has(.winners.on-hero) .hero-slider .slider-dots { right: 50%; }
}

/* Sol hareketli görseller (GIF etkisi CSS ile: ışık süzülmesi, yakınlaşma, parıltı, kenar ışıması) */
.l-banners { display: flex; flex-direction: column; gap: 4px; }
.l-ban { position: relative; display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid rgba(216, 174, 70, .4); background: #0b0a07; isolation: isolate; animation: lbGlow 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
.l-ban picture { position: relative; z-index: 0; }
.l-ban img { width: 100%; height: auto; transform-origin: 50% 50%; animation: lbZoom 7s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.6s); transition: filter .2s; }
.l-ban.wide img { aspect-ratio: 4 / 1; object-fit: cover; object-position: 50% 48%; }
.l-ban.wide.gen img { object-position: 50% 50%; }
.l-ban.strip img { aspect-ratio: 3 / 1; object-fit: cover; object-position: 50% var(--oy, 50%); }
.l-ban.tg img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% var(--oy, 60%); }
.l-ban::after, .l-strip::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, rgba(255, 236, 170, 0) 38%, rgba(255, 236, 170, .55) 50%, rgba(255, 236, 170, 0) 62%); transform: translateX(-130%); animation: lbShine 3.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .75s); mix-blend-mode: screen; }
.l-ban::before, .l-strip::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 244, 190, .95) 0 1.6px, transparent 3px) 14% 24% / 28px 28px no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.2px, transparent 2.6px) 82% 18% / 24px 24px no-repeat,
    radial-gradient(circle, rgba(255, 226, 130, .95) 0 1.8px, transparent 3.2px) 64% 80% / 30px 30px no-repeat,
    radial-gradient(circle, rgba(255, 244, 190, .9) 0 1.2px, transparent 2.6px) 34% 72% / 24px 24px no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, .85) 0 1.4px, transparent 2.8px) 92% 62% / 26px 26px no-repeat;
  animation: lbTwinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.55s); }
.l-ban:hover img { filter: brightness(1.15); }
@keyframes lbShine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
@keyframes lbZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes lbGlow { 0%, 100% { border-color: rgba(216, 174, 70, .3); box-shadow: 0 0 0 rgba(216, 174, 70, 0); } 50% { border-color: rgba(216, 174, 70, .95); box-shadow: 0 0 12px rgba(216, 174, 70, .45); } }
@keyframes lbTwinkle { 0%, 100% { opacity: .1; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }
/* HTML sol şerit (4:1) ve Telegram kutusu (2:1): koyu altın zemin + 3D obje + iki satır yazı */
.l-strip { position: relative; display: flex; align-items: center; gap: 4px; aspect-ratio: 4 / 1; padding: 0 10px 0 0; overflow: hidden; isolation: isolate; border: 1px solid rgba(216, 174, 70, .45); border-radius: var(--radius); color: #fff;
  background:
    radial-gradient(70px 56px at 16% 55%, rgba(216, 174, 70, .34), transparent 72%),
    repeating-linear-gradient(118deg, rgba(216, 174, 70, .07) 0 2px, transparent 2px 13px),
    linear-gradient(90deg, #2a1f06 0%, #141005 48%, #0a0907 100%);
  animation: lbGlow 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); transition: filter .2s; }
.l-strip:hover { filter: brightness(1.12); }
.l-strip::before { display: none; }
.ls-obj { position: relative; z-index: 1; flex: none; width: 30%; height: 100%; display: grid; place-items: center; }
.ls-obj img { height: 92%; width: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .7)); animation: lsFloat 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.8s); will-change: transform; }
.l-strip:hover .ls-obj img { animation-duration: 1.3s; }
.ls-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; font-family: Bahnschrift, "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; font-stretch: condensed; line-height: 1; }
.ls-txt small { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--gold); }
.ls-txt b { font-size: 18px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; background: linear-gradient(180deg, #fff 0%, #fff3c4 55%, #D8AE46 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); }
.l-strip.tg { aspect-ratio: 2 / 1; padding-right: 12px; gap: 6px;
  background:
    radial-gradient(90px 80px at 22% 55%, rgba(41, 169, 235, .30), transparent 72%),
    repeating-linear-gradient(118deg, rgba(216, 174, 70, .07) 0 2px, transparent 2px 13px),
    linear-gradient(90deg, #10202b 0%, #121008 52%, #0a0907 100%); }
.l-strip.tg .ls-obj { width: 40%; }
.l-strip.tg .ls-obj img { height: 80%; }
.l-strip.tg .ls-txt b { font-size: 26px; }
.ls-btn { align-self: flex-start; margin-top: 5px; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: #111; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 0 0 0 rgba(216, 174, 70, .5); animation: ring 2.4s ease-out infinite; }
@keyframes lsFloat { 0%, 100% { transform: translateY(2px) rotate(-4deg) scale(1); } 50% { transform: translateY(-3px) rotate(4deg) scale(1.05); } }
/* Renkli 3D menü ikonları (çekmece sol şeridi, hızlı kategoriler, bölüm başlıkları) */
.i3d { display: inline-grid; place-items: center; flex: none; }
.i3d img { display: block; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); transform-origin: 50% 65%; animation: i3dFloat 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); will-change: transform; }
.i3d-swing img { animation-name: i3dSwing; animation-duration: 3.2s; }
.i3d-fly img { animation-name: i3dFly; animation-duration: 2.6s; }
.i3d-shake img { animation-name: i3dShake; animation-duration: 3.6s; }
.i3d-bob img { animation-name: i3dBob; animation-duration: 2.4s; }
.i3d-spin img { animation: i3dSpin 9s linear infinite; transform-origin: 50% 50%; }
@keyframes i3dFloat { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@keyframes i3dSwing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes i3dFly { 0%, 100% { transform: translate(-1px, 2px) rotate(-4deg); } 50% { transform: translate(2px, -3px) rotate(5deg); } }
@keyframes i3dShake { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(-8deg) scale(1.06); } 80% { transform: rotate(7deg) scale(1.06); } 84% { transform: rotate(-5deg); } 88% { transform: rotate(3deg); } }
@keyframes i3dBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.07); } }
@keyframes i3dSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .i3d img, .ls-obj img, .l-strip::after, .l-strip::before, .ls-btn { animation: none !important; } }

/* Turnuva kartı (Jojobet düzeni): üstte tam genişlik görsel + durum rozeti, altında sarı bilgi alanı */
.tour-head { max-width: 650px; }
.tour-list .tour-card2 { max-width: 650px; padding: 0; gap: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, .4); }
.tc-media { position: relative; display: block; width: 100%; aspect-ratio: 7 / 4; background: #111; overflow: hidden; }
.tc-media picture, .tc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-media img { transition: transform .4s ease, filter .2s; }
.tc-media:hover picture img { transform: scale(1.03); filter: brightness(1.08); }
.tc-status { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(4px); }
.st-devam .tc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.st-tamamlanmis .tc-media picture img { filter: grayscale(.35) brightness(.85); }
.tc-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
@media (max-width: 767px) { .tc-body { padding: 12px; } .tc-status { top: 8px; right: 8px; font-size: 11.5px; } }

/* Promosyonlar (Jojobet düzeni): geniş kapsayıcı, koyu bant içinde ortalı sekmeler, görsel kartın kenarına kadar */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.promo-page.container-wide { padding: 0 24px; }
.promo-page { padding-top: 14px; }
.promo-bar { margin-bottom: 14px; background: #151515; border: 1px solid var(--border); border-radius: 4px; }
.promo-bar .promo-tabs { justify-content: center; margin: 0; border-bottom: 0; }
.promo-bar .tab { height: 60px; padding: 0 20px; font-size: 16px; }
.promo-bar .tab.active::after { left: 14px; right: 14px; height: 4px; }
.promo-page .promo-grid { gap: 28px 36px; }
.promo-page .promo-card { padding: 0; gap: 0; overflow: hidden; background: #1a1a1a; border: 1px solid #2c2c2c; border-radius: 4px; }
.promo-page .pc-img { border-radius: 0; aspect-ratio: 7 / 4; }
.promo-page .pc-img picture, .promo-page .pc-img img { height: 100%; object-fit: cover; }
.pc-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 26px 22px; }
.promo-page .pc-desc { font-size: 15px; min-height: 44px; }
.promo-page .pc-more { width: 194px; height: 42px; margin-top: auto; border: 2px solid #fff; border-radius: 0; background: transparent; color: #fff; font-weight: 500; letter-spacing: .3px; }
.promo-page .pc-more:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 1023px) { .promo-page .promo-grid { gap: 18px; } }
@media (max-width: 767px) {
  .promo-page.container-wide { padding: 0 12px; }
  .promo-bar { margin: 0 -12px 12px; border-radius: 0; border-left: 0; border-right: 0; }
  .promo-bar .promo-tabs { justify-content: flex-start; }
  .promo-bar .tab { height: 48px; padding: 0 14px; font-size: 14px; }
  .pc-body { padding: 14px 14px 16px; }
  .promo-page .pc-desc { font-size: 14px; }
}

/* Giriş penceresi (Jojobet'teki eksikler): renkli üst bant, kırmızı zorunlu yıldızları, yer tutucular,
   alan hata mesajı, renkli X/Telegram ikonları */
.login-box .lb-head { margin: -24px -24px 2px; padding: 28px 24px 22px; text-align: center; background: linear-gradient(135deg, #241b04 0%, #5f4806 50%, #241b04 100%); border-bottom: 2px solid var(--gold); }
.login-box .lb-head h2 { color: #fff; font-size: 22px; }
.login-box .lb-head .lb-sub { margin-top: 6px; color: #eee6cf; }
.login-box .lb-head .lb-sub a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.login-box .field label i { color: #ff4d4d; font-weight: 700; }
.login-box .inp input::placeholder { color: #8a8a8a; }
.f-err { display: none; margin-top: 4px; color: var(--live); font-size: 12px; }
.field.error .f-err { display: block; }
.lb-social a { width: 40px; height: 40px; }
.lb-social a.lb-x { background: #000; color: #fff; border: 1px solid #3a3a3a; }
.lb-social a.lb-tg { background: #229ed9; color: #fff; }
.lb-social a.lb-x:hover, .lb-social a.lb-tg:hover { background: var(--gold); color: #111; }
.lb-social .ico { width: 18px; height: 18px; }
@media (max-width: 767px) { .login-box .lb-head { margin: -56px -16px 2px; padding: 62px 16px 22px; } }

/* Footer (Matbet düzeni): logo+sosyal | Genel Kurallar | 3 kapsül sütunu; altta iletişim+metin ve rozetler */
.ft-grid { display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(170px, 1fr) repeat(3, auto); gap: 24px 40px; align-items: start; padding-bottom: 26px; border-bottom: 1px solid #1f1f1f; }
.ft-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ft-brand img { width: 200px; height: auto; }
.ft-brand .ft-partner { margin-top: 6px; }
.ft-social .soc { width: 40px; height: 40px; }
.ft-social .soc-tg { background: #229ed9; color: #fff; }
.ft-social .soc-x { background: #000; color: #fff; border: 1px solid #3a3a3a; }
.ft-social .soc-tg:hover, .ft-social .soc-x:hover { background: var(--gold); color: #111; }
.ft-h { display: block; margin-bottom: 14px; color: #f1f1f1; font-size: 15px; font-weight: 700; letter-spacing: .3px; }
a.ft-h { color: var(--gold); font-weight: 800; letter-spacing: .5px; }
a.ft-h:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft-rlinks { display: grid; gap: 8px; font-size: 13px; color: #a5a5a5; }
.ft-rlinks a:hover { color: var(--gold); }
.ft-col .ft-h { text-align: center; }
.ft-col-rules .ft-h { text-align: left; }
.ft-caps { display: flex; gap: 14px; justify-content: center; }
.ft-cap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 108px; height: 168px; padding: 14px 6px 16px; border-radius: 50px; border: 2px solid rgba(216, 174, 70, .5); background: radial-gradient(circle at 50% 32%, rgba(216, 174, 70, .2), transparent 62%), linear-gradient(180deg, #1f1b10 0%, #0c0b08 100%); box-shadow: inset 0 0 16px rgba(216, 174, 70, .14), 0 6px 18px rgba(0, 0, 0, .5); text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.ft-cap:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: inset 0 0 18px rgba(216, 174, 70, .25), 0 0 16px rgba(216, 174, 70, .35); }
.ft-cap-ico { display: grid; place-items: center; width: 84px; height: 84px; }
.ft-cap-ico img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); animation: ftFloat 3.6s ease-in-out infinite; }
.ft-cap:nth-child(2) .ft-cap-ico img { animation-delay: -1.8s; }
@keyframes ftFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ft-cap-t { display: flex; flex-direction: column; line-height: 1.2; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #e9e9e9; }
.ft-cap-t b { color: var(--gold); font-size: 11.5px; font-weight: 800; }
.ft-site .ft-links, .ft .ft-links { border-bottom: 1px solid #1f1f1f; }
.ft-bottom { display: flex; align-items: center; gap: 32px; padding-top: 20px; }
.ft-info { flex: 1; min-width: 0; }
.ft-info .ft-contact { justify-items: center; margin-bottom: 16px; text-align: center; }
.ft-bottom .ft-badges { flex: none; margin-left: 0; display: flex; align-items: center; gap: 12px; }
.ft-bottom .fb-18 { width: 64px; height: 64px; font-size: 20px; }
.c-tabs { position: sticky; top: var(--hdr-h); z-index: 60; display: flex; align-items: center; gap: 8px; height: 78px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--border); }
.ct-arrow { flex: none; width: 32px; height: 44px; display: grid; place-items: center; color: var(--muted); }
.ct-arrow.next { color: var(--gold); order: 4; }
.ct-arrow .ico { width: 22px; height: 22px; }
.ct-scroll { flex: 1; min-width: 0; display: flex; gap: 4px; height: 100%; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.ct-scroll::-webkit-scrollbar { display: none; }
.ct-scroll .tab { height: 100%; font-size: 16px; }
.ct-search { order: 3; flex: none; display: flex; align-items: center; gap: 8px; width: 185px; height: 50px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: text; }
.ct-search .ico { width: 18px; height: 18px; color: var(--muted); }
.ct-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
.c-body { padding-top: 20px; }
.gsec { margin-bottom: 32px; }
.band .gsec { margin-bottom: 0; }
.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.cv-title { font-size: 20px; font-weight: 800; }
.cv-title small { color: var(--muted); font-size: 14px; font-weight: 600; }
.filter-wrap { position: relative; }
.btn-filter .ico { width: 16px; height: 16px; }
.filter-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; width: 290px; max-height: 380px; overflow: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.fp-sec { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fp-sec:last-child { margin-bottom: 0; }
.fp-sec small { width: 100%; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.fp-sec button { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; }
.fp-sec button.active { background: var(--gold); color: #111; font-weight: 700; }

/* ---------- Promosyonlar ---------- */
.promo-page { padding-top: 12px; }
.promo-page .page-h { margin-bottom: 6px; }
.promo-tabs { margin-bottom: 20px; }
.promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.promo-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pc-img { display: block; width: 100%; overflow: hidden; border-radius: var(--radius); background: #111; }
.pc-img picture, .pc-img img { display: block; width: 100%; height: auto; }
.pc-img:hover img { filter: brightness(1.1); }
.pc-desc { font-size: 14px; line-height: 1.45; min-height: 40px; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-cat { color: var(--muted); font-size: 12px; margin-top: -4px; }
.pc-more { align-self: flex-start; width: 180px; height: 40px; margin-top: auto; }
.modal-box.promo { width: 700px; padding: 0; overflow-x: hidden; }
.pm-media { position: relative; }
.pm-media img { width: 100%; height: auto; }
.pm-btns { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; }
.pm-body { background: #fff; color: #111; }
.pm-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid #e2e2e2; }
.pm-tabs span { display: inline-block; padding: 12px 4px 10px; font-weight: 700; border-bottom: 3px solid var(--gold); }
.pm-rules { padding: 16px 20px 22px; max-height: 60vh; overflow: auto; }
.pm-rules h2 { font-size: 17px; margin-bottom: 10px; }
.pm-rules ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }

/* ---------- Turnuvalar ---------- */
.tour-page { padding-top: 20px; }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 600px; margin: 0 auto 20px; }
.tour-list { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.tour-card2 { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 6px; color: #111; background: linear-gradient(180deg, #F8D53F, #D8AE46 45%, #E5B410); }
.tour-card2 h2 { font-size: 19px; font-weight: 900; }
.tc-date, .tc-crit, .tc-games { font-size: 13.5px; }
.tc-link { text-decoration: underline; font-weight: 800; color: #111; }
.tc-prizes { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius); background: rgba(0, 0, 0, .08); }
.tc-trophy { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; font-size: 12px; }
.tc-trophy .ico { width: 34px; height: 34px; }
.tc-plist { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: minmax(150px, 1fr); gap: 4px 16px; overflow-x: auto; font-size: 13px; scrollbar-width: thin; }
.tc-plist em { font-style: normal; font-weight: 800; }
.tc-dates { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; font-weight: 600; }
.tc-bar { height: 6px; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, .25); }
.tc-bar i { display: block; height: 100%; background: #111; }
.tc-left { text-align: center; font-weight: 900; font-size: 13px; letter-spacing: .5px; }
.tc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; border-radius: var(--radius); background: #111; color: #fff; text-align: center; }
.tc-stats small { display: block; color: var(--muted); font-size: 11px; }
.tc-stats b { color: var(--gold); font-size: 14px; font-variant-numeric: tabular-nums; }
.tc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.tc-btns .btn { height: 42px; }
.tc-login { background: #fff; color: #111; }
.tc-login:hover { background: #f0f0f0; }
.tc-reg { background: #111; color: var(--gold); }
.tc-reg:hover { background: #000; }
.st-tamamlanmis { filter: grayscale(.55); opacity: .85; }
.leader-wrap { max-width: 600px; margin: 36px auto 0; }
.leader-card { overflow: hidden; }
.leader { width: 100%; border-collapse: collapse; font-size: 14px; }
.leader th { text-align: left; padding: 10px 14px; color: var(--muted); font-size: 12px; text-transform: uppercase; background: #191919; }
.leader td { padding: 10px 14px; border-top: 1px solid #2a2a2a; }
.leader th:last-child, .leader td:last-child { text-align: right; }
.leader td:last-child { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); font-weight: 800; font-size: 12px; }
.leader tr:nth-child(1) .rank { background: var(--gold); color: #111; }
.leader tr:nth-child(2) .rank { background: #C9C9C9; color: #111; }
.leader tr:nth-child(3) .rank { background: #C98A4B; color: #111; }
.tg-modal > picture img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.tg-body { padding-top: 16px; }
.tg-body h2 { font-size: 18px; }
.tg-body .muted { margin: 4px 0 12px; }
.tg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Kayıt ---------- */
.reg-page { padding-top: 24px; }
.reg-wrap { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 24px; align-items: start; }
.reg-card { background: #fff; color: #111; border-radius: 6px; padding: 24px; }
.reg-top-img { display: none; }
.reg-steps { display: flex; align-items: flex-start; margin-bottom: 18px; }
.rs { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.rs i { font-style: normal; width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid #cfcfcf; border-radius: var(--radius); background: #fff; color: #777; font-weight: 800; }
.rs span { font-size: 11.5px; font-weight: 600; color: #777; }
.rs.active i { background: #111; border-color: #111; color: var(--gold); }
.rs.active span { color: #111; }
.rs.done i { background: var(--gold); border-color: var(--gold); color: #111; }
.rs-line { flex: 1; height: 2px; margin-top: 20px; background: #ddd; }
.rs-line.done { background: var(--gold); }
.reg-title { font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: #333; }
.field label i { font-style: normal; color: var(--live); margin-right: 2px; }
.inp { position: relative; display: flex; align-items: center; height: 44px; background: #fff; border: 1px solid #cfcfcf; border-radius: var(--radius); }
.inp:focus-within { border-color: var(--gold-dark); box-shadow: 0 0 0 2px rgba(216, 174, 70, .25); }
.inp input, .inp select { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; color: #111; }
.inp select option { color: #111; }
.eye { flex: none; width: 42px; height: 100%; display: grid; place-items: center; color: #888; }
.eye.on { color: #111; }
.eye .ico { width: 19px; height: 19px; }
.field.error .inp { border-color: var(--live); }
.field.error label { color: var(--live); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phone-row select { flex: 0 0 82px; border-right: 1px solid #ddd; }
.otp { display: flex; gap: 10px; margin: 10px 0; }
.otp input { width: 52px; height: 56px; text-align: center; font-size: 22px; font-weight: 800; color: #111; background: #fff; border: 1px solid #cfcfcf; border-radius: var(--radius); }
.check { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: 13px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.check a { text-decoration: underline; }
.check.error { color: var(--live); }
.reg-sub { font-size: 14px; color: #444; }
.reg-actions { display: flex; gap: 8px; margin-top: 16px; }
.reg-actions .btn { flex: 1; height: 44px; }
.reg-card .btn-outline { color: #111; border-color: #111; }
.reg-card .btn-outline:hover { background: #111; color: var(--gold); }
.reg-note { margin-top: 10px; text-align: center; color: #777; font-size: 12.5px; }
.reg-note a { color: #111; font-weight: 700; text-decoration: underline; }
.reg-note.left { text-align: left; }
.reg-art { position: sticky; top: calc(var(--hdr-h) + 16px); display: flex; justify-content: center; }
.reg-art img { width: auto; max-width: 100%; max-height: calc(100vh - var(--hdr-h) - 48px); object-fit: contain; border-radius: 6px; }

/* ---------- Mobil uygulama ---------- */
.app-page { padding-top: 24px; max-width: 1000px; }
.app-hero2 { display: grid; justify-items: center; gap: 12px; text-align: center; }
.app-hero2 h1 { color: var(--gold); font-size: 28px; font-weight: 900; letter-spacing: .5px; }
.app-hero2 p { color: #ccc; max-width: 560px; }
.app-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.app-pill { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; }
.app-pill:hover { background: var(--gold); }
.app-steps { margin-top: 32px; }
.as-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.as-track::-webkit-scrollbar { display: none; }
.as-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding: 12px; }
.as-text b { display: block; margin-bottom: 8px; color: var(--gold); font-size: 22px; font-weight: 900; }
.as-text p { font-size: 16px; color: #ddd; }
.as-visual { position: relative; display: grid; place-items: center; min-height: 390px; }
.as-panel { position: absolute; inset: 44px 8%; border-radius: 16px; background: linear-gradient(160deg, var(--gold), var(--gold-dark)); }
.phone-mock { position: relative; width: 190px; height: 370px; padding: 8px; border-radius: 30px; background: #111; border: 6px solid #2a2a2a; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.phone-screen { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; background: #0e0e0e; }
.ps-top img { width: 90px; margin: 4px auto; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ps-grid div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 6px; background: var(--surface-2); font-size: 10px; }
.ps-grid img { width: 26px; height: 26px; border-radius: 5px; }
.ps-step { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 6px; background: var(--gold); color: #111; font-weight: 800; font-size: 12px; }
.ps-step .ico, .ps-nav .ico { width: 16px; height: 16px; }
.ps-nav { display: flex; justify-content: space-around; color: var(--gold); }
.as-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.as-dots button { width: 28px; height: 4px; border-radius: 4px; background: #444; }
.as-dots button.active { background: var(--gold); }
.app-download { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.app-download h3 { font-size: 18px; margin-bottom: 6px; }
.app-download p { color: var(--muted); }
.qr-box { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.qr { width: 96px; height: 96px; padding: 6px; background: #fff; border-radius: var(--radius); flex: none; }
.qr svg { width: 100%; height: 100%; }

/* ---------- Bilgi sayfaları ---------- */
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; }
.page-title h1 { font-size: 22px; font-weight: 800; }
.page-title h1 span { color: var(--gold); }
.breadcrumb { color: var(--muted); font-size: 13px; }
.breadcrumb a:hover { color: var(--gold); }
.info-page, .menu-section { padding: 24px; display: grid; gap: 16px; max-width: 900px; }
.info-lead { font-size: 15px; color: #ddd; }
.info-page article h2 { font-size: 16px; color: var(--gold); margin-bottom: 6px; }
.info-page article p { color: #c9c9c9; }
.info-page a, .menu-section p a { color: var(--gold); text-decoration: underline; }
.menu-section h2 { font-size: 18px; }
.menu-section p { color: #c9c9c9; }
.menu-section-icon img, .menu-section-icon .ico { width: 56px; height: 56px; color: var(--gold); }
.side-icon { display: inline-grid; place-items: center; color: var(--gold); }
.demo-label { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 12px; }
.menu-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.menu-link-grid .btn { height: 48px; justify-content: flex-start; }
.menu-link-grid .ico { color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer { margin-top: 32px; background: #0A0A0A; border-top: 1px solid var(--border); }
.ft { max-width: 1300px; padding: 32px 16px 24px; }
.ft-top { display: flex; align-items: center; gap: 32px; }
.ft-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: none; }
.ft-brand img { width: 220px; height: auto; }
.ft-social { display: flex; gap: 10px; }
.soc { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: #fff; }
.soc:hover { background: var(--gold); color: #111; }
.soc .ico { width: 18px; height: 18px; }
.ft-rules { color: var(--gold); font-weight: 800; letter-spacing: .4px; white-space: nowrap; }
.ft-line { flex: 1; height: 1px; background: var(--border); }
.ft-mid { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 40px; padding: 24px 0; border-bottom: 1px solid #1f1f1f; }
.ft-partner small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.ft-partner-logo { font-size: 22px; font-weight: 900; color: var(--gold); letter-spacing: .3px; }
.ft-partner-logo b { color: #fff; font-weight: 600; margin-left: 3px; }
.ft-contact { display: grid; gap: 6px; font-size: 13px; color: #c9c9c9; }
.ft-contact i { font-style: normal; color: #444; margin: 0 10px; }
.ft-contact b { color: #fff; }
.ft-contact a:hover { color: var(--gold); }
.ft-badges { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.fb { height: 40px; min-width: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #3a3a3a; border-radius: 20px; color: #8a8a8a; font-size: 11px; }
.fb .ico { width: 18px; height: 18px; }
.fb-18 { width: 40px; padding: 0; justify-content: center; border: 2px solid #8a8a8a; border-radius: 50%; font-weight: 900; font-size: 13px; }
.ft-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 18px 0; font-size: 12.5px; color: #9a9a9a; }
.ft-links a:hover { color: var(--gold); }
.ft-seo { display: grid; gap: 8px; font-size: 12px; line-height: 1.6; color: #8a8a8a; }
.ft-seo h2 { font-size: 13px; color: #bbb; }
.ft-seo b, .ft-seo a { color: var(--gold); }
.ft-license { margin-top: 14px; font-size: 12px; color: #777; }
.ft-copy { margin-top: 8px; font-size: 12px; color: #777; }

/* ---------- Çekmece ---------- */
.drawer { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; background: var(--bg); transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.drawer.open { transform: none; visibility: visible; }
.drawer-head { flex: none; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; border-bottom: 1px solid var(--border); }
.drawer-head .brand img { height: 32px; }
.drawer-close .ico { width: 28px; height: 28px; }
.drawer-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.drawer-cats { overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-right: 1px solid #1d1d1d; scrollbar-width: none; }
.drawer-cats > a, .drawer-cats > button { flex: none; width: 84px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px 7px; border-radius: 8px; background: #1b1a17; color: #e4e4e4; font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; }
.drawer-cats img, .drawer-cats .side-icon, .drawer-cats .side-icon .ico { width: 36px; height: 36px; }
.drawer-cats .active { background: linear-gradient(180deg, #4d3e08 0%, #2b2306 100%); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(216, 174, 70, .5); }
.drawer-cats .active .i3d img { animation-duration: 1.4s; filter: drop-shadow(0 0 6px rgba(216, 174, 70, .6)); }
.drawer-panel { overflow-y: auto; padding: 10px 12px 24px; }
#drawer-search-wrap { margin-bottom: 8px; }
.search-field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.search-field .ico { width: 18px; height: 18px; color: var(--muted); }
.search-field input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; }
.search-clear { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); }
.search-clear .ico { width: 16px; height: 16px; }
.acc { border-bottom: 1px solid #222; }
.acc-head { width: 100%; display: flex; align-items: center; gap: 10px; height: 46px; text-align: left; }
.acc-ico { width: 28px; display: grid; place-items: center; color: var(--gold); }
.acc-badge { padding: 1px 4px; border-radius: 3px; background: var(--gold); color: #111; font-size: 10px; font-weight: 900; }
.acc-title { flex: 1; font-weight: 700; font-size: 14px; }
.chev { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); transition: transform .2s; }
.chev .ico { width: 16px; height: 16px; }
.acc.open .chev { transform: rotate(180deg); }
.acc-items { display: none; padding-bottom: 8px; }
.acc.open .acc-items { display: block; }
.acc-items a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; font-size: 13px; color: #ddd; border-radius: var(--radius); }
.acc-items a .ico { width: 18px; height: 18px; color: var(--gold); }
.acc-items a:hover { color: var(--gold); background: var(--surface); }

/* ---------- Alt panel ---------- */
.sheet { position: fixed; inset: 0; z-index: 1150; visibility: hidden; pointer-events: none; }
.sheet.open { visibility: visible; pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); opacity: 0; transition: opacity .2s; }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 60vh; overflow-y: auto; padding: 0 16px calc(16px + var(--safe-b)); background: var(--surface); border-radius: 12px 12px 0 0; transform: translateY(100%); transition: transform .25s ease; overscroll-behavior: contain; }
.sheet.open .sheet-box { transform: none; }
.sheet.slip-sheet .sheet-box { max-height: 80vh; }
.sheet-grip { width: 40px; height: 4px; margin: 8px auto 2px; border-radius: 4px; background: #444; }
.sh-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; background: var(--surface); }
.sh-head h2 { font-size: 16px; font-weight: 800; }
.sh-x { width: 36px; height: 36px; display: grid; place-items: center; color: var(--gold); }
.sh-x .ico { width: 22px; height: 22px; }
.qc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
.qc-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.qc-ico { position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; }
.qc-ico .g-art img { width: 70%; }
.qc-l { font-size: 10px; line-height: 1.15; color: #ddd; }
.qc-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.qc-more a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: 6px; background: var(--surface-2); font-size: 11.5px; line-height: 1.15; }
.qc-more img { width: 24px; height: 24px; border-radius: 5px; flex: none; }
.lg-list a { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid #2a2a2a; font-size: 14px; }
.lg-list a > span:not(.flag) { flex: 1; min-width: 0; }
.lg-list b { color: var(--muted); font-weight: 600; }
.sheet .slip { border: 0; background: transparent; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .74); }
.modal-box { position: relative; width: 520px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.modal-box.wide { width: 960px; padding: 16px; }
.modal-box.login { width: 420px; }
.modal-box.search { width: 640px; }
.modal-close { position: absolute; top: 10px; right: 10px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; }
.modal-close .ico { width: 20px; height: 20px; }
.modal-close:hover { color: var(--gold); }
.login-box { display: grid; gap: 12px; }
.login-box h2 { text-align: center; font-size: 20px; font-weight: 800; }
.lb-sub { text-align: center; font-size: 13px; color: var(--muted); }
.lb-sub a { color: var(--gold); }
.lb-msg { padding: 8px 10px; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid rgba(216, 174, 70, .4); color: var(--gold); font-size: 13px; }
.login-box .field { margin: 0; }
.login-box .field label { color: var(--muted); font-weight: 500; }
.lb-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: start; padding: 10px; border-radius: var(--radius); background: #151515; border: 1px solid var(--border); font-size: 12.5px; color: #ccc; }
.lb-info > .ico { width: 20px; height: 20px; color: var(--gold); }
.lb-social { grid-column: 2; display: flex; gap: 8px; }
.lb-social a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); }
.lb-social a:hover { background: var(--gold); color: #111; }
.lb-social .ico { width: 16px; height: 16px; }
.lb-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.lb-row .check { margin: 0; color: #ccc; }
.ms-title { font-size: 18px; margin-bottom: 12px; }
.gs-results { display: grid; gap: 4px; margin-top: 12px; max-height: 60vh; overflow: auto; }
.gs-item { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--radius); }
.gs-item:hover { background: var(--surface-2); }
.gs-ico { position: relative; flex: none; width: 60px; height: 40px; border-radius: var(--radius); overflow: hidden; }
.gs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-txt small { color: var(--muted); font-size: 12px; }
.gs-item > .ico { width: 16px; height: 16px; color: var(--muted); }

/* ---------- Toast ve sabit butonlar ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 1300; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--radius); background: #111; border: 1px solid var(--gold); color: #fff; font-size: 13.5px; text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s, visibility .2s; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fab-support { position: fixed; left: 16px; bottom: 16px; z-index: 800; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #111; animation: ring 2s infinite; }
.fab-support[hidden] { display: none !important; }
.fab-support .ico { width: 28px; height: 28px; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(216, 174, 70, .55); } 70% { box-shadow: 0 0 0 14px rgba(216, 174, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(216, 174, 70, 0); } }
.fab-top { position: fixed; right: 16px; bottom: 16px; z-index: 800; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #d9d9d9; color: #111; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility .2s; }
.fab-top.show { opacity: 1; visibility: visible; transform: none; }
.fab-top .ico { width: 22px; height: 22px; }
.slip-fab { display: none; }
.bottom-nav { display: none; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
.main-nav { justify-content: flex-start; }
.main-nav > a:first-child { margin-left: auto; }
.main-nav { gap: 22px; }
@media (max-width: 1439px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 14.5px; }
}

/* ---------- Tablet geniş: 1024–1279 ---------- */
@media (max-width: 1279px) {
  .sb-layout { grid-template-columns: 240px minmax(0, 1fr) 260px; }
  .ptile { height: 60px; padding: 0 12px; gap: 10px; }
  .ptile .ico { width: 36px; height: 36px; }
  .ptile b { font-size: 14px; }
  .brand-tile { height: 120px; }
  .ggrid { grid-template-columns: repeat(auto-fill, minmax(0, 165px)); }
  .band .ggrid > .game:nth-child(n+7) { display: none; }
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 14px; }
  .ft-badges { margin-left: 0; }
}

/* ---------- Tablet: 768–1023 ---------- */
@media (max-width: 1023px) {
  .header-top-inner { height: auto; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 60px 44px; grid-template-areas: "ham brand actions" "nav nav nav"; column-gap: 10px; }
  .hamburger { display: inline-flex; grid-area: ham; }
  .main-nav { border-top: 1px solid rgba(255, 255, 255, .06); }
  .main-nav > a:first-child { margin-left: 0; }
  .main-nav a { height: 44px; font-size: 14.5px; }
  .sb-layout { grid-template-columns: minmax(0, 1fr); }
  .sb-left, .sb-right { display: none; }
  body.is-sports .slip-fab { position: fixed; right: 16px; bottom: 76px; z-index: 800; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 24px; background: var(--gold); color: #111; font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
  .slip-fab .slip-count { min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: #111; color: var(--gold); font-size: 11px; }
  .ggrid { grid-template-columns: repeat(auto-fill, minmax(0, 150px)); }
  .band .ggrid > .game:nth-child(n+7) { display: none; }
  .winners.on-hero { margin: 10px 12px 0; }
  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-wrap { grid-template-columns: minmax(0, 1fr) 280px; }
  .tg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-top { flex-wrap: wrap; }
  .as-visual { min-height: 360px; }
}

/* ---------- ≥768: panel davranışı ---------- */
@media (min-width: 768px) {
  .sheet.side .sheet-box { left: auto; right: 0; top: 0; bottom: 0; width: 380px; max-height: none; border-radius: 0; transform: translateX(100%); padding-top: 12px; }
  .sheet.side.open .sheet-box { transform: none; }
  .sheet.side .sheet-grip { display: none; }
  .sheet:not(.side) .sheet-box { left: 50%; right: auto; width: min(560px, 100%); transform: translate(-50%, 100%); }
  .sheet.open:not(.side) .sheet-box { transform: translate(-50%, 0); }
  .drawer { right: auto; width: 440px; box-shadow: 0 0 40px rgba(0, 0, 0, .7); }
}

/* ---------- Mobil: <768 ---------- */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--bottombar-h) + var(--safe-b)); font-size: 13.5px; }
  .m-only { display: block !important; }
  .pc-only { display: none !important; }
  .container { padding: 0 12px; }
  .container-wide { padding: 0; }
  .app { padding: 12px 0 24px; }
  .section-title { font-size: 15px; }
  .see-all { font-size: 12.5px; }

  /* Header */
  .header-top-inner { height: 52px; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 52px; grid-template-areas: "ham brand actions"; column-gap: 6px; padding: 0 6px; }
  .hamburger { width: 36px; height: 40px; }
  .brand img { height: 34px; max-width: 110px; }
  .main-nav { display: none; }
  .header-actions { gap: 6px; align-self: center; }
  .hdr-app { width: 32px; height: 32px; border-width: 1.5px; }
  .hdr-app .ico { width: 17px; height: 17px; }
  .btn-register { height: 32px; padding: 0 10px; font-size: 12px; }
  .btn-login { height: 32px; padding: 0 4px; font-size: 13px; }
  .hdr-lang { display: none; }
  body.has-subnav .subnav { display: flex; height: 40px; align-items: stretch; background: #121212; border-top: 1px solid #2a2a2a; }
  .sn-scroll { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; }
  .sn-scroll::-webkit-scrollbar { display: none; }
  .sn-ico { flex: none; width: 44px; display: grid; place-items: center; color: var(--gold); }
  .sn-ico .ico { width: 20px; height: 20px; }
  .sn-item { position: relative; flex: none; display: inline-flex; align-items: center; padding: 0 12px; font-size: 13.5px; font-weight: 600; color: #ddd; white-space: nowrap; }
  .sn-item.active { color: var(--gold); }
  .sn-item.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--gold); }
  .sn-slip { position: relative; flex: none; width: 48px; display: grid; place-items: center; color: var(--gold); border-left: 1px solid #2a2a2a; }
  .sn-slip .ico { width: 22px; height: 22px; }
  .sn-slip .slip-count { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 8px; background: var(--live); color: #fff; font-size: 10px; font-weight: 800; }

  /* Alt bar */
  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--bottombar-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--surface); border-top: 1px solid var(--border); }
  .bn-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; font-size: 10px; color: #fff; }
  .bn-item .ico { width: 24px; height: 24px; color: var(--gold); }
  .bn-item > span:not(.ico) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bn-item.active > span:not(.ico) { color: var(--gold); }
  .bn-247 { position: absolute; top: 5px; left: calc(50% + 6px); padding: 0 4px; border-radius: 6px; background: var(--live); color: #fff; font-size: 8.5px; font-style: normal; font-weight: 800; line-height: 13px; }
  .bn-center { align-self: center; justify-self: center; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: var(--gold); color: #111; }
  .bn-center .ico { width: 30px; height: 30px; }
  .bn-tour span { font-weight: 800; font-size: 10.5px; }
  .bn-tour small { font-size: 9px; margin-left: 1px; }
  .fab-support, .fab-top, .slip-fab, body.is-sports .slip-fab { display: none; }
  .toast { bottom: calc(var(--bottombar-h) + var(--safe-b) + 14px); }

  /* Spor */
  .sb-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sb-left, .sb-right { display: none; }
  #sb-dyn { padding: 0 10px; }
  .sb-slider { border-radius: 0; }
  .app:has(.sb-layout) { padding-top: 0; }
  .slider-arrow { width: 26px; height: 26px; }
  .slider-arrow .ico { width: 15px; height: 15px; }
  .slider-arrow.prev { left: 6px; } .slider-arrow.next { right: 6px; }
  .ss-quick { display: flex; }
  body[data-page="bahis"] .ss-quick, body[data-page="canli-bahis"] .ss-quick { display: none; }
  .ss-item { width: 64px; height: 56px; }
  .pill { height: 32px; font-size: 12.5px; padding: 0 13px 0 9px; }
  .time-tabs .tab { height: 40px; padding: 0 10px; font-size: 13.5px; }
  .tab.active::after { height: 2px; }
  .lg-mk { display: none; }
  .mk-sel-m { display: inline-flex; margin-left: auto; }
  .lg-name { font-size: 13px; }
  .mrow { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 64px; padding: 10px 8px; }
  .m-status { display: none; }
  .m-sub { display: block; }
  .m-extra .m-more { display: none; }
  .mk { width: auto; grid-template-columns: repeat(3, 52px); }
  .mk-3.m3-kg { grid-template-columns: repeat(2, 52px); }
  .odd small { font-size: 9px; }
  .odd b { font-size: 13px; }
  .sb-list .mrow .mk { display: none; }
  .sb-list[data-mk="ms"] .mrow .mk-ms, .sb-list[data-mk="ou"] .mrow .mk-ou, .sb-list[data-mk="m3"] .mrow .mk-3 { display: grid; }
  .day-head { padding: 8px 4px; }

  /* Oyun ızgarası ve ana sayfa bandı */
  .ggrid { grid-template-columns: repeat(auto-fill, minmax(0, 117px)); gap: 8px; }
  .g-thumb { aspect-ratio: 117 / 156; border-radius: 8px; }
  .band { margin-top: 20px; padding: 20px 0; }
  .band-inner { padding: 0 10px; gap: 24px; }
  .band-inner .gsec { order: var(--mo); }
  .band .m-off { display: none; }
  .band .ggrid > .game:nth-child(n+7) { display: block; }
  .gsec .ggrid > .game.m-hide { display: none; }
  .more-m { display: flex; }
  .home-winners { margin-top: 20px; }
  .home-winners .section-title { margin-bottom: 10px; }

  /* Casino */
  .winners.on-hero { margin: 8px 10px 0; }
  .winners.on-hero .w-track { grid-template-columns: 1fr; }
  .winners.on-hero .w-item:nth-child(n+2) { display: none; }
  .winners.on-hero .w-img { width: 56px; height: 40px; }
  .c-tabs { height: 48px; padding: 0; gap: 0; margin-top: 8px; }
  .ct-arrow { display: none; }
  .ct-search { order: 0; width: 44px; height: 48px; padding: 0; border: 0; border-right: 1px solid var(--border); border-radius: 0; justify-content: center; color: var(--gold); }
  .ct-search .ico { color: var(--gold); }
  .c-tabs:not(.open) .ct-search input { display: none; }
  .c-tabs.open .ct-search { flex: 1; width: auto; padding: 0 12px; justify-content: flex-start; }
  .c-tabs.open .ct-scroll { display: none; }
  .ct-scroll .tab { font-size: 14px; padding: 0 12px; }
  .c-body { padding: 16px 10px 0; }
  .cv-title { font-size: 15px; }
  .gsec { margin-bottom: 24px; }
  .filter-pop { width: min(290px, calc(100vw - 24px)); }

  /* Promosyon */
  .promo-page .page-h { font-size: 18px; }
  .promo-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pc-desc { font-size: 13px; }
  .promo-tabs .tab { font-size: 14px; padding: 0 12px; }

  /* Modal: mobilde tam ekran */
  .modal { padding: 0; }
  .modal-box, .modal-box.wide, .modal-box.login, .modal-box.search, .modal-box.promo { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .modal-box { padding: 56px 16px 24px; }
  .modal-box.login { background: var(--bg); }
  .modal-box.promo { padding: 0; background: #fff; }
  .modal-box.wide { padding: 52px 12px 20px; }
  .pm-btns { position: static; display: flex; gap: 8px; padding: 12px 16px; background: var(--surface); }
  .pm-btns .btn { flex: 1; }
  .pm-rules { max-height: none; }

  /* Turnuva */
  .tour-page { padding-top: 16px; }
  .tour-card2 { padding: 12px; }
  .tour-card2 h2 { font-size: 16px; }
  .tc-plist { grid-auto-columns: minmax(130px, 1fr); }
  .tc-btns { grid-template-columns: 1fr; }
  .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader th, .leader td { padding: 9px 10px; }

  /* Kayıt */
  .reg-page { padding: 0; }
  .reg-page.container { padding: 0; }
  .app:has(.reg-page) { padding-top: 0; }
  .reg-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reg-art { display: none; }
  .reg-card { border-radius: 0; padding: 0 16px 24px; }
  .reg-top { position: relative; margin: 0 -16px 16px; }
  .reg-top-img { display: block; }
  .reg-top-img img { display: block; width: 100%; height: auto; }
  .reg-steps { position: absolute; left: 0; right: 0; bottom: 12px; justify-content: center; margin: 0; }
  .rs { width: auto; }
  .rs span { display: none; }
  .rs i { background: rgba(255, 255, 255, .92); }
  .rs-line { flex: 0 0 28px; margin-top: 19px; background: rgba(255, 255, 255, .6); }
  .f2 { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* Uygulama */
  .app-hero2 h1 { font-size: 22px; }
  .app-pill { height: 44px; padding: 0 18px; font-size: 14px; }
  .as-slide { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 8px 0; text-align: center; }
  .as-visual { min-height: 340px; }
  .app-download { flex-direction: column; text-align: center; padding: 18px 16px; }

  /* Footer */
  .site-footer { margin-top: 24px; }
  .ft { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 14px 20px; }
  .ft-top { order: 1; flex-direction: column; gap: 14px; }
  .ft-brand { align-items: center; }
  .ft-brand img { width: 160px; }
  .ft-line { display: none; }
  .ft-mid { display: contents; }
  .ft-partner { order: 2; margin-top: 18px; }
  .ft-contact { order: 3; margin-top: 14px; }
  .ft-contact > div { display: grid; gap: 6px; }
  .ft-contact i { display: none; }
  .ft-links { order: 4; justify-content: center; }
  .ft-seo { order: 5; text-align: left; }
  .ft-badges { order: 6; justify-content: center; margin: 16px 0 0; }
  .ft-license { order: 7; }
  .ft-copy { order: 8; }

  /* Alt panel */
  .sheet.cats { bottom: calc(var(--bottombar-h) + var(--safe-b)); }
  .sheet.cats .sheet-box { padding-bottom: 16px; }
  .info-page, .menu-section { padding: 16px; }
  .page-title h1 { font-size: 18px; }
}

/* ---------- Dar telefon: ≤374 ---------- */
@media (max-width: 374px) {
  .brand img { max-width: 96px; height: 30px; }
  .hdr-app { width: 28px; height: 28px; }
  .hdr-app .ico { width: 15px; height: 15px; }
  .btn-register { padding: 0 8px; font-size: 11.5px; height: 30px; }
  .btn-login { font-size: 12px; }
  .mk { grid-template-columns: repeat(3, 48px); }
  .mk-3.m3-kg { grid-template-columns: repeat(2, 48px); }
  .qc-grid { gap: 12px 4px; }
  .qc-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .ft-grid { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .ft-brand, .ft-col-rules { grid-column: span 1; }
  .ft-bottom { flex-direction: column; align-items: stretch; }
  .ft-bottom .ft-badges { justify-content: center; }
}
@media (max-width: 767px) {
  .ft-grid { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
  .ft-brand { align-items: center; }
  .ft-brand img { width: 160px; }
  .ft-col-rules .ft-h, .ft-col .ft-h { text-align: center; }
  .ft-rlinks { grid-template-columns: repeat(2, auto); justify-content: center; gap: 8px 18px; }
  .ft-cap { width: 92px; height: 156px; }
  .ft-cap-ico { width: 74px; height: 74px; }
  .ft-bottom { width: 100%; order: 5; }
}

/* 17 Ekim (2. tur) — Mobil hizalama Jojobet gibi (440 px referans): header sağı sığar, hızlı şerit
   kutusuz 7 öğe, zaman sekmeleri "Tüm Maçlar" dahil tek satır, maç listesi kenardan kenara,
   "Canlı Maçlar" başlığı yok. */
@media (max-width: 767px) {
  .header-top-inner { padding: 0 10px 0 4px; }
  .header-actions { gap: 5px; }
  .hdr-app { width: 30px; height: 30px; }
  .btn-register { padding: 0 9px; }
  #sb-dyn { padding: 0; }
  #sb-dyn > .ss-wrap, #sb-dyn > .pills, #sb-dyn > .time-tabs, #sb-dyn > .lg-filter { margin-left: 10px; margin-right: 10px; }
  .sport-strip { gap: 0; padding-right: 26px; }
  .ss-item { width: calc((100vw - 20px) / 7); min-width: 54px; height: 56px; background: transparent; border-radius: 0; }
  .ss-item:hover { background: transparent; }
  .ss-item span { max-width: 100%; font-size: 10.5px; }
  .ss-item.active { background: transparent; color: var(--gold); }
  .ss-item.active .ico { color: var(--gold); }
  .ss-item.active::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 2px; border-radius: 2px; background: var(--gold); }
  .time-tabs { display: flex; justify-content: space-between; overflow: hidden; }
  .time-tabs .tab { flex: none; padding: 0 6px; font-size: 12.5px; }
  .time-tabs .pc-only { display: inline !important; }
  .time-tabs .m-only { display: none !important; }
  .sb-list { margin-top: 4px; }
  .lg-group { border-radius: 0; margin-bottom: 4px; }
  .day-head:has(.live-dot) { display: none; }
  .day-head { padding: 8px 12px; }
}

/* 17 Ekim (3. tur) — Jojobet hizası (PC): kenar 6 px, sol ~%17,4, sağ ~%18,8, ara 8 px; kolonlar sayfayla
   birlikte akar (sticky / iç kaydırma yok); spor şeridi ve sol listeler gerçekçi 3D ikonlu. */
.sb-left, .sb-right { position: static; max-height: none; overflow: visible; }
@media (min-width: 1280px) {
  .container-wide.sb-layout { padding: 0 6px; grid-template-columns: clamp(240px, 17.4vw, 300px) minmax(0, 1fr) clamp(260px, 18.8vw, 320px); gap: 8px; }
  .app:has(.sb-layout) { padding-top: 4px; }
  .sb-center .ss-wrap { margin-top: 4px; }
  .sb-center .sport-strip { gap: 4px; }
  .sb-center .ss-item { width: 70px; height: 60px; gap: 3px; }
}
.ss-item .ss-3d { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); transition: transform .2s ease; }
.ss-item:hover .ss-3d { transform: translateY(-2px) scale(1.06); }
.ss-item .ss-count { top: 3px; right: 5px; min-width: 0; padding: 0; background: transparent; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 14px; }
.ss-item.active .ss-count { color: #111; }
.side-links .sp3d { width: 20px; height: 20px; flex: none; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.side-links.lg-links a { gap: 8px; }
.side-links.sp-links a { min-height: 34px; }
@media (max-width: 767px) { .ss-item .ss-3d { width: 28px; height: 28px; } .ss-item.active .ss-count { color: var(--gold); } }

/* 17 Ekim (3. tur) — Yükleme ekranı Jojobet/Matbet gibi: koyu zemin + geniş altın ışıma, ortada koyu daire
   içinde logo, çevresinde kalın parlayan altın halka; halkanın üstünde dönen beyaz-altın ışık, nefes alan parıltı. */
.preloader { background: radial-gradient(circle at 50% 50%, #5e480d 0, #45350a 14%, #261d07 28%, #110e07 46%, #080808 68%, #050505 100%); }
.preloader.route { background: radial-gradient(circle at 50% 50%, rgba(94, 72, 13, .98) 0, rgba(38, 29, 7, .98) 28%, rgba(10, 9, 7, .98) 52%, rgba(5, 5, 5, .98) 100%); }
.preloader-inner { gap: 0; }
.preloader-bar { display: none; }
.pl-ring { --plr: 9px; width: 236px; height: 236px; background: radial-gradient(circle at 50% 38%, #1d1d1d 0, #131313 58%, #0b0b0b 100%);
  box-shadow: inset 0 0 0 4px #272727, 0 0 0 var(--plr) #f5b818, 0 0 24px 12px rgba(255, 186, 28, .55), 0 0 90px 38px rgba(245, 168, 20, .26);
  animation: plGlow 2.4s ease-in-out infinite; }
.pl-ring::before { content: ""; position: absolute; inset: calc(var(--plr) * -1); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, #e3780f 0deg, #f5b818 90deg, #ffd34d 180deg, #f5b818 270deg, #e3780f 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--plr)), #000 calc(100% - var(--plr) + .5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--plr)), #000 calc(100% - var(--plr) + .5px)); }
.pl-ring::after { inset: calc(var(--plr) * -1); border: 0; filter: blur(1.5px);
  background: conic-gradient(from 0deg, rgba(255, 250, 225, 0) 0deg, rgba(255, 250, 225, .95) 38deg, rgba(255, 250, 225, 0) 92deg, rgba(255, 250, 225, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--plr)), #000 calc(100% - var(--plr) + .5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--plr)), #000 calc(100% - var(--plr) + .5px));
  animation: spin 2.2s linear infinite; }
#preloader-logo { width: 152px; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); animation: plLogo 2.4s ease-in-out infinite; }
@keyframes plGlow {
  0%, 100% { box-shadow: inset 0 0 0 4px #272727, 0 0 0 var(--plr) #f5b818, 0 0 22px 10px rgba(255, 186, 28, .50), 0 0 80px 32px rgba(245, 168, 20, .22); }
  50% { box-shadow: inset 0 0 0 4px #272727, 0 0 0 var(--plr) #f7bf22, 0 0 34px 16px rgba(255, 190, 32, .68), 0 0 120px 50px rgba(245, 168, 20, .34); }
}
@keyframes plLogo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (max-width: 767px) { .pl-ring { --plr: 8px; width: 196px; height: 196px; } #preloader-logo { width: 128px; } }
@media (prefers-reduced-motion: reduce) { .pl-ring, .pl-ring::after, #preloader-logo { animation: none; } }

/* 18 Ekim — Mobil alt menü Jojobet gibi: koyu bar, dolu altın ikonlar (30 px), beyaz 11 px yazılar,
   ortada kutusuz 2x2 altın kare (menü), sağda kupa + ödül tutarı. */
:root { --bottombar-h: 64px; }
.bottom-nav { background: #161616; border-top: 1px solid #262626; box-shadow: 0 -8px 20px rgba(0, 0, 0, .45); }
.bn-item { gap: 5px; font-size: 11px; font-weight: 500; color: #f1f1f1; letter-spacing: .1px; -webkit-tap-highlight-color: transparent; }
.bn-ico { display: block; flex: none; width: 30px; height: 30px; color: var(--gold); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); transition: transform .15s; }
.bn-item:active .bn-ico, .bn-center:active .bn-ico { transform: scale(.9); }
.bn-item.active > span { color: var(--gold); }
.bn-247 { display: none; }
.bn-center { width: 48px; height: 48px; border-radius: 0; background: none; color: var(--gold); -webkit-tap-highlight-color: transparent; }
.bn-center .bn-ico { width: 36px; height: 36px; }
.bn-tour span { font-weight: 500; font-size: 11px; }

/* 18 Ekim — Mobil/tablet ana slider: slider-03'ün mobil/tablet görsellerinde üst-alt beyaz bant gömülü.
   ≤1199 px'te .mz slaytı --mz kat büyütülür (overflow: hidden) → beyaz bantlar kutu dışında kalır. */
@media (max-width: 1199px) {
  .sb-slider .slider-slide.mz { background: #0b0a07; }
  .sb-slider .slider-slide.mz img { transform: scale(var(--mz, 1)); transform-origin: 50% 50%; }
}

/* 18 Ekim — Mobil header Jojobet ile aynı (≤767): üst satır 52 px (ince beyaz hamburger, ~104 px logo,
   31×30 altın çerçeveli uygulama düğmeleri, beyaz GİRİŞ, en sağda altın KAYIT OL), satırlar arası 3 px
   altın çizgi; alt satır 40 px #262626: siyah yuvarlak arama, ikonlu beyaz öğeler, siyah yuvarlak kupon
   + altın sayaç rozeti. */
@media (max-width: 767px) {
  .site-header { border-bottom: 0; }
  .header-top { border-bottom: 3px solid var(--gold); }
  .header-top-inner { height: 52px; grid-template-rows: 52px; column-gap: 8px; padding: 0 10px 0 4px; }
  .hamburger { width: 32px; height: 40px; color: #e8e8e8; }
  .hamburger .ico { width: 20px; height: 20px; stroke-width: 1.6; }
  .brand img { height: 42px; max-width: 108px; }
  .header-actions { gap: 8px; }
  .hdr-app { width: 31px; height: 30px; border-width: 2px; border-radius: 6px; }
  .hdr-app .ico { width: 17px; height: 17px; }
  .header-actions .btn-login { order: 3; height: 30px; padding: 0 2px; font-size: 13px; font-weight: 700; color: #fff; }
  .header-actions .btn-register { order: 4; height: 30px; padding: 0 10px; font-size: 13px; font-weight: 600; border-radius: 6px; }
  body.has-subnav .subnav { height: 40px; align-items: center; background: #262626; border-top: 0; padding: 0 8px 0 6px; }
  .sn-scroll { align-items: center; height: 100%; }
  .sn-ico { width: 32px; height: 32px; border-radius: 50%; background: #0b0b0b; color: #fff; margin-right: 6px; }
  .sn-ico .ico { width: 18px; height: 18px; }
  .sn-item { height: 100%; gap: 6px; padding: 0 9px; font-size: 13px; font-weight: 500; color: #f1f1f1; }
  .sn-item .ico { width: 17px; height: 17px; flex: none; }
  .sn-item.active { color: var(--gold); }
  .sn-item.active::after { display: none; }
  .sn-slip { width: 32px; height: 32px; border-left: 0; border-radius: 50%; background: #0b0b0b; color: #fff; margin-left: 6px; }
  .sn-slip .ico { width: 18px; height: 18px; }
  .sn-slip .slip-count { top: -5px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--gold); color: #111; font-size: 9.5px; font-weight: 800; line-height: 1; }
}
@media (max-width: 374px) {
  .brand img { height: 36px; max-width: 90px; }
  .header-top-inner { column-gap: 5px; padding-right: 5px; }
  .header-actions { gap: 3px; }
  .hdr-app { width: 28px; height: 28px; }
  .header-actions .btn-register { padding: 0 6px; font-size: 12px; }
  .header-actions .btn-login { font-size: 12px; }
  .sn-item { padding: 0 7px; font-size: 12.5px; }
}

/* 18 Ekim — Kategoriler (alt bar ortası) Jojobet gibi: 4×3 şeffaf oyun logosu + altında beyaz ad, ek kutu yok. */
.sheet.cats .sheet-box { background: #222; padding: 0 16px 12px; }
.sheet.cats .sheet-grip { display: none; }
.sheet.cats .sh-head { background: #222; padding: 14px 0 10px; }
.sheet.cats .sh-head h2 { font-size: 16px; font-weight: 700; color: #fff; }
.sheet.cats .sh-x { width: 32px; height: 32px; color: #bdbdbd; }
.sheet.cats .sh-x .ico { width: 20px; height: 20px; stroke-width: 1.6; }
.qc-logos { gap: 8px 6px; }
.qc-logos a { gap: 7px; padding: 4px 0 6px; border-radius: 8px; transition: background .15s; }
.qc-logos a:active, .qc-logos a:hover { background: rgba(255, 255, 255, .05); }
.qc-logo { flex: none; width: 54px; height: 36px; display: block; }
.qc-logo img { display: block; width: 54px; height: 36px; max-width: none; object-fit: cover; border-radius: 5px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.qc-logos .qc-l { font-size: 11px; font-weight: 600; line-height: 1.2; color: #f2f2f2; }

/* 18 Ekim — Liderlik tablosu görselli: üstte kupa/podyum görseli, ilk 3'e 3D madalya, her oyuncuya avatar. */
.leader-hero { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: #0b0b0b; }
.leader-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.leader-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(transparent, #191919); pointer-events: none; }
.leader td { vertical-align: middle; }
.leader th:first-child, .leader td:first-child { width: 64px; }
.leader .medal { display: block; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.leader .rank { margin-left: 4px; }
.leader .lp { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.leader .lp-av { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid #3a3a3a; background: #111; }
.leader tr.lr-1 .lp-av { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(216, 174, 70, .18); }
.leader tr.lr-2 .lp-av { border-color: #cfcfcf; }
.leader tr.lr-3 .lp-av { border-color: #c98a4b; }
.leader tbody tr.lr-1 { background: linear-gradient(90deg, rgba(216, 174, 70, .16), rgba(216, 174, 70, 0) 75%); }
.leader tbody tr.lr-2 { background: linear-gradient(90deg, rgba(207, 207, 207, .11), rgba(207, 207, 207, 0) 75%); }
.leader tbody tr.lr-3 { background: linear-gradient(90deg, rgba(201, 138, 75, .13), rgba(201, 138, 75, 0) 75%); }
.leader tbody tr.lr-1 td, .leader tbody tr.lr-2 td, .leader tbody tr.lr-3 td { padding-top: 8px; padding-bottom: 8px; }
.leader tbody tr.lr-1 td:nth-child(2) { font-weight: 700; color: #fff; }
@media (max-width: 767px) {
  .leader th:first-child, .leader td:first-child { width: 52px; }
  .leader .medal { width: 32px; height: 32px; }
  .leader .lp { gap: 8px; }
  .leader .lp-av { width: 30px; height: 30px; }
}

/* 18 Ekim — Kayıt (mobil) Jojobet düzeni: üstte ince geniş banner (1320×213 → ~6:1), adım kutuları banner'ın
   sağ altında yarı taşar (çizgisiz), beyaz form: normal ağırlıkta etiketler, 42 px alanlar, 50 px sarı buton,
   sola hizalı şartlar metni, altta açık gri boşluk. */
@media (max-width: 767px) {
  .reg-wrap { background: #efefef; padding-bottom: 48px; }
  .reg-card { padding: 0 24px 22px; }
  .reg-top { margin: 0 -24px 24px; }
  .reg-top-img img { aspect-ratio: 1320 / 213; object-fit: cover; }
  .reg-steps { left: auto; right: 24px; bottom: -14px; gap: 22px; justify-content: flex-end; }
  .rs-line { display: none; }
  .rs i { width: 27px; height: 27px; border: 2px solid #c4c4c4; border-radius: 2px; background: #fff; color: #9a9a9a; font-size: 13px; font-weight: 600; }
  .rs.active i { background: #111; border-color: #111; color: var(--gold); }
  .rs.done i { background: var(--gold); border-color: var(--gold); color: #111; }
  .reg-title { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: #111; }
  .reg-card .field { margin-bottom: 16px; }
  .reg-card .field label { margin-bottom: 8px; font-size: 13px; font-weight: 400; color: #222; }
  .reg-card .inp { height: 42px; border-color: #c8c8c8; }
  .reg-actions { margin-top: 26px; }
  .reg-actions .btn { height: 50px; font-size: 16px; font-weight: 600; border-radius: 4px; }
  .reg-note { text-align: left; color: #222; font-size: 13px; line-height: 1.4; }
  .reg-note.reg-terms { margin-top: 22px; }
  .reg-note a { color: #d9a400; font-weight: 400; text-decoration: none; }
  .reg-note:not(.reg-terms) a { font-weight: 700; }
}

/* 18 Ekim — Mobil footer Matbet sırası: logo → Telegram/X → GENEL KURALLAR VE ŞARTLAR (yalnız başlık) →
   Ödeme Yöntemleri → Sağlayıcılar → Sponsorluklar → iletişim e-postaları → açıklama metni → alt bağlantılar →
   iş ortağı → rozetler → lisans/telif. Kapsüller Matbet ölçüsünde (~80×130, aralık 34 px). PC değişmedi. */
@media (max-width: 767px) {
  .site-footer .ft { display: flex; flex-direction: column; align-items: center; padding-top: 26px; padding-bottom: 20px; }
  .ft-grid, .ft-brand, .ft-bottom, .ft-info { display: contents; }
  .ft-brand > a:first-child { order: 1; margin-bottom: 16px; }
  .ft-brand > a:first-child img { width: 170px; }
  .ft-social { order: 2; gap: 12px; }
  .ft-social .soc { width: 32px; height: 32px; }
  .ft-social .soc .ico { width: 17px; height: 17px; }
  .ft-col-rules { order: 3; margin-top: 46px; margin-bottom: -16px; }
  .ft-col-rules .ft-h { margin: 0; color: #f1f1f1; font-size: 15px; font-weight: 600; letter-spacing: .2px; }
  .ft-col-rules .ft-rlinks { display: none; }
  .ft-col:not(.ft-col-rules) { order: 4; margin-top: 34px; }
  .ft-col .ft-h { margin-bottom: 22px; font-size: 15px; font-weight: 600; }
  .ft-caps { gap: 34px; }
  .ft-cap { width: 86px; height: 134px; padding: 10px 2px 13px; border-radius: 43px; }
  .ft-cap-ico { width: 58px; height: 58px; }
  .ft-cap-t { line-height: 1.45; padding-top: 2px; }
  .ft-cap-t b { font-size: 9.5px; line-height: 1.45; white-space: nowrap; letter-spacing: -.1px; }
  .ft-cap-t { font-size: 9px; white-space: nowrap; letter-spacing: 0; }
  .ft-contact { order: 5; margin: 46px 0 0 !important; font-size: 11px; text-align: center; justify-items: center; gap: 4px; }
  .ft-contact > div { display: block; }
  .ft-contact i { display: inline; margin: 0 5px; }
  .ft-seo { order: 6; width: 100%; margin-top: 22px; text-align: left; font-size: 11.5px; }
  .ft .ft-links { order: 7; width: 100%; margin-top: 18px; padding: 16px 0; border-top: 1px solid #1f1f1f; justify-content: center; }
  .ft-partner { order: 8; margin-top: 18px; text-align: center; }
  .ft-bottom .ft-badges, .ft-badges { order: 9; margin: 18px 0 0; justify-content: center; }
  .ft-license { order: 10; width: 100%; text-align: center; }
  .ft-copy { order: 11; width: 100%; text-align: center; }
}


/* CATBET demo and crawler-visible route summaries */
.demo-strip { position: relative; z-index: 2; padding: 7px 14px; text-align: center; color: #F8E8BB; background: linear-gradient(90deg, #15120B, #211A0D, #15120B); border-bottom: 1px solid rgba(216,174,70,.35); font-size: 11px; font-weight: 700; letter-spacing: .45px; }
.seo-intro { margin-top: 18px; margin-bottom: 18px; padding: 18px 20px; background: linear-gradient(135deg, #14130F, #0B0B0A); border: 1px solid rgba(216,174,70,.36); border-left: 3px solid var(--gold); border-radius: 6px; }
.seo-intro h1 { margin: 4px 0 8px; color: var(--gold-bright); font-size: clamp(20px, 3vw, 30px); }
.seo-intro p { max-width: 900px; color: #D8D6D0; margin: 7px 0; }
.seo-kicker { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.demo-label, .demo-contact { color: #E4CE9A !important; font-size: 12px; }
.ft-contact { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* CATBET black-and-gold brand finish and no-JS SEO summary */
#preloader-logo img, .brand-tile img, .ft-brand img { mix-blend-mode: screen; }
.demo-strip {
  position: relative; z-index: 1; padding: 6px 12px; text-align: center;
  background: #090909; border-bottom: 1px solid rgba(216, 174, 70, .28);
  color: var(--gold-bright); font-size: 11px; font-weight: 800; letter-spacing: .08em;
}
.seo-intro {
  max-width: 1240px; margin: 24px auto; padding: clamp(22px, 4vw, 48px);
  border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px;
  background: radial-gradient(ellipse at 88% 8%, rgba(216, 174, 70, .12), transparent 42%), linear-gradient(145deg, #141311, #080808 72%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .32);
}
.seo-kicker { display: inline-block; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.seo-intro h1 { margin: 9px 0 14px; color: var(--gold-bright); font-size: clamp(26px, 4vw, 42px); letter-spacing: .015em; }
.seo-intro p { max-width: 70ch; margin: 0 0 12px; color: var(--silver); font-size: 15px; line-height: 1.65; }
.seo-intro .demo-label { padding-left: 12px; border-left: 2px solid var(--gold); color: var(--muted); font-size: 13px; }
.seo-intro .btn { margin-top: 5px; }
@media (max-width: 767px) {
  .demo-strip { padding: 6px 10px; font-size: 9px; letter-spacing: .04em; line-height: 1.4; }
  .seo-intro { margin: 14px 12px 20px; padding: 22px 18px; }
  .seo-intro p { font-size: 14px; }
}

/* CATBET: artwork-bound copy and consistent, uncropped panther banner frames. */
.panther-art { position: relative; background-color: #080807; isolation: isolate; }
.panther-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,3,3,.55), rgba(3,3,3,.12) 47%, transparent 70%); pointer-events: none; z-index: 1; }
.panther-art.copy-right::after { background: linear-gradient(270deg, rgba(3,3,3,.62), rgba(3,3,3,.12) 47%, transparent 70%); }
.panther-copy { position: absolute; z-index: 3; top: 50%; left: 6%; width: 42%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 9px; color: #fff; text-align: left; pointer-events: none; text-shadow: 0 2px 12px #000; }
.panther-copy.copy-right { left: auto; right: 6%; width: 40%; }
.panther-kicker { color: var(--gold); font-size: clamp(10px, 1vw, 14px); font-weight: 800; letter-spacing: 1.1px; line-height: 1.3; }
.panther-title { font-size: clamp(24px, 3.1vw, 46px); font-weight: 850; line-height: 1.08; letter-spacing: -.5px; text-wrap: balance; }
.panther-description { font-size: clamp(12px, 1.15vw, 16px); line-height: 1.4; max-width: 32ch; }
.panther-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin-top: 2px; padding: 7px 12px; border-radius: 4px; background: var(--gold); color: #111; text-shadow: none; font-size: 12px; line-height: 1.2; font-weight: 800; }
.panther-cta .ico { width: 15px; height: 15px; }
.sb-slider .slider-slide.panther-art { --vf: 1; --cy: .5; background: #080807; }
.sb-slider .slider-slide.panther-art picture { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; -webkit-mask-image: none; mask-image: none; }
.sb-slider .slider-slide.panther-art img { position: static; width: 100%; max-width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: right center; transform: none; }
.sb-slider .slider-slide.panther-art.copy-right img { object-position: left center; }
.sb-slider .panther-copy { gap: 5px; }
.sb-slider .panther-title { font-size: clamp(20px, 2.6vw, 30px); }
.sb-slider .panther-description { font-size: 13px; }
.hero-slider { aspect-ratio: 5120 / 760; border-radius: 0; }
.hero-slider .slider-track, .hero-slider .slider-slide { height: 100%; }
.hero-slider .slider-slide picture { display: block; width: 100%; height: 100%; }
.hero-slider .slider-slide img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; }
.hero-slider .slider-slide.panther-art img { object-position: right center; }
.hero-slider .panther-copy { left: 7%; width: 37%; gap: 4px; }
.hero-slider .panther-kicker { font-size: 10px; letter-spacing: .6px; }
.hero-slider .panther-title { font-size: clamp(20px, 2.1vw, 30px); }
.hero-slider .panther-description { font-size: 11px; line-height: 1.3; }
.hero-slider .panther-cta { min-height: 26px; padding: 5px 9px; font-size: 10px; }
/* Shared editorial treatment for the generated desktop category artwork. */
@media (min-width: 1024px) {
  .hero-slider .panther-copy.desktop-copy-only {
    left: 7%;
    width: 42%;
    gap: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
  }
  .hero-slider .desktop-copy-only .panther-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 27px;
    color: #e8d7ad;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 5px;
  }
  .hero-slider .desktop-copy-only .panther-brand-mark {
    display: block;
    flex: none;
    width: 138px;
    height: 27px;
    background: url('/assets/meritcat/meritcat-logo.png') center / contain no-repeat;
  }
  .hero-slider .desktop-copy-only .panther-category {
    padding-left: 10px;
    border-left: 1px solid rgba(216, 174, 70, .55);
  }
  .hero-slider .desktop-copy-only .panther-title {
    max-width: 23ch;
    color: #f1d47d;
    background: linear-gradient(180deg, #fff6d3 0%, #f7dc91 24%, #bd8730 50%, #f5d37d 64%, #ad771f 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .35px rgba(99, 59, 15, .65);
    filter: drop-shadow(0 1px 0 #573508) drop-shadow(0 3px 5px rgba(0, 0, 0, .9));
    font-size: clamp(29px, 2.85vw, 46px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.04em;
    text-transform: uppercase;
  }
  .hero-slider .desktop-copy-only .panther-description {
    max-width: 40ch;
    color: #f3efe6;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.35;
    margin-top: 6px;
  }
  .hero-slider .desktop-copy-only .panther-cta {
    min-height: 37px;
    margin-top: 10px;
    padding: 4px 5px 4px 14px;
    border: 1px solid #f2d982;
    border-radius: 2px;
    background: linear-gradient(180deg, #f8e5ac, #d9ac4d 54%, #ad7a29);
    color: #1b150b;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    box-shadow: inset 0 1px rgba(255, 255, 255, .6), 0 3px 10px rgba(0, 0, 0, .45);
  }
  .hero-slider .desktop-copy-only .panther-cta .ico {
    width: 26px;
    height: 26px;
    margin-left: 6px;
    border-radius: 2px;
    background: rgba(37, 27, 10, .16);
    color: #1b150b;
  }
  .hero-slider .slider-slide:hover .desktop-copy-only .panther-cta {
    background: linear-gradient(180deg, #fff1c7, #e9c16c 54%, #bd8a37);
  }
  .hero-slider .slider-slide:hover .desktop-copy-only .panther-cta .ico { background: rgba(37, 27, 10, .24); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-slider .panther-copy.desktop-copy-only { width: 43%; }
  .hero-slider .desktop-copy-only .panther-kicker { font-size: 9px; min-height: 19px; margin-bottom: 3px; gap: 5px; }
  .hero-slider .desktop-copy-only .panther-brand-mark { width: 99px; height: 19px; }
  .hero-slider .desktop-copy-only .panther-category { padding-left: 6px; }
  .hero-slider .desktop-copy-only .panther-title { font-size: 26px; }
  .hero-slider .desktop-copy-only .panther-description { font-size: 11px; margin-top: 3px; }
  .hero-slider .desktop-copy-only .panther-cta { min-height: 29px; margin-top: 6px; padding: 3px 4px 3px 9px; font-size: 10px; }
  .hero-slider .desktop-copy-only .panther-cta .ico { width: 20px; height: 20px; margin-left: 3px; }
}
@media (max-width: 1023px) {
  .hero-slider .desktop-copy-only,
  .hero-slider .slider-slide.desktop-art::after { display: none; }
}
.c-hero .winners.on-hero { position: relative; right: auto; bottom: auto; width: 100%; height: 58px; margin: 0; padding-left: 0; clip-path: none; background: #11100d; border-top: 1px solid #282217; }
.c-hero:has(.winners.on-hero) .hero-slider .slider-dots { right: 0; }
.pc-img.panther-art { position: relative; text-align: left; }
.pc-img.panther-art picture { aspect-ratio: 7 / 4; }
.pc-img.panther-art picture > img { width: 100%; height: 100%; object-fit: contain; }
.promo-copy { left: 5%; width: 46%; gap: 5px; }
.promo-copy .panther-kicker { font-size: 9px; letter-spacing: .4px; }
.promo-copy .panther-title { font-size: clamp(18px, 1.65vw, 26px); }
.promo-copy .panther-description { font-size: 11px; line-height: 1.3; }
.promo-copy .panther-cta { min-height: 26px; font-size: 10px; padding: 5px 8px; margin: 0; }
.pm-media.panther-art picture { display: block; }
.pm-media.panther-art picture > img { display: block; }
.modal-copy { left: 6%; width: 43%; }
.modal-copy .panther-title { font-size: clamp(24px, 3vw, 37px); }
.pm-media.panther-art .pm-btns { display: none; }
@media (max-width: 1199px) {
  .sb-slider .slider-slide.panther-art { aspect-ratio: 7 / 4; }
}
@media (max-width: 1023px) {
  .hero-slider { aspect-ratio: 1536 / 636; }
  .hero-slider .panther-copy { width: 40%; }
  .hero-slider .panther-title { font-size: clamp(24px, 3.5vw, 36px); }
}
@media (max-width: 767px) {
  .hero-slider { aspect-ratio: 840 / 464; }
  .hero-slider .slider-slide.panther-art img { object-fit: cover; object-position: right center; }
  .panther-copy { left: 6%; width: 44%; gap: 5px; }
  .panther-copy.copy-right { right: 5%; width: 43%; }
  .panther-kicker { font-size: 9px; letter-spacing: .35px; }
  .panther-title, .sb-slider .panther-title, .hero-slider .panther-title { font-size: clamp(19px, 5.8vw, 27px); line-height: 1.06; }
  .panther-description, .sb-slider .panther-description { font-size: 11px; line-height: 1.25; }
  .panther-cta { min-height: 27px; padding: 5px 8px; font-size: 10px; gap: 4px; }
  .hero-slider .panther-copy { left: 7%; width: 42%; }
  .promo-copy { left: 5%; width: 46%; }
  .promo-copy .panther-title { font-size: 20px; }
  .modal-copy { width: 45%; gap: 5px; }
  .modal-copy .panther-title { font-size: 22px; }
  .modal-copy .panther-description { font-size: 11px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-slider.live-casino-hero { aspect-ratio: 840 / 464; }
}
.hero-slider.live-casino-hero .slider-slide.panther-art img { object-fit: contain; object-position: center; }
.hero-slider.live-casino-hero .hero-brand-logo { display: block; width: 108px; max-width: 80%; height: auto; mix-blend-mode: screen; }
@media (max-width: 767px) {
  .hero-slider.live-casino-hero .slider-arrow { display: none; }
  .hero-slider.live-casino-hero .hero-brand-logo { width: 88px; }
}

/* Mobile editions of the desktop story banners keep artwork and live copy separate. */
@media (max-width: 1023px) {
  .hero-slider:has(.story-copy) .slider-arrow { display: none; }
  .hero-slider .panther-copy.desktop-copy-only.story-copy {
    display: flex;
    left: 5%;
    right: auto;
    width: 51%;
    gap: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,.95);
  }
  .hero-slider .story-copy .panther-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 18px;
    margin-bottom: 3px;
    color: #e8d7ad;
    font-size: clamp(7px, 1.9vw, 9px);
    font-weight: 800;
    letter-spacing: .02em;
  }
  .hero-slider .story-copy .panther-brand-mark {
    display: block;
    flex: none;
    width: clamp(68px, 19vw, 89px);
    height: 18px;
    background: url('/assets/meritcat/meritcat-logo.png') center / contain no-repeat;
  }
  .hero-slider .story-copy .panther-category {
    padding-left: 5px;
    border-left: 1px solid rgba(216,174,70,.55);
  }
  .hero-slider .story-copy .panther-title {
    max-width: 100%;
    color: #f1d47d;
    background: linear-gradient(180deg, #fff6d3, #f7dc91 27%, #bd8730 60%, #e7bd67 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(19px, 5.4vw, 25px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.035em;
    text-transform: uppercase;
  }
  .hero-slider .story-copy .panther-description {
    max-width: 26ch;
    margin-top: 5px;
    color: #f3efe6;
    font-size: clamp(9px, 2.3vw, 11px);
    font-weight: 650;
    line-height: 1.25;
  }
  .hero-slider .story-copy .panther-cta {
    min-height: 26px;
    margin-top: 7px;
    padding: 3px 4px 3px 8px;
    border: 1px solid #f2d982;
    border-radius: 2px;
    background: linear-gradient(180deg, #f8e5ac, #d9ac4d 54%, #ad7a29);
    color: #1b150b;
    font-size: 9px;
    font-weight: 850;
    line-height: 1.1;
    text-shadow: none;
  }
  .hero-slider .story-copy .panther-cta .ico {
    width: 17px;
    height: 17px;
    margin-left: 2px;
    border-radius: 2px;
    background: rgba(37,27,10,.16);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-slider:has(.story-copy) { aspect-ratio: 840 / 464; }
  .hero-slider .story-copy .panther-brand-mark { width: 120px; height: 25px; }
  .hero-slider .story-copy .panther-kicker { font-size: 12px; min-height: 25px; margin-bottom: 8px; }
  .hero-slider .story-copy .panther-title { font-size: clamp(32px, 4vw, 42px); }
  .hero-slider .story-copy .panther-description { font-size: 15px; margin-top: 9px; }
  .hero-slider .story-copy .panther-cta { font-size: 13px; min-height: 36px; margin-top: 12px; }
}

/* Brand-neutral fallback: no black CATBET sticker on unbranded provider games. */
.g-art-symbol { display: grid; place-items: center; width: 46%; max-width: 88px; aspect-ratio: 1; color: rgba(240,220,164,.36); }
.g-art-symbol .ico { width: 58%; height: 58%; stroke-width: 1; }

/* Shared desktop structure for every game catalog page:
   carousel, an overlaid winners rail, then the sticky category/search row. */
@media (min-width: 1024px) {
  .c-hero .winners.on-hero {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: min(50%, 760px);
    height: 58px;
    margin: 0;
    padding-left: 28px;
    border: 0;
    border-radius: 0;
    background: rgba(14, 14, 13, .84);
    backdrop-filter: blur(6px);
    clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%);
  }
  .c-hero .winners.on-hero .w-item {
    padding: 0 10px;
    border-left-color: rgba(255, 255, 255, .12);
  }
  .c-hero .winners.on-hero .w-item:first-child { border-left: 0; }
  .c-hero .hero-slider .slider-dots { right: 50%; }
  .c-tabs {
    height: 77px;
    background: #1b1b1d;
    border-bottom-color: #393939;
  }
  .c-tabs .ct-scroll .tab { font-size: 14px; }
  .c-tabs .ct-search {
    height: 48px;
    border-radius: 0;
    background: #121213;
    border-color: #47402d;
  }
  #c-body { scroll-margin-top: calc(var(--hdr-h) + 77px); }
}

/* One or two complete rows per lobby section at each breakpoint. */
@media (min-width: 1280px) { .c-body .ggrid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1279px) { .c-body .ggrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1023px) { .c-body .ggrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .c-body .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Progressive game catalog reveal on casino pages. */
.c-body .casino-more-wrap { position: relative; margin: 24px 0 8px; }
.c-body .casino-more-wrap::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border) 25%, var(--border) 75%, transparent); pointer-events: none; }
.c-body .casino-more { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-width: 232px; height: 46px; padding: 0 17px; border: 1px solid var(--gold); border-radius: 10px; background: var(--surface); color: var(--gold); box-shadow: 0 7px 24px #0005; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.c-body .casino-more:hover { transform: translateY(-2px); background: var(--gold); color: #14110a; box-shadow: 0 10px 25px #0007; }
.c-body .casino-more:focus-visible { outline: 2px solid #f6dc98; outline-offset: 3px; }
.c-body .casino-more .ico, .c-body .casino-more svg { width: 17px; height: 17px; flex: none; }
.c-body .casino-more small { display: grid; place-items: center; min-width: 33px; height: 22px; padding: 0 5px; border: 1px solid currentColor; border-radius: 6px; font-size: 11px; line-height: 1; opacity: .8; }
@media (max-width: 767px) { .c-body .casino-more-wrap { margin-top: 20px; } .c-body .casino-more { width: min(100%, 270px); } }
@media (prefers-reduced-motion: reduce) { .c-body .casino-more { transition: none; } }

/* MeritCat home stories: native slider proportions and restrained logo-yellow accents. */
.sb-slider .slider-slide.home-story { background: #0b0b0b; }
.sb-slider .slider-slide.home-story picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform: none; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.sb-slider .slider-slide.home-story img { position: static; display: block; width: 100%; max-width: none; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; transform: none; }
.sb-slider .slider-slide.home-story::after { background: linear-gradient(90deg, rgba(4,4,4,.24), transparent 55%); }
.sb-slider .home-story .panther-copy { left: 5.5%; width: 41%; gap: 4px; text-shadow: 0 2px 12px rgba(0,0,0,.75); }
.sb-slider .home-story .panther-kicker { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; color: #f8b800; font-size: clamp(9px, .82vw, 11px); font-weight: 800; letter-spacing: .08em; }
.sb-slider .home-story .panther-brand-mark { display: block; flex: none; width: clamp(86px, 10vw, 122px); height: clamp(20px, 2.4vw, 29px); background: url('/assets/meritcat/meritcat-logo.png') left center / contain no-repeat; }
.sb-slider .home-story .panther-category { padding-left: 8px; border-left: 1px solid rgba(248,184,0,.65); }
.sb-slider .home-story .panther-title { color: #f5f0e7; font-size: clamp(21px, 2.25vw, 32px); font-weight: 820; letter-spacing: -.035em; line-height: 1.05; }
.sb-slider .home-story .panther-description { color: #e6e0d4; font-size: clamp(11px, .85vw, 13px); line-height: 1.3; max-width: 31ch; }
.sb-slider .home-story .panther-cta { margin-top: 5px; min-height: 29px; padding: 6px 10px; border: 1px solid #f8b800; border-radius: 4px; background: #f8b800; color: #171306; font-size: 10px; font-weight: 800; }
@media (max-width: 767px) {
  .sb-slider .home-story .panther-copy { left: 10%; width: 43%; gap: 3px; }
  .sb-slider .home-story .panther-kicker { gap: 4px; font-size: 8px; letter-spacing: .01em; }
  .sb-slider .home-story .panther-brand-mark { width: 76px; height: 18px; }
  .sb-slider .home-story .panther-category { padding-left: 4px; }
  .sb-slider .home-story .panther-title { font-size: clamp(18px, 5.1vw, 24px); }
  .sb-slider .home-story .panther-description { font-size: 10px; line-height: 1.2; }
  .sb-slider .home-story .panther-cta { min-height: 25px; margin-top: 3px; padding: 4px 7px; font-size: 9px; }
}

/* Tournament artwork keeps the image story; exact brand and prize remain editable HTML. */
.tour-art { position: relative; display: block; width: 100%; aspect-ratio: 7 / 4; overflow: hidden; background: #0c0c0c; color: #f8f3e8; }
.tour-art picture, .tour-art picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tour-art-copy { position: absolute; z-index: 1; top: 50%; left: 5%; width: 47%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; text-shadow: 0 2px 12px #000; pointer-events: none; }
.tour-art-0 .tour-art-copy, .tour-art-1 .tour-art-copy { left: 28%; width: 44%; align-items: center; text-align: center; }
.tour-art-copy img { display: block; width: clamp(115px, 14vw, 180px); max-width: 78%; height: auto; max-height: 34px; object-fit: contain; filter: drop-shadow(0 2px 5px #000); }
.tour-art-copy small { color: #f8b800; font-size: clamp(11px, 1.25vw, 15px); font-weight: 850; letter-spacing: .14em; line-height: 1.15; }
.tour-art-copy strong { color: #fff9ec; font-size: clamp(21px, 2.5vw, 30px); font-weight: 900; letter-spacing: -.04em; line-height: 1.03; text-wrap: balance; }
.tour-art-copy b { color: #f8b800; font-size: clamp(30px, 3.4vw, 44px); font-weight: 900; letter-spacing: -.055em; line-height: 1; white-space: nowrap; }
.tour-art-copy em { color: #d5d2ca; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .13em; }
.tg-modal > .tour-art { border-radius: var(--radius); }
@media (max-width: 767px) {
  .tour-art-copy { left: 5%; width: 47%; gap: 2px; }
  .tour-art-0 .tour-art-copy, .tour-art-1 .tour-art-copy { left: 28%; width: 44%; }
  .tour-art-copy img { width: 105px; max-height: 22px; }
  .tour-art-copy small { font-size: 9px; letter-spacing: .08em; }
  .tour-art-copy strong { font-size: clamp(14px, 3.9vw, 19px); line-height: 1.04; }
  .tour-art-copy b { font-size: clamp(22px, 6vw, 30px); }
  .tour-art-copy em { font-size: 8px; letter-spacing: .06em; }
}

/* Tournament listing: active pair first, then upcoming and completed side by side. */
@media (min-width: 1024px) {
  .tour-page .tour-head { max-width: none; margin: 0 0 22px; }
  .tour-page .tour-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 22px; }
  .tour-page .tour-list .tour-card2 { width: 100%; max-width: none; height: 100%; }
  .tour-page .tour-card2 .tc-body { flex: 1; }
  .tour-page .tour-card2 .tc-btns { margin-top: auto; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .tour-page .tc-plist { grid-auto-columns: calc((100% - 12px) / 2); column-gap: 12px; }
}