body{
    margin:0;
    font-family:'Segoe UI';
    background:#070b1f;
    color:white;
}

.container{
    text-align:center;
    padding:30px;
}

h1{
    color:#8ea2ff;
    font-size:40px;
}

.subtitle{
    opacity:0.7;
}

.card{
    background:#111936;
    padding:20px;
    border-radius:14px;
    margin:20px auto;
    width:90%;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

input{
    padding:10px;
    margin:8px;
    border-radius:8px;
    border:none;
    background:#1c244f;
    color:white;
}

button{
    padding:10px 20px;
    margin:10px;
    border:none;
    border-radius:8px;
    background:linear-gradient(45deg,#6c7cff,#b86cff);
    color:white;
    cursor:pointer;
}

.grid5{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.grid3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:10px;
}

.grid4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.box{
    background:#141c3d;
    padding:15px;
    border-radius:10px;
}

.kcard{
    border:1px solid #2cffb3;
    border-radius:12px;
    padding:15px;
    background:#0f1a2d;
    text-align:left;
}

.badge{
    background:#00c853;
    padding:4px 10px;
    border-radius:8px;
    font-size:12px;
}

.info{
    background:#18264a;
    border-left:4px solid #3aa0ff;
    text-align:left;
}

.info ul{
    padding-left:20px;
}

.info li{
    margin:8px 0;
}  

/* === BINTANG PADAT === */
body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:200%;
    height:200%;
    background:
        radial-gradient(2px 2px at 10% 20%, white, transparent),
        radial-gradient(1px 1px at 30% 40%, white, transparent),
        radial-gradient(1.5px 1.5px at 50% 60%, white, transparent),
        radial-gradient(2px 2px at 70% 80%, white, transparent),
        radial-gradient(1px 1px at 90% 10%, white, transparent),
        radial-gradient(1px 1px at 15% 75%, white, transparent),
        radial-gradient(2px 2px at 25% 55%, white, transparent),
        radial-gradient(1.5px 1.5px at 45% 25%, white, transparent),
        radial-gradient(1px 1px at 65% 35%, white, transparent),
        radial-gradient(2px 2px at 85% 65%, white, transparent),
        radial-gradient(1px 1px at 5% 95%, white, transparent),
        radial-gradient(1px 1px at 55% 85%, white, transparent),
        radial-gradient(1.5px 1.5px at 75% 15%, white, transparent);
    animation: starMove 80s linear infinite, twinkle 3s ease-in-out infinite alternate;
    z-index:-2;
    opacity:0.8;
}

@keyframes starMove{
    from{ transform: translate(0,0); }
    to{ transform: translate(-30%, -30%); }
}

@keyframes twinkle{
    from{ opacity:0.5; }
    to{ opacity:1; }
}

/* === BINTANG JATUH === */
body::after{
    content:"";
    position:fixed;
    top:-10%;
    left:-10%;
    width:120%;
    height:120%;
    pointer-events:none;
    z-index:-1;
}

/* === SHOOTING STAR REALISTIC FINAL === */
.shooting-star{
    position:fixed;
    width:2px;
    height:var(--tail,120px);
    background:linear-gradient(-45deg, var(--color, white), transparent);
    filter:drop-shadow(0 0 6px var(--color, white));
    animation: shoot var(--speed,3s) linear forwards;
    z-index:-1;
}

/* animasi pakai variable (WAJIB) */
@keyframes shoot{
    from{
        transform: translate(0,0) rotate(var(--angle));
        opacity:1;
    }
    to{
        transform: translate(var(--x), var(--y)) rotate(var(--angle));
        opacity:0;
    }
}

/* animasi */
@keyframes shoot{
    from{
        transform: translate(0,0) rotate(var(--angle));
        opacity:1;
    }
    to{
        transform: translate(var(--x), var(--y)) rotate(var(--angle));
        opacity:0;
    }
}

/* variasi posisi & delay */
.shooting-star:nth-child(1){
    top:10%;
    left:20%;
    animation-delay:0s;
}
.shooting-star:nth-child(2){
    top:30%;
    left:70%;
    animation-delay:2s;
}
.shooting-star:nth-child(3){
    top:60%;
    left:40%;
    animation-delay:4s;
}

/* === NEBULA GALAXY === */
body{
    background:
        radial-gradient(circle at 20% 30%, rgba(88, 0, 255, 0.3), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 150, 255, 0.25), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 150, 0.15), transparent 50%),
        #070b1f;
    transition: background 1s ease;
}

.logo{
    width: 130px;
    display: block;
    margin: 10px auto 20px;
    filter: drop-shadow(0 0 15px rgba(0,255,150,0.6));
    transition: 0.3s;
}

.logo:hover{
    transform: scale(1.05);
}