/* Mengatasi masalah Overflow di Mobile dan menyembunyikan kursor asli di PC */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    cursor: none; 
}

/* Background Grid (Hanya digunakan di bagian atas Hero) */
.bg-grid { background-image: linear-gradient(to right, rgba(200, 208, 220, 0.4) 1px, transparent 1px), linear-gradient(to bottom, rgba(200, 208, 220, 0.4) 1px, transparent 1px); background-size: 40px 40px; }
.bg-grid-dark { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; }

/* --------------------------------------
   KURSOR MAGNETIK CUSTOM (SEPERTI GAMBAR)
   -------------------------------------- */
.cursor { 
    width: 6px; 
    height: 6px; 
    background: #2563eb; 
    border-radius: 50%; 
    position: fixed; 
    pointer-events: none; 
    z-index: 99999; 
    transition: width 0.2s, height 0.2s, opacity 0.2s; 
}
.cursor-follower { 
    width: 40px; 
    height: 40px; 
    border: 2px solid rgba(37, 99, 235, 0.5); 
    border-radius: 50%; 
    position: fixed; 
    pointer-events: none; 
    z-index: 99998; 
    /* Transisi sangat penting agar saat berubah bentuk ke elemen target menjadi halus */
    transition: width 0.2s, height 0.2s, border-radius 0.2s, background-color 0.2s, border-color 0.2s; 
}

/* Saat Kursor menyentuh elemen kelas 'hover-target' */
body.hovering .cursor { opacity: 0; }
body.hovering .cursor-follower {
    background-color: rgba(37, 99, 235, 0.1);
    border-color: #2563eb;
}

/* Menghapus kursor jika dibuka di Mobile/Layar Sentuh */
@media (max-width: 768px) {
    html, body { cursor: auto; }
    .cursor, .cursor-follower { display: none !important; }
}

/* --------------------------------------
   EFEK HOVER KARTU (TERANGKAT + GLOW)
   -------------------------------------- */
.skill-box {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hover-box-glow:hover {
    transform: translateY(-8px);
    border-color: #2563eb;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}
.cert-box {
    transition: all 0.3s ease;
}
.cert-box:hover {
    border-color: #2563eb;
    background-color: #f8fafc;
}
.dark .cert-box:hover {
    background-color: rgba(30, 41, 59, 0.5);
}

/* Style Chips/Pill Skill */
.skill-chip { padding: 6px 14px; background-color: transparent; border: 1px solid #e2e8f0; color: #475569; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; transition: border-color 0.2s, color 0.2s;}
.dark .skill-chip { border-color: #334155; color: #cbd5e1; }
.skill-chip:hover { border-color: #2563eb; color: #2563eb; }

/* Style List Badges Skill */
.skill-list-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 12px; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; transition: background-color 0.3s; }
.dark .skill-list-item { border-bottom-color: #1e293b; }

.badge-expert { padding: 4px 12px; border-radius: 9999px; font-size: 0.7rem; font-weight: 800; background-color: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.badge-advanced { padding: 4px 12px; border-radius: 9999px; font-size: 0.7rem; font-weight: 800; background-color: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.badge-intermediate { padding: 4px 12px; border-radius: 9999px; font-size: 0.7rem; font-weight: 800; background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.dark .badge-expert { background-color: rgba(217, 119, 6, 0.2); border-color: rgba(217, 119, 6, 0.4); }
.dark .badge-advanced { background-color: rgba(126, 34, 206, 0.2); border-color: rgba(126, 34, 206, 0.4); }
.dark .badge-intermediate { background-color: rgba(3, 105, 161, 0.2); border-color: rgba(3, 105, 161, 0.4); }

/* Form Input Style */
.form-input { width: 100%; padding: 14px 16px; background-color: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 0.875rem; font-weight: 600; color: #334155; outline: none; transition: all 0.2s; }
.form-input::placeholder { color: #94a3b8; font-weight: 500; }
.form-input:focus { background-color: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.dark .form-input { background-color: #1e293b; border-color: #334155; color: #f8fafc; }
.dark .form-input:focus { background-color: #0f172a; }

/* Garis Navigasi Aktif */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: #2563eb; transition: width 0.35s ease-in-out; border-radius: 9999px; }
.nav-link:hover::after { width: 100%; }

/* Animasi Floating Badge */
@keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }
.floating-badge { animation: floating 4s ease-in-out infinite; }
.delay-100 { animation-delay: 0.5s; }
.delay-300 { animation-delay: 1.5s; }

/* 3D Container */
.perspective-1000 { perspective: 1000px; }

/* Modal Image Transitions */
#certModalContent { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; }
/* Custom Cursor Magnetik */
.cursor { width: 6px; height: 6px; background: #2563eb; border-radius: 50%; position: fixed; pointer-events: none; z-index: 99999; }
.cursor-follower { width: 40px; height: 40px; border: 2px solid #2563eb; border-radius: 50%; position: fixed; pointer-events: none; z-index: 99998; transition: all 0.2s ease; }
body.hovering .cursor { opacity: 0; }
body.hovering .cursor-follower { background: rgba(37, 99, 235, 0.1); border-radius: 4px; transform: scale(1.5); }

/* Grid Background */
.bg-grid { background-image: linear-gradient(to right, rgba(200, 208, 220, 0.4) 1px, transparent 1px), linear-gradient(to bottom, rgba(200, 208, 220, 0.4) 1px, transparent 1px); background-size: 40px 40px; }

/* Box Terangkat */
.skill-box { transition: all 0.4s ease; }
.skill-box:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15); border-color: #2563eb; }

@media (max-width: 768px) { .cursor, .cursor-follower { display: none !important; } }