/* ============================
   GOOGLE FONT
============================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ============================
   RESET
============================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
    font-family:'Poppins',sans-serif;
}

body{

    background:#081426;
    color:#fff;
    overflow-x:hidden;

}

/* ============================
   SCROLLBAR
============================ */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#081426;

}

::-webkit-scrollbar-thumb{

    background:#2F80ED;
    border-radius:20px;

}

/* ============================
   NAVBAR
============================ */

header{

    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:999;

}

.navbar{

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

    padding:20px 8%;

    backdrop-filter:blur(20px);

    background:rgba(9,20,38,.75);

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

}

.logo{

    font-size:32px;
    font-weight:700;

}

.logo span{

    color:#2F80ED;

}

.nav-links{

    display:flex;
    list-style:none;
    gap:35px;

}

.nav-links a{

    text-decoration:none;
    color:white;
    font-weight:500;
    transition:.3s;

}

.nav-links a:hover{

    color:#4FC3F7;

}

.menu-btn{

    display:none;
    font-size:28px;
    cursor:pointer;

}

/* ============================
   SECTION
============================ */

section{

    padding:110px 10%;

}

.section-title{

    text-align:center;
    font-size:42px;
    margin-bottom:70px;

}

/* ============================
   HOME
============================ */

.home{

    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:100vh;
    gap:70px;

}

.home-text{

    flex:1;

}

.home-text h3{

    font-size:25px;
    color:#4FC3F7;

}

.home-text h1{

    font-size:65px;
    margin:10px 0;

}

.home-text h2{

    font-size:26px;
    color:#d9d9d9;
    margin-bottom:20px;

}

.home-text p{

    line-height:1.8;
    color:#b7c5d8;
    max-width:650px;

}

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

.hero-buttons{

    margin-top:40px;

}

.btn{

    display:inline-block;
    background:#2F80ED;
    color:white;
    text-decoration:none;

    padding:14px 32px;

    border-radius:40px;

    margin-right:15px;

    transition:.4s;

}

.btn:hover{

    transform:translateY(-5px);

    box-shadow:0 0 30px #2F80ED;

}

.btn-outline{

    display:inline-block;

    padding:14px 32px;

    border:2px solid #2F80ED;

    color:white;

    border-radius:40px;

    text-decoration:none;

    transition:.4s;

}

.btn-outline:hover{

    background:#2F80ED;

}
.btn{

    display:inline-block;

    padding:14px 35px;

    background:#2F80ED;

    color:white;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.btn:hover{

    transform:translateY(-4px);

}
.btn-outline{

    background:transparent;

    border:2px solid #2F80ED;

    color:#2F80ED;

}

.btn-outline:hover{

    background:#2F80ED;

    color:white;

}

/* ============================
   PROFILE IMAGE
============================ */

.home-image{

    flex:1;
    display:flex;
    justify-content:center;

}

.home-image img{

    width:380px;
    height:380px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid #2F80ED;

    box-shadow:

    0 0 40px #2F80ED,

    0 0 90px rgba(47,128,237,.4);

    transition:.5s;

}

.home-image img:hover{

    transform:scale(1.04);

}



.about-text{

    flex:1;

}

.about-text h3{

    font-size:35px;
    margin-bottom:20px;

}

.about-text p{

    color:#c6d0df;

    line-height:1.8;

    margin-bottom:20px;

}

/* ============================
   SKILLS
============================ */

/*=========================
    SKILLS
==========================*/

.skills{

    padding:120px 10%;

}

.section-subtitle{

    text-align:center;

    color:#9CAFC8;

    margin-top:15px;

    margin-bottom:60px;

}

.skills-grid{

    display:grid;

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

    gap:28px;

}

.skill-card{

    position:relative;

    padding:28px;

    border-radius:22px;

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

    overflow:hidden;

    transition:.35s;

    min-height:210px;

}

.skill-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.skill-card h3{

    margin-top:60px;

    font-size:26px;

    margin-bottom:15px;

}

.skill-card p{

    color:#B9C7DA;

    line-height:1.7;

    font-size:15px;

}

.skill-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    color:white;

}

