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

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

/*======================================================
                    CSS VARIABLES
======================================================*/

:root{

    /*========== Colors ==========*/

    --primary:#2563EB;
    --primary-light:#3B82F6;
    --secondary:#60A5FA;

    --white:#FFFFFF;
    --bg:#F8FAFC;
    --section:#F1F5F9;

    --text:#0F172A;
    --text-light:#64748B;

    --border:#E2E8F0;

    --success:#22C55E;

    /*========== Shadow ==========*/

    --shadow-sm:0 5px 15px rgba(0,0,0,.05);

    --shadow-md:0 15px 40px rgba(37,99,235,.12);

    --shadow-lg:0 20px 60px rgba(37,99,235,.18);

    /*========== Radius ==========*/

    --radius-sm:12px;

    --radius-md:20px;

    --radius-lg:30px;

    /*========== Transition ==========*/

    --transition:.35s ease;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.7;

    position:relative;

}

/*======================================================
            BACKGROUND BLUR
======================================================*/

body::before{

    content:"";

    position:fixed;

    width:550px;

    height:550px;

    background:#DBEAFE;

    border-radius:50%;

    top:-250px;

    right:-180px;

    filter:blur(130px);

    opacity:.8;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    width:450px;

    height:450px;

    background:#BFDBFE;

    left:-180px;

    bottom:-150px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.7;

    z-index:-2;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F1F5F9;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#1D4ED8;

}

/*======================================================
                    SELECTION
======================================================*/

::selection{

    background:var(--primary);

    color:white;

}

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

img{

    width:100%;

    display:block;

}

/*======================================================
                    LINKS
======================================================*/

a{

    text-decoration:none;

    color:inherit;

}

/*======================================================
                    LIST
======================================================*/

ul{

    list-style:none;

}

/*======================================================
                CONTAINER
======================================================*/

.container{

    width:min(1180px,90%);

    margin:auto;

}

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

section{

    padding:110px 0;

    position:relative;

}

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

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading span{

    color:var(--primary);

    font-weight:600;

    font-size:.95rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-heading h2{

    font-size:2.7rem;

    margin-top:10px;

}

.section-heading p{

    margin-top:18px;

    color:var(--text-light);

    max-width:700px;

    margin-inline:auto;

}

/*======================================================
                    HEADER
======================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    padding:18px 0;

    transition:.4s;

}

/* nanti JS akan menambahkan class .sticky */

.header.sticky{

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

    backdrop-filter:blur(18px);

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

    padding:12px 0;

}

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

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:2rem;

    font-weight:700;

}

.logo span{

    color:var(--primary);

}

.nav-menu{

    display:flex;

    gap:40px;

}

.nav-menu a{

    font-weight:500;

    position:relative;

    transition:var(--transition);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.nav-menu a:hover{

    color:var(--primary);

}

.nav-menu a:hover::after{

    width:100%;

}

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

.btn-nav,

.btn-primary,

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}

.btn-nav{

    background:var(--primary);

    color:white;

}

.btn-nav:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-lg);

}

.btn-secondary{

    border:2px solid var(--primary);

    color:var(--primary);

    background:white;

}

.btn-secondary:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-5px);

}

/*======================================================
                CARD DEFAULT
======================================================*/

.tech-card,
.info-card,
.service-card,
.stat-card,
.why-card,
.experience-card,
.certificate-card,
.contact-card{

    background:white;

    border-radius:24px;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.tech-card:hover,
.info-card:hover,
.service-card:hover,
.stat-card:hover,
.why-card:hover,
.experience-card:hover,
.certificate-card:hover,
.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

/*======================================================
                UTILITY
======================================================*/

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:20px;

}

.mt-2{

    margin-top:40px;

}

.mt-3{

    margin-top:60px;

}

.mb-1{

    margin-bottom:20px;

}

.mb-2{

    margin-bottom:40px;

}

