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

body{ font-family:'Outfit',sans-serif; background:#0f172a; color:white; overflow-x:hidden; padding:20px; }

/* BLOB BACKGROUND */

.blob{
    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    opacity:.4;
    z-index:-1;
}

.blob1{
    width:300px;
    height:300px;
    background:#3b82f6;
    top:-100px;
    left:-100px;
}

.blob2{
    width:300px;
    height:300px;
    background:#8b5cf6;
    right:-100px;
    top:200px;
}

.blob3{
    width:300px;
    height:300px;
    background:#ec4899;
    bottom:-100px;
    left:30%;
}

/* HERO */

.hero{
    text-align:center;
    margin-top:40px;
    margin-bottom:40px;
}

.profile{
    width:180px;
    height:180px;
    border-radius:50%;
    object-fit:cover;

    border:4px solid rgba(255,255,255,.3);

    box-shadow:
    0 0 20px #60a5fa,
    0 0 40px #60a5fa,
    0 0 60px #a855f7;

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

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

.nama{ color:#60a5fa; margin-top:10px; } .hero p{ margin-top:15px; color:#cbd5e1; }

/* CARD */

.card{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 25px;
    padding: 30px;
    margin-bottom: 30px;

    box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    0 0 30px rgba(96,165,250,0.1);

    transition: all .4s ease;
}

.card:hover{
    transform: translateY(-10px);
    box-shadow:
    0 20px 40px rgba(0,0,0,.4),
    0 0 50px rgba(96,165,250,.4);
}

/* HOBI */

.hobi-container{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.bubble{
    background:#2563eb;
    padding:10px 18px;
    border-radius:30px;
}

/* SKILL */

.skills{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}
.progress{
    width:150px;
    height:150px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    background:
    conic-gradient(
        #38bdf8 calc(var(--value) * 1%),
        rgba(255,255,255,.1) 0
    );
}
.progress::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    background:#0f172a;
    border-radius:50%;
}

.progress .content{
    position:relative;
    text-align:center;
    z-index:2;
}
.circle{
    width:120px;
    height:120px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    color:white;
}

.skill1{
    background:#3b82f6;
}

.skill2{
    background:#8b5cf6;
}

.skill3{
    background:#ec4899;
}

.circle p{
    font-size:14px;
}

/* GALERI */

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
}

.polaroid{ background:white; color:black; padding:10px; border-radius:10px; text-align:center; } .polaroid img{ width:100%; border-radius:10px; }

/* SOCIAL */

.social-icons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:20px;
}

.social-icons a{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-decoration:none;
    font-size:28px;
    color:white;
    background:rgba(255,255,255,.1);
    transition:.3s;
}

.social-icons a:hover{
    transform:translateY(-5px) scale(1.1);
}

.fa-whatsapp{
    color:#25D366;
}

.fa-instagram{
    color:#E4405F;
}

.fa-tiktok{
    color:#ffffff;
}

.fa-envelope{
    color:#60a5fa;
}

/* FOOTER */

footer{
    text-align:center;
    margin-top:30px;
    color:#94a3b8;
}