.skill-level{

    position:absolute;

    bottom:25px;

    right:25px;

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

    padding:8px 18px;

    border-radius:25px;

    color:white;

    font-size:13px;

}

/* Warna tiap card */

.purple{

background:linear-gradient(135deg,#1A1630,#0F172A);

}

.purple .skill-icon{

background:#8B5CF6;

box-shadow:0 0 25px #8B5CF6;

}

.blue{

background:linear-gradient(135deg,#10233C,#0B1A2F);

}

.blue .skill-icon{

background:#2563EB;

box-shadow:0 0 25px #2563EB;

}

.orange{

background:linear-gradient(135deg,#2B1B12,#151C29);

}

.orange .skill-icon{

background:#F97316;

box-shadow:0 0 25px #F97316;

}

.yellow{

background:linear-gradient(135deg,#1A2334,#131C29);

}

.yellow .skill-icon{

background:#3776AB;

box-shadow:0 0 25px #3776AB;

}

.red{

background:linear-gradient(135deg,#2D151D,#141A29);

}

.red .skill-icon{

background:#E11D48;

box-shadow:0 0 25px #E11D48;

}

.green{

background:linear-gradient(135deg,#11251D,#141C29);

}

.green .skill-icon{

background:#10B981;

box-shadow:0 0 25px #10B981;

}

@media(max-width:992px){

.skills-grid{

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

}

}

@media(max-width:650px){

.skills-grid{

grid-template-columns:1fr;

}

}

/* ============================
   CERTIFICATES
============================ */

/*=========================
    CERTIFICATES
=========================*/

.certificates{

    padding:120px 8%;

}

.certificate-container{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.certificate-card{

    background:#13233E;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.certificate-card img{

    width:100%;

    height:220px;

    object-fit:contain;

    background:white;

    padding:12px;

}

.certificate-info{

    padding:20px;

}

.certificate-info h3{

    font-size:20px;

    margin-bottom:8px;

}

.certificate-info p{

    color:#AFC3D8;

}

.certificate-card:hover{

    transform:translateY(-10px);

    border-color:#2F80ED;

    box-shadow:0 20px 40px rgba(47,128,237,.35);

}

/* Responsive */

@media(max-width:992px){

.certificate-container{

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

}

}

@media(max-width:650px){

.certificate-container{

grid-template-columns:1fr;

}

}
/* ============================
   TIMELINE
============================ */

.timeline{

    border-left:3px solid #2F80ED;

    padding-left:30px;

}

.timeline-item{

    margin-bottom:50px;

}

.timeline-item h3{

    margin-bottom:10px;

}

.timeline-item span{

    color:#4FC3F7;

}

/* ============================
   CONTACT
============================ */

.contact-container{

    display:flex;

    justify-content:center;

    gap:30px;

}

.contact-container a{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#10203A;

    color:white;

    border-radius:50%;

    font-size:28px;

    transition:.4s;

}

.contact-container a:hover{

    background:#2F80ED;

    transform:translateY(-8px);

}

/* ============================
   FOOTER
============================ */

footer{

    background:#06101d;

    padding:40px;

    text-align:center;

}

footer h2{

    margin-bottom:15px;

}

footer p{

    color:#b8c5d6;

    margin:8px 0;

}

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

@media(max-width:991px){

.home{

    flex-direction:column-reverse;

    text-align:center;

}

.about-container{

    flex-direction:column;

}

.home-image img{

    width:280px;
    height:280px;

}

.home-text h1{

    font-size:45px;

}

.nav-links{

    display:none;

}

.menu-btn{

    display:block;

}

}
/*==================================================
=            PREMIUM CSS - LANJUTAN                =
==================================================*/

/* ---------- VARIABLES ---------- */

:root{
    --primary:#2F80ED;
    --secondary:#4FC3F7;
    --dark:#081426;
    --card:#10203A;
    --text:#ffffff;
    --text2:#BFCBDC;
}

/* ---------- SELECTION ---------- */

::selection{
    background:var(--primary);
    color:white;
}

/* ---------- LOADING SCREEN ---------- */

.loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#081426;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    transition:1s;
}

.loader.hidden{
    opacity:0;
    visibility:hidden;
}

.loader span{

    width:20px;
    height:20px;

    margin:10px;

    border-radius:50%;

    background:var(--primary);

    animation:bounce 0.8s infinite alternate;

}

.loader span:nth-child(2){
    animation-delay:.2s;
}

.loader span:nth-child(3){
    animation-delay:.4s;
}

@keyframes bounce{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-25px);

    }

}

/* ---------- ANIMATED BACKGROUND ---------- */

body::before{

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    background:rgba(47,128,237,.08);

    filter:blur(120px);

    border-radius:50%;

    top:-150px;
    right:-100px;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    width:500px;
    height:500px;

    background:rgba(79,195,247,.05);

    border-radius:50%;

    filter:blur(130px);

    left:-150px;
    bottom:-150px;

    z-index:-2;

}

/* ---------- GLASS EFFECT ---------- */

.glass{

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

    backdrop-filter:blur(15px);

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

}

/* ---------- TEXT GRADIENT ---------- */

.gradient-text{

    background:linear-gradient(
        90deg,
        #4FC3F7,
        #2F80ED
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* ---------- IMAGE GLOW ---------- */

.home-image img{

    animation:floatImage 5s ease-in-out infinite;

}

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ---------- BUTTON EFFECT ---------- */

.btn,
.btn-outline{

    position:relative;

    overflow:hidden;

}

.btn::before,
.btn-outline::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-30deg);

    transition:.6s;

}

.btn:hover::before,
.btn-outline:hover::before{

    left:120%;

}

/* ---------- CARD ---------- */

.skill-card,
.project-card,
.certificate-card{

    position:relative;

}

.skill-card::before,
.project-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:20px;

    border:1px solid transparent;

    transition:.3s;

}

.skill-card:hover::before,
.project-card:hover::before{

    border-color:#2F80ED;

}

/* ---------- PROJECT IMAGE ---------- */

.project-card{

    overflow:hidden;

}

.project-card img{

    transition:.5s;

}

.project-card:hover img{

    transform:scale(1.08);

}

/* ---------- PROJECT BUTTON ---------- */

.project-card a{

    transition:.3s;

}

.project-card a:hover{

    letter-spacing:1px;

}

/* ---------- CERTIFICATE ---------- */

.certificate-card{

    transition:.4s;

}

.certificate-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(47,128,237,.35);

}

/* ---------- TIMELINE ---------- */

.timeline-item{

    position:relative;

    padding-left:15px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    width:16px;
    height:16px;

    background:#2F80ED;

    border-radius:50%;

    left:-40px;
    top:8px;

}

/* ---------- SOCIAL ICON ---------- */

.contact-container a{

    box-shadow:0 0 20px rgba(47,128,237,.15);

}

.contact-container a:hover{

    box-shadow:0 0 35px rgba(47,128,237,.45);

}

/* ---------- FOOTER ---------- */

footer{

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

}

/* ---------- SCROLL REVEAL ---------- */

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ---------- BACK TO TOP ---------- */

#topBtn{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border-radius:50%;

    border:none;

    background:#2F80ED;

    color:white;

    font-size:22px;

    cursor:pointer;

    display:none;

    z-index:999;

    transition:.3s;

}

#topBtn:hover{

    transform:translateY(-8px);

}

