/* PusluBet — Anasayfa site uyumu (bonus / deposit / app-shell) */

.home-page {
    --home-accent: var(--sea-blue, #ff003a);
    --home-accent-2: var(--sea-blue-3, #cc002e);
    --home-accent-soft: rgba(255, 0, 58, 0.16);
    --home-accent-border: rgba(255, 0, 58, 0.22);
    --home-gold: var(--cyan-soft, #ff3361);
    --home-text: var(--text-main, #ffffff);
    --home-muted: var(--text-soft, #a8aeb8);
    --home-surface: #1e2126;
    --home-border: rgba(255, 0, 58, 0.16);
    background: transparent;
}

.home-page::before {
    display: none;
}

.home-ambient {
    opacity: 0.55;
}

.home-ambient__orb--1,
.home-ambient__orb--2,
.home-ambient__orb--3 {
    background: rgba(255, 0, 58, 0.1);
}

/* ── Hero slider ── */
.home-hero__frame {
    border-radius: 18px;
    border: 1px solid var(--home-border);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.home-hero__frame > .home-slider,
.home-hero__frame > .swiper {
    border-radius: calc(18px - 1px);
}

.home-hero__overlay {
    background: linear-gradient(to top, rgba(14, 39, 66, 0.96) 0%, rgba(14, 39, 66, 0.45) 45%, transparent 100%);
}

.home-hero__overlay p {
    color: var(--home-muted);
}

/* ── Kategori nav + trust ── */
.home-cat-nav__panel {
    border-radius: 1rem;
    border: 1px solid var(--home-border);
    background: #1e2126;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.home-cat-nav__item {
    border-radius: 12px;
    min-height: 4.35rem;
    gap: 0.32rem;
    padding: 0.28rem 0.12rem 0.18rem;
}

.home-cat-nav__icon {
    width: 3.35rem;
    height: 3.35rem;
    overflow: hidden;
    background: #1e2126;
    border: 1.5px solid rgba(255, 0, 58, 0.42);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 0, 58, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateZ(0);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.home-cat-nav__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.home-cat-nav__item:hover .home-cat-nav__icon,
.home-cat-nav__item:focus-visible .home-cat-nav__icon {
    transform: translateY(-3px) scale(1.06);
    border-color: rgba(255, 0, 58, 0.78);
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(255, 0, 58, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.home-cat-nav__label {
    font-size: 0.62rem;
}

@media (max-width: 640px) {
    .home-cat-nav__icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .home-cat-nav__item {
        min-height: 3.7rem;
    }

    .home-cat-nav__label {
        font-size: 0.5rem;
    }
}

/* ── Bölüm başlıkları ── */
.home-section-header__icon {
    overflow: hidden;
    border-radius: 999px;
    background: #1e2126;
    border: 1px solid rgba(255, 0, 58, 0.32);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 0;
}

.home-section-header__icon i {
    color: var(--home-accent);
}

.home-section-header__icon img,
.home-stat-card__icon img,
.home-step__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-stat-card__icon,
.home-step__icon {
    overflow: hidden;
    border-radius: 999px;
    padding: 0;
    background: #1e2126;
}

.home-cta__badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.home-cta__badges .ui3d-icon {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    flex-shrink: 0;
}

/* ── Jackpot duvarı (v1 fallback — v2 kendi CSS dosyasını kullanır) ── */
.jackpot-wall:not(.jackpot-wall--v2) {
    background: transparent;
    border-top: 1px solid rgba(255, 0, 58, 0.1);
    border-bottom: none;
}

.jackpot-wall:not(.jackpot-wall--v2)::before {
    background-image: radial-gradient(circle at 18% 24%, rgba(255, 0, 58, 0.05) 0, transparent 32%);
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-wall__banner {
    border-radius: 18px;
    border: 1px solid var(--home-border);
    background: var(--home-surface);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-wall__banner-title {
    background: linear-gradient(90deg, #fff 0%, #ff3361 50%, var(--home-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-wall__banner-live {
    border-color: rgba(255, 0, 58, 0.35);
    background: rgba(255, 0, 58, 0.1);
    color: var(--home-gold);
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-wall__banner-live-dot {
    background: var(--home-accent);
    box-shadow: 0 0 10px rgba(255, 0, 58, 0.55);
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-box {
    border-radius: 18px;
    border: 1px solid var(--home-border);
    border-left: 3px solid var(--jackpot-accent, rgba(255, 0, 58, 0.75));
    background: var(--home-surface);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-box--featured {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(255, 0, 58, 0.1), transparent 55%),
        #1e2126;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(255, 0, 58, 0.1);
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-box--grand {
    --jackpot-accent: #ff3361;
    --jackpot-accent-soft: rgba(255, 0, 58, 0.32);
    --jackpot-glow: rgba(255, 0, 58, 0.18);
    --jackpot-ring: rgba(255, 0, 58, 0.52);
    --jackpot-amount-1: #fff8e8;
    --jackpot-amount-2: #ff3361;
    --jackpot-amount-3: #cc002e;
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-box--major {
    --jackpot-accent: #ff003a;
    --jackpot-accent-soft: rgba(255, 201, 51, 0.3);
    --jackpot-glow: rgba(255, 201, 51, 0.16);
    --jackpot-ring: rgba(255, 201, 51, 0.48);
    --jackpot-amount-1: #fff7e0;
    --jackpot-amount-2: #ff003a;
    --jackpot-amount-3: #990022;
}

.jackpot-wall:not(.jackpot-wall--v2) .jackpot-box--bronze {
    --jackpot-accent: #fb923c;
    --jackpot-accent-soft: rgba(251, 146, 60, 0.28);
    --jackpot-glow: rgba(251, 146, 60, 0.14);
    --jackpot-ring: rgba(251, 146, 60, 0.45);
    --jackpot-amount-1: #fff4eb;
    --jackpot-amount-2: #fdba74;
    --jackpot-amount-3: #ea580c;
}

/* ── Adımlar, SSS, CTA ── */
.home-step,
.home-faq__item,
.home-cta,
.home-popular-events__card,
.home-tournament-card {
    border-radius: 18px;
    border-color: var(--home-border) !important;
    background: var(--home-surface) !important;
}

.home-step:hover,
.home-faq__item[open] {
    border-color: rgba(255, 0, 58, 0.35) !important;
}

.home-step__icon {
    background: radial-gradient(circle, rgba(255, 0, 58, 0.14), rgba(255, 0, 58, 0.04));
    border: 1px solid rgba(255, 0, 58, 0.18);
}

.home-btn-outline {
    border-radius: 14px;
    border-color: rgba(255, 0, 58, 0.25) !important;
    color: var(--home-accent) !important;
    background: rgba(255, 0, 58, 0.06) !important;
}

.home-btn-outline:hover {
    background: rgba(255, 0, 58, 0.12) !important;
    color: #fff !important;
}

/* ── Duyuru modal ── */
.home-modal-backdrop {
    background: rgba(14, 39, 66, 0.78) !important;
    backdrop-filter: blur(4px);
    overflow: hidden !important;
}

.home-modal {
    border-radius: 1.25rem !important;
    border: 0 none transparent !important;
    background: #1e2126 !important;
    overflow: hidden !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.58) !important;
    outline: none !important;
}

.home-modal__btn-close {
    border-radius: 14px !important;
    color: #06131c !important;
    background: linear-gradient(135deg, var(--home-accent), var(--home-accent-2)) !important;
}

.home-modal__btn-secondary {
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--home-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.home-modal__cta {
    border-radius: 999px !important;
}

/* ── App menu (legacy) ── */
.home-app-menu__item {
    border-radius: 14px;
    border-color: var(--home-border);
    background: rgba(255, 0, 58, 0.04);
}

.home-app-menu__item:hover,
.home-app-menu__item--active {
    border-color: rgba(255, 0, 58, 0.28);
    background: rgba(255, 0, 58, 0.08);
}