body{

    margin:0;

    min-height:100vh;

    font-family:Arial, Helvetica, sans-serif;

    background:
        radial-gradient(circle at top,#3d2168 0%,#22113c 45%,#12071f 100%);

}


/* MAIN CONTAINER */

.promo-generator{

    width:100%;
    max-width:500px;

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:0px;

    margin:0px auto;
}

.promo-page{
    min-height:calc(100vh - 80px);

    display:flex;
    flex-direction:column;

    justify-content:flex-start;
    align-items:center;

    padding:60px 20px;
    box-sizing:border-box;
}

.promo-hero{
    width:100%;
    max-width:900px;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}


.promo-info{
    width:100%;
    max-width:900px;

    margin-top:60px;
}

.promo-banner{

    width:100%;
    max-width:900px;

    height:auto;

    display:block;

    margin:10px auto 10px;

    border-radius:18px;

    box-shadow:
        0 0 25px rgba(255,215,0,.2);

}


/* GENERATE BUTTON */

#generateBtn{

    background:linear-gradient(180deg,#ffd84a,#ff9f00);

    color:#222;

    font-size:18px;
    font-weight:700;

    border:none;

    border-radius:50px;

    padding:18px 42px;

    cursor:pointer;

    transition:.3s;

    box-shadow:
        0 0 20px rgba(255,215,0,.35);

}


#generateBtn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 35px rgba(255,215,0,.7);

}


#generateBtn:active{

    transform:scale(.98);

}

#generateBtn:disabled{

    opacity:0.7;
    cursor:not-allowed;

}



.hidden{
    display:none !important;
}



/* SPACE */

#loading,
.promo-card{

    margin-top:35px;

}



/* LOADING */

#loading{

    color:#FFD54A;

    font-size:18px;

    font-weight:bold;

    letter-spacing:1px;

    animation:pulse 1s infinite;

}



@keyframes pulse{

    50%{
        opacity:.35;
    }

}



/* PROMO CARD */

.promo-card{

    width:100%;

    max-width:460px;

    padding:30px 25px;

    box-sizing:border-box;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #40236f,
            #26153f
        );

    border:2px solid #FFD54A;

    color:#fff;

    box-shadow:
        0 0 30px rgba(255,215,0,.25);

    animation:reward .5s ease;

}



/* TITLE */

.promo-card h3{

    margin:0;

    color:#FFD54A;

    font-size:20px;

    letter-spacing:3px;

}



/* PROMO CODE BOX */

.code{

    width:100%;

    margin:25px 0;

    padding:18px 10px;

    box-sizing:border-box;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);


    font-size:34px;

    font-weight:bold;

    letter-spacing:4px;

    color:#FFD54A;


    /* kode tidak turun */

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* CLAIM BUTTON */

.claim-btn{

    width:100%;

    padding:15px;

    border:none;

    border-radius:40px;

    cursor:pointer;

    background:linear-gradient(180deg,#48d668,#1aa53d);

    color:white;

    font-size:17px;

    font-weight:bold;

    transition:.3s;

}



.claim-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 20px rgba(72,214,104,.45);

}




/* ANIMATION */

@keyframes reward{

    0%{

        opacity:0;

        transform:
            translateY(40px)
            scale(.85);

    }


    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}



/* MOBILE */

@media(max-width:480px){

    .promo-generator{

        padding:15px;

    }


    .promo-card{

        padding:25px 15px;

    }


    .code{

        font-size:26px;

        letter-spacing:3px;

    }

}