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

:root {
    --primary: #ffffff;
    --bg-glass: rgba(0, 0, 0, 0.6);
    --bg-glass-hover: rgba(50, 50, 50, 0.8);
    --border: rgba(255, 255, 255, 0.1);
    --glow: rgba(255, 255, 255, 0.5);
    --orbit-color: rgba(255, 255, 255, 0.15);
}

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

/* Fix Masalah Layar Hitam & Kedip Putih */
html {
    background-color: #050505; /* Warna dasar browser gelap (biar gak putih pas scroll) */
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    
    background-color: transparent; /* Transparan biar gambar di belakang kelihatan */
    overflow-x: hidden;
}

/* Background Image & Overlay */
body::before {
    content: '';
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    
    background: 
        linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
        url('https://w.wallhaven.cc/full/qz/wallhaven-qz3r5d.jpg') no-repeat center center/cover;
    
    z-index: -1;
    will-change: transform;
}

/* --- PROFILE & ORBIT SYSTEM --- */
.profile-container {
    text-align: center;
    margin-bottom: 50px; /* Jarak ke tombol */
    animation: fadeInDown 1s ease;
    position: relative;
    z-index: 10;
}

/* Wrapper untuk Avatar + Orbit */
.avatar-wrap {
    position: relative;
    width: 180px; /* Lebar area orbit */
    height: 180px;
    margin: 0 auto 15px; /* Tengah */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Foto Profil */
.avatar {
    width: 110px; /* Ukuran foto pas di tengah */
    height: 110px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    object-fit: cover;
    z-index: 5; /* Di atas garis orbit */
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    transition: transform 0.5s;
    /* margin-bottom dihapus karena dihandle wrapper */
}

.avatar:hover { transform: scale(1.05); border-color: #fff; }

/* Cincin Orbit Berputar */
.orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px dashed var(--orbit-color);
    animation: spinRight 25s linear infinite; /* LINEAR = MULUS */
}

/* Ikon Orbit */
.orbit-icon {
    position: absolute;
    width: 32px;
    height: 32px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    
    /* Centering trik: geser setengah ukuran ikon */
    margin-left: -16px;
    margin-top: -16px;

    /* Counter Rotate: Ikon muter balik biar tetap tegak */
    animation: spinLeft 25s linear infinite;
}

/* Posisi 8 Ikon (Pola Jam) */
.icon-1 { top: 0%; left: 50%; color: #f7df1e; border-color: #f7df1e; } /* Jam 12 */
.icon-2 { top: 14.6%; left: 85.4%; color: #3776ab; border-color: #3776ab; } /* Jam 1.30 */
.icon-3 { top: 50%; left: 100%; color: #61dafb; border-color: #61dafb; } /* Jam 3 */
.icon-4 { top: 85.4%; left: 85.4%; color: #68a063; border-color: #68a063; } /* Jam 4.30 */
.icon-5 { top: 100%; left: 50%; color: #e34f26; border-color: #e34f26; } /* Jam 6 */
.icon-6 { top: 85.4%; left: 14.6%; color: #1572b6; border-color: #1572b6; } /* Jam 7.30 */
.icon-7 { top: 50%; left: 0%; color: #ddd; border-color: #ddd; } /* Jam 9 */
.icon-8 { top: 14.6%; left: 14.6%; color: #f05032; border-color: #f05032; } /* Jam 10.30 */

/* Nama & Bio */
.name {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 5px;
    
    /* FIX ALIGNMENT */
    display: inline-block; /* Biar lebar sesuai teks aja */
    position: relative;    /* Acuan buat ikon verified */
}

.verified {
    color: #1DA1F2;
    font-size: 1rem; /* Ukuran ikon pas */
    
    /* Posisi Absolute biar gak ngedorong teks ke kiri */
    position: absolute;
    top: 5px;       /* Sesuaikan tinggi */
    right: -25px;   /* Geser ke kanan luar teks */
    margin-left: 0;
}

.bio { font-size: 0.9rem; color: #ccc; font-weight: 300; }

/* --- BENTO WIDGETS --- */
.bento-stats {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
    width: 100%;
    max-width: 400px; /* Lebar maksimal widget */
    margin-left: auto;
    margin-right: auto;
}

.stat-box {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px;
    backdrop-filter: blur(5px);
    transition: transform 0.3s;
}

.stat-box:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.stat-num {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.stat-label {
    font-size: 0.75rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.text-accent { color: #00d2ff; margin-right: 5px; }

/* --- LINKS LIST (TETAP BAGUS) --- */
.links-container {
    width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 15px;
}

.link-card {
    display: flex; align-items: center; padding: 15px 20px;
    background: var(--bg-glass); border: 1px solid var(--border);
    backdrop-filter: blur(10px); border-radius: 50px;
    text-decoration: none; color: white;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden;
    opacity: 0; animation: slideUp 0.8s ease forwards;
}

.link-card:hover {
    background: var(--bg-glass-hover); transform: translateY(-3px) scale(1.02);
    border-color: rgba(255,255,255,0.4); box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.icon-box { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-right: 15px; }
.link-text { flex-grow: 1; font-weight: 500; letter-spacing: 0.5px; }
.share-btn { opacity: 0.5; transition: 0.3s; }
.link-card:hover .share-btn { opacity: 1; }

/* Text Center Mod (Buat link teks doang) */
.text-center { justify-content: center; text-align: center; }
.text-center .link-text { flex-grow: 0; }

/* --- SOCIALS --- */
.socials {
    margin-top: 40px; display: flex; gap: 20px;
    animation: fadeInUp 1s ease 1s forwards; opacity: 0;
}
.social-icon { color: rgba(255,255,255,0.7); font-size: 1.5rem; transition: 0.3s; }
.social-icon:hover { color: #fff; transform: scale(1.2); }

/* --- ANIMATIONS (FIXED) --- */
@keyframes spinRight { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes spinLeft { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }