/* ═══════════════════════════════════════════
   REKABET — Koyu mavi + beyaz tema
   ═══════════════════════════════════════════ */
:root {
  --bg: #040b1f;
  --bg-2: #071330;
  --surface: #0b1a3d;
  --surface-2: #112552;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);

  --blue: #2563eb;
  --blue-2: #3b82f6;
  --sky: #60a5fa;
  --ice: #dbeafe;
  --deep: #0b2a7a;

  --text: #ffffff;
  --text-2: #c2cee8;
  --text-3: #7b8db8;

  --font: 'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
  --italic: 'Barlow', 'Outfit', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--text); background: var(--bg); min-height: 100vh; overflow-x: hidden; isolation: isolate; }
/* Arka plan: logo + REKABET yazısı eğik ve soluk şekilde tekrar eder */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: -1; pointer-events: none;
  background: url(img/bg-pattern.svg) 0 0 / 520px 220px repeat;
  opacity: .075; transform: rotate(-14deg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 700px at 80% -10%, rgba(37, 99, 235, .18), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgba(37, 99, 235, .10), transparent 60%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
i[data-ico] { display: inline-flex; font-style: normal; }

/* ── Logo ── */
.logo { display: inline-flex; align-items: center; font-family: var(--italic); font-style: italic; font-weight: 900; font-size: 30px; letter-spacing: -.01em; line-height: 1; }
.logo-img { width: 48px; height: 48px; margin-right: 10px; border-radius: 12px; border: 1px solid rgba(232, 196, 104, .45); box-shadow: 0 0 18px rgba(37, 99, 235, .45), 0 4px 12px rgba(0, 0, 0, .5); }
.logo-r { color: #fff; }
.logo-b { padding-right: .08em; color: #7cc4ff; text-shadow: 0 0 14px rgba(124, 196, 255, .35); }
.logo.small { font-size: 24px; }
.logo.small .logo-img { width: 40px; height: 40px; }

/* ── Butonlar ── */
.btn { height: 40px; padding: 0 16px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .2s, box-shadow .2s, transform .15s; }
.btn:active { transform: scale(.97); }
.btn-dark { background: #1a2547; border: 1px solid var(--line-2); }
.btn-dark:hover { background: #22305a; }
.btn-blue { background: linear-gradient(180deg, var(--blue-2), var(--blue)); box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .8), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-blue:hover { box-shadow: 0 8px 24px -6px rgba(59, 130, 246, .95), inset 0 1px 0 rgba(255,255,255,.25); }

/* ── Header ── */
.header { position: sticky; top: 0; z-index: 50; background: rgba(4, 11, 31, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-top { position: relative; isolation: isolate; overflow: hidden; height: 66px; padding: 0 28px; display: flex; align-items: center; gap: 24px; }

/* Işık geçişi: üst barın üzerinden soldan sağa süzülen parlama */
.header-top::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(96, 165, 250, .10) 35%, rgba(191, 219, 254, .28) 50%, rgba(96, 165, 250, .10) 65%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  animation: header-sweep 5s cubic-bezier(.45, .05, .25, 1) infinite;
}
/* Alt kenarda akan ince mavi ışık çizgisi */
.header-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .9) 45%, #fff 50%, rgba(96, 165, 250, .9) 55%, transparent) no-repeat;
  background-size: 40% 100%;
  animation: header-line 5s cubic-bezier(.45, .05, .25, 1) infinite;
}
@keyframes header-sweep { 0% { transform: translateX(-120%) skewX(-18deg); } 55%, 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes header-line { 0% { background-position: -60% 0; } 55%, 100% { background-position: 160% 0; } }

/* Işık sağa ulaşınca Kayıt Ol butonunda parlama */
.btn-blue { position: relative; overflow: hidden; }
.btn-blue::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-150%) skewX(-20deg);
  animation: glint 5s ease-in-out 2.2s infinite;
}
@keyframes glint { 0% { transform: translateX(-150%) skewX(-20deg); } 18%, 100% { transform: translateX(330%) skewX(-20deg); } }
/* Logo ışık geçerken hafifçe parlar */
.logo-img { animation: logo-glow 5s ease-in-out infinite; }
@keyframes logo-glow { 0%, 100% { box-shadow: 0 0 18px rgba(37, 99, 235, .45), 0 4px 12px rgba(0, 0, 0, .5); } 8% { box-shadow: 0 0 30px rgba(147, 197, 253, .9), 0 4px 12px rgba(0, 0, 0, .5); } }

/* #sabit: ekran görüntüsünde ışık logonun yanında dursun */
.shot .header-top::before, .shot .header-top::after { animation-delay: -.9s; animation-play-state: paused; }
.shot .btn-blue::after, .shot .logo-img { animation-play-state: paused; }
.search { display: flex; align-items: center; gap: 10px; width: 170px; height: 40px; padding: 0 8px 0 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-3); transition: width .25s, border-color .2s; }
.search:focus-within { width: 300px; border-color: var(--blue-2); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: inherit; font-size: 14px; color: #fff; }
.search input::placeholder { color: var(--text-2); }
.search kbd { font-family: inherit; font-size: 10px; font-weight: 600; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 5px; white-space: nowrap; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; color: var(--text-3); }
.flag { width: 22px; height: 15px; border-radius: 2px; stroke: none; }

.nav { display: flex; justify-content: center; gap: 4px; padding: 0 20px 10px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex-shrink: 0; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: color .2s, background .2s; }
.nav a i { font-size: 16px; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav a.active { color: var(--sky); background: rgba(59, 130, 246, .14); }

/* ── Sayfa ── */
.page { max-width: 1840px; margin: 0 auto; padding: 0 44px 40px; display: flex; flex-direction: column; gap: 22px; }

/* ── Ana banner ── */
.hero { position: relative; height: 342px; border-radius: 0 0 14px 14px; overflow: hidden; isolation: isolate;
  background: linear-gradient(100deg, #0a1f5c 0%, #0d2a7c 38%, #103a9e 62%, #0b2266 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(118deg, transparent 0 14%, rgba(255,255,255,.06) 14% 26%, transparent 26% 100%),
    linear-gradient(118deg, transparent 0 58%, rgba(96,165,250,.10) 58% 72%, transparent 72% 100%),
    radial-gradient(60% 90% at 80% 50%, rgba(96,165,250,.35), transparent 70%); }
.slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 92px; opacity: 0; transform: translateX(30px); transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.slide.active { opacity: 1; transform: none; pointer-events: auto; }
.slide-copy { max-width: 900px; }
.big-row { display: flex; align-items: center; gap: 18px; }
.big-num { font-family: var(--font); font-weight: 900; font-size: 168px; line-height: .8; letter-spacing: -.04em; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, #bfdbfe 0%, var(--sky) 45%, var(--blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 24px rgba(37,99,235,.45)); }
.big-num small { font-size: 104px; margin-right: 4px; }
.big-title { font-weight: 900; font-size: 64px; line-height: 1.02; letter-spacing: -.01em; text-shadow: 0 6px 24px rgba(0,0,0,.35); }
.kicker { display: block; font-size: 21px; font-weight: 800; letter-spacing: .01em; margin-bottom: 6px; }
.slide-text { display: flex; gap: 12px; align-items: flex-start; max-width: 680px; margin-top: 20px; font-size: 15.5px; font-weight: 500; line-height: 1.55; text-transform: uppercase; color: rgba(255,255,255,.88); }
.slide-text i { font-size: 30px; color: var(--sky); margin-top: -2px; }
.pill-cta { display: inline-flex; margin-top: 16px; height: 36px; align-items: center; padding: 0 18px; border-radius: 20px; font-weight: 800; font-size: 17px; letter-spacing: .02em;
  background: linear-gradient(180deg, #2a3f75, #142a5e); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: background .2s; }
.pill-cta:hover { background: linear-gradient(180deg, var(--blue-2), var(--blue)); }

.slide-art { position: relative; width: 560px; height: 100%; flex-shrink: 0; }
.glow { position: absolute; right: 80px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(147,197,253,.45), transparent 65%); z-index: -1; }
.coin { position: absolute; display: grid; place-items: center; border-radius: 50%; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 32% 28%, #dbeafe 0%, #60a5fa 28%, #1d4ed8 70%, #0b2a7a 100%);
  box-shadow: inset 0 -10px 24px rgba(0,0,0,.35), inset 0 8px 18px rgba(255,255,255,.35), 0 24px 50px -10px rgba(0,0,0,.6);
  border: 6px solid rgba(219,234,254,.55); text-shadow: 0 4px 12px rgba(0,0,0,.35); animation: bob 5s ease-in-out infinite; }
.coin.c1 { width: 250px; height: 250px; right: 150px; top: 46px; font-size: 130px; }
.coin.c2 { width: 170px; height: 170px; right: 20px; top: 150px; font-size: 86px; animation-delay: -1.6s; transform: rotate(14deg); }
.coin.c3 { width: 120px; height: 120px; right: 380px; top: 196px; font-size: 58px; animation-delay: -3s; opacity: .9; }
@keyframes bob { 50% { translate: 0 -12px; } }
.chip { position: absolute; border-radius: 50%; animation: bob 5s ease-in-out infinite;
  background: repeating-conic-gradient(#fff 0 12deg, var(--blue) 12deg 30deg);
  box-shadow: 0 24px 50px -10px rgba(0,0,0,.6); }
.chip::after { content: "R"; position: absolute; inset: 18%; border-radius: 50%; display: grid; place-items: center; font-family: var(--italic); font-style: italic; font-weight: 900; color: #fff; background: radial-gradient(circle at 35% 30%, #3b82f6, #0b2a7a); border: 3px dashed rgba(255,255,255,.6); }
.chip.k1 { width: 230px; height: 230px; right: 160px; top: 54px; } .chip.k1::after { font-size: 80px; }
.chip.k2 { width: 150px; height: 150px; right: 30px; top: 170px; animation-delay: -1.8s; } .chip.k2::after { font-size: 52px; }
.chip.k3 { width: 110px; height: 110px; right: 400px; top: 200px; animation-delay: -3.2s; } .chip.k3::after { font-size: 38px; }
.shield { position: absolute; right: 150px; top: 50%; translate: 0 -50%; width: 240px; height: 240px; display: grid; place-items: center; font-size: 170px; color: #fff; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); animation: bob 5s ease-in-out infinite; }
.shield svg { stroke-width: 1.3; fill: rgba(59,130,246,.35); }

.dots { position: absolute; right: 22px; bottom: 14px; display: flex; gap: 8px; z-index: 5; }
.dots button { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.45); transition: width .3s, background .3s; }
.dots button.active { width: 22px; background: #fff; }

/* ── Kategori kartları ── */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.cat { position: relative; height: 136px; border-radius: 16px; overflow: hidden; isolation: isolate; display: flex; align-items: center; padding-left: 26px;
  background: linear-gradient(110deg, #123b9c 0%, #0d2a78 48%, #0a1d55 100%);
  border: 2px solid rgba(96,165,250,.35); box-shadow: 0 10px 30px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .25s, border-color .25s, box-shadow .25s; }
.cat::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(118deg, transparent 0 34%, rgba(255,255,255,.08) 34% 52%, transparent 52%),
    linear-gradient(118deg, transparent 0 62%, rgba(96,165,250,.16) 62% 100%); }
.cat[style*="--photo"] { background:
  linear-gradient(105deg, #123b9c 0%, rgba(13, 42, 120, .94) 40%, rgba(10, 29, 85, .55) 75%, rgba(10, 29, 85, .35) 100%),
  var(--photo) right center / 62% auto no-repeat,
  #0a1d55; }
.cat:hover { transform: translateY(-4px); border-color: rgba(147,197,253,.8); box-shadow: 0 16px 34px -12px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.12); }
.cat-text { position: relative; z-index: 2; display: flex; flex-direction: column; font-family: var(--italic); font-style: italic; font-weight: 900; font-size: clamp(18px, 1.5vw, 30px); line-height: 1.02; letter-spacing: -.01em; text-shadow: 0 4px 14px rgba(0,0,0,.45); }
.cat-text em { font-style: italic; color: rgba(255,255,255,.18); -webkit-text-stroke: 1.5px rgba(219,234,254,.85); text-shadow: none; }
.cat-art { position: absolute; right: -14px; bottom: -6px; top: -6px; width: 42%; display: grid; place-items: center; z-index: 1; }
.cat-art svg { width: 100%; height: 100%; stroke: none; filter: drop-shadow(-8px 10px 18px rgba(0,0,0,.45)); transition: transform .35s; }
.cat:hover .cat-art svg { transform: scale(1.06) rotate(-3deg); }

/* ── Geniş bant ── */
.wide-banner { position: relative; height: 200px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate;
  background:
    radial-gradient(55% 110% at 50% 50%, rgba(15, 44, 120, .55), rgba(5, 15, 43, .92) 75%),
    url(img/slot.jpg) center 55% / cover no-repeat,
    #050f2b;
  border: 1px solid var(--line); }
.wb-side { position: absolute; top: 0; bottom: 0; width: 34%; z-index: -1; opacity: .9; }
.wb-side.left { left: 0; background: repeating-linear-gradient(118deg, rgba(96,165,250,.16) 0 14px, transparent 14px 40px), linear-gradient(90deg, #0d2a78, transparent); }
.wb-side.right { right: 0; background: repeating-linear-gradient(62deg, rgba(96,165,250,.16) 0 14px, transparent 14px 40px), linear-gradient(270deg, #0d2a78, transparent); }
.wb-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wb-kicker { font-size: 13px; font-weight: 800; letter-spacing: .3em; color: var(--sky); }
.wb-center strong { font-family: var(--italic); font-style: italic; font-weight: 900; font-size: 62px; line-height: 1.05; text-shadow: 0 6px 26px rgba(37,99,235,.6); }
.wb-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 22px; font-weight: 800; }
.wb-cta i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--blue); box-shadow: 0 0 0 6px rgba(59,130,246,.25); }
.wb-timer { position: absolute; right: 28px; bottom: 22px; display: flex; gap: 6px; }
.wb-timer span { min-width: 52px; padding: 6px 4px; border-radius: 8px; text-align: center; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); }
.wb-timer b { display: block; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wb-timer small { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--text-3); }

/* ── Oyun şeritleri ── */
.row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.row-head h2 { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; }
.rh-ico { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; background: var(--surface); border: 1px solid var(--line); }
.row-ctrl { display: flex; align-items: center; gap: 8px; }
.all { display: flex; align-items: center; gap: 2px; margin-right: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.all:hover { color: #fff; }
.arrow { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); transition: all .2s; }
.arrow:hover { background: var(--blue); color: #fff; border-color: transparent; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * 16px) / 8); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.track::-webkit-scrollbar { display: none; }

.game { scroll-snap-align: start; position: relative; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.game:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(37,99,235,.6); }
.game-art { position: relative; aspect-ratio: 1 / 1.12; display: grid; place-items: center; overflow: hidden; }
.game-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px); }
.game-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3, 10, 30, .75)); }
.game-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-art .glyph { position: relative; z-index: 1; font-size: 64px; color: #fff; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.game-art .glyph svg { stroke-width: 1.4; }
.game-art .title { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; font-weight: 800; font-size: 15px; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.tag { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 3px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .06em; background: #fff; color: var(--deep); }
.tag.hot { background: #ef4444; color: #fff; }
.tag.jp { background: linear-gradient(135deg, #fde68a, #d4a017); color: #3b2a00; }
.game-meta { display: flex; justify-content: space-between; padding: 9px 10px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.game-meta b { color: var(--sky); font-weight: 700; }
.game-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(4, 11, 31, .55); opacity: 0; transition: opacity .2s; }
.game-play span { height: 38px; padding: 0 20px; border-radius: 8px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; background: linear-gradient(180deg, var(--blue-2), var(--blue)); box-shadow: 0 8px 20px -6px rgba(37,99,235,.9); }
.game-play span svg { fill: currentColor; stroke: none; }
.game:hover .game-play { opacity: 1; }

/* ── Oyun sağlayıcıları (footer) ── */
.foot-providers h3 { font-size: 15px; font-weight: 700; color: var(--text-2); letter-spacing: .04em; margin-bottom: 14px; }
.prov-list { display: grid; grid-template-columns: repeat(11, 1fr); gap: 12px; }
.prov { height: 84px; padding: 0 14px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); transition: all .2s; }
.prov img { max-width: 100%; max-height: 38px; object-fit: contain; transition: transform .25s; }
.prov.icon img { max-height: 52px; }
.prov.invert img { filter: brightness(0) invert(1); }
.prov.knock img { max-height: 46px; filter: invert(1); mix-blend-mode: screen; } /* beyaz zeminli logo: zemini yok et */
.prov.sm img { max-height: 26px; }
.prov:hover { color: #fff; border-color: rgba(96,165,250,.6); background: var(--surface-2); transform: translateY(-3px); }
.prov:hover img { transform: scale(1.08); }

.trust { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 4px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust span { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); }
.trust span i { font-size: 18px; color: var(--sky); }
.trust .age { width: 28px; height: 28px; font-size: 10px; }

/* ── Footer ── */
.footer { margin-top: 10px; padding: 28px 0 10px; border-top: 1px solid var(--line); }
.foot-top { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 22px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; }
.foot-links a { font-size: 14px; color: var(--text-2); }
.foot-links a:hover { color: #fff; }
.socials { display: flex; gap: 8px; }
.socials a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--surface); border: 1px solid var(--line); }
.socials a:hover { background: var(--blue); }
.foot-bottom { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 12.5px; color: var(--text-3); }
.age { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; border: 2px solid rgba(255,255,255,.5); flex-shrink: 0; }

.bottombar { display: none; }

/* ── Duyarlı ── */
@media (max-width: 1600px) {
  .track { grid-auto-columns: calc((100% - 6 * 16px) / 7); }
  .big-num { font-size: 140px; } .big-num small { font-size: 88px; }
  .big-title { font-size: 54px; }
}
@media (max-width: 1360px) {
  .page { padding: 0 24px 40px; }
  .slide { padding: 0 48px; }
  .slide-art { width: 420px; }
  .coin.c1, .chip.k1 { right: 90px; } .coin.c3, .chip.k3 { right: 300px; }
  .cats { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .cat { height: 116px; padding-left: 16px; }
  .track { grid-auto-columns: calc((100% - 5 * 16px) / 6); }
  .prov-list { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1100px) {
  .nav { justify-content: flex-start; }
  .big-num { font-size: 110px; } .big-num small { font-size: 70px; }
  .big-title { font-size: 42px; } .kicker { font-size: 16px; }
  .slide-art { opacity: .5; position: absolute; right: -80px; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .track { grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; }
}
@media (max-width: 768px) {
  .header-top { height: 58px; padding: 0 16px; gap: 12px; }
  .logo { font-size: 22px; }
  .logo-img { width: 38px; height: 38px; margin-right: 7px; border-radius: 10px; }
  .search { display: none; }
  .btn { height: 36px; padding: 0 12px; font-size: 13px; }
  .lang { display: none; }
  .nav { padding: 0 12px 8px; }
  .nav a { font-size: 13px; height: 32px; padding: 0 10px; }
  .page { padding: 0 12px 100px; gap: 16px; }
  .hero { height: 300px; }
  .slide { padding: 0 20px; align-items: center; }
  .big-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .big-num { font-size: 76px; } .big-num small { font-size: 48px; }
  .big-title { font-size: 28px; } .kicker { font-size: 12px; }
  .slide-text { font-size: 11.5px; margin-top: 10px; max-width: 75%; }
  .slide-text i { font-size: 20px; }
  .pill-cta { font-size: 13px; height: 32px; }
  .slide-art { right: -190px; opacity: .45; }
  .cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat:last-child { grid-column: 1 / -1; }
  .cat { height: 96px; padding-left: 14px; border-radius: 12px; }
  .cat-text { font-size: 17px; }
  .cat-art { width: 38%; right: -18px; }
  .wide-banner { height: 150px; }
  .wb-center strong { font-size: 30px; }
  .wb-cta { font-size: 15px; }
  .wb-timer { display: none; }
  .track { grid-auto-columns: 38%; gap: 10px; }
  .game-art .glyph { font-size: 44px; }
  .game-art .title { font-size: 13px; }
  .prov-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .prov { height: 66px; padding: 0 10px; }
  .prov img { max-height: 28px; }
  .prov.icon img { max-height: 40px; }
  .arrow { display: none; }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 66px; justify-content: space-around; align-items: center;
    background: rgba(7, 19, 48, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); }
  .bottombar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
  .bottombar a i { font-size: 20px; }
  .bottombar a.active { color: var(--sky); }
  .bottombar .bb-mid i { width: 54px; height: 54px; margin-top: -28px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff;
    background: linear-gradient(180deg, var(--blue-2), var(--blue)); border: 4px solid var(--bg); box-shadow: 0 8px 22px -4px rgba(37,99,235,.8); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Platform logosu (alt bilgi) ── */
.platform { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.platform-logo { display: inline-flex; padding: 8px 18px; border-radius: 12px; background: linear-gradient(180deg, #22c55e, #15803d); border: 1px solid #4ade80; animation: neon-green 2.4s ease-in-out infinite; transition: transform .2s; }
.platform-logo:hover { transform: scale(1.06); }
.platform-logo img { height: 46px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55)); }
@media (max-width: 768px) { .platform-logo { padding: 7px 14px; } .platform-logo img { height: 38px; } }

/* Üst bar: Giriş Yap yanında canlı destek butonu */
.btn-chat { position: relative; width: 40px; padding: 0; justify-content: center; font-size: 19px; color: #7cc4ff; }
.btn-chat::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px var(--bg); }
@keyframes neon-green {
  0%, 100% { box-shadow: 0 0 4px #22c55e, 0 0 10px rgba(34, 197, 94, .55), 0 0 18px rgba(34, 197, 94, .25); }
  50% { box-shadow: 0 0 6px #4ade80, 0 0 16px rgba(74, 222, 128, .85), 0 0 30px rgba(74, 222, 128, .45); }
}

/* ── Sağ alt iletişim butonları ── */
.rk-float { position: fixed; right: 18px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rk-float-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 50px; height: 50px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .7); transition: transform .2s; }
.rk-float-btn:hover { transform: translateY(-2px) scale(1.05); }
.rk-float-btn span { font-size: 14px; }
.rk-float-btn.wa { width: 50px; padding: 0; background: #25d366; }
.rk-float-btn.tg { width: 50px; padding: 0; background: #229ed9; }
.rk-float-btn.chat { background: linear-gradient(180deg, var(--blue-2), var(--blue)); position: relative; }
.rk-float-btn.chat::after { content: ""; position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .3); animation: pulse-dot 1.8s infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
@media (max-width: 768px) { .rk-float { bottom: 84px; right: 12px; } .rk-float-btn.chat span { display: none; } .rk-float-btn.chat { width: 50px; padding: 0; } }