/* ---------- SKILL BAR ---------- */

.skill{

    margin-bottom:20px;

}

.skill-title{

    margin-bottom:8px;

}

.progress{

    width:100%;

    height:12px;

    background:#1d3557;

    border-radius:30px;

    overflow:hidden;

}

.progress span{

    display:block;

    height:100%;

    background:linear-gradient(
        90deg,
        #2F80ED,
        #4FC3F7
    );

    border-radius:30px;

}

/* ---------- COUNTER ---------- */

.counter{

    font-size:40px;

    font-weight:bold;

    color:#4FC3F7;

}

/* ---------- BADGE ---------- */

.badge{

    display:inline-block;

    padding:6px 15px;

    background:#2F80ED;

    border-radius:20px;

    margin:5px;

    font-size:14px;

}

/* ---------- LIGHTBOX ---------- */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:15px;

}

/* ---------- DARK MODE ---------- */

body.light{

    background:#f5f8fc;

    color:#222;

}

body.light .navbar{

    background:white;

}

body.light .skill-card,
body.light .project-card{

    background:white;

    color:#222;

}

body.light footer{

    background:#eef2f8;

}

/* ---------- ANIMATION ---------- */

.fade-up{

    animation:fadeUp .9s forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.zoom{

    animation:zoom .8s;

}

@keyframes zoom{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ---------- RESPONSIVE ---------- */

/* =====================================
FINAL RESPONSIVE + HAMBURGER MENU
===================================== */


/* TABLET */

@media(max-width:991px){


.home{

    flex-direction:column-reverse;
    text-align:center;

}



.home-image img{

    width:280px;
    height:280px;

}



.home-text h1{

    font-size:45px;

}



.skills-grid{

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

}



.certificate-container{

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

}



}


/* ===========================
MOBILE
=========================== */


@media(max-width:768px){



section{

    padding:90px 6%;

}



/* HAMBURGER BUTTON */

.menu-btn{

    display:block;

    font-size:28px;

    color:white;

    cursor:pointer;

    z-index:1001;

}

/* =================================
   MOBILE SIDEBAR MENU PREMIUM
================================= */

@media(max-width:991px){


.menu-btn{

    display:block;

    color:white;

    font-size:28px;

    cursor:pointer;

    z-index:2000;

}


/* PANEL MENU KELUAR DARI KANAN */

.nav-links{

    position:fixed;

    top:0;

    right:-100%;


    width:300px;

    height:100vh;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    gap:30px;


    background:rgba(8,20,38,.95);

    backdrop-filter:blur(25px);


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


    box-shadow:-15px 0 40px rgba(0,0,0,.4);


    transition:.5s ease;


    z-index:1500;

}



/* MENU TERBUKA */

.nav-links.active{

    right:0;

}



/* LINK MENU */

.nav-links li{

    list-style:none;

}



.nav-links a{

    display:flex;

    align-items:center;

    gap:15px;


    color:white;

    text-decoration:none;


    font-size:19px;


    transition:.3s;

}



.nav-links a i{

    width:25px;

    color:#4FC3F7;

}



/* HOVER */

.nav-links a:hover{

    color:#2F80ED;

    transform:translateX(-8px);

}



/* ICON X */

.menu-btn i{

    transition:.4s;

}



.menu-btn.open i{

    transform:rotate(180deg);

}


}

/* MENU MUNCUL */

.nav-links.active{


    transform:translateY(0);


}




.nav-links li{

    list-style:none;

}



.nav-links a{

    font-size:18px;

}





.menu-btn i{

    transition:.3s;

}




.menu-btn.open i{

transform:rotate(180deg);

}

.menu-btn.open i::before{
    content:"\f00d";
}





.skills-grid{

    grid-template-columns:1fr;

}




.certificate-container{

    grid-template-columns:1fr;

}




.home-image{

    margin-bottom:40px;

}




.section-title{

    font-size:32px;

}



.timeline{

    padding-left:20px;

}



.contact-container{

    flex-wrap:wrap;

}



}



/* HP KECIL */

@media(max-width:600px){


.home-text h1{

    font-size:38px;

}



.home-text h2{

    font-size:20px;

}



.btn,
.btn-outline{

    padding:12px 25px;

}


}