.mb-3{

    margin-bottom:60px;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:140px;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

/*======================================================
                HERO CONTENT
======================================================*/

.hero-content{

    animation:fadeLeft 1s ease;

}

.hero-subtitle{

    display:inline-block;

    padding:10px 18px;

    background:#DBEAFE;

    color:var(--primary);

    border-radius:50px;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:4.5rem;

    line-height:1.1;

    margin-bottom:12px;

}

.hero-content h1 span{

    color:var(--primary);

}

.hero-content h2{

    font-size:2rem;

    color:var(--text-light);

    font-weight:500;

    margin-bottom:25px;

}

.hero-content p{

    color:var(--text-light);

    font-size:1.05rem;

    max-width:560px;

    margin-bottom:40px;

}

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

.hero-button{

    display:flex;

    gap:20px;

    margin-bottom:45px;

    flex-wrap:wrap;

}

/*======================================================
                HERO SOCIAL
======================================================*/

.hero-social{

    display:flex;

    gap:18px;

}

.hero-social a{

    width:55px;

    height:55px;

    background:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:.35s;

    font-size:1.2rem;

}

.hero-social a:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

/*======================================================
                HERO IMAGE
======================================================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    animation:fadeRight 1s ease;

}

/*======================================================
                BLUE CIRCLE
======================================================*/

.circle-bg{

    position:absolute;

    width:470px;

    height:470px;

    background:linear-gradient(
        135deg,
        #60A5FA,
        #2563EB
    );

    border-radius:50%;

    filter:blur(0px);

    animation:floating 6s ease-in-out infinite;

}

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

.hero-image img{

    position:relative;

    width:390px;

    height:390px;

    object-fit:cover;

    border-radius:50%;

    border:10px solid white;

    box-shadow:0 30px 80px rgba(37,99,235,.25);

    z-index:5;

}

/*======================================================
                DECORATION
======================================================*/

.hero-image::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:#BFDBFE;

    border-radius:50%;

    top:20px;

    left:20px;

    filter:blur(15px);

}

.hero-image::after{

    content:"";

    position:absolute;

    width:70px;

    height:70px;

    background:#3B82F6;

    border-radius:50%;

    right:20px;

    bottom:30px;

}

/*======================================================
                ANIMATION
======================================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}
/*======================================================
                    ABOUT
======================================================*/

.about{
    background: var(--white);
}

.about-container{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:80px;
    align-items:center;
}

.about-image{
    display:flex;
    justify-content:center;
}

.about-photo{
    width:380px;
    aspect-ratio:1;
    border-radius:32px;
    overflow:hidden;
    position:relative;
    background:linear-gradient(135deg,#60A5FA,#2563EB);
    padding:8px;
    box-shadow:var(--shadow-lg);
}

.about-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:24px;
}

.about-content h3{
    font-size:2rem;
    margin-bottom:25px;
}

.about-content p{
    color:var(--text-light);
    margin-bottom:18px;
}

.about-info{
    margin-top:35px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.info-card{
    padding:22px;
}

.info-card h4{
    color:var(--primary);
    margin-bottom:8px;
}

.info-card p{
    margin:0;
}

/*======================================================
                    EDUCATION
======================================================*/

.education{
    background:var(--bg);
}

.timeline{
    max-width:900px;
    margin:auto;
    position:relative;
}

.timeline::before{
    content:"";
    position:absolute;
    left:22px;
    top:22px;
    bottom: 0px;
    width:3px;
    background:var(--primary);
}

.timeline-item{
    display:flex;
    gap:30px;
    margin-bottom:50px;
    position:relative;
}

.timeline-dot{
    width:45px;
    height:45px;
    border-radius:50%;
    background:var(--primary);
    border:6px solid white;
    flex-shrink:0;
    box-shadow:var(--shadow-md);
}

.timeline-content{
    flex:1;
    background:white;
    padding:30px;
    border-radius:20px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.timeline-content span{
    color:var(--primary);
    font-weight:600;
}

.timeline-content h3{
    margin:10px 0;
}
/*======================================================
                    EXPERIENCE
======================================================*/

.experience{
    background:var(--section);
}

.experience-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.experience-card{
    padding:35px;
}

.experience-card h3{
    margin-bottom:18px;
    color:var(--primary);
}

.experience-card p{
    color:var(--text-light);
}

/*======================================================
                HOVER EFFECT
======================================================*/

.service-card:hover,
.why-card:hover,
.experience-card:hover,
.timeline-content:hover,
.info-card:hover{

    transform:translateY(-10px);

}

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

.about,
.education,
.services,
.why-me,
.experience{

    position:relative;
    overflow:hidden;

}
/*======================================================
                    PROJECT
======================================================*/

.projects{

    background:var(--white);

}

.project-item{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:140px;

}

.project-item:last-child{

    margin-bottom:0;

}

.project-item.reverse{

    grid-template-columns:1fr 1.1fr;

}

.project-item.reverse .project-image{

    order:2;

}

.project-item.reverse .project-content{

    order:1;

}

/*======================================================
                PROJECT IMAGE
======================================================*/

.project-image{

    position:relative;

}

.project-image::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.12),
        rgba(96,165,250,.12)
    );

    transform:rotate(-2deg);

    z-index:0;

}

