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


/* =========================
   BACKGROUND RGB BLUR
========================= */

body{

    min-height:100vh;


    background:

    radial-gradient(
        circle at 20% 30%,
        rgba(0,229,255,.25),
        transparent 35%
    ),


    radial-gradient(
        circle at 80% 20%,
        rgba(138,43,226,.25),
        transparent 40%
    ),


    radial-gradient(
        circle at 50% 80%,
        rgba(0,26,255,.25),
        transparent 45%
    ),


    linear-gradient(
        180deg,
        #01020a,
        #05051c,
        #000000
    );


    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    overflow:hidden;

    position:relative;

}



/* =========================
   BINTANG ANTARIKSA
========================= */


body::before{


    content:"";


    position:fixed;


    inset:0;



    background-image:


    radial-gradient(circle at 10% 15%, white 1px, transparent 2px),

    radial-gradient(circle at 20% 80%, #00e5ff 1px, transparent 2px),

    radial-gradient(circle at 35% 35%, white 2px, transparent 3px),

    radial-gradient(circle at 50% 70%, #8a2be2 1px, transparent 2px),

    radial-gradient(circle at 65% 20%, white 1px, transparent 2px),

    radial-gradient(circle at 75% 85%, #00e5ff 2px, transparent 3px),

    radial-gradient(circle at 90% 40%, white 1px, transparent 2px),

    radial-gradient(circle at 55% 10%, white 1px, transparent 2px);



    opacity:.6;


    animation:

    starsMove 50s linear infinite;



    pointer-events:none;


    z-index:0;

}



@keyframes starsMove{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(100px);

    }

}



/* =========================
   KABUT GALAKSI
========================= */


body::after{


    content:"";


    position:fixed;


    width:900px;

    height:900px;


    top:-300px;

    left:50%;


    transform:translateX(-50%);



    background:


    radial-gradient(

        circle,

        rgba(0,229,255,.20),

        rgba(138,43,226,.15),

        transparent 65%

    );



    filter:blur(100px);



    animation:

    galaxyGlow 12s infinite alternate;



    pointer-events:none;


    z-index:0;

}



@keyframes galaxyGlow{


    from{

        opacity:.4;

        transform:
        translateX(-50%)
        scale(1);

    }



    to{

        opacity:.9;

        transform:
        translateX(-50%)
        scale(1.3);

    }

}


    100%{

        background:

        radial-gradient(
        circle at 20% 20%,
        rgba(0,229,255,.25),
        transparent 40%
        ),

        radial-gradient(
        circle at 80% 30%,
        rgba(255,0,170,.25),
        transparent 40%
        ),

        #050505;

    }

}



/* =========================
   CONTAINER
========================= */

.container{

    width:100%;

    max-width:550px;

    position:relative;

    z-index:2;

}



/* =========================
   CARD RGB GLASS
========================= */

.card{

    background:
    rgba(17,24,39,.65);


    backdrop-filter:
    blur(15px);


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


    border-radius:20px;

    padding:25px;


    border:2px solid #ff0000;


    animation:
    rgbGlow 6s linear infinite;

}



/* =========================
   RGB BORDER
========================= */

@keyframes rgbGlow{


    0%{
        border-color:#ff0000;
        box-shadow:
        0 0 10px #ff0000,
        0 0 25px #ff0000;
    }


    25%{
        border-color:#00ff00;
        box-shadow:
        0 0 10px #00ff00,
        0 0 25px #00ff00;
    }


    50%{
        border-color:#00e5ff;
        box-shadow:
        0 0 10px #00e5ff,
        0 0 25px #00e5ff;
    }


    75%{
        border-color:#8a2be2;
        box-shadow:
        0 0 10px #8a2be2,
        0 0 25px #8a2be2;
    }


    100%{
        border-color:#ff0000;
        box-shadow:
        0 0 10px #ff0000,
        0 0 25px #ff0000;
    }

}



/* =========================
   JUDUL
========================= */

.card h1{

    text-align:center;

    margin-bottom:20px;

    font-size:28px;


    color:#00e5ff;


    text-shadow:

    0 0 5px #001aff,
    0 0 15px #001aff,
    0 0 30px #001aff;

}



/* =========================
   BUTTON
========================= */

button{

    width:100%;

    padding:15px;

    border-radius:12px;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    color:white;

    background:#111827;

    border:2px solid #ff0000;


    position:relative;

    overflow:hidden;


    animation:
    rgbGlow 6s linear infinite;

}



/* Cahaya berjalan */

button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;


    width:60%;

    height:100%;


    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.8),
    transparent
    );


    transform:
    skewX(-25deg);

}



button:hover::before{

    left:150%;

    transition:.7s;

}



button:hover{

    transform:scale(1.03);

}



/* =========================
   HASIL
========================= */

.hasil{

    background:
    rgba(31,41,55,.55);


    backdrop-filter:
    blur(10px);


    border-radius:15px;

    padding:18px;

}



.row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:12px 0;

    gap:15px;

}



.row span{

    color:#00e5ff;

    font-weight:bold;


    text-shadow:

    0 0 5px #001aff,
    0 0 15px #001aff;

}



.row strong{

    color:#00e5ff;

    text-align:right;

    word-break:break-word;


    text-shadow:

    0 0 5px #001aff,
    0 0 15px #001aff,
    0 0 30px #001aff;

}



hr{

    border:none;

    height:1px;

    background:#374151;

    margin:18px 0;

}



/* =========================
   RESPONSIVE
========================= */

@media(max-width:600px){

.card{

    padding:18px;

}


.card h1{

    font-size:22px;

}


button{

    font-size:15px;

}


.row{

    flex-direction:column;

    align-items:flex-start;

}


.row strong{

    text-align:left;

}

}