/* =========================================================
   CoinBet — Kırmızı / Beyaz tema (coinbet108.com)
   style.css'ten SONRA yüklenir: düzen style.css'te kalır,
   renkler, yüzeyler ve animasyonlar burada yeniden tanımlanır.
   Koyu "ada"lar (footer, maç başlığı, jackpot, çark…) yerel
   değişkenlerle beyaz yazıya döner.
   ========================================================= */
:root {
    --bg: #f3f4f7;
    --bg-2: #ffffff;
    --panel: #ffffff;
    --card: #ffffff;
    --card-2: #f3f4f7;
    --card-3: #e7e9ee;
    --line: #eceef2;
    --line-2: #dcdfe6;
    --text: #17181c;
    --text-2: #3d414b;
    --muted: #6b7180;
    --dim: #9aa0ad;
    --accent: #e30a17;
    --accent-2: #ff2d3d;
    --accent-3: #b3000f;
    --accent-ink: #ffffff;
    --teal: #d90416;
    --coin: #f5b301;
    --gold: #ffd84d;
    --violet: #7c3aed;
    --blue: #2563eb;
    --green: #12a150;
    --red: #e11d2e;
    --orange: #f97316;
    --grad-accent: linear-gradient(135deg, #ff3445 0%, #e30a17 48%, #a8000f 100%);
    --grad-red: linear-gradient(100deg, #9e0016 0%, #e30a17 38%, #ff2a3f 52%, #d1001a 68%, #8a0012 100%);
    --grad-coin: linear-gradient(135deg, #ffe17a 0%, #ffc72c 45%, #f59a00 100%);
    --grad-violet: linear-gradient(135deg, #2b2d35, #121318);
    --hover: rgba(227, 10, 23, .06);
    --ring: 0 0 0 3px rgba(227, 10, 23, .16);
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;
    --shadow: 0 14px 40px rgba(40, 8, 14, .16);
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -4px rgba(16, 24, 40, .08);
    --shadow-accent: 0 10px 24px -6px rgba(227, 10, 23, .55);
    color-scheme: light;
}

/* ---------- Koyu adalar: beyaz yazı, cam yüzeyler ---------- */
.footer, .match-hero, .jp-mega, .wallet-balance, .tour-hero, .event-card, .wheel-page, .acc-user, .acc-tile.is-main,
.game-stage, .pay-band, .sb-head, .slip-head, .auth-art, .bnr, .pstrip, .casino-hero, .acc-promo, .lg-head, .site-popup-art {
    --text: #ffffff;
    --text-2: rgba(255, 255, 255, .86);
    --muted: rgba(255, 255, 255, .74);
    --dim: rgba(255, 255, 255, .52);
    --line: rgba(255, 255, 255, .13);
    --line-2: rgba(255, 255, 255, .24);
    --panel: rgba(255, 255, 255, .07);
    --card: rgba(255, 255, 255, .09);
    --card-2: rgba(255, 255, 255, .13);
    --card-3: rgba(255, 255, 255, .2);
    --bg-2: rgba(0, 0, 0, .22);
    --teal: var(--gold);
    --accent-2: #ffd1d6;
    --hover: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ---------- Temel ---------- */
body { background: var(--bg); color: var(--text); }
body::before {
    content: "";
    position: fixed;
    inset: -20vmax;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40vmax 34vmax at 12% 18%, rgba(227, 10, 23, .07), transparent 70%),
        radial-gradient(36vmax 30vmax at 88% 72%, rgba(255, 45, 61, .06), transparent 70%),
        radial-gradient(28vmax 26vmax at 60% 8%, rgba(245, 179, 1, .045), transparent 70%);
}
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline-color: var(--accent); }
::-webkit-scrollbar-thumb { background: #d3d6dd; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.muted { color: var(--muted); }
.gold { color: var(--teal); }

/* Sayfa üstü kaydırma çubuğu (theme.js ekler) */
.scroll-prog { position: fixed; left: 0; top: 0; z-index: 75; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, #fff, var(--gold) 40%, #fff 70%, var(--gold)); box-shadow: 0 0 12px rgba(255, 216, 77, .8); pointer-events: none; }

/* ---------- Logo ---------- */
.wm-coin i {
    background: linear-gradient(100deg, #b3000f 0%, #e30a17 24%, #ff8a94 44%, #ffffff 50%, #ff2d3d 60%, #b3000f 100%);
    background-size: 320% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    /* Parıltı sürekli dönmez (her karede yeniden boyama): açılışta iki tur, sonra üzerine gelince */
    animation-iteration-count: 1, 2;
}
.brand:hover .wm-coin i { animation: wm-shine 1.6s linear; }
.wm-bet i { color: #16171b; text-shadow: none; }
.brand:hover .wm-bet i { animation: wm-wave .55s ease both; animation-delay: calc((var(--i) - 4) * 60ms); }
@keyframes wm-wave { 40% { transform: translateY(-5px); color: var(--accent); } }
/* Kırmızı zeminde (başlık, menü başı, footer, giriş görseli) beyaz + altın */
.hdr .wm-coin i, .sb-head .wm-coin i, .footer .wm-coin i, .intro .wm-coin i, .auth-art .wm-coin i {
    background-image: linear-gradient(100deg, #ffffff 0%, #ffe3e6 30%, #ffffff 44%, #ffd84d 50%, #ffffff 58%, #ffe3e6 80%, #ffffff 100%);
}
.hdr .wm-bet i, .sb-head .wm-bet i, .footer .wm-bet i, .intro .wm-bet i, .auth-art .wm-bet i { color: var(--gold); text-shadow: 0 2px 10px rgba(80, 0, 10, .35); }
.hdr .coin-glow { background: radial-gradient(circle, rgba(255, 216, 77, .7), transparent 65%); }

/* ---------- Giriş animasyonu: kırmızı perde, daire içinden açılır ---------- */
.show-intro .intro {
    background: radial-gradient(circle at 50% 44%, #ff3347 0%, #d2001b 38%, #8a0012 72%, #4a0008 100%);
    animation: intro-out .7s cubic-bezier(.7, 0, .3, 1) 1.5s forwards;
    clip-path: circle(150% at 50% 44%);
}
@keyframes intro-out { to { clip-path: circle(0% at 50% 44%); visibility: hidden; } }
.intro-rays { background: repeating-conic-gradient(rgba(255, 255, 255, .1) 0 8deg, transparent 8deg 20deg); }
.intro::before, .intro::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); width: 160px; height: 160px; animation: intro-ring 1.6s ease-out infinite; }
.intro::after { animation-delay: .55s; }
@keyframes intro-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.intro-tag { color: rgba(255, 255, 255, .85); }
.intro-bar { background: rgba(255, 255, 255, .22); }
.intro-bar span { background: linear-gradient(90deg, #fff, var(--gold)); }

/* ---------- Butonlar ---------- */
.btn { border-radius: var(--r-sm); font-weight: 700; transition: transform .18s, box-shadow .25s, background .2s, color .2s, border-color .2s, filter .2s; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-gold { background: var(--grad-accent); background-size: 160% 160%; background-position: 0 0; color: #fff; box-shadow: var(--shadow-accent); }
.btn-gold:hover { background: var(--grad-accent); background-size: 160% 160%; background-position: 100% 100%; filter: brightness(1.06); box-shadow: 0 14px 30px -8px rgba(227, 10, 23, .7); transform: translateY(-1px); }
.btn-gold::after { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-120%); }
.btn-gold:hover::after { transition: transform .75s; transform: translateX(120%); }
.btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { background: var(--hover); border-color: var(--accent); color: var(--accent); }
.btn-dark { background: var(--card-2); border: 1px solid var(--line); color: var(--text); }
.btn-dark:hover { background: var(--card-3); border-color: var(--line-2); }
.btn-violet { background: linear-gradient(135deg, #2b2d35, #111216); color: #fff; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .5); }
.btn-violet:hover { background: linear-gradient(135deg, #3a3c46, #18191e); }
.btn-green { background: linear-gradient(135deg, #22c55e, #0e9f4d); color: #fff; }
.btn-red, .btn-danger { background: linear-gradient(135deg, #ff4757, #d90416); color: #fff; }
.icon-btn { color: var(--muted); }
.icon-btn:hover { background: var(--hover); color: var(--accent); }
.ripple { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .28; transform: scale(0); animation: ripple .65s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Üst başlık: akan kırmızı bar + beyaz menü ---------- */
/* Kırmızı degrade zeminler sabit durur: background-position animasyonu her karede tüm alanı yeniden boyuyordu */
.hdr { background: var(--grad-red); background-size: 260% 100%; background-position: 50% 0; border-bottom: 0; box-shadow: 0 10px 30px -12px rgba(150, 0, 20, .45); }
.hdr::before { content: ""; position: absolute; inset: 0 0 auto; height: 62px; pointer-events: none; overflow: hidden;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 18px); }
/* Işık süzmesi yalnız transform ile kayar (left animasyonu her karede yerleşim hesaplatıyordu) */
.topbar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; transform: translateX(-140%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); animation: hdr-sweep 7s ease-in-out infinite; }
@keyframes hdr-sweep { 0%, 55% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(600%) skewX(-18deg); } }
.topbar > * { position: relative; z-index: 1; }
.hdr-quick a, .hdr-clock { background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); color: #fff; border-radius: 10px; }
.hdr-quick a:hover { background: #fff; color: var(--accent); border-color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(80, 0, 10, .5); }
.hdr-quick a:first-child .ic { color: inherit; }
.hdr-quick a:first-child { position: relative; }
.hdr-quick a:first-child::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #2bff88; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); animation: blink 1.6s infinite; }
.hdr-clock .ic { color: rgba(255, 255, 255, .8); }
.bal-pill { background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .24); color: #fff; border-radius: 10px; }
.bal-pill:hover { border-color: #fff; background: rgba(0, 0, 0, .26); }
.bal-pill small { color: rgba(255, 255, 255, .78); }
.bal-val.is-flash { animation: bal-flash 1s ease; }
@keyframes bal-flash { 30% { color: var(--gold); text-shadow: 0 0 14px rgba(255, 216, 77, .9); } }
.hdr .btn-gold, .sb-auth .btn-gold { background: #fff; color: var(--accent); box-shadow: 0 8px 20px -8px rgba(60, 0, 8, .55); }
.hdr .btn-gold:hover { background: #fff; color: var(--accent-3); }
/* Dikkat çeken parıltı: gölge nabzı yerine düğmenin içinden geçen ışık (transform) */
.hdr .btn-gold::after { background: linear-gradient(115deg, transparent 35%, rgba(227, 10, 23, .22) 50%, transparent 65%); animation: btn-shine 3.2s ease-in-out infinite; }
.hdr .btn-gold:hover::after { animation: none; }
@keyframes btn-shine { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.hdr .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); }
.hdr .btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.umenu-btn { color: #fff; border-radius: 10px; }
.umenu-btn:hover { background: rgba(255, 255, 255, .12); }
.umenu-btn .ic { color: rgba(255, 255, 255, .85); }
.hdr .avatar { background: #fff; color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.hdr .icon-btn { color: #fff; }
.hdr .icon-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.hdr-nav { position: relative; background: #fff; border-top: 0; box-shadow: 0 1px 0 var(--line); }
.hdr-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--gold) 50%, var(--accent) 80%, transparent); opacity: .85; }
.hdr-nav-in { position: relative; }
.hn-item { color: #2b2e36; font-weight: 600; border-radius: 10px; transition: background .2s, color .2s; }
.hn-item:hover { background: #fff3f4; color: var(--accent); }
.hn-ic { background: #fff0f1; color: var(--accent); border-radius: 9px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; }
.hn-item:hover .hn-ic { transform: translateY(-2px) rotate(-8deg) scale(1.08); background: var(--accent); color: #fff; }
.hn-item.is-active { background: var(--grad-accent); color: #fff; box-shadow: 0 10px 22px -10px rgba(227, 10, 23, .8); overflow: hidden; }
.hn-item.is-active::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; transform: translateX(-110%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: hn-sweep 4.5s ease-in-out infinite; }
@keyframes hn-sweep { 0%, 55% { transform: translateX(-110%) skewX(-20deg); } 100% { transform: translateX(440%) skewX(-20deg); } }
.hn-item.is-active .hn-ic { background: rgba(255, 255, 255, .22); color: #fff; }
.hn-item > .ic { color: var(--dim); }
.hn-count { top: 2px; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.hn-ink { position: absolute; bottom: 3px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); pointer-events: none;
    transition: left .4s cubic-bezier(.3, 1.3, .5, 1), width .4s cubic-bezier(.3, 1.3, .5, 1), opacity .2s; opacity: 0; }
.hdr-nav-in:hover .hn-ink { opacity: 1; }

/* Açılır menüler */
.dropdown { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 44px -12px rgba(30, 6, 10, .28); transform: translateY(-8px) scale(.98); transform-origin: top right; }
[data-dropdown].is-open .dropdown { transform: none; }
.dropdown a { color: var(--text-2); border-radius: 9px; }
.dropdown a:hover { background: #fff3f4; color: var(--accent); }
.dropdown a:hover .ic { transform: translateX(2px); }
.dropdown .ic { transition: transform .2s; }
.dd-head { border-bottom-color: var(--line); }
.dd-head b { color: var(--text); }
.dd-admin { color: var(--accent) !important; font-weight: 700 !important; }

/* Mobil çekmece */
.sidebar { background: #fff; border-right: 0; padding-top: 0; }
.nav-open .sidebar { box-shadow: 24px 0 60px rgba(40, 0, 8, .3); }
.sb-head { margin: 0 -12px; padding: 14px 16px; background: var(--grad-red); background-size: 220% 100%; background-position: 50% 0; border-bottom: 0; }
.sb-head .icon-btn { color: #fff; }
.sb-head .icon-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.sb-auth .btn-gold { background: var(--grad-accent); color: #fff; animation: none; }
.sb-link { color: var(--text-2); border-radius: 10px; }
.sb-link .ic { color: var(--accent); }
.sb-link:hover { background: #fff3f4; color: var(--accent); }
.sb-link.is-active { background: linear-gradient(90deg, rgba(227, 10, 23, .12), rgba(227, 10, 23, .02)); color: var(--accent); }
.sb-group + .sb-group { border-top-color: var(--line); }
.scrim, .slip-scrim { background: rgba(30, 4, 8, .45); }

/* Bölüm alt menüsü */
.subnav a { background: #fff; border: 1px solid var(--line); color: var(--text-2); border-radius: 999px; box-shadow: var(--shadow-card); transition: .2s; }
.subnav a .ic { color: var(--accent); }
.subnav a:hover { color: var(--accent); border-color: rgba(227, 10, 23, .35); transform: translateY(-1px); }
.subnav a.is-active { background: var(--grad-accent); border-color: transparent; color: #fff; box-shadow: var(--shadow-accent); }
.subnav a.is-active .ic { color: #fff; }

/* ---------- Ortak yüzeyler ---------- */
.card, .lg, .market-card, .coupon, .stat, .vip-level, .sport-nav, .lc, .winner, .feature, .quick a, .day-tabs a, .rtp-card, .promo-card, .acc-tile, .acc-sum > div, .acc-msg {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}
.card, .lg, .market-card, .coupon, .stat, .vip-level, .sport-nav, .lc, .promo-card, .table-wrap, .feature, .winner, .quick a { border-radius: var(--r-lg); }
.table-wrap { border-color: var(--line); background: #fff; }
.table th { background: #f7f8fa; color: var(--muted); }
.table td { border-top-color: var(--line); }
.table tr:hover td { background: #fff7f7; }
.empty { background: #fafafb; border-color: var(--line-2); }
.section-head h2 { position: relative; padding-bottom: 8px; font-size: 18px; font-weight: 800; }
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.section-head h2 .ic, .section-head h2 .sp-ic { color: var(--accent); }
.section-head .more { color: var(--muted); font-weight: 700; }
.section-head .more:hover { color: var(--accent); }
.section-head .more .ic { transition: transform .2s; }
.section-head .more:hover .ic { transform: translateX(3px); }
.page-title .ic { color: var(--accent); }

.alert { border-radius: var(--r); }
.alert-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.alert-error { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.alert-warn { background: #fff7ed; border-color: #fed7aa; color: #b54708; }

.chip { background: #fff; border: 1px solid var(--line); color: var(--text-2); border-radius: 999px; }
.chip:hover { color: var(--accent); border-color: rgba(227, 10, 23, .35); }
.chip.is-active { background: var(--grad-accent); border-color: transparent; color: #fff; box-shadow: var(--shadow-accent); }
.chip .n { background: rgba(0, 0, 0, .06); }
.chip.is-active .n { background: rgba(255, 255, 255, .25); }
/* "Canlı" etiketinin dalgası ayrı katmanda büyür (box-shadow animasyonu her karede boyatıyordu) */
.live-tag { position: relative; background: var(--accent); color: #fff; border-radius: 5px; }
.live-tag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(227, 10, 23, .55); pointer-events: none; animation: live-ping 1.8s ease-out infinite; }
@keyframes live-ping { from { transform: scale(1); opacity: 1; } 70%, to { transform: scale(1.18, 1.6); opacity: 0; } }
.clock { color: var(--green); }

.field label { color: var(--text-2); }
.field input, .field select, .field textarea, .input { background: #fff; border: 1px solid var(--line-2); color: var(--text); border-radius: var(--r-sm); }
.field input:hover, .field select:hover, .field textarea:hover, .input:hover { border-color: #c6cad3; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
.check { color: var(--muted); }
.check span { background: #fff; border-color: #c9cdd6; }
.check input:checked + span { background: var(--accent); border-color: var(--accent); animation: bump .35s ease; }

.tabs { background: #f1f2f5; border: 1px solid var(--line); border-radius: 12px; }
.tabs a, .tabs button { color: var(--muted); border-radius: 9px; }
.tabs a:hover, .tabs button:hover { color: var(--accent); }
.tabs .is-active { background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-accent); }

.st-pending { background: #eff6ff; color: #1d4ed8; }
.st-won, .st-completed, .st-active { background: #ecfdf3; color: #067647; }
.st-lost, .st-rejected, .st-banned { background: #fef3f2; color: #b42318; }
.st-void, .st-cancelled, .st-finished { background: #f2f4f7; color: #475467; }
.st-cashout { background: #fff1f2; color: var(--accent); }
.st-live { background: #fee4e2; color: #d92d20; }
.st-upcoming { background: #f4f3ff; color: #5925dc; }

.flag { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.team-shield svg { fill: #f1f2f5; stroke: #d6d9e0; }
.team-shield b { color: #3a3d46; }
.match-hero .team-shield svg { fill: rgba(255, 255, 255, .15); stroke: rgba(255, 255, 255, .45); }
.match-hero .team-shield b { color: #fff; }

/* ---------- Oran butonları ---------- */
.odd { background: #f2f3f6; border: 1px solid transparent; border-radius: 9px; transition: background .15s, border-color .15s, transform .12s, box-shadow .2s; }
.odd:hover { background: #fff0f1; border-color: rgba(227, 10, 23, .35); }
.odd:hover .odd-v { color: var(--accent); }
.odd-l { color: var(--muted); }
.odd-v { color: var(--text); }
.odd.is-picked { background: var(--grad-accent); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(227, 10, 23, .8); animation: odd-pick .38s cubic-bezier(.3, 1.6, .5, 1); }
.odd.is-picked .odd-l, .odd.is-picked .odd-v { color: #fff; }
@keyframes odd-pick { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.odd.is-locked { background: #f4f4f6; }
.odd.is-empty { background: #f7f7f9; }
.mr-more { background: #f2f3f6; color: var(--text-2); border-radius: 9px; }
.mr-more:hover { background: var(--accent); color: #fff; }

/* ---------- Bülten ---------- */
.sport-nav { background: #fff; }
.sport-nav h3 { color: var(--dim); }
.sn-link { color: var(--text-2); border-radius: 9px; }
.sn-link:hover { background: #fff3f4; color: var(--accent); }
.sn-link.is-active { background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-accent); }
.sn-link .lv { background: #fee4e2; color: #d92d20; }
.sn-leagues a { color: var(--muted); }
.sn-leagues a:hover, .sn-leagues a.is-active { color: var(--accent); background: #fff3f4; }
.sn-search input, .bl-search input { background: #fff; border: 1px solid var(--line-2); color: var(--text); border-radius: 9px; }
.sn-search input:focus, .bl-search input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.lg { overflow: hidden; }
.lg-head { background: var(--grad-red); background-size: 200% 100%; background-position: 30% 0; border-bottom: 0; }
.lg-title, .lg-title:hover { color: #fff; }
.lg-title .ic, .lg-title .sp-ic { color: #fff; }
.mh b { color: rgba(255, 255, 255, .75); }
.mh-sub { color: #fff; }
.mrow { border-top-color: var(--line); }
.mrow:hover { background: #fff7f7; }
.mrow.is-goal, .lc.is-goal { animation: goal-flash 1.6s ease; }
@keyframes goal-flash { 0%, 40% { background: rgba(18, 161, 80, .12); box-shadow: inset 3px 0 0 var(--green); } }
.mr-time small { color: var(--dim); }
.mr-sc { color: var(--accent); }
.mr-info:hover .mr-name { color: var(--accent); }
.lc { background: #fff; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.lc::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent)); }
.lc:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -14px rgba(120, 0, 15, .35); border-color: rgba(227, 10, 23, .25); }
.lc-top { color: var(--muted); }
.lc-top .sp-ic, .lc-top .ic { color: var(--accent); }
.lc-team b { color: var(--accent); }

/* Maç detay başlığı: kırmızı stadyum */
.match-hero { background: radial-gradient(600px 220px at 50% 0%, rgba(255, 255, 255, .16), transparent), var(--grad-red); background-size: auto, 220% 100%; background-position: 0 0, 50% 0; border: 0; box-shadow: 0 20px 44px -20px rgba(150, 0, 20, .6); }
.match-hero.has-bg { background: linear-gradient(180deg, rgba(150, 0, 20, .55) 0%, rgba(90, 0, 12, .93) 78%), var(--sbg) center / cover no-repeat; animation: none; }
.mh-top .ic { color: var(--gold); }
.tl-ev { background: rgba(255, 255, 255, .14); }
.tl-ev b { color: var(--gold); }
@keyframes score-pop { 40% { transform: scale(1.3); color: var(--gold); text-shadow: 0 0 24px rgba(255, 216, 77, .8); } }
.market-card { transition: box-shadow .25s, border-color .25s; }
.market-card:hover { border-color: rgba(227, 10, 23, .25); box-shadow: 0 14px 30px -16px rgba(120, 0, 15, .35); }
.market-card h3 { color: var(--text); }

/* ---------- Kupon ---------- */
.slip { background: #fff; border-left: 1px solid var(--line); }
.slip.is-open { box-shadow: -24px 0 60px rgba(40, 0, 8, .25); }
.slip-head { background: var(--grad-red); background-size: 220% 100%; background-position: 50% 0; border-bottom: 0; }
.slip-head .slip-title .ic { color: #fff; }
.slip-head .count { background: #fff; color: var(--accent); }
.slip-clear { color: rgba(255, 255, 255, .8); }
.slip-clear:hover { color: #fff; }
.slip-head .icon-btn { color: #fff; }
.slip-tabs { background: #f1f2f5; border-radius: 10px; }
.slip-tabs button { color: var(--muted); border-radius: 8px; }
.slip-tabs .is-active { background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-accent); }
.slip-empty .ic { color: #f3c2c6; animation: art-float 4s ease-in-out infinite; }
.sl-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: inset 3px 0 0 var(--accent), var(--shadow-card); animation: sl-in .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sl-in { from { opacity: 0; transform: translateX(24px) scale(.96); } }
.sl-item.is-changed { border-color: rgba(245, 179, 1, .6); }
.sl-odds { color: var(--accent); }
.sl-stake input, .stake-box input { background: #fff; border: 1px solid var(--line-2); color: var(--text); border-radius: 9px; }
.stake-box input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.slip-foot { background: #fafafb; border-top-color: var(--line); }
.slip-quick button { background: #fff; border: 1px solid var(--line); color: var(--text-2); border-radius: 8px; }
.slip-quick button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.slip-sum .win { color: var(--accent); }
.slip-fab { background: var(--grad-accent); box-shadow: 0 14px 30px -8px rgba(227, 10, 23, .7); }
.slip-fab::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(227, 10, 23, .45); animation: intro-ring 2s ease-out infinite; }
.slip-fab .count { background: #fff; color: var(--accent); }
.count { background: var(--accent); color: #fff; }

/* ---------- Ana sayfa ---------- */
.ticker { position: relative; height: 44px; padding: 0 6px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-card); overflow: hidden; }
.ticker-label { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 16px; flex: none; background: var(--grad-accent); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; }
.ticker-label .ic { width: 16px; height: 16px; animation: bell-ring 2.4s ease-in-out infinite; }
@keyframes bell-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(16deg); } 85% { transform: rotate(-14deg); } 92% { transform: rotate(8deg); } }
.ticker-track { align-self: stretch; display: flex; align-items: center; }
.ticker-move { gap: 0; padding-left: 0; animation: tick-move 50s linear infinite; }
@keyframes tick-move { to { transform: translateX(-50%); } }
.tk-grp { display: inline-flex; gap: 48px; padding-right: 48px; }
.tk-grp > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); }
.tk-grp > span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(227, 10, 23, .15); }
.tk-grp b { color: var(--accent); }
.ticker:hover .ticker-move { animation-play-state: paused; }

.hero { border-radius: 20px; background: #2a0006; box-shadow: 0 0 0 1px rgba(227, 10, 23, .18), 0 26px 50px -24px rgba(150, 0, 20, .55); isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%); transform: translateX(-100%); animation: hero-gloss 7s ease-in-out infinite; }
@keyframes hero-gloss { 0%, 50% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.hero-slide { transition: opacity .9s ease, visibility .9s, transform 1.2s cubic-bezier(.2, .7, .3, 1); transform: scale(1.04); }
.hero-slide.is-active { transform: none; }
.hero-dots button { background: rgba(255, 255, 255, .4); }
.hero-dots button.is-active { background: rgba(255, 255, 255, .3); }
.hero-dots button.is-active::after { background: linear-gradient(90deg, #fff, var(--gold)); }
.hero-nav { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .2); border-radius: 10px; color: #fff; }
.bnr { border-radius: 20px; }
.hero-slide .bnr { border-radius: 0; }
.bnr .bnr-tag { background: var(--accent); border: 0; border-radius: 5px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.bnr-title em { color: var(--gold); }
.bnr-cta { background: #fff; color: var(--accent); border-radius: 10px; box-shadow: 0 10px 22px rgba(0, 0, 0, .28); animation: none; }
.bnr-cta:hover { background: #fff; color: var(--accent-3); transform: translateY(-2px); }
.bnr-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(227, 10, 23, .2) 50%, transparent 65%); transform: translateX(-120%); animation: btn-shine 3.4s ease-in-out infinite; }
.hero-slide.is-active .bnr-title { animation: title-in .9s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes title-in { from { opacity: 0; transform: translateY(26px) skewY(3deg); filter: blur(6px); letter-spacing: .04em; } to { opacity: 1; transform: none; filter: none; } }
/* Çizim banner temaları kırmızı tonlarına */
.theme-red { background: radial-gradient(520px 380px at 75% 45%, rgba(255, 140, 150, .35), transparent 62%), linear-gradient(115deg, #3a0009 0%, #8f0014 50%, #e30a17 100%); }
.theme-blue { background: radial-gradient(520px 380px at 75% 45%, rgba(255, 170, 170, .3), transparent 62%), linear-gradient(115deg, #2b0007 0%, #7a0011 50%, #c8102e 100%); }
.theme-violet { background: radial-gradient(520px 380px at 75% 45%, rgba(255, 150, 200, .3), transparent 62%), linear-gradient(115deg, #2a0414 0%, #6e0b33 52%, #b3123f 100%); }
.theme-gold { background: radial-gradient(520px 380px at 75% 45%, rgba(255, 216, 77, .35), transparent 62%), linear-gradient(115deg, #2e0508 0%, #8a1a0a 50%, #d9480f 100%); }
.theme-green { background: radial-gradient(520px 380px at 75% 45%, rgba(255, 255, 255, .18), transparent 62%), linear-gradient(115deg, #17060a 0%, #3c0b12 50%, #a30b1f 100%); }
.wt { background: #3a0009; }

.pstrip { border-radius: 16px; box-shadow: 0 12px 26px -14px rgba(80, 0, 10, .55); transform-style: preserve-3d; }
.pstrip:hover { transform: translateY(-4px); filter: brightness(1.06); box-shadow: 0 20px 36px -16px rgba(150, 0, 20, .65); }
.pstrip-go { background: #fff; color: var(--accent); border-radius: 6px; }
.pstrip:hover .pstrip-go { background: var(--gold); color: #3a0009; }
.pstrip:hover .pstrip-go .ic { transform: translateX(2px); }
.pstrip-go .ic { transition: transform .2s; }

/* Ana sayfa sayaç bandı */
.cb-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.cb-stat { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden;
    animation: fade-up .6s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 90ms + .2s); transition: transform .25s, box-shadow .25s; }
.cb-stat::before { content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 10, 23, .14), transparent 70%); transition: transform .4s; }
.cb-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -16px rgba(120, 0, 15, .35); }
.cb-stat:hover::before { transform: scale(1.6); }
.cb-stat-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-accent); }
.cb-stat-ic .ic { width: 22px; height: 22px; }
.cb-stat:hover .cb-stat-ic { animation: wobble .6s ease; }
@keyframes wobble { 30% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(6deg); } }
.cb-stat > span:last-child { display: grid; line-height: 1.15; min-width: 0; }
.cb-stat b { font: 900 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.cb-stat small { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-stat.is-cta { background: var(--grad-red); background-size: 220% 100%; background-position: 50% 0; border: 0; }
.cb-stat.is-cta b, .cb-stat.is-cta small { color: #fff; }
.cb-stat.is-cta .cb-stat-ic { background: #fff; color: var(--accent); }
/* 5 kart: geniş ekranda tek sıra, orta genişlikte 3 + 2 (boş hücre kalmaz), mobilde yana kayar */
@media (max-width: 1200px) {
    .cb-stats { gap: 10px; }
    .cb-stat { gap: 10px; padding: 12px; }
    .cb-stat-ic { width: 40px; height: 40px; }
    .cb-stat b { font-size: 20px; }
}
@media (max-width: 960px) {
    .cb-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .cb-stat { grid-column: span 2; }
    .cb-stat:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 768px) {
    .cb-stat, .cb-stat:nth-child(n+4) { grid-column: auto; }
    .cb-stats { grid-template-columns: repeat(5, 170px); overflow-x: auto; scrollbar-width: none; margin: 12px -12px 0; padding: 4px 12px 6px; }
    .cb-stats::-webkit-scrollbar { display: none; }
    .cb-stat { padding: 12px; }
    .cb-stat b { font-size: 19px; }
}

.quick a { background: #fff; }
.quick a:hover { border-color: rgba(227, 10, 23, .3); transform: translateY(-4px); box-shadow: 0 18px 30px -16px rgba(120, 0, 15, .35); }
.quick .qi { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.quick a:hover .qi { transform: rotate(-8deg) scale(1.1); }
.feature { transition: transform .25s, box-shadow .25s; }
.feature:hover { transform: translateY(-3px); }
.feature .fi { background: #fff0f1; color: var(--accent); }
.winner { background: #fff; }
.winner b { color: var(--green); }

/* İmlecin altında yanan ışık (theme.js --mx/--my verir) */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(227, 10, 23, .1), transparent 65%); }
.spot:hover::after { opacity: 1; }

/* ---------- Oyun kartları ---------- */
.gcard-img { border-radius: 14px; background-color: #f1f2f5; box-shadow: 0 6px 16px -8px rgba(30, 6, 10, .35); transform-style: preserve-3d; }
.gcard-img::after { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.gcard-img::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); background-size: 250% 100%; background-position: 140% 0; transition: background-position .8s ease; }
.gcard:hover .gcard-img::before { background-position: -60% 0; }
.gcard:hover .gcard-img { transform: translateY(-5px); box-shadow: 0 20px 34px -14px rgba(150, 0, 20, .55), 0 0 0 2px var(--accent); }
.gcard-hover { border-radius: 14px; background: linear-gradient(180deg, rgba(120, 0, 15, .15), rgba(90, 0, 12, .7)); }
.gplay { background: #fff; color: var(--accent); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.gcard:hover .gplay { animation: play-pulse 1.4s ease-in-out infinite; }
@keyframes play-pulse { 0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 255, 255, .6); } 50% { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 10px rgba(255, 255, 255, 0); } }
.gcard-meta b { color: var(--text); }
.gcard:hover .gcard-meta b { color: var(--accent); }
.gbadge { border-radius: 5px; }
.gbadge-hot { background: var(--grad-accent); color: #fff; animation: badge-bob 2.6s ease-in-out infinite; }
.gbadge-new { background: var(--gold); color: #3a0009; }
.gcard.is-random .gcard-img { box-shadow: 0 0 0 3px var(--accent), 0 0 30px rgba(227, 10, 23, .6); }
.row-nav button { background: #fff; border: 1px solid var(--line); color: var(--text-2); border-radius: 9px; box-shadow: var(--shadow-card); }
.row-nav button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Casino */
.casino-hero .chip { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.casino-hero .chip.is-active { background: #fff; color: var(--accent); border-color: #fff; }
.casino-tools select { background: #fff; border-color: var(--line-2); color: var(--text); }
.game-stage { background: #1a0306; border-color: transparent; }
.game-stage-card { background: rgba(40, 0, 8, .62); border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
/* Koyu sahnede beyaz çip beyaz yazıyla okunmuyordu */
.game-stage .chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); color: #fff; box-shadow: none; }
.pv-card { background: #fff; border: 1px solid var(--line); color: #1d1f25; box-shadow: var(--shadow-card); }
.pv-card:hover { border-color: var(--accent); box-shadow: 0 16px 30px -16px rgba(150, 0, 20, .45); color: var(--accent); }
.pv-logo { color: inherit; }
.pv-mask { max-width: 118px; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.pv-special { background: var(--accent); }

/* ---------- Jackpot ---------- */
.jp-mega { background: radial-gradient(500px 220px at 18% 50%, rgba(255, 216, 77, .22), transparent 70%), var(--grad-red); background-size: auto, 220% 100%; background-position: 0 0, 50% 0; border: 0; box-shadow: 0 24px 50px -24px rgba(150, 0, 20, .7); }
.jp-mega::before { background: repeating-conic-gradient(from 0deg at 12% 50%, rgba(255, 255, 255, .07) 0 6deg, transparent 6deg 16deg); }
.jp-mega-glow { background: radial-gradient(circle, rgba(255, 216, 77, .55), transparent 65%); }
.jp-mega-title { color: #ffe3e6; }
.odo { color: #fff; text-shadow: 0 0 26px rgba(255, 216, 77, .55); }
.odo-cur { background: linear-gradient(135deg, #fff3b0, var(--gold) 50%, #f5a800); -webkit-background-clip: text; background-clip: text; }
.odo-sep { color: rgba(255, 255, 255, .7); }
.jp-stats > div { background: rgba(0, 0, 0, .16); border-color: rgba(255, 255, 255, .14); }
.jp-stats dd.up { color: #9dffc4; }
.jp-mega .btn-gold { background: #fff; color: var(--accent); }
.jp-card-inner { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.jp-card:hover .jp-card-inner { border-color: rgba(227, 10, 23, .35); }
.jp-pool { background: #f6f7f9; }
.jp-pool-title { color: var(--muted); }
.jp-pool-amount { color: var(--accent); }
@keyframes jp-tick { from { color: #ff6b77; text-shadow: 0 0 12px rgba(227, 10, 23, .6); } }
.jp-arrow { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); color: var(--text); }

/* ---------- Promosyon, turnuva, etkinlik, çark ---------- */
.promo-card { overflow: hidden; transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s, border-color .3s; }
.promo-card:hover { transform: translateY(-6px); border-color: rgba(227, 10, 23, .3); box-shadow: 0 26px 44px -22px rgba(150, 0, 20, .5); }
.promo-body h3 { color: var(--text); }
.promo-detail { color: var(--text-2); }
.tour-hero { border: 0; box-shadow: 0 24px 50px -24px rgba(150, 0, 20, .6); }
.tour-hero:not(.is-photo) { background: radial-gradient(500px 300px at 80% 40%, rgba(255, 216, 77, .25), transparent 65%), var(--grad-red); }
.wheel-head h1 em, .tour-copy h1 em { background: linear-gradient(90deg, var(--gold), #fff 50%, var(--gold)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: wm-shine 4s linear 2; }
.countdown > div { background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px); }
.countdown > div b { color: #fff; }
.tour-head { border-bottom-color: var(--line); }
.tour-head h2 .ic { color: var(--accent); }
.tour-table tr.is-me td { background: #fff1f2; }
.prize-list > div { background: #f7f8fa; }
.prize-list b { color: var(--accent); }
.rank { background: #f1f2f5; color: var(--muted); }

.event-card { border: 0; box-shadow: 0 20px 40px -22px rgba(120, 0, 15, .65); }
.event-card:hover { transform: translateY(-5px); border-color: transparent; }
.ev-wheel { background: radial-gradient(260px 200px at 90% 50%, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(135deg, #8f0014, #e30a17); }
.ev-tour { background: radial-gradient(260px 200px at 90% 50%, rgba(255, 216, 77, .3), transparent 70%), linear-gradient(135deg, #3a0009, #a8000f); }
.ev-rtp { background: radial-gradient(260px 200px at 90% 50%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(135deg, #16171b, #6e0b17); }
.event-card p { color: rgba(255, 255, 255, .85); }
.bv-wheel img, .wheel-base, .wheel-spin img { filter: hue-rotate(28deg) saturate(1.15); }
.bv-wheel .bv-border { filter: none; }
.wheel-arrow, .bv-wheel .bv-arrow { filter: hue-rotate(28deg) drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.ev-wheel-img { filter: hue-rotate(28deg) saturate(1.15) drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); }
.ev-trophy { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }

.wheel-page { background: radial-gradient(60% 50% at 50% 30%, rgba(255, 45, 61, .25), transparent 70%), linear-gradient(180deg, rgba(90, 0, 12, .4) 0%, rgba(50, 0, 8, .86) 55%, #1a0306 100%), var(--wbg) center top / cover no-repeat; border-radius: 0 0 26px 26px; }
.wheel-head p { color: rgba(255, 255, 255, .82); }
.wheel-count { background: rgba(60, 0, 8, .6); border: 1px solid rgba(255, 216, 77, .5); }
.wheel-count .ic { color: var(--gold); }
.wheel-count b { background: var(--grad-accent); }
@keyframes spin-pulse { 50% { filter: drop-shadow(0 0 22px rgba(255, 216, 77, .8)); } }
@keyframes win-pulse { 50% { transform: scale(1.3); filter: drop-shadow(0 0 10px var(--gold)); } }
.wheel-label.is-silver > span { color: #7a0010; }
.wheel-panel { background: rgba(40, 0, 8, .55); border: 1px solid rgba(255, 255, 255, .14); }
.wheel-panel h3 .ic { color: var(--gold); }
.wp-level { background: linear-gradient(90deg, rgba(70, 0, 10, .95) 45%, rgba(70, 0, 10, .55)), var(--img) right center / cover no-repeat; border-color: rgba(255, 255, 255, .12); }
.wp-ic { background: rgba(255, 216, 77, .16); color: var(--gold); }
.wp-prizes span { background: rgba(255, 216, 77, .14); color: var(--gold); }
.wp-list > div { background: rgba(255, 255, 255, .07); }
.wp-list b { color: #9dffc4; }

.day-tabs a { background: #fff; }
.day-tabs a:hover { border-color: rgba(227, 10, 23, .3); }
.day-tabs a.is-active { background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-accent); }
.day-tabs em { color: var(--accent); }
.rtp-card { background: #fff; }
.rtp-card.is-hot { border-color: rgba(18, 161, 80, .45); }
.rtp-card.is-cold { border-color: rgba(225, 29, 46, .35); }

/* ---------- Ödeme şeridi ---------- */
.pay-band { background: radial-gradient(400px 160px at 10% 50%, rgba(255, 216, 77, .2), transparent 70%), var(--grad-red); background-size: auto, 220% 100%; background-position: 0 0, 50% 0; border: 0; box-shadow: 0 22px 44px -24px rgba(150, 0, 20, .65); }
.pay-band-ic { background: rgba(255, 255, 255, .16); color: #fff; }
.pay-band .btn-gold { background: #fff; color: var(--accent); }
.pay-logo { background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.pay-logo small { color: var(--muted); }
.pay-band .pay-logo { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; }
.pay-band .pay-logo small { color: rgba(255, 255, 255, .7); }
.pay-logo:hover { border-color: var(--gold); transform: translateY(-3px) rotate(-1deg); }

/* ---------- Cüzdan ---------- */
.method { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.method:hover { border-color: rgba(227, 10, 23, .4); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(150, 0, 20, .5); }
.method:has(input:checked) { border-color: var(--accent); background: #fff6f6; box-shadow: 0 0 0 1px var(--accent) inset, 0 12px 26px -16px rgba(227, 10, 23, .6); }
.method:has(input:checked)::after { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.pay-box { border: 1px solid rgba(227, 10, 23, .22); background: #fff7f7; border-radius: 12px; }
.pay-box > div + div { border-top-color: rgba(227, 10, 23, .1); }
.copy { background: #fff; border: 1px solid var(--line); color: var(--accent); border-radius: 7px; }
.copy:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pm-note { background: #fffaeb; color: #93370d; border: 1px solid #fedf89; border-radius: 10px; }
.amount-chips button { background: #fff; border: 1px solid var(--line); border-radius: 9px; color: var(--text-2); }
.amount-chips button:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.conv b { color: var(--accent); }
.wallet-balance { background: radial-gradient(300px 160px at 90% 0%, rgba(255, 216, 77, .3), transparent 70%), var(--grad-red); background-size: auto, 220% 100%; background-position: 0 0, 50% 0; border: 0; box-shadow: 0 22px 40px -22px rgba(150, 0, 20, .7); }
.tx .ti { background: #f2f3f6; }
.tx .ti.plus { background: #ecfdf3; }
.tx .ti.minus { background: #fef3f2; }
.bar { background: #eef0f3; }
.bar span { background: var(--grad-accent); }

/* Cüzdan v2: adımlar, kategori, yöntem kartları, özet */
.wl-tabs { margin-bottom: 16px; }
.wl-steps { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; }
.wl-steps li { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #f6f7f9; color: var(--dim); font-size: 13px; font-weight: 700; transition: .3s; }
.wl-steps li span { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #e7e9ee; color: var(--muted); font-size: 12px; font-weight: 900; transition: .3s; }
.wl-steps li.is-on { background: #fff1f2; color: var(--accent); }
.wl-steps li.is-on span { background: var(--grad-accent); color: #fff; box-shadow: 0 6px 14px -6px rgba(227, 10, 23, .8); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.wl-cats { margin-bottom: 12px; flex-wrap: wrap; overflow: visible; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pm-card { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line-2); cursor: pointer; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; animation: fade-up .45s ease both; }
.pm-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c); opacity: .9; }
.pm-card input { position: absolute; opacity: 0; pointer-events: none; }
.pm-card:hover { border-color: rgba(227, 10, 23, .4); transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(150, 0, 20, .6); }
.pm-card:has(input:checked) { border-color: var(--accent); background: linear-gradient(135deg, #fff, #fff4f5); box-shadow: 0 0 0 1px var(--accent) inset, 0 14px 28px -16px rgba(227, 10, 23, .7); }
.pm-card:has(input:checked)::after { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.pm-card:has(input:checked) .pm-logo { animation: wobble .6s ease; }
.pm-card[hidden] { display: none; }
.pm-logo { width: 40px; height: 40px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15)); }
.pm-logo .cl { width: 100%; height: 100%; display: block; position: static; }
.pm-name { display: grid; min-width: 0; line-height: 1.2; }
.pm-name b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-name small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.pm-eta, .pm-bonus, .pm-fee { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.pm-eta { background: #f2f3f6; color: var(--text-2); }
.pm-eta .ic { width: 12px; height: 12px; color: var(--accent); }
.pm-bonus { background: #ecfdf3; color: #067647; }
.pm-fee { background: #fff7ed; color: #b54708; }
.pm-lim { grid-column: 1 / -1; color: var(--dim); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-ribbon { position: absolute; top: 9px; right: -26px; width: 96px; padding: 2px 0; transform: rotate(38deg); background: var(--grad-accent); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-align: center; text-transform: uppercase; box-shadow: 0 4px 10px -4px rgba(150, 0, 20, .8); }
.pm-card:has(input:checked) .pm-ribbon { display: none; }
.pm-card.is-off { cursor: not-allowed; background: #fafafb; }
.pm-card.is-off:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.pm-card.is-off > *:not(.pm-off) { opacity: .45; filter: grayscale(.6); }
.pm-off { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: #17181c; color: #fff; font-size: 10.5px; font-weight: 800; }
.pm-off .ic { width: 12px; height: 12px; }
.wl-amount { display: grid; gap: 0; margin-bottom: 4px; }
.wl-amount .field { margin-bottom: 8px; }
.wl-amount-box { position: relative; }
.wl-amount-box input { height: 56px !important; padding-right: 44px !important; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wl-amount-box span { position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-size: 20px; font-weight: 900; color: var(--accent); }
.wl-amount .field-hint { font-weight: 600; }
.pm-detail.is-in { animation: fade-up .4s cubic-bezier(.2, .8, .3, 1); }
.pay-box-head { background: linear-gradient(90deg, #fff1f2, transparent); }
.pay-box-head .cl { width: 28px; height: 28px; position: static; filter: none; }
.pay-box-head b { flex: 1; }
.wl-sum { display: grid; gap: 0; margin: 6px 0 14px; border-radius: 14px; border: 1px dashed rgba(227, 10, 23, .3); background: #fffafa; overflow: hidden; }
.wl-sum > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 13.5px; }
.wl-sum > div + div { border-top: 1px dashed rgba(227, 10, 23, .16); }
.wl-sum span { color: var(--muted); font-weight: 600; }
.wl-sum b { font-variant-numeric: tabular-nums; }
.wl-sum .is-total { background: var(--grad-accent); color: #fff; }
.wl-sum .is-total span { color: rgba(255, 255, 255, .85); }
.wl-sum .is-total b { font-size: 18px; font-weight: 900; }
.wl-submit { height: 52px; font-size: 16px; }
.wl-side { display: grid; gap: 16px; align-content: start; }
.wallet-balance b { font-size: 34px; }
.wb-pend { display: grid; gap: 6px; margin-top: 8px; }
.wb-pend span { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .16); color: rgba(255, 255, 255, .85); font-size: 12.5px; }
/* Bekleyen tutarlar küçük kalır (.wallet-balance b'nin 34 px'i büyük tutarda satırı taşırıyordu) */
.wb-pend b { margin-left: auto; color: #fff; font: 800 14px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-pend .ic { width: 15px; height: 15px; }
.wl-trust h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; }
.wl-trust h3 .ic { color: var(--accent); }
.wl-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-trust li { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); font-size: 13px; }
.wl-trust li .ic { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2px; }
@media (max-width: 768px) {
    .wl-steps li { padding: 8px; font-size: 11.5px; gap: 6px; }
    .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pm-card { padding: 10px; grid-template-columns: 34px minmax(0, 1fr); }
    .pm-logo { width: 34px; height: 34px; }
}

/* ---------- Hesabım ---------- */
.acc-user { background: radial-gradient(200px 120px at 100% 0%, rgba(255, 216, 77, .25), transparent 70%), var(--grad-red); background-size: auto, 220% 100%; background-position: 0 0, 50% 0; border: 0; box-shadow: 0 18px 34px -20px rgba(150, 0, 20, .7); }
.acc-user .avatar { background: #fff; color: var(--accent); }
.acc-id { color: rgba(255, 255, 255, .7); }
.acc-bal, .acc-nav { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.acc-bal b { color: var(--text); }
.acc-nav a { color: var(--text-2); border-radius: 9px; }
.acc-nav a .ic { color: var(--dim); }
.acc-nav a:hover { background: #fff3f4; color: var(--accent); }
.acc-nav a:hover .ic { color: var(--accent); }
.acc-nav a.is-active { background: #fff1f2; color: var(--accent); }
.acc-out, .acc-out .ic { color: #d92d20 !important; }
.acc-out { border-top-color: var(--line); }
.acc-card-head > a, .acc-card-head > small { color: var(--muted); }
.acc-tile.is-main { background: var(--grad-red); background-size: 220% 100%; background-position: 50% 0; border: 0; }
.acc-empty .ic { color: #e9b3b8; }
.acc-check, .acc-step { background: #fafafb; border: 1px solid var(--line); }
.acc-step .n { background: #eceef2; color: var(--text-2); }
.acc-tips li { color: var(--text-2); }
.acc-filter select { background-color: #fff; border: 1px solid var(--line-2); color: var(--text); }
.acc-code-row input { background: #fff; border: 1px solid var(--line-2); color: var(--text); }
.acc-code-row input:focus { box-shadow: var(--ring); }
.acc-vip-hero { background: radial-gradient(400px 200px at 0% 50%, color-mix(in srgb, var(--vip) 22%, transparent), transparent 70%), linear-gradient(120deg, #fff, #fff7f7); border: 1px solid color-mix(in srgb, var(--vip) 40%, #eceef2); box-shadow: var(--shadow-card); }
.acc-vip-hero p, .acc-msg p { color: var(--text-2); }
.acc-vip-cb { background: #fafafb; border: 1px solid var(--line); }
.acc-msg.is-new { border-color: rgba(227, 10, 23, .4); background: linear-gradient(90deg, #fff1f2, #fff 50%); }
.acc-msg .ci { background: #fff0f1; color: var(--accent); }
.acc-periods span { background: #fff; border: 1px solid var(--line-2); }
.acc-periods input:checked + span { background: #fff1f2; border-color: var(--accent); color: var(--accent); }

/* ---------- Giriş / kayıt ---------- */
.modal { background: rgba(30, 4, 8, .55); backdrop-filter: blur(6px); }
.modal-box { background: #fff; border: 0; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(60, 0, 10, .55); }
.modal-x { background: #f2f3f6; color: var(--text-2); border-radius: 10px; }
.modal-x:hover { background: var(--accent); color: #fff; }
.modal-auth .modal-box, .modal-box.modal-auth { overflow: hidden; }
.modal-auth .auth-card { position: relative; }
.modal-auth .auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent)); }
.auth-page-wrap .auth-card { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); border-radius: 20px; }
.auth-card .field label { color: var(--text-2); }
.auth-row a, .auth-switch a, .auth-card .check a { color: var(--accent); }
.auth-card .check b { color: var(--text-2); }
.phone span { background: #f5f6f8; border-color: var(--line-2); color: var(--text-2); }
.field-err { color: #d92d20; }
.field.has-err input, .field.has-err select, .check.has-err span { border-color: #f04438; }
.auth { border-color: var(--line); background: #fff; }
.auth-art { background: radial-gradient(500px 400px at 50% 40%, rgba(255, 255, 255, .18), transparent 65%), var(--grad-red); }

/* ---------- Bildirim, sohbet ---------- */
.toast { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -14px rgba(40, 6, 10, .3); position: relative; overflow: hidden; }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue); }
.toast-success::before { background: var(--green); }
.toast-error::before { background: var(--accent); }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .12; transform-origin: left; animation: toast-life 3.8s linear forwards; }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.msg { background: #f2f3f6; }
.msg.me { background: var(--grad-accent); color: #fff; }
.chat-head { border-bottom-color: var(--line); }
.chat-form { border-top-color: var(--line); }
.chat-form input { background: #fff; border-color: var(--line-2); }

.success-burst { position: relative; }
.success-burst .big { background: #ecfdf3; color: var(--green); box-shadow: 0 0 0 8px rgba(18, 161, 80, .08); }
.confetti { position: absolute; left: 50%; top: 36px; width: 0; height: 0; z-index: 5; pointer-events: none; }
.confetti i { position: absolute; left: 0; top: 0; border-radius: 2px; opacity: 0; animation: confetti 1.5s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes confetti {
    0% { transform: translate(0, 0) scale(.5); opacity: 1; }
    35% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) / 2)); opacity: 1; }
    100% { transform: translate(var(--x), calc(var(--y) + 280px)) rotate(var(--r)); opacity: 0; }
}

/* ---------- Footer: koyu kırmızı ---------- */
.footer { position: relative; overflow: hidden; background: radial-gradient(700px 300px at 85% 0%, rgba(227, 10, 23, .35), transparent 70%), radial-gradient(500px 260px at 0% 100%, rgba(255, 216, 77, .08), transparent 70%), linear-gradient(180deg, #2a0309, #140205 70%); border-top: 0; }
.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent)); }
.footer::after { content: "COINBET"; position: absolute; right: -2%; bottom: -6%; font: 900 clamp(80px, 16vw, 230px)/1 var(--font-display); letter-spacing: -.04em; color: rgba(255, 255, 255, .035); pointer-events: none; }
.footer > * { position: relative; z-index: 1; }
.ft-col b { color: #fff; letter-spacing: .02em; }
.ft-col a { color: rgba(255, 255, 255, .7); transition: color .2s, transform .2s; }
.ft-col a:hover { color: #fff; transform: translateX(3px); }
.ft-badges span { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.ft-badges .ic { color: var(--gold); }
.ft-badges .age { color: #fff; background: var(--accent); border-color: var(--accent); }
.ft-coins { border-top-color: rgba(255, 255, 255, .1); }
.ft-coins .pay-logo { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #fff; }
.ft-coins .pay-logo small { color: rgba(255, 255, 255, .6); }
.ft-pay-label { color: rgba(255, 255, 255, .6); }
.soc { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.soc:hover { background: #fff; color: var(--accent); border-color: #fff; transform: translateY(-3px) rotate(-6deg); }
.ft-contact { color: rgba(255, 255, 255, .75); }
.ft-bottom { color: rgba(255, 255, 255, .55); }
.ft-bottom a { color: rgba(255, 255, 255, .85); }

/* ---------- Kaydırınca beliren bölümler ---------- */
/* Bulanıklık (filter) büyük bölümleri her karede yeniden işletiyordu; yalnız opaklık + kayma kaldı */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1099px) {
    .hdr::before { height: 62px; }
}
@media (max-width: 768px) {
    .hdr { box-shadow: 0 8px 22px -10px rgba(150, 0, 20, .5); }
    .hdr::before { height: 58px; }
    .ticker { height: 38px; margin-bottom: 12px; }
    .ticker-label { padding: 0 12px; font-size: 11px; }
    .ticker-label span { display: none; }
    .hero { border-radius: 16px; }

    .bnav { background: rgba(255, 255, 255, .96); border-top: 0; box-shadow: 0 -10px 30px -12px rgba(60, 0, 10, .3); overflow: visible; }
    .bnav > * { color: var(--muted); transition: color .2s; }
    .bnav > *:hover, .bnav > *:active { color: var(--accent); }
    .bnav .ic { color: inherit; }
    .bnav-live { color: var(--accent) !important; }
    .bnav-live .ic { width: 26px; height: 26px; padding: 12px; box-sizing: content-box; margin-top: -30px; border-radius: 50%; background: var(--grad-accent); color: #fff !important;
        box-shadow: 0 10px 22px -6px rgba(227, 10, 23, .7), 0 0 0 5px #fff; animation: live-breathe 2s ease-in-out infinite; }
    @keyframes live-breathe { 50% { transform: scale(1.07); } }
    .bnav-slip .count { box-shadow: 0 0 0 2px #fff; }
    .slip, .slip-docked .slip { border-top: 0; box-shadow: 0 -20px 50px rgba(40, 0, 8, .3); overflow: hidden; }
    .slip-head::before { background: rgba(255, 255, 255, .55); }
    .footer::after { bottom: 60px; }
}
/* ---------- Performans: ekranda olmayan hareketler durur ---------- */
/* Rozet nabzı da ayrı katmanda (eski box-shadow nabzı her karede boyatıyordu) */
.hn-count, .sb-badge { animation: none; }
.hn-count::after, .sb-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(227, 10, 23, .5); pointer-events: none; animation: badge-ring 2s ease-out infinite; }
.sb-badge { position: relative; }
@keyframes badge-ring { from { transform: scale(1); opacity: 1; } 70%, to { transform: scale(1.5); opacity: 0; } }
/* Banner ışık süzmesi transform ile (style.css'teki left animasyonunun yerine) */
.bnr-bg::after { left: 0; transform: translateX(-150%) rotate(16deg); animation: bnr-sweep 7.5s ease-in-out infinite; }
@keyframes bnr-sweep { 0%, 55% { transform: translateX(-150%) rotate(16deg); } 100% { transform: translateX(650%) rotate(16deg); } }
/* Slider'da görünmeyen slaytların parçacıkları ve parıltıları çalışmaz */
.hero-slide:not(.is-active) .bnr-fx { display: none; }
.hero-slide:not(.is-active) *, .hero-slide:not(.is-active) *::before, .hero-slide:not(.is-active) *::after,
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after,
body:not(.nav-open) .sidebar *, body:not(.nav-open) .sidebar *::before, body:not(.nav-open) .sidebar *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .topbar::after, .hn-item.is-active::after, .hero::after, .hdr .btn-gold::after, .bnr-cta::after, .bnr-bg::after, .live-tag::after, .hn-count::after, .sb-badge::after { animation: none !important; }
}