.popup{

    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;

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

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

#popup-nama::after{
    content:"|";
    margin-left:3px;
    color:#00d4ff;
    animation:blink .8s infinite;
}

@keyframes blink{

    50%{
        opacity:0;
    }

}

.popup.show{

    opacity:1;
    visibility:visible;

}

.popup-content{

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

    background:
        linear-gradient(
            135deg,
            rgba(127,92,255,.35),
            rgba(0,212,255,.18),
            rgba(15,17,23,.95)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

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

    box-shadow:
        0 0 40px rgba(127,92,255,.35),
        0 0 80px rgba(0,212,255,.15);


    padding:30px;

    border-radius:20px;

    text-align:center;

    position:relative;


    transform: translateY(80px) scale(0.8);
    transition: transform 0.35s ease;
    transform-style: preserve-3d;
    will-change: transform;

}

.popup.show .popup-content {
    transform: translateY(0) scale(1);
}

.popup-content img{

    width:250px;
    height:250px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #00d4ff;
    margin-top:20px;
    
}

.popup-content h2{

    margin-top:20px;
    margin-bottom:40px;

}

.skills{
    margin-top:-8px;
    margin-bottom: 15px;
    transform:translateY(-8px);
}

.skill{
    margin:5px 0;
}

.skill span{
    display:block;
    margin-bottom:6px;
    font-size:15px;
    font-weight:600;
}

.bar{
    width:100%;
    height:8px;
    background:#2d3242;
    border-radius:999px;
    overflow:hidden;
}

.fill{
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#00d4ff,#7f5cff);
    transition:width .8s ease;
    box-shadow:0 0 15px #00d4ff;
}

.popup-contact{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:5px 0;
}

.popup-contact i{
    color:#E1306C;
    font-size:35px;
    transition:.3s;
}

.popup-contact i:hover{
    transform:scale(1.2) rotate(10deg);
}

.popup-contact h4{
    margin:0;
    color:#00d4ff;
    font-size:28px;
    font-weight:600;
}

.popup-content h4{
    font-size:30px;
    color:#00d4ff;
    margin:20px 0;

}

.popup-content p{
    color:#bdbdbd;
    margin-top:10px;
    line-height:1.6;
}

.close{

    position:absolute;

    top:20px;
    right:20px;

    font-size:28px;

    cursor:pointer;

}

@keyframes popup{

    from{

        transform:scale(.8);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}