@property --led-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    --red: #ff2a2a;
    --red-dim: rgba(255, 42, 42, 0.25);
    --red-glow: rgba(255, 42, 42, 0.12);
    --dark-bg: #0a0a0c;
    --card-bg: rgb(12, 15, 20);
    --border: rgba(255, 255, 255, 0.06);
    --gold: #ffd700;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--dark-bg);
}

.page-wrapper {
    min-height: 100vh;
    background: var(--dark-bg);
    padding-top: 90px;
    position: relative;
    overflow-x: hidden;
}

.bg-glow-effect {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(255, 42, 42, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(255, 42, 42, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ── PAGE HERO ── */
.page-hero {
    text-align: center;
    padding: 0 20px 36px;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 42, 42, 0.08);
    border: 1px solid rgba(255, 42, 42, 0.25);
    color: var(--red);
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 5px 18px;
    border-radius: 30px;
    margin-bottom: 14px;
}

.page-hero h1 {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 5px;
    margin-bottom: 10px;
}

.page-hero h1 span {
    color: var(--red);
}

.page-hero p {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1px;
    max-width: 450px;
    margin: 0 auto;
}

/* ── FILTER TABS ── */
.filter-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 36px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    padding: 0 16px;
}

.filter-tab {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover {
    border-color: rgba(255, 42, 42, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.filter-tab.active {
    background: rgba(255, 42, 42, 0.1);
    border-color: rgba(255, 42, 42, 0.45);
    color: var(--red);
    box-shadow: 0 0 14px rgba(255, 42, 42, 0.1);
}

.filter-tab.active.vip-tab {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.4);
    color: var(--gold);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.08);
}

/* ── SECTION ── */
.test-bonuses-section {
    padding: 0 28px 80px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ── SECTION HEADER ── */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.section-header .section-icon {
    font-size: 1.1rem;
}

.section-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.section-header .section-count {
    margin-left: auto;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.2);
}

.section-header.vip-header {
    border-bottom-color: rgba(255, 215, 0, 0.1);
}

.section-header.vip-header h2 {
    color: var(--gold);
}

/* ── BONUS GRID ── */
.bonus-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 50px;
}

/* ── LED BORDER ANIMATION ── */
@keyframes led-spin {
    from {
        --led-angle: 0deg;
    }

    to {
        --led-angle: 360deg;
    }
}

/* ── FIRE GLOW ANIMATION ── */
@keyframes inner-fire {
    0% {
        opacity: 0.35;
        background: linear-gradient(to top, rgba(255, 30, 0, 0.30) 0%, rgba(180, 0, 0, 0.08) 40%, transparent 70%);
    }

    50% {
        opacity: 0.50;
        background: linear-gradient(to top, rgba(255, 50, 0, 0.38) 0%, rgba(200, 10, 0, 0.10) 45%, transparent 72%);
    }

    100% {
        opacity: 0.35;
        background: linear-gradient(to top, rgba(255, 30, 0, 0.30) 0%, rgba(180, 0, 0, 0.08) 40%, transparent 70%);
    }
}

/* ── CARD SHELL — border beam wrapper ── */
.card-shell {
    position: relative;
    border-radius: 12px;
    padding: 1.5px;
    /* border thickness */
    background: #111;
    /* fallback */
}

/* Spinning comet gradient behind the card */
.card-shell::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    background: conic-gradient(from var(--led-angle),
            transparent 0deg,
            transparent 320deg,
            #550000 325deg,
            #cc2200 335deg,
            #ff4400 342deg,
            #ffaa00 347deg,
            #ffffff 350deg,
            /* bright hot centre */
            #ffaa00 353deg,
            #ff4400 357deg,
            transparent 360deg);
    animation: led-spin 3s linear infinite;
    z-index: 0;
}

/* Inner mask — covers middle, leaves only the thin border visible */
.card-shell::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: rgb(12, 15, 20);
    border-radius: 10.5px;
    z-index: 1;
}

/* ── BONUS CARD ── */
.bonus-card {
    background: transparent;
    border: none;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 120px;
    width: 100%;
    padding: 22px 16px 18px;
    text-decoration: none;
    position: relative;
    z-index: 2;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    cursor: pointer;
}

/* ── INNER FIRE LAYER ── */
.fire-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 10px;
    background: linear-gradient(to top, rgba(255, 30, 0, 0.28) 0%, rgba(160, 0, 0, 0.10) 38%, transparent 68%);
    animation: inner-fire 8s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

