*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}


html{
scroll-behavior:smooth;
}



body{

background:
radial-gradient(circle at top left,#a7f3d0,transparent 35%),
radial-gradient(circle at bottom right,#c4b5fd,transparent 35%),
#f8fafc;


color:#1e293b;

overflow-x:hidden;

}



/* NAV */

nav{

position:fixed;

top:25px;

left:7%;

width:86%;


height:75px;


display:flex;

align-items:center;

justify-content:space-between;


padding:0 35px;


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

backdrop-filter:blur(20px);


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


border-radius:25px;


box-shadow:
0 20px 50px rgba(0,0,0,.08);


z-index:100;

}



nav h2{


font-size:28px;


background:
linear-gradient(
90deg,
#06b6d4,
#8b5cf6,
#ec4899
);


-webkit-background-clip:text;

color:transparent;


}



nav ul{

display:flex;

gap:35px;

list-style:none;

}


nav a{

text-decoration:none;

color:#334155;

font-weight:600;

transition:.3s;

}


nav a:hover{


color:#8b5cf6;


transition:.3s;


}





/* HERO */


.hero{


min-height:100vh;


display:flex;


align-items:center;


justify-content:space-between;


padding:140px 10% 80px;


}





.hero-text{


animation:slide 1s ease;

}





@keyframes slide{


from{

opacity:0;

transform:translateX(-50px);

}


to{

opacity:1;

transform:translateX(0);

}


}






.tag{


display:inline-block;


padding:10px 20px;


border-radius:50px;


background:white;


color:#8b5cf6;


box-shadow:0 10px 30px #ddd;


margin-bottom:25px;


}





.hero h1{


font-size:75px;


line-height:1;


}



.hero span{


background:

linear-gradient(
90deg,
#06b6d4,
#8b5cf6,
#ec4899
);


-webkit-background-clip:text;

color:transparent;


}





.hero p{


margin:30px 0;


max-width:520px;


font-size:19px;


color:#64748b;


line-height:1.7;


}




button{


padding:16px 45px;


border:none;


border-radius:50px;


background:

linear-gradient(
90deg,
#0ea5e9,
#8b5cf6
);


color:white;


font-size:16px;


cursor:pointer;


box-shadow:
0 15px 35px #8b5cf655;


transition:.3s;

}



button:hover{


transform:scale(1.08);


}








/* FOTO */


.photo{


position:relative;


}


.photo::before{


content:"";


position:absolute;


width:420px;

height:420px;


background:

linear-gradient(
45deg,
#06b6d4,
#ec4899
);


border-radius:50%;


filter:blur(40px);


opacity:.35;


z-index:-1;


}



.photo img{


width:350px;


border-radius:45px;


border:8px solid white;


box-shadow:

0 30px 70px rgba(139,92,246,.35);



animation:float 4s ease-in-out infinite;


}




@keyframes float{


50%{

transform:translateY(-20px);

}


}







/* SECTION */


section{

padding:110px 10%;

}


section h2{


font-size:45px;


margin-bottom:40px;


background:
linear-gradient(
90deg,
#06b6d4,
#8b5cf6
);


-webkit-background-clip:text;


color:transparent;


}





/* SKILL */


.cards{

display:flex;

gap:20px;

flex-wrap:wrap;

}



.cards div{

width:160px;

text-align:center;

}



/* CONTACT KHUSUS */

.contact-cards{

display:flex;

gap:25px;

flex-wrap:wrap;

}



.contact-cards div{


background:white;


padding:35px;


width:250px;


border-radius:25px;


box-shadow:0 20px 40px #ddd;


}



.contact-cards h3{


color:#8b5cf6;

margin-bottom:15px;


}



.contact-cards p{


color:#64748b;


}



.cards div:hover{


transform:
translateY(-15px)
scale(1.05);


}







/* PROJECT */


.project{


background:

rgba(255,255,255,.7);


backdrop-filter:blur(15px);


padding:45px;


border-radius:35px;


box-shadow:

0 30px 60px rgba(0,0,0,.1);


}



.project h3{


font-size:28px;


color:#8b5cf6;


margin-bottom:15px;


}







footer{


padding:40px;

text-align:center;


background:white;


margin-top:80px;


}






@media(max-width:768px){


.hero{


flex-direction:column;

text-align:center;


}


.hero h1{

font-size:45px;

}



.photo img{

width:260px;

margin-top:40px;

}



nav ul{

display:none;

}



}

.about-box{

display:flex;

justify-content:space-between;

align-items:center;

gap:50px;

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

backdrop-filter:blur(20px);

padding:50px;

border-radius:40px;

box-shadow:
0 30px 60px rgba(0,0,0,.08);

}



.about-text{

max-width:650px;

}



.about-text p{

color:#64748b;

font-size:18px;

line-height:1.8;

}





.about-info{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;


}



.about-info div{


background:white;


padding:25px;


border-radius:25px;


text-align:center;


box-shadow:0 10px 30px #ddd;


}



.about-info h3{


font-size:35px;


color:#8b5cf6;


}




@media(max-width:768px){


.about-box{


flex-direction:column;


}



.about-info{


grid-template-columns:1fr;


}


}

/* SKILL SECTION */


.skill-container{


display:grid;


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


gap:25px;


}




.skill-card{


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


backdrop-filter:blur(15px);


padding:35px;


border-radius:30px;


box-shadow:

0 20px 40px rgba(0,0,0,.08);


transition:.3s;


}




.skill-card:hover{


transform:translateY(-12px);


}




.skill-card h3{


font-size:25px;


margin-bottom:20px;


}





.bar{


height:12px;


background:#e2e8f0;


border-radius:20px;


overflow:hidden;


}




.bar span{


display:block;


height:100%;


border-radius:20px;


background:

linear-gradient(
90deg,
#06b6d4,
#8b5cf6,
#ec4899
);


animation:load 1.5s ease;


}





.html{

width:90%;

}


.css{

width:85%;

}


.php{

width:75%;

}


.mysql{

width:80%;

}





.skill-card p{


margin-top:15px;


color:#64748b;


font-weight:bold;


}






@keyframes load{


from{

width:0;

}


}

/* PROJECT */


.project-container{


display:grid;


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


gap:30px;


}





.project-card{


background:white;


border-radius:35px;


overflow:hidden;


box-shadow:

0 25px 60px rgba(0,0,0,.1);


transition:.3s;


}





.project-card:hover{


transform:translateY(-15px);


}





.project-card img{


width:100%;


height:220px;


object-fit:cover;


}





.project-content{


padding:30px;


}





.project-content h3{


font-size:26px;


margin-bottom:15px;


color:#8b5cf6;


}




.project-content p{


color:#64748b;


line-height:1.7;


}





.tech{


display:flex;


gap:10px;


margin:20px 0;


flex-wrap:wrap;


}





.tech span{


padding:8px 15px;


background:#ede9fe;


color:#7c3aed;


border-radius:20px;


font-size:14px;


font-weight:bold;


}





.project-content a{


text-decoration:none;


color:#06b6d4;


font-weight:bold;


}

/* CONTACT FIX */


.contact-cards{

display:flex;

gap:30px;

flex-wrap:wrap;

}



.contact-card{


width:260px;


background:white;


padding:35px;


border-radius:30px;


box-shadow:

0 20px 40px rgba(0,0,0,.08);


transition:.3s;


}



.contact-card:hover{


transform:translateY(-10px);


}




.contact-card h3{


color:#8b5cf6;

font-size:25px;

margin-bottom:15px;


}



.contact-card p{


color:#64748b;

margin-bottom:20px;


}



.contact-card a{


color:#06b6d4;

text-decoration:none;

font-weight:bold;


}

/* PROJECT UPDATE */


.project-list{

display:grid;

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

gap:30px;

}




.project-card{


background:white;


border-radius:35px;


overflow:hidden;


box-shadow:

0 25px 60px rgba(0,0,0,.1);


transition:.3s;


}




.project-card:hover{


transform:translateY(-15px);


}




.project-card img{


width:100%;


height:220px;


object-fit:cover;


}





.project-content{


padding:30px;

}



.project-content h3{


font-size:26px;

color:#8b5cf6;


margin-bottom:15px;


}



.project-content p{


color:#64748b;

line-height:1.7;


}





.tech{


display:flex;

gap:10px;

flex-wrap:wrap;


margin:20px 0;


}



.tech span{


background:#ede9fe;


color:#7c3aed;


padding:8px 15px;


border-radius:20px;


font-size:14px;


font-weight:bold;


}





.project-btn{


display:flex;

gap:15px;


}



.project-btn a{


text-decoration:none;


padding:10px 20px;


border-radius:20px;


background:

linear-gradient(
90deg,
#06b6d4,
#8b5cf6
);


color:white;


font-weight:bold;


}

/* LOADING */


.loader{


position:fixed;

width:100%;

height:100vh;


background:#f8fafc;


display:flex;

justify-content:center;

align-items:center;


z-index:999;


animation:hideLoader 1.5s forwards;


}



.loader div{


width:70px;

height:70px;


border-radius:50%;


background:

linear-gradient(
45deg,
#06b6d4,
#8b5cf6
);


animation:spin 1s infinite;


}





@keyframes spin{


50%{

transform:scale(1.4);

}


}




@keyframes hideLoader{


to{

opacity:0;

visibility:hidden;

}


}

@media(max-width:768px){


nav{

left:5%;

width:90%;

}



nav h2{

font-size:20px;

}




.hero{


flex-direction:column;


text-align:center;


}



.hero h1{


font-size:45px;


}



.photo img{


width:260px;


margin-top:40px;


}



.project-container,
.contact-cards{


justify-content:center;


}


}