.project-image img{

    position:relative;

    z-index:2;

    border-radius:25px;

    border:10px solid white;

    box-shadow:var(--shadow-lg);

    transition:.45s;

}

.project-item:hover .project-image img{

    transform:translateY(-10px) scale(1.02);

}

/*======================================================
                BROWSER BAR
======================================================*/

.project-image::after{

    content:"";

    position:absolute;

    top:18px;

    left:22px;

    width:60px;

    height:14px;

    background:
    radial-gradient(circle,#ff5f57 6px,transparent 7px) 0 0/20px 20px,
    radial-gradient(circle,#febc2e 6px,transparent 7px) 20px 0/20px 20px,
    radial-gradient(circle,#28c840 6px,transparent 7px) 40px 0/20px 20px;

    z-index:3;

}

/*======================================================
                PROJECT CONTENT
======================================================*/

.project-number{

    display:inline-block;

    font-size:5rem;

    font-weight:800;

    color:#DBEAFE;

    line-height:1;

    margin-bottom:10px;

}

.project-content h3{

    font-size:2rem;

    margin-bottom:18px;

}

.project-content p{

    color:var(--text-light);

    margin-bottom:30px;

}

/*======================================================
                PROJECT TECH
======================================================*/

.project-tech{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.project-tech span{

    padding:10px 18px;

    border-radius:50px;

    background:#EFF6FF;

    color:var(--primary);

    font-weight:600;

    font-size:.9rem;

}

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

.project-button{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/*======================================================
                CERTIFICATE
======================================================*/

.certificate{

    background:var(--bg);

}

.certificate-grid{

    display:grid;

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

    gap:30px;

}

.certificate-card{

    overflow:hidden;

}

.certificate-card img{

    height:240px;

    object-fit:cover;

    transition:.45s;

}

.certificate-card:hover img{

    transform:scale(1.08);

}

.certificate-content{

    padding:28px;

}

.certificate-content h3{

    margin-bottom:10px;

}

.certificate-content p{

    color:var(--text-light);

    margin-bottom:25px;

}

.certificate-content a{

    color:var(--primary);

    font-weight:600;

}

.certificate-content a:hover{

    text-decoration:underline;

}

/*======================================================
                FLOAT EFFECT
======================================================*/

.project-item:hover{

    transform:translateY(-5px);

    transition:.4s;

}

.certificate-card:hover{

    transform:translateY(-10px);

}

/*======================================================
            DECORATION
======================================================*/

.projects::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:#DBEAFE;

    filter:blur(120px);

    right:-120px;

    top:200px;

    border-radius:50%;

    z-index:0;

}

.projects::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:#BFDBFE;

    filter:blur(120px);

    left:-120px;

    bottom:120px;

    border-radius:50%;

}

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

.contact{
    background:white;
}

.contact-container{
    display:flex;
    justify-content:center;
}

.contact-info{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}
.contact-card{
    width:450px;
    padding:25px;
    border-radius:20px;
    background:white;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    display:flex;
    align-items:center;
    gap:20px;
}

.contact-card i{
    width:70px;
    height:80px;
    border-radius:50%;
    background:#DBEAFE;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    font-size:1.3rem;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-form input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

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

footer{
    background:#0F172A;
    color:white;
    padding:70px 0 30px;
}

.footer-content{
    text-align:center;
}

.footer-logo{
    font-size:2rem;
    font-weight:700;
}

.footer-logo span{
    color:#60A5FA;
}

.footer-content p{
    margin:20px auto;
    max-width:600px;
    color:#CBD5E1;
}

.footer-social{
    display:flex;
    justify-content:center;
    gap:18px;
    margin:35px 0;
}

.footer-social a{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.08);
    transition:.35s;
}

.footer-social a:hover{
    background:var(--primary);
    transform:translateY(-6px);
}

footer hr{
    margin:35px 0;
    border:none;
    border-top:1px solid rgba(255,255,255,.12);
}

/*======================================================
                SCROLL TO TOP
======================================================*/

.scroll-top{
    position:fixed;
    right:30px;
    bottom:30px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--primary);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:var(--shadow-lg);
    transition:.35s;
    z-index:999;
}

.scroll-top:hover{
    transform:translateY(-6px);
}

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

@media (max-width:1100px){

.hero-container,
.about-container,
.project-item,
.project-item.reverse,
.contact-container{

grid-template-columns:1fr;

}

.project-item.reverse .project-image,
.project-item.reverse .project-content{

order:unset;

}

.tech-grid{

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

}

.service-grid,
.experience-grid,
.certificate-grid{

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

}

.why-grid{

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

}

.stats-grid{

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

}

.workflow-container{

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

}

.workflow-arrow{

display:none;

}

}

@media (max-width:768px){

.nav-menu{

display:none;

}

.hero-content h1{

font-size:3rem;

}

.hero-content h2{

font-size:1.5rem;

}

.hero-image img{

width:300px;

height:300px;

}

.circle-bg{

width:340px;

height:340px;

}

.about-info{

grid-template-columns:1fr;

}

.tech-grid,
.service-grid,
.experience-grid,
.certificate-grid,
.stats-grid,
.why-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:2rem;

}

section{

padding:80px 0;

}

.container{

width:92%;

}

}

@media (max-width:480px){

.hero-button{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.contact-card{

flex-direction:column;

text-align:center;

}

.footer-social{

flex-wrap:wrap;

}

.scroll-top{

right:20px;

bottom:20px;

}

} 

/* ======================================================
                CERTIFICATE POPUP
====================================================== */

.certificate-modal {
    display: none;
    position: fixed;
    z-index: 9999;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.85);

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

    padding: 30px;
}


/* Popup Container */

.modal-content {
    position: relative;

    width: 90%;
    max-width: 1000px;

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


/* Certificate Image */

.modal-content img {
    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 85vh;

    object-fit: contain;

    background: white;

    border-radius: 8px;

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


/* Close Button */

.close-modal {
    position: absolute;

    top: -50px;
    right: 0;

    width: 40px;
    height: 40px;

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

    color: white;

    font-size: 38px;
    font-weight: bold;

    cursor: pointer;

    transition: .3s;
}

.close-modal:hover {
    transform: scale(1.15);
}


/* Previous & Next Button */

.prev-btn,
.next-btn {
    position: absolute;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.2);
    color: white;

    font-size: 28px;

    cursor: pointer;

    transition: .3s;

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

.prev-btn:hover,
.next-btn:hover {
    background: var(--primary);

    transform: scale(1.1);
}


/* Previous */

.prev-btn {
    left: -70px;
}


/* Next */

.next-btn {
    right: -70px;
}


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

@media (max-width: 768px) {

    .certificate-modal {
        padding: 20px;
    }

    .modal-content {
        width: 100%;
    }

    .prev-btn,
    .next-btn {
        width: 42px;
        height: 42px;

        font-size: 22px;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }

    .close-modal {
        top: -45px;
        right: 0;
    }

}