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

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

#particles-js{
  position:fixed;
  width:100%;
  height:100%;
  z-index:-2;
}

.bg{
  position:fixed;
  width:100%;
  height:100%;
  background:
  radial-gradient(circle at top left,#ffffff10,transparent 30%),
  radial-gradient(circle at bottom right,#ffffff08,transparent 30%);
  z-index:-1;
}


/* NAVBAR */

nav{
  width:100%;
  padding:20px 40px;
  position:fixed;
  top:0;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:#ffffff05;
  backdrop-filter:blur(12px);

  border-bottom:1px solid #ffffff10;

  z-index:100;
}

.logo{
  font-size:24px;
  font-weight:bold;
  letter-spacing:2px;
}


button{
  padding:12px 22px;

  border:none;
  border-radius:15px;

  background:white;
  color:black;

  font-weight:bold;
  cursor:pointer;

  transition:.3s;
}

button:hover{
  transform:scale(1.05);
}


/* HERO */

.hero{

  min-height:100vh;

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

  padding:100px 20px;
}


.card{

  width:380px;

  background:#ffffff08;

  border:1px solid #ffffff15;

  backdrop-filter:blur(15px);

  border-radius:30px;

  padding:30px;

  box-shadow:
  0 0 40px #000;

  animation:show 0.8s ease;

  transition:.3s;

}


.card:hover{

  transform:translateY(-5px);

  box-shadow:
  0 0 40px #ffffff15;

}


@keyframes show{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* PROFILE */


.profile{

width:110px;

height:110px;

border-radius:50%;

object-fit:cover;

border:3px solid white;

display:block;

margin:auto;

}



h1{

text-align:center;

font-size:32px;

margin-top:20px;

}



.tag{

text-align:center;

color:#aaa;

margin-top:10px;

}



.online{

text-align:center;

color:#8fff8f;

margin-top:10px;

font-size:14px;

}




.box{


background:#ffffff08;

border:1px solid #ffffff15;

padding:15px;

border-radius:18px;

margin-top:15px;

}



/* PAYMENT */


.title{

margin-bottom:20px;

}



.qris{

width:100%;

border-radius:20px;

}



.pay-box{

background:#ffffff08;

border:1px solid #ffffff15;

padding:15px;

border-radius:18px;

margin-top:15px;

cursor:pointer;

transition:.3s;

}


.pay-box:hover{

background:#ffffff15;

transform:translateY(-3px);

}


.pay-box p{

color:#aaa;

margin-top:5px;

}



/* MUSIC BUTTON */


.music-btn{

position:fixed;

right:25px;

bottom:25px;


width:55px;

height:55px;


border-radius:50%;


background:#111;


border:1px solid #ffffff30;


display:flex;

justify-content:center;

align-items:center;


color:white;


font-size:20px;


cursor:pointer;


z-index:999;


transition:.3s;

}


.music-btn:hover{

transform:scale(1.1);

box-shadow:0 0 25px #ffffff30;

}



/* SOSMED */


.socials{

display:flex;

justify-content:center;

gap:15px;

margin-top:25px;

}


.socials a{

width:45px;

height:45px;


border-radius:50%;


background:#ffffff08;


border:1px solid #ffffff15;


display:flex;

justify-content:center;

align-items:center;


color:white;


text-decoration:none;


font-size:18px;


transition:.3s;

}


.socials a:hover{

transform:translateY(-5px) scale(1.1);


background:#ffffff15;


box-shadow:0 0 20px #ffffff30;

}



/* FOOTER */


footer{

text-align:center;

padding:20px;

color:#777;

font-size:14px;

}



/* HP */

@media(max-width:450px){

.card{

width:100%;

}


nav{

padding:18px;

}

}