.bonus-card:hover .fire-glow {
    animation-duration: 4s;
    opacity: 1;
}

/* HOVER */
.bonus-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 100, 0, 0.15);
    animation-duration: 1.5s;
}

.bonus-card.vip-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 215, 0, 0.1),
        inset 0 0 24px rgba(255, 215, 0, 0.03);
}

/* ── SHIMMER ── */
.shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.55s ease;
    pointer-events: none;
}

.bonus-card:hover .shimmer {
    transform: translateX(100%);
}

/* ── LOGO ── */
.card-logo-img {
    width: 100%;
    max-width: 175px;
    height: 46px;
    object-fit: contain;
    filter: brightness(0.88) saturate(0.85);
    transition: filter 0.28s ease, transform 0.28s ease;
    position: relative;
    z-index: 1;
}

.bonus-card:hover .card-logo-img {
    filter: brightness(1.1) saturate(1.05);
    transform: scale(1.04);
}

/* ── VIP BADGE ── */
.vip-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    color: #000;
    font-family: 'Outfit', sans-serif;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    z-index: 3;
}

/* ── BADGE SHELL — küçük kart LED border ── */
.badge-shell {
    position: relative;
    border-radius: 9px;
    padding: 1px;
    z-index: 2;
}

.badge-shell::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 10px;
    background: conic-gradient(from var(--led-angle),
            transparent 0deg,
            transparent 325deg,
            rgba(80, 0, 0, 0.6) 328deg,
            rgba(180, 30, 0, 0.7) 337deg,
            rgba(220, 70, 0, 0.6) 344deg,
            rgba(200, 120, 0, 0.5) 349deg,
            rgba(255, 180, 80, 0.4) 352deg,
            rgba(180, 60, 0, 0.3) 355deg,
            transparent 360deg);
    animation: led-spin 3s linear infinite;
    z-index: 0;
}

.badge-shell::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: rgba(22, 8, 8, 0.97);
    border-radius: 7px;
    z-index: 1;
}

/* ── BONUS AMOUNT BADGE (sade, animasyonsuz) ── */
.bonus-amount-badge {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 6px 18px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
}

.badge-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 2px;
    background: linear-gradient(to top, #ff2a2a 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.badge-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.2;
    background: linear-gradient(to top, #ff3300 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── FADE IN ── */
.animate-up {
    animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── EMPTY ── */
.empty-state {
    text-align: center;
    padding: 80px 0;
    font-family: 'Outfit', sans-serif;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 2px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
    .bonus-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 10px;
    }
}

@media (max-width: 850px) {
    .bonus-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px;
    }

    .bonus-card {
        padding: 12px 5px;
        min-height: 90px;
    }

    .badge-amount {
        font-size: 0.8rem;
    }

    .badge-label {
        font-size: 0.45rem;
    }

    .card-logo-img {
        max-height: 28px;
    }
}

@media (max-width: 500px) {
    .test-bonuses-section {
        padding: 0 4px 60px;
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    .bonus-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .card-shell {
        width: 100% !important;
        min-width: 0 !important;
    }

    .bonus-card {
        min-height: 100px !important;
        max-height: 100px !important;
        height: 100px !important;
        padding: 8px 2px !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-logo-img {
        height: 22px !important;
        width: 90% !important;
        max-width: 75px !important;
        min-height: 22px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        flex-shrink: 0;
    }

    .badge-amount {
        font-size: 0.75rem !important;
        line-height: 1 !important;
    }

    .badge-label {
        font-size: 0.4rem !important;
        letter-spacing: 0px !important;
    }

    .page-hero h1 {
        font-size: 1.2rem !important;
        letter-spacing: 2px !important;
    }

    .badge-shell {
        padding: 0.5px !important;
        width: 100% !important;
    }

    .badge-shell::after {
        inset: 0.5px !important;
    }

    /* ANIMASYON OPTIMIZASYONU (DONMA GIDERME) */
    .card-shell::before,
    .badge-shell::before {
        opacity: 0.3 !important;
        /* Isigi iyice soldur */
        animation-duration: 6s !important;
        /* Donmayi azaltmak icin yavaslat */
    }

    .fire-glow {
        display: none !important;
        /* CPU yoran ek katmani mobilde kapat */
    }
}