/* ===========================
   YOGA BIODATA
   Cyberpunk Neon Theme
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#050816;
    color:#fff;
    overflow-x:hidden;
    transition:.4s;
}

/* Scrollbar */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#050816;
}

::-webkit-scrollbar-thumb{
    background:#00bfff;
    border-radius:20px;
}

/* Background */

.background{
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at top,#0b4cff55,transparent 45%),
    radial-gradient(circle at bottom,#00e1ff33,transparent 35%),
    #050816;
    z-index:-2;
}

/* Floating Glow */

.background::before{

content:"";

position:absolute;

width:600px;
height:600px;

background:#00bfff;

filter:blur(220px);

opacity:.15;

top:-200px;
left:-200px;

animation:float1 8s infinite alternate;

}

.background::after{

content:"";

position:absolute;

width:500px;
height:500px;

background:#3d7dff;

filter:blur(200px);

opacity:.12;

bottom:-180px;
right:-180px;

animation:float2 9s infinite alternate;

}

@keyframes float1{

0%{
transform:translate(0,0);
}

100%{
transform:translate(120px,90px);
}

}

@keyframes float2{

0%{
transform:translate(0,0);
}

100%{
transform:translate(-100px,-60px);
}

}

/* Loading */

#loading{

position:fixed;

inset:0;

background:#050816;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:9999;

}

.loader{

width:70px;

height:70px;

border-radius:50%;

border:5px solid rgba(255,255,255,.1);

border-top:5px solid #00c8ff;

animation:spin 1s linear infinite;

margin-bottom:20px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* Dark Button */

#darkMode{

position:fixed;

top:20px;

right:20px;

width:55px;

height:55px;

border:none;

border-radius:50%;

cursor:pointer;

background:#0e1835;

color:#00d9ff;

font-size:20px;

box-shadow:0 0 20px #00bfff55;

transition:.4s;

z-index:100;

}

#darkMode:hover{

transform:scale(1.1);

box-shadow:0 0 35px #00bfff;

}

/* Hero */

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

gap:80px;

padding:70px 8%;

flex-wrap:wrap;

}

.hero-img{

position:relative;

}

.hero-img img{

width:340px;

height:340px;

object-fit:cover;

border-radius:50%;

border:6px solid #00c8ff;

box-shadow:
0 0 35px #00bfff,
0 0 80px #00bfff55;

transition:.5s;

}

.hero-img img:hover{

transform:scale(1.05);

}

.glow{

position:absolute;

inset:-15px;

border-radius:50%;

background:linear-gradient(
45deg,
#00bfff,
#4d7dff,
#00eaff
);

filter:blur(45px);

opacity:.35;

z-index:-1;

animation:pulse 3s infinite;

}

@keyframes pulse{

50%{

transform:scale(1.08);

opacity:.6;

}

}

.hero-text{

max-width:520px;

}

.hero-text h3{

font-size:26px;

color:#7edcff;

margin-bottom:10px;

}

.hero-text h1{

font-size:65px;

margin-bottom:10px;

}

.hero-text span{

color:#00d5ff;

text-shadow:0 0 18px #00bfff;

}

.hero-text h2{

height:45px;

font-size:28px;

color:#66d9ff;

margin-bottom:20px;

}

.hero-text p{

line-height:1.8;

color:#d6d6d6;

margin-bottom:35px;

}

.hero-btn{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.hero-btn a{

text-decoration:none;

padding:15px 32px;

border-radius:40px;

background:#00bfff;

color:#fff;

font-weight:600;

transition:.4s;

box-shadow:0 0 20px #00bfff55;

}

.hero-btn a:hover{

transform:translateY(-6px);

box-shadow:0 0 35px #00bfff;

}
/* ===========================
   Section
=========================== */

section{
    padding:90px 10%;
}

.title{
    text-align:center;
    font-size:40px;
    color:#00d9ff;
    margin-bottom:50px;
    text-shadow:0 0 20px #00bfff;
}

/* Card */

.card,
.project,
.box,
.skill,
form{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:20px;

    box-shadow:0 8px 35px rgba(0,191,255,.18);

    transition:.4s;

}

.card{

    padding:35px;

    text-align:center;

    font-size:18px;

    line-height:1.9;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 0 40px #00bfff66;

}

/* Skill */

.skill-box{

    display:grid;

    gap:25px;

}

.skill{

    padding:25px;

}

.skill h3{

    margin-bottom:15px;

}

.bar{

    width:100%;

    height:10px;

    background:#222;

    border-radius:30px;

    overflow:hidden;

}

.bar span{

    display:block;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
    90deg,
    #00bfff,
    #5ee6ff
    );

    animation:grow 2s ease;

}

@keyframes grow{

from{

width:0;

}

}

/* Project */

.project-box{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.project{

padding:30px;

text-align:center;

}

.project:hover{

transform:translateY(-12px);

box-shadow:0 0 35px #00bfff88;

}

.project i{

font-size:55px;

margin-bottom:20px;

color:#00d5ff;

}

.project h3{

margin-bottom:15px;

}

/* Statistik */

.stats{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:25px;

}

.box{

padding:35px;

text-align:center;

}

.box h1{

font-size:45px;

color:#00d9ff;

margin-bottom:10px;

}

/* Hobi */

.hobi{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.hobi div{

padding:15px 28px;

border-radius:35px;

background:#0f1d42;

box-shadow:0 0 15px rgba(0,191,255,.25);

transition:.3s;

}

.hobi div:hover{

transform:translateY(-6px);

background:#00bfff;

}

/* Social */

.social{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.social a{

width:65px;

height:65px;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

border-radius:50%;

background:#0f1d42;

color:white;

text-decoration:none;

transition:.4s;

box-shadow:0 0 18px rgba(0,191,255,.25);

}

.social a:hover{

transform:rotate(360deg) scale(1.15);

background:#00bfff;

}

/* Contact */

form{

max-width:700px;

margin:auto;

padding:35px;

display:flex;

flex-direction:column;

gap:20px;

}

form input,
form textarea{

padding:15px;

border:none;

border-radius:12px;

background:#111f42;

color:white;

outline:none;

font-size:16px;

}

form button{

padding:16px;

border:none;

border-radius:35px;

background:#00bfff;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

form button:hover{

transform:translateY(-4px);

box-shadow:0 0 25px #00bfff;

}

/* Footer */

footer{

padding:30px;

text-align:center;

color:#bdbdbd;

margin-top:50px;

border-top:1px solid rgba(255,255,255,.08);

}

/* Light Mode */

body.light{

background:#eef7ff;

color:#222;

}

body.light .background{

background:#eef7ff;

}

body.light .card,
body.light .project,
body.light .box,
body.light .skill,
body.light form{

background:white;

color:#222;

}

body.light form input,
body.light form textarea{

background:#f1f5fb;

color:#222;

}

body.light footer{

color:#555;

}

/* Responsive */

@media(max-width:900px){

.hero{

flex-direction:column;

text-align:center;

padding-top:120px;

}

.hero-img img{

width:250px;

height:250px;

}

.hero-text h1{

font-size:45px;

}

.hero-text h2{

font-size:22px;

}

.title{

font-size:32px;

}

.hero-btn{

justify-content:center;

}

}
/* Particle */

.particle{

position:fixed;

width:4px;

height:4px;

background:#00bfff;

border-radius:50%;

opacity:.6;

pointer-events:none;

animation:particleMove linear infinite;

z-index:-1;

}

@keyframes particleMove{

0%{

transform:translateY(0);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-120vh);

opacity:0;

}

}