/* =========================================
   POPUP STYLE GREEN NEON GLASS
   ========================================= */


.popup-overlay {

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    z-index:9999;

}



/* POPUP BOX */

.popup-box {

    position:fixed;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);


    width:90%;

    max-width:420px;


    background:

    linear-gradient(
        145deg,
        #020805,
        #063d18,
        #010a04
    );


    border:

    2px solid #39ff14;


    border-radius:30px;


    padding:25px;


    text-align:center;


    color:#ffffff;


    box-shadow:

    0 0 15px #39ff14,

    0 0 40px rgba(0,255,136,.8),

    inset 0 0 25px rgba(57,255,20,.25);


    overflow:hidden;


}



/* EFEK CAHAYA */

.popup-box::before {


    content:"";


    position:absolute;


    width:180px;

    height:180px;


    top:-80px;

    right:-80px;


    background:#39ff14;


    filter:blur(90px);


    opacity:.6;


}



.popup-box::after {


    content:"";


    position:absolute;


    width:150px;

    height:150px;


    bottom:-70px;

    left:-70px;


    background:#00ff88;


    filter:blur(80px);


    opacity:.5;


}




/* LOGO */

.popup-logo img {


    width:120px;


    max-width:100%;


    filter:

    drop-shadow(0 0 15px #39ff14);


    margin-bottom:15px;


}



/* TITLE */


.popup-title {


    font-size:26px;


    font-weight:900;


    text-transform:uppercase;


    letter-spacing:2px;


    color:#ffffff;


    text-shadow:


    0 0 10px #39ff14,

    0 0 25px #00ff88;


}



/* DESCRIPTION */


.popup-text {


    margin:15px 0;


    color:#d8ffe0;


    font-size:14px;


    line-height:1.6;


}



/* BUTTON */


.popup-button {


    display:flex;


    gap:12px;


    margin-top:20px;


}



.popup-button a {


    flex:1;


    padding:14px 10px;


    border-radius:50px;


    text-decoration:none;


    font-weight:800;


    text-transform:uppercase;


    color:#000;


    background:


    linear-gradient(

    180deg,

    #b8ffcc,

    #39ff14

    );


    box-shadow:


    0 0 15px #39ff14;


}



.popup-button a:hover {


    box-shadow:


    0 0 35px #00ff88;


    transform:scale(1.05);


}




/* CLOSE BUTTON */


.popup-close {


    position:absolute;


    top:12px;


    right:15px;


    width:32px;


    height:32px;


    border-radius:50%;


    background:#000;


    border:

    2px solid #39ff14;


    color:#39ff14;


    font-size:20px;


    line-height:28px;


    cursor:pointer;


}



/* BADGE */


.popup-badge {


    display:inline-block;


    padding:6px 18px;


    margin-bottom:15px;


    border-radius:50px;


    background:#000;


    border:

    1px solid #39ff14;


    color:#39ff14;


    font-size:12px;


    font-weight:700;


    box-shadow:


    0 0 15px rgba(57,255,20,.6);


}



/* RESPONSIVE */

@media(max-width:480px){


.popup-box{

    padding:20px;

}


.popup-title{

    font-size:21px;

}


.popup-button{

    flex-direction:column;

}


}