/* =========================================================
   VENETIA LOTTERY — HERO BACKGROUND V2
   Dibuat khusus agar mendekati contoh pada desktop dan mobile.
========================================================= */

.hero.hero-venetia-v2{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:820px;
    padding:78px 0 66px;
    border-bottom:1px solid #ffedd5;
    background-color:#fff8f2;
    background-image:url('../images/venetia-hero-desktop-v2.webp');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center bottom;
}

/* Menghapus lingkaran besar dari CSS lama. */
.hero.hero-venetia-v2::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    width:auto;
    height:auto;
    right:auto;
    bottom:auto;
    border:0;
    border-radius:0;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,248,242,.08) 65%,rgba(255,248,242,.25) 100%);
}

.hero.hero-venetia-v2::after{
    content:none;
}

.hero-venetia-v2 .container{
    width:min(1420px,calc(100% - 64px));
}

.hero-venetia-v2 .hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr;
    align-content:start;
    gap:48px;
}

.hero-venetia-v2 .hero-copy{
    width:min(650px,100%);
    max-width:none;
}

.hero-venetia-v2 .hero-copy .eyebrow{
    color:#c2410c;
    text-shadow:0 1px 0 rgba(255,255,255,.85);
}

.hero-venetia-v2 .hero-copy h1{
    max-width:650px;
    margin:16px 0 20px;
    text-shadow:0 1px 0 rgba(255,255,255,.75);
}

.hero-venetia-v2 .hero-copy p{
    max-width:570px;
    color:#475569;
    line-height:1.65;
    text-shadow:0 1px 0 rgba(255,255,255,.82);
}

.hero-venetia-v2 .hero-actions{
    display:flex;
    gap:14px;
    margin-top:30px;
}

.hero-venetia-v2 .hero-actions .btn{
    min-width:174px;
    min-height:55px;
    border-radius:14px;
    font-size:16px;
}

.hero-venetia-v2 .hero-actions .btn-ghost{
    background:rgba(255,255,255,.94);
    box-shadow:0 10px 25px rgba(15,23,42,.07);
}

.hero-venetia-v2 .hero-countdown{
    width:min(1080px,100%);
    margin:0 auto;
    padding:32px 48px 26px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:28px;
    background:linear-gradient(135deg,rgba(7,18,35,.985),rgba(16,31,52,.985));
    box-shadow:0 30px 70px rgba(15,23,42,.26);
}

.hero-venetia-v2 .hero-countdown::after{
    width:190px;
    height:190px;
    right:-54px;
    top:-78px;
    background:rgba(249,115,22,.21);
}

.hero-venetia-v2 .countdown-top{
    padding-bottom:18px;
}

.hero-venetia-v2 .countdown-top strong{
    padding:9px 17px;
}

.hero-venetia-v2 .countdown{
    width:min(760px,100%);
    margin:28px auto 20px;
}

.hero-venetia-v2 .countdown-card>p{
    font-size:14px;
}

@media(max-width:960px){
    .hero.hero-venetia-v2{
        min-height:760px;
        padding:66px 0 62px;
        background-image:url('../images/venetia-hero-mobile-v2.webp');
        background-position:center bottom;
    }

    .hero-venetia-v2 .container{
        width:min(100% - 40px,760px);
    }

    .hero-venetia-v2 .hero-grid{
        gap:40px;
    }

    .hero-venetia-v2 .hero-copy{
        width:100%;
    }

    .hero-venetia-v2 .hero-copy p{
        max-width:430px;
    }

    .hero-venetia-v2 .hero-countdown{
        padding:28px 30px 23px;
    }
}

@media(max-width:720px){
    .hero.hero-venetia-v2{
        min-height:680px;
        padding:56px 0 78px;
        background-size:cover;
        background-position:center bottom;
    }

    .hero-venetia-v2 .container{
        width:calc(100% - 40px);
    }

    .hero-venetia-v2 .hero-grid{
        gap:34px;
    }

    .hero-venetia-v2 .hero-copy h1{
        font-size:clamp(40px,8vw,46px);
        line-height:1.04;
        max-width:100%;
        margin-top:17px;
    }

    .hero-venetia-v2 .hero-copy p{
        max-width:390px;
        font-size:17px;
        line-height:1.62;
    }

    .hero-venetia-v2 .hero-actions{
        flex-direction:row;
        gap:12px;
        margin-top:28px;
    }

    .hero-venetia-v2 .hero-actions .btn{
        min-width:0;
        width:50%;
        min-height:54px;
        padding:12px 10px;
        font-size:15px;
    }

    .hero-venetia-v2 .hero-countdown{
        width:100%;
        padding:22px 20px 18px;
        border-radius:23px;
    }

    .hero-venetia-v2 .hero-countdown::after{
        width:145px;
        height:145px;
        right:-42px;
        top:-57px;
    }

    .hero-venetia-v2 .countdown-top{
        padding-bottom:14px;
    }

    .hero-venetia-v2 .countdown-top span{
        font-size:11px;
    }

    .hero-venetia-v2 .countdown-top strong{
        padding:8px 14px;
        font-size:14px;
    }

    .hero-venetia-v2 .countdown{
        grid-template-columns:1fr auto 1fr auto 1fr;
        gap:6px;
        margin:20px auto 15px;
    }

    .hero-venetia-v2 .countdown b{
        font-size:clamp(42px,10vw,52px);
    }

    .hero-venetia-v2 .countdown em{
        font-size:27px;
    }

    .hero-venetia-v2 .countdown span{
        margin-top:7px;
        font-size:9px;
    }

    .hero-venetia-v2 .countdown-card>p{
        font-size:12px;
    }
}

@media(max-width:430px){
    .hero.hero-venetia-v2{
        min-height:700px;
        padding-top:50px;
    }

    .hero-venetia-v2 .container{
        width:calc(100% - 28px);
    }

    .hero-venetia-v2 .hero-copy h1{
        font-size:39px;
    }

    .hero-venetia-v2 .hero-copy p{
        font-size:16px;
    }

    .hero-venetia-v2 .hero-actions{
        flex-direction:column;
    }

    .hero-venetia-v2 .hero-actions .btn{
        width:100%;
    }
}