*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#0b0618;
    overflow-x:hidden;
    color:white;
}

/* Background Neon */
.background{
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at top,#7b2cff 0%,transparent 35%),
    radial-gradient(circle at bottom,#4200a8 0%,transparent 45%),
    #0b0618;
    z-index:-2;
}

/* Efek Glow */
.background::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:#8a2be2;
    filter:blur(180px);
    opacity:.4;
    animation:float 8s ease-in-out infinite;
}

@keyframes float{
    0%{transform:translate(-100px,-60px);}
    50%{transform:translate(180px,120px);}
    100%{transform:translate(-100px,-60px);}
}

/* Loading */
#loader{
    position:fixed;
    inset:0;
    background:#090414;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.spinner{
    width:70px;
    height:70px;
    border:5px solid rgba(255,255,255,.2);
    border-top:5px solid #b266ff;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    100%{
        transform:rotate(360deg);
    }
}

#loader h2{
    margin-top:20px;
    color:#fff;
    text-shadow:0 0 20px #9b4dff;
}

/* Container */
.container{
    max-width:430px;
    margin:40px auto;
    padding:25px;
    text-align:center;
}

/* Logo */
.logo{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #9b4dff;
    box-shadow:
    0 0 15px #8a2be2,
    0 0 40px #7b2cff;
    animation:pulse 2s infinite;
}

@keyframes pulse{
    50%{
        transform:scale(1.05);
    }
}

h1{
    margin-top:20px;
    font-size:30px;
    color:#fff;
    text-shadow:0 0 15px #a855f7;
}

.status{
    margin-top:12px;
    color:#63ff88;
    font-weight:bold;
}

.desc{
    margin:20px 0;
    line-height:1.8;
    color:#ddd;
}

/* Tombol */
.btn{
    display:block;
    width:100%;
    margin:14px 0;
    padding:16px;
    border-radius:14px;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    background:linear-gradient(90deg,#7b2cff,#a855f7);
    box-shadow:0 0 20px rgba(168,85,247,.5);
    transition:.3s;
}

.btn:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 0 30px #b266ff;
}

.btn:active{
    transform:scale(.97);
}

/* Card */
.card{
    margin-top:30px;
    padding:20px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.15);
}

.card h3{
    margin-bottom:15px;
    color:#c084fc;
}

.card ul{
    list-style:none;
}

.card li{
    margin:10px 0;
    color:#eee;
}

footer{
    margin-top:35px;
    color:#999;
    font-size:14px;
}

/* HP */
@media(max-width:480px){

.logo{
width:130px;
height:130px;
}

h1{
font-size:25px;
}

.btn{
padding:15px;
font-size:15px;
}

}