@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent
}

html {
    scroll-behavior: smooth
}

body {
    background: #1a2350;
    color: #f8fafc;
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: 90px;
    -webkit-font-smoothing: antialiased
}

a {
    text-decoration: none;
    color: inherit
}

button {
    user-select: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    border: none;
    background: none
}

.hidden {
    display: none !important
}

/* STICKY HEADER */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #1a2350;
    padding: 10px 14px;
    border-bottom: none
}

.banner-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    position: relative
}

.banner-img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 72px;
    object-fit: cover;
    object-position: center
}

/* Banner smoke */
.banner-smoke {
    position: relative;
    overflow: hidden
}

.banner-smoke::before,
.banner-smoke::after {
    content: '';
    position: absolute;
    top: -10%;
    width: 60%;
    height: 120%;
    pointer-events: none;
    z-index: 5;
    border-radius: 50%;
    filter: blur(12px)
}

.banner-smoke::before {
    left: -10%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, .12) 0%, rgba(200, 220, 255, .06) 40%, transparent 70%);
    animation: smoke1 6s ease-in-out infinite
}

.banner-smoke::after {
    right: -10%;
    background: radial-gradient(ellipse, rgba(200, 210, 255, .1) 0%, rgba(255, 255, 255, .05) 40%, transparent 70%);
    animation: smoke2 8s ease-in-out infinite 2s
}

.banner-smoke-layer {
    position: absolute;
    inset: -10%;
    width: 50%;
    height: 130%;
    pointer-events: none;
    z-index: 6;
    border-radius: 50%;
    filter: blur(15px);
    background: radial-gradient(ellipse, rgba(180, 200, 255, .08) 0%, rgba(255, 255, 255, .04) 50%, transparent 70%);
    animation: smoke3 7s ease-in-out infinite 4s;
    left: 30%
}

@keyframes smoke1 {
    0% {
        transform: translateX(-20%) translateY(10%) scale(1);
        opacity: 0
    }

    15% {
        opacity: .4
    }

    50% {
        transform: translateX(30%) translateY(-15%) scale(1.4);
        opacity: .25
    }

    100% {
        transform: translateX(80%) translateY(5%) scale(1.1);
        opacity: 0
    }
}

@keyframes smoke2 {
    0% {
        transform: translateX(100%) translateY(-5%) scale(1.2);
        opacity: 0
    }

    20% {
        opacity: .3
    }

    50% {
        transform: translateX(40%) translateY(10%) scale(1.5);
        opacity: .2
    }

    100% {
        transform: translateX(-30%) translateY(-10%) scale(1);
        opacity: 0
    }
}

@keyframes smoke3 {
    0% {
        transform: translateX(50%) translateY(15%) scale(.8);
        opacity: 0
    }

    25% {
        opacity: .25
    }

    60% {
        transform: translateX(-10%) translateY(-5%) scale(1.3);
        opacity: .15
    }

    100% {
        transform: translateX(-50%) translateY(10%) scale(1);
        opacity: 0
    }
}

/* TICKER */
.ticker-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border-bottom: none;
    transition: opacity .3s
}

.ticker-user {
    color: #6b7280;
    font-size: 13px
}

.ticker-amount {
    color: #f59e0b;
    font-size: 15px;
    font-weight: 700
}

.ticker-text {
    color: #fbbf24;
    font-size: 13px;
    font-weight: 500
}

.ticker-arrow {
    color: rgba(245, 158, 11, .7);
    font-size: 18px
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-8px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.animate-slide-down {
    animation: slide-down .3s ease-out
}

/* SLIDER */
.slider-wrap {
    padding: 12px 16px;
    overflow: hidden
}

.slider-track {
    display: flex;
    gap: 10px
}

.slider-pill {
    flex-shrink: 0;
    width: calc(33.33% - 7px);
    height: 62px;
    background: linear-gradient(135deg, #202c5a, #1a2350);
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    transition: transform .15s
}

.slider-pill:active {
    transform: scale(.98)
}

.slider-pill img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.slider-pill span {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-align: center
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 16px 12px
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .3);
    cursor: pointer;
    transition: background .2s
}

.slider-dot.active {
    background: #fbbf24
}

/* FILTER */
.filter-wrap {
    padding: 0 16px 8px
}

.filter-bar {
    background: linear-gradient(to right, rgba(120, 83, 0, .4), rgba(120, 83, 0, .3));
    border-radius: 9999px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(245, 158, 11, .3)
}

.search-btn {
    width: 34px;
    height: 34px;
    background: rgba(15, 23, 42, .8);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex-shrink: 0
}

.filter-pill {
    background: transparent;
    color: #9ca3af;
    padding: clamp(5px, 1.5vw, 8px) clamp(10px, 3.5vw, 18px);
    border-radius: 9999px;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s
}

.filter-pill.active {
    background: linear-gradient(to right, #f59e0b, #fbbf24);
    color: #fff
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a2350;
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: 9999px;
    padding: 6px 12px;
    margin-top: 8px
}

.search-bar input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    flex: 1
}

.search-bar input::placeholder {
    color: #6b7280
}

.search-bar button {
    color: #9ca3af;
    font-size: 14px;
    background: none;
    border: none;
    cursor: pointer
}

/* GAMES STORIES */
.games-wrap {
    padding: 0 10px 8px;
    overflow: visible
}

.games-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none
}

.games-track::-webkit-scrollbar {
    display: none
}

.game-story {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 66px;
    cursor: pointer
}

.game-ring-wrap {
    position: relative
}

.game-ring {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(135deg, #f59e0b, #eab308, #fbbf24);
    transition: transform .15s
}

.game-ring:hover {
    transform: scale(1.03)
}

.game-ring:active {
    transform: scale(.97)
}

.game-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
    background: #1a2350
}

.game-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #1e293b, #1e293b);
    display: flex;
    align-items: center;
    justify-content: center
}

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

.game-circle span {
    color: #fbbf24;
    font-size: 9px;
    font-weight: 700;
    text-align: center
}

.game-badge {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #f59e0b, #eab308);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 0 8px rgba(245, 158, 11, .4);
    z-index: 5
}

.game-label {
    color: #d1d5db;
    font-size: 11px;
    text-align: center;
    width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 10px;
    font-weight: 500
}

/* MAIN BOX - büyük container kutu */
.main-box {
    margin: 8px 0;
    border: 3px solid rgba(59, 130, 246, .2);
    border-radius: 16px;
    background: #1d2855;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(59, 130, 246, .12), 0 0 40px rgba(59, 130, 246, .06), 0 4px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.main-box .sticky-header {
    position: relative;
    border-radius: 0
}

.main-box .filter-wrap {
    padding: 10px 12px 6px
}

.main-box .games-wrap {
    padding: 0 8px 6px
}

.main-box .section-header {
    margin: 0;
    border-radius: 0
}

/* SECTION HEADER */
.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 0;
    background: #172046;
    border-top: none;
    border-bottom: none;
    margin: 10px 0 4px
}

.section-header h1,
.section-header h2 {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    margin: 0 6px;
    letter-spacing: .3px
}

.star-svg {
    filter: drop-shadow(0 1px 3px rgba(217, 119, 6, .4));
    flex-shrink: 0
}

/* TREND CARDS (premium style - line 1029-1054) */

.trend-card {
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(245, 158, 11, .5);
    animation: tglow 2.5s ease-in-out infinite;
    transition: transform .15s
}

.trend-card:hover {
    transform: translateY(-2px) scale(1.01)
}

.trend-card:active {
    transform: translateY(0) scale(.99)
}

.trend-card-gold {
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(245, 158, 11, .6);
    animation: tglow-gold 2.5s ease-in-out infinite;
    transition: transform .15s
}

.trend-card-gold:hover {
    transform: translateY(-2px) scale(1.01)
}

.trend-inner {
    display: flex;
    align-items: center;
    padding: 14px
}

.trend-inner-green {
    background: linear-gradient(to right, rgba(120, 83, 0, .6), rgba(120, 83, 0, .3), #0f172a)
}

.trend-inner-gold {
    background: linear-gradient(to right, rgba(120, 53, 0, .6), rgba(120, 53, 0, .3), #0f172a)
}

.trend-logo-wrap {
    position: relative;
    flex-shrink: 0
}

.trend-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 9999px;
    color: #fff;
    z-index: 10
}

.trend-badge-green {
    background: linear-gradient(90deg, #f59e0b 0%, #f59e0b 35%, #6ee7b7 50%, #f59e0b 65%, #f59e0b 100%);
    background-size: 200% 100%;
    animation: badge-shine 2s linear infinite;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .3)
}

.trend-badge-gold {
    background: linear-gradient(90deg, #f59e0b 0%, #f59e0b 35%, #fde68a 50%, #f59e0b 65%, #f59e0b 100%);
    background-size: 200% 100%;
    animation: badge-shine 2s linear infinite;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .3)
}

.trend-logo-box {
    width: 112px;
    height: 72px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    overflow: hidden;
    border: 2px solid rgba(245, 158, 11, .3);
    background: linear-gradient(145deg, #1e2a58 0%, #192252 50%, #162045 100%);
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3), 0 0 24px rgba(245, 158, 11, .06), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.trend-logo-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, .5), transparent);
    z-index: 2
}

.trend-logo-box-gold {
    border-color: rgba(245, 158, 11, .45);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3), 0 0 24px rgba(245, 158, 11, .1), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.trend-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    position: relative;
    z-index: 1
}

.trend-logo-box span {
    color: #fbbf24;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 4px
}

.trend-info {
    flex: 1;
    padding: 0 12px;
    text-align: center
}

.trend-bonus {
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -.5px;
    color: #fff
}

.trend-bonus .tl {
    color: #fbbf24
}

.trend-bonus-gold .tl {
    color: #fbbf24
}

.trend-type {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px
}

.trend-cta {
    flex-shrink: 0;
    padding: 12px 20px;
    background: linear-gradient(to right, #d97706, #f59e0b);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
    position: relative;
    overflow: hidden;
    transition: all .2s;
    text-decoration: none;
    display: inline-block
}

.trend-cta-gold {
    background: linear-gradient(to right, #d97706, #f59e0b);
    box-shadow: 0 4px 12px rgba(245, 158, 11, .3)
}

.trend-cta:hover {
    transform: translateY(-1px)
}

.trend-cta:active {
    transform: translateY(0) scale(.97)
}

/* POPULAR LIST CARDS (line 1055-1079) */
.trend-list,
.popular-list {
    padding: 6px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.list-card {
    display: flex;
    align-items: center;
    padding: 14px 14px;
    background: #1d2855;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .04);
    position: relative;
    overflow: hidden
}

.list-card-link {
    text-decoration: none;
    cursor: pointer;
    color: inherit
}

.card-badge-trend {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 14px;
    background: linear-gradient(135deg, #dc2626, #f59e0b);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    border-radius: 0 0 8px 8px;
    z-index: 3;
    text-transform: uppercase
}

.card-stars {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    z-index: 3;
    filter: drop-shadow(0 1px 3px rgba(217, 119, 6, .5));
    white-space: nowrap
}

.list-card:hover {
    border-color: rgba(255, 255, 255, .12);
    background: linear-gradient(145deg, rgba(30, 42, 88, .8), rgba(22, 32, 69, .95));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2), 0 0 20px rgba(59, 130, 246, .05)
}

.list-card:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.list-logo-box {
    width: clamp(70px, 22vw, 112px);
    height: clamp(46px, 14vw, 72px);
    background: #1a2350;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .2s
}

.list-logo-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
    z-index: 2
}

.list-logo-box:hover {
    transform: scale(1.03)
}

.list-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    border-radius: 10px;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.list-logo-box span {
    color: #fbbf24;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    padding: 4px 8px;
    letter-spacing: .3px;
    line-height: 1.2;
    word-break: break-word
}

.list-info {
    flex: 1;
    padding: 0 8px;
    text-align: center;
    min-width: 0
}

.list-bonus {
    color: #fff;
    font-weight: 800;
    font-size: clamp(16px, 4.5vw, 22px);
    white-space: nowrap
}

.list-bonus .tl {
    color: #fbbf24
}

.list-type {
    color: #d1d5db;
    font-size: 12px
}

.list-cta {
    flex-shrink: 0;
    padding: clamp(6px, 2vw, 10px) clamp(10px, 3vw, 16px);
    background: linear-gradient(to right, #d97706, #f59e0b);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: all .2s;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .2)
}

/* SHIMMER */

.list-cta:hover {
    background: linear-gradient(to right, #f59e0b, #fbbf24);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(245, 158, 11, .4);
}

.btn-shimmer {
    position: relative;
    overflow: hidden
}

.btn-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .08) 20%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .08) 80%, transparent 100%);
    animation: shimmer 2.5s ease-in-out infinite;
    pointer-events: none
}

@keyframes shimmer {
    0% {
        transform: translateX(-150%) skewX(-15deg)
    }

    100% {
        transform: translateX(250%) skewX(-15deg)
    }
}

@keyframes tglow {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(245, 158, 11, .2), 0 0 30px rgba(245, 158, 11, .08)
    }

    50% {
        box-shadow: 0 0 20px rgba(245, 158, 11, .35), 0 0 40px rgba(245, 158, 11, .12)
    }
}

@keyframes tglow-gold {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(245, 158, 11, .2), 0 0 30px rgba(245, 158, 11, .08)
    }

    50% {
        box-shadow: 0 0 20px rgba(245, 158, 11, .35), 0 0 40px rgba(245, 158, 11, .12)
    }
}

@keyframes badge-shine {
    0% {
        background-position: -200% center
    }

    100% {
        background-position: 200% center
    }
}

/* FOOTER */
.footer-section {
    text-align: center;
    padding: 24px 16px 32px;
    margin-bottom: 60px
}

.footer-copy {
    color: #6b7280;
    font-size: 12px
}

.footer-warn {
    color: #4b5563;
    font-size: 11px;
    margin-top: 4px
}

/* BOTTOM NAV */
.bottom-nav {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    z-index: 40;
    padding: 0 12px
}

.nav-glass {
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px;
    padding: 8px 6px;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-around
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 14px;
    color: #9ca3af;
    transition: all .2s;
    text-decoration: none
}

.nav-btn span {
    font-size: 10px;
    font-weight: 600
}

.nav-btn:hover {
    background: rgba(245, 158, 11, .15);
    color: #fbbf24;
    transform: translateY(-2px);
}

.nav-btn.active {
    background: linear-gradient(to right, #f59e0b, #fbbf24);
    color: #fff
}

.tg-nav {
    color: #38bdf8
}

.tg-nav span {
    color: #38bdf8
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px
}

.modal-overlay.active {
    display: flex
}

.modal-close-red {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: none;
    z-index: 10
}

/* WHEEL MODAL */
.wheel-box {
    background: linear-gradient(to bottom, #1d2855, #1a2350);
    border-radius: 20px;
    padding: 28px;
    max-width: 380px;
    width: 100%;
    position: relative;
    border: 1px solid rgba(245, 158, 11, .2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
}

.wheel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px
}

.wheel-header h2 {
    color: #fff;
    font-weight: 700;
    font-size: 18px
}

.wheel-container {
    position: relative;
    width: 256px;
    height: 256px;
    margin: 0 auto 16px
}

.wheel-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 28px solid #fbbf24;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3))
}

.wheel-spin {
    width: 100%;
    height: 100%;
    transition: transform 4s cubic-bezier(.2, .8, .3, 1)
}

.wheel-spin-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, #d97706, #eab308);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(245, 158, 11, .3)
}

.wheel-spin-btn:disabled {
    opacity: .5
}

/* TREASURE MODAL */
.treasure-box {
    background: linear-gradient(to bottom, #1e293b, #1e293b);
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: 20px;
    padding: 16px;
    max-width: 100%;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
}

.treasure-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px
}

.treasure-icon-wrap {
    width: 32px;
    height: 32px;
    background: rgba(245, 158, 11, .2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.treasure-header h3 {
    color: #fff;
    font-weight: 700;
    font-size: 18px
}

.treasure-desc {
    color: #d1d5db;
    text-align: center;
    font-size: 14px;
    margin-bottom: 24px
}

.treasure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow-x: auto
}

.chest-btn {
    aspect-ratio: 1;
    border-radius: 12px;
    padding: 8px;
    background: #1d2855;
    border: 1px solid rgba(245, 158, 11, .2);
    transition: all .3s;
    cursor: pointer
}

.chest-btn:hover {
    border-color: rgba(245, 158, 11, .5);
    background: #2a3868
}

.chest-btn.selected {
    background: rgba(245, 158, 11, .3);
    border: 2px solid #fbbf24;
    transform: scale(1.1);
    z-index: 10
}

.chest-btn.dimmed {
    opacity: .4
}

.chest-btn.pulse {
    animation: pulse 1s infinite
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

.chest-svg {
    width: 100%;
    height: 100%
}

.treasure-result {
    text-align: center;
    padding: 24px 0
}

.treasure-won-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 16px
}

.treasure-won-icon svg {
    width: 100%;
    height: 100%
}

.treasure-won-label {
    color: #fbbf24;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px
}

.treasure-won-amount {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 4px
}

.treasure-won-type {
    color: #9ca3af;
    font-size: 14px;
    margin-bottom: 8px
}

.treasure-won-site {
    color: #fbbf24;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px
}

.treasure-cta {
    display: block;
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, #d97706, #f59e0b);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(245, 158, 11, .3);
    box-shadow: 0 4px 16px rgba(245, 158, 11, .3)
}

.treasure-hint {
    color: #6b7280;
    font-size: 12px;
    text-align: center;
    margin-top: 16px
}

/* WIN POPUP */
.win-box {
    background: linear-gradient(to bottom, #1d2855, #182348);
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 28px;
    max-width: 380px;
    width: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
}

.win-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px
}

.win-header span {
    color: #fff;
    font-weight: 700
}

.win-prize {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px
}

.win-type {
    color: #9ca3af;
    font-size: 14px;
    margin-bottom: 8px
}

.win-site {
    color: #fbbf24;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px
}

.win-cta {
    display: block;
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, #d97706, #f59e0b);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(245, 158, 11, .3);
    box-shadow: 0 4px 16px rgba(245, 158, 11, .3)
}

/* STORIES MODAL */
.stories-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 50
}

.stories-container {
    width: 100%;
    max-width: 720px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative
}

.stories-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.5);
    filter: blur(20px)
}

.stories-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(20px)
}

.stories-progress {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 6px;
    padding: 12px 16px 4px
}

.stories-progress-bar {
    flex: 1;
    height: 2.5px;
    background: rgba(255, 255, 255, .2);
    border-radius: 9999px;
    overflow: hidden
}

.stories-progress-fill {
    height: 100%;
    background: #fff;
    border-radius: 9999px;
    transition: width .1s linear
}

.stories-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px
}

.stories-profile {
    display: flex;
    align-items: center;
    gap: 10px
}

.stories-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, #fbbf24, #06b6d4)
}

.stories-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #000
}

.stories-name {
    color: #fff;
    font-weight: 600;
    font-size: 13px
}

.stories-time {
    color: rgba(255, 255, 255, .4);
    font-size: 11px;
    margin-left: 6px
}

.stories-close-btn {
    color: rgba(255, 255, 255, .6);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px
}

.stories-close-btn:hover {
    color: #fff
}

.stories-content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow-y: auto;
    padding: 0 20px 32px
}

.stories-game-img-wrap {
    margin-bottom: 20px;
    flex-shrink: 0;
    position: relative
}

.stories-game-glow {
    position: absolute;
    inset: -12px;
    background: rgba(245, 158, 11, .1);
    border-radius: 28px;
    filter: blur(16px)
}

.stories-game-img {
    position: relative;
    width: 192px;
    height: 192px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .15)
}

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

.stories-game-info {
    text-align: center;
    margin-bottom: 4px;
    flex-shrink: 0
}

.stories-game-label {
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px
}

.stories-multiplier {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px
}

#stories-multi-num {
    font-size: 48px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px
}

.stories-multi-x {
    font-size: 20px;
    font-weight: 700;
    color: #fbbf24
}

.stories-desc {
    color: rgba(255, 255, 255, .5);
    text-align: center;
    font-size: 12px;
    margin-bottom: 20px;
    flex-shrink: 0;
    max-width: 240px
}

.stories-sites {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 30
}

.story-site-btn {
    width: 100%;
    cursor: pointer;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .15s;
    text-decoration: none;
    color: inherit
}

.story-site-btn:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(245, 158, 11, .3)
}

.story-site-btn:active {
    transform: scale(.98)
}

.story-site-left {
    display: flex;
    align-items: center;
    gap: 12px
}

.story-site-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(245, 158, 11, .15);
    display: flex;
    align-items: center;
    justify-content: center
}

.story-site-icon svg {
    width: 16px;
    height: 16px;
    color: #fbbf24
}

.story-site-name {
    color: #fff;
    font-weight: 600;
    font-size: 14px
}

.story-site-bonus {
    color: rgba(52, 211, 153, .8);
    font-size: 11px;
    font-weight: 500
}

.story-site-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .25)
}

.story-site-arrow svg {
    width: 14px;
    height: 14px;
    color: #fff
}

.stories-nav-left {
    position: absolute;
    left: 0;
    top: 80px;
    bottom: 256px;
    width: 25%;
    z-index: 20;
    cursor: pointer
}

.stories-nav-right {
    position: absolute;
    right: 0;
    top: 80px;
    bottom: 256px;
    width: 25%;
    z-index: 20;
    cursor: pointer
}

/* FOOTER */
.footer-section {
    text-align: center;
    padding: 24px 20px 16px;
    border-top: 1px solid rgba(255, 255, 255, .06)
}

.footer-copy {
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px
}

.footer-warn {
    color: rgba(255, 255, 255, .3);
    font-size: 11px
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .4);
    border-radius: 4px
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .4) transparent
}

/* FADE IN UP */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.animate-fade-in-up {
    animation: fade-in-up .3s ease-out
}

/* PREMIUM PROMO POPUP */
.promo-popup-box {
    position: relative;
    max-width: 360px;
    width: 92%;
    background: linear-gradient(170deg, #1d2855 0%, #1a2350 50%, #161f45 100%);
    border-radius: 24px;
    padding: 40px 30px 30px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    animation: popupBounceIn .5s cubic-bezier(.68, -.55, .27, 1.55);
    border: 1px solid rgba(245, 158, 11, .15);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.promo-glow {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 180%;
    height: 180%;
    background: radial-gradient(ellipse at 50% 30%, rgba(245, 158, 11, .04) 0%, transparent 50%);
    pointer-events: none
}

.promo-logo-wrap {
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1
}

.promo-logo-ring {
    width: 180px;
    height: 80px;
    background: linear-gradient(145deg, rgba(10, 30, 20, .9), rgba(8, 25, 15, .8));
    border: 1px solid rgba(0, 255, 136, .12);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(0, 255, 136, .05), 0 4px 16px rgba(0, 0, 0, .4)
}

.promo-logo-ring img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .2))
}

.promo-bonus-amount {
    font-size: 64px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 1;

    margin-bottom: 4px
}

.promo-tl {
    font-size: 24px;
    font-weight: 700;
    color: #fbbf24;
    margin-left: 4px
}

.promo-bonus-type {
    font-size: 20px;
    font-weight: 800;
    color: #f59e0b;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1px
}

.promo-tagline {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    z-index: 1
}

.promo-cta-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: none;
    transition: transform .2s, box-shadow .2s;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    letter-spacing: .5px
}

.promo-cta-btn:hover {
    transform: scale(1.03);
    box-shadow: none
}

.promo-cta-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    animation: promoShimmer 2s ease-in-out infinite
}

/* Popup yeni stiller - Grandpashabet tarzı */
.promo-header-text {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
    position: relative;
    z-index: 1
}

.promo-main-title {
    font-size: 32px;
    font-weight: 900;
    color: #f59e0b;
    text-shadow: 0 2px 8px rgba(245, 158, 11, .3);
    letter-spacing: 1px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    animation: none
}

.promo-sub-header {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    position: relative;
    z-index: 1
}

.promo-logo-wrap {
    margin: 16px auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1
}

.promo-logo-ring {
    width: 160px;
    height: 60px;
    background: linear-gradient(145deg, rgba(25, 38, 80, .9), rgba(18, 28, 62, .8));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 16px rgba(0, 0, 0, .3)
}

/* Particles animasyonu */
.promo-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

.promo-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #f59e0b;
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 4s ease-in-out infinite
}

.promo-particles span:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.promo-particles span:nth-child(2) {
    left: 30%;
    animation-delay: .7s;
}

.promo-particles span:nth-child(3) {
    left: 50%;
    animation-delay: 1.4s;
}

.promo-particles span:nth-child(4) {
    left: 70%;
    animation-delay: 2.1s;
}

.promo-particles span:nth-child(5) {
    left: 85%;
    animation-delay: 2.8s;
}

.promo-particles span:nth-child(6) {
    left: 45%;
    animation-delay: 3.5s;
}

@keyframes particleFloat {
    0% {
        bottom: -5%;
        opacity: 0;
        transform: scale(.5)
    }

    20% {
        opacity: .8
    }

    80% {
        opacity: .4
    }

    100% {
        bottom: 105%;
        opacity: 0;
        transform: scale(0)
    }
}

@keyframes neonPulse {

    0%,
    100% {
        text-shadow: 0 2px 8px rgba(245, 158, 11, .3)
    }

    50% {
        text-shadow: 0 2px 12px rgba(245, 158, 11, .5)
    }
}

.promo-cta-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .2);
    transition: transform .2s, box-shadow .2s;
    letter-spacing: .5px
}

.promo-cta-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(245, 158, 11, .3)
}

/* Ateş animasyonu */
.promo-fire {
    position: absolute;
    bottom: -8px;
    left: -10px;
    right: -10px;
    height: 80px;
    pointer-events: none;
    z-index: 0;
    filter: blur(1px)
}

.promo-fire span {
    position: absolute;
    bottom: 0;
    border-radius: 50% 50% 20% 20%;
    animation: fireFlicker 1.2s ease-in-out infinite alternate
}

.promo-fire span:nth-child(1) {
    left: 10%;
    width: 40px;
    height: 50px;
    background: linear-gradient(0deg, #ff4500 0%, #ff6a00 40%, #ffd700 80%, transparent 100%);
    animation-duration: .8s;
    opacity: .9
}

.promo-fire span:nth-child(2) {
    left: 30%;
    width: 50px;
    height: 65px;
    background: linear-gradient(0deg, #ff4500 0%, #ff8c00 30%, #ffa500 60%, #ffd700 85%, transparent 100%);
    animation-duration: 1s;
    animation-delay: .2s;
    opacity: .85
}

.promo-fire span:nth-child(3) {
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 75px;
    background: linear-gradient(0deg, #dc143c 0%, #ff4500 25%, #ff6a00 50%, #ffd700 80%, transparent 100%);
    animation-duration: 1.2s;
    animation-delay: .1s
}

.promo-fire span:nth-child(4) {
    right: 30%;
    width: 45px;
    height: 55px;
    background: linear-gradient(0deg, #ff4500 0%, #ff8c00 40%, #ffd700 75%, transparent 100%);
    animation-duration: .9s;
    animation-delay: .3s;
    opacity: .9
}

.promo-fire span:nth-child(5) {
    right: 8%;
    width: 35px;
    height: 45px;
    background: linear-gradient(0deg, #ff6a00 0%, #ffa500 50%, #ffd700 85%, transparent 100%);
    animation-duration: 1.1s;
    animation-delay: .15s;
    opacity: .8
}

@keyframes fireFlicker {
    0% {
        height: 100%;
        opacity: .7;
        transform: scaleX(1) rotate(-2deg)
    }

    25% {
        height: 120%;
        opacity: .9;
        transform: scaleX(1.1) rotate(1deg)
    }

    50% {
        height: 90%;
        opacity: .8;
        transform: scaleX(.95) rotate(-1deg)
    }

    75% {
        height: 115%;
        opacity: .95;
        transform: scaleX(1.05) rotate(2deg)
    }

    100% {
        height: 105%;
        opacity: .75;
        transform: scaleX(1) rotate(-1deg)
    }
}


.popup2-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: relative;
    z-index: 1
}

.popup2-star {
    color: #f59e0b;
    font-size: 18px;
    filter: drop-shadow(0 1px 3px rgba(217, 119, 6, .4))
}

.popup2-title {
    color: #f59e0b;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .5px
}

.popup2-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1
}

.popup2-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    background: linear-gradient(145deg, rgba(29, 40, 85, .6), rgba(26, 35, 80, .8));
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    text-decoration: none;
    transition: all .2s
}

.popup2-card:hover {
    background: linear-gradient(145deg, rgba(36, 52, 104, .8), rgba(29, 40, 85, .9));
    border-color: rgba(245, 158, 11, .15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2)
}

.popup2-logo {
    width: 88px;
    height: 56px;
    flex-shrink: 0;
    background: #1d2855;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px
}

.popup2-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: auto
}

.popup2-info {
    flex: 1;
    min-width: 0
}

.popup2-bonus {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    white-space: nowrap
}

.popup2-unit {
    font-size: 13px;
    font-weight: 700;
    color: #fbbf24;
    margin-left: 2px
}

.popup2-type {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
    margin-top: 2px
}

.popup2-cta {
    flex-shrink: 0;
    padding: 10px 16px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    border-radius: 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s
}

.popup2-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(245, 158, 11, .4)
}

@keyframes popupBounceIn {
    0% {
        opacity: 0;
        transform: scale(.3)
    }

    50% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(.95)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

/* Premium halo ring */
.promo-halo {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: conic-gradient(from 0deg, transparent, rgba(245, 158, 11, .4), transparent, rgba(245, 158, 11, .2), transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: haloSpin 4s linear infinite;
    pointer-events: none;
    z-index: 0
}

/* Premium sweep light */
.promo-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(245, 158, 11, .06) 45%, rgba(255, 255, 255, .08) 50%, rgba(245, 158, 11, .06) 55%, transparent 60%);
    animation: sweepLight 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0
}

@keyframes haloSpin {
    0% {
        transform: translateX(-50%) rotate(0deg)
    }

    100% {
        transform: translateX(-50%) rotate(360deg)
    }
}

@keyframes sweepLight {
    0% {
        left: -100%
    }

    50% {
        left: 200%
    }

    100% {
        left: 200%
    }
}

@keyframes promoGlowPulse {

    0%,
    100% {
        opacity: .5;
        transform: translateX(-50%) scale(1)
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1)
    }
}

@keyframes bonusPulse {

    0%,
    100% {
        text-shadow: 0 0 30px rgba(245, 158, 11, .4), 0 4px 12px rgba(0, 0, 0, .4)
    }

    50% {
        text-shadow: 0 0 50px rgba(245, 158, 11, .6), 0 0 80px rgba(245, 158, 11, .2), 0 4px 12px rgba(0, 0, 0, .4)
    }
}

@keyframes promoShimmer {
    0% {
        left: -100%
    }

    100% {
        left: 200%
    }
}

/* ============================================
   MOBIL RESPONSIVE
   ============================================ */
@media screen and (max-width: 768px) {

    /* Ana kutu */
    .main-box {
        margin: 0;
        border-radius: 0;
        border: none;
    }

    /* --- SLIDER KARTLARI (h-58px) --- */
    .slider-item {
        height: 58px;
    }

    .slider-item img {
        height: 100%;
        object-fit: contain;
    }

    /* --- OYUN KARTLARI (66x66 kare) --- */
    .games-wrap {
        padding: 4px 12px;
    }

    .game-ring {
        width: 66px;
        height: 66px;
    }

    .game-story {
        min-width: 66px;
        width: 66px;
    }

    .game-name {
        font-size: 10px;
    }

    .games-track {
        gap: 12px;
    }

    /* --- TREND SITELER --- */
    .trend-logo-box {
        width: 80px;
        height: 52px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .trend-logo-box img {
        height: 36px;
        max-width: 72px;
        object-fit: contain;
        padding: 0;
    }

    .trend-badge {
        font-size: 8px;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .trend-bonus {
        font-size: 18px;
        font-weight: 700;
        white-space: nowrap;
    }

    .trend-bonus .tl {
        font-size: 14px;
    }

    .trend-type {
        font-size: 11px;
    }

    .trend-cta {
        font-size: 11px;
        padding: 7px 10px;
        border-radius: 8px;
        white-space: nowrap;
    }

    .trend-card {
        padding: 8px 10px;
        gap: 6px;
    }

    /* --- POPULER LISTE --- */
    .list-logo-box {
        width: 80px;
        height: 52px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .list-logo-box img {
        height: 36px;
        max-width: 72px;
        object-fit: contain;
        padding: 0;
    }

    .list-badge {
        font-size: 8px;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .list-bonus {
        font-size: 18px;
        font-weight: 700;
        white-space: nowrap;
    }

    .list-bonus .tl {
        font-size: 14px;
    }

    .list-type {
        font-size: 11px;
    }

    .list-cta {
        font-size: 11px;
        padding: 7px 10px;
        border-radius: 8px;
        white-space: nowrap;
    }

    .list-card {
        padding: 8px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .list-info {
        padding: 0 6px;
    }

    /* --- KAZANDI TICKER --- */
    .ticker-bar {
        padding: 8px 16px;
    }

    .ticker-user {
        font-size: 12px;
    }

    .ticker-amount {
        font-size: 14px;
        font-weight: 700;
    }

    .ticker-text {
        font-size: 12px;
    }

    /* --- FILTRE TABS (px-4 py-1.5 text-xs) --- */
    .filter-wrap {
        padding: 0 12px 8px;
    }

    .filter-bar {
        padding: 4px;
        gap: 8px;
        border-radius: 12px;
    }

    .filter-pill {
        padding: 6px 16px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 8px;
    }

    .filter-pill.active {
        border-radius: 8px;
    }

    .search-btn {
        width: 32px;
        height: 32px;
    }

    .search-btn svg {
        width: 16px;
        height: 16px;
    }

    /* --- SECTION HEADER --- */
    .section-header {
        padding: 10px 0;
        margin: 8px 0 4px;
        gap: 6px;
    }

    .section-header h1,
    .section-header h2 {
        font-size: 15px;
        margin: 0 4px;
    }

    .star-svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* --- TELEGRAM BANNER (rounded-lg) --- */
    .tg-banner {
        border-radius: 8px;
        margin: 8px 12px;
    }

    .tg-banner img {
        width: 100%;
        border-radius: 8px;
    }

    /* --- FREESPIN BAR --- */
    .freespin-bar {
        padding: 10px 12px;
        gap: 8px;
    }

    .freespin-title {
        font-size: 14px;
    }

    .freespin-cta {
        padding: 6px 12px;
        font-size: 11px;
    }

    /* --- HAZINE SANDIGI (max-w-sm p-5 gap-3) --- */
    .treasure-box {
        max-width: 100%;
        padding: 20px;
        border-radius: 16px;
    }

    .treasure-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .chest-btn {
        aspect-ratio: 1;
        border-radius: 12px;
        padding: 12px;
    }

    .treasure-header h3 {
        font-size: 16px;
    }

    .treasure-desc {
        font-size: 13px;
    }

    .treasure-cta {
        padding: 12px;
        border-radius: 12px;
        font-size: 13px;
    }

    /* --- BOTTOM NAV (h-72px) --- */
    .bottom-nav {
        height: 72px;
        padding: 6px 8px 4px;
        border-radius: 16px 16px 0 0;
    }

    .nav-item span {
        font-size: 10px;
    }

    /* --- FEATURED POPUP --- */
    .promo-popup-box {
        max-width: 92vw;
        width: 360px;
        border-radius: 20px;
        padding: 32px 24px 24px;
    }

    .promo-logo-ring {
        width: 90px;
        height: 36px;
    }

    .promo-bonus-amount {
        font-size: 38px;
    }

    .promo-tl {
        font-size: 22px;
    }

    .promo-bonus-type {
        font-size: 13px;
    }

    .promo-cta-btn {
        padding: 14px 28px;
        border-radius: 12px;
        font-size: 15px;
    }

    .promo-header-text,
    .promo-sub-header {
        font-size: 10px;
    }

    .promo-main-title {
        font-size: 14px;
    }

    .promo-tagline {
        font-size: 11px;
    }

    .promo-close {
        width: 32px;
        height: 32px;
    }

    /* --- POPUP2 TREND SITELER (max-w-sm) --- */
    .popup2-inner {
        max-width: 384px;
        border-radius: 16px;
    }

    .popup2-card {
        padding: 8px;
        gap: 8px;
    }

    .popup2-logo {
        width: 80px;
        height: 48px;
        border-radius: 8px;
    }

    .popup2-bonus {
        font-size: 14px;
        white-space: nowrap;
    }

    .popup2-unit {
        font-size: 12px;
    }

    .popup2-type {
        font-size: 11px;
    }

    .popup2-cta {
        font-size: 12px;
        padding: 8px 12px;
        border-radius: 8px;
    }

    .popup2-close {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
   KUCUK MOBIL - 380px ve alti
   ============================================ */
@media screen and (max-width: 380px) {

    .trend-logo-box,
    .list-logo-box {
        width: 90px;
        height: 58px;
    }

    .trend-bonus,
    .list-bonus {
        font-size: 17px;
    }

    .trend-cta,
    .list-cta {
        padding: 6px 10px;
        font-size: 11px;
    }

    .filter-pill {
        padding: 5px 10px;
        font-size: 11px;
    }

    .section-header h1,
    .section-header h2 {
        font-size: 13px;
    }

    .game-ring {
        width: 56px;
        height: 56px;
    }

    .game-story {
        min-width: 56px;
        width: 56px;
    }

    .promo-bonus-amount {
        font-size: 28px;
    }

    .popup2-logo {
        width: 64px;
        height: 40px;
    }
}