/* --- BASE ENGINE --- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* --- NAV STYLING --- */
.nav-btn {
    @apply px-5 py-2 text-[11px] font-black uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-white transition-all duration-300;
}

/* --- RESPONSIVE TYPOGRAPHY --- */
@media (min-width: 1024px) {
    h1 {
        font-size: 4.5rem !important; /* Memperbesar teks untuk Desktop */
    }
}

/* --- BUTTON ANIMATION --- */
.group:hover .scale-x-100 {
    transform: scaleX(1);
}

/* --- FOOTER SOCIALS --- */
.social-link {
    @apply text-xl md:text-2xl font-semibold tracking-tight;
}

/* --- NAVBAR SCROLLED --- */
.nav-scrolled {
    @apply py-2 md:py-3;
}
.nav-scrolled > div {
    @apply shadow-2xl bg-white/95 dark:bg-slate-900/95 border-brand/10;
}

/* Custom Cursor */
.typed-cursor {
    @apply text-brand font-light;
}/* Core Professional Styling */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Custom Navbar Button */
.nav-btn {
    @apply px-5 py-2 text-[11px] font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-white transition-all;
}

/* Mobile Nav Link */
.mobile-nav-link {
    @apply py-4 text-center text-sm font-bold text-slate-600 dark:text-slate-300 border-b border-slate-50 dark:border-slate-800 transition-all;
}

/* Responsivitas Navbar Desktop */
@media (min-width: 768px) {
    #navbar.scrolled > div {
        @apply py-2 max-w-5xl;
    }
}

/* Typografi Hero yang Adaptif */
h1 {
    font-size: clamp(2.5rem, 8vw, 6rem) !important;
}

/* Animation Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
/* Menghilangkan miring dan memastikan alignment desktop tegak lurus */
.nav-link-v3 {
    @apply text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 hover:text-brand transition-all duration-300;
}

/* Jarak aman supaya konten tidak nabrak navbar */
body {
    padding-top: 0; /* Jangan pakai padding-top di body, pakai di section saja */
}

section {
    scroll-margin-top: 100px;
}
/* Animasi Bar Persentase */
#skills .bg-brand {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); /* Memberikan efek cahaya pada bar */
}

/* Transisi Warna Mode Gelap untuk Text-Slate */
.dark .text-slate-500 {
    color: #94a3b8;
}
section { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.8s ease-out; 
}
section.active { 
    opacity: 1; 
    transform: translateY(0); 
}
<style>
    /* Base State: Elemen tidak terlihat sebelum di-scroll */
    .reveal {
        opacity: 0;
        filter: blur(5px);
        transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Variasi 1: Muncul dari Bawah (Default) */
    .reveal-bottom { transform: translateY(50px); }

    /* Variasi 2: Muncul dari Kiri */
    .reveal-left { transform: translateX(-50px); }

    /* Variasi 3: Muncul dari Kanan */
    .reveal-right { transform: translateX(50px); }

    /* State Aktif saat di-scroll */
    .reveal.active {
        opacity: 1;
        filter: blur(0);
        transform: translate(0, 0);
    }

    /* Animasi Khusus Header (Langsung Jalan tanpa Scroll) */
    @keyframes dropIn {
        0% { opacity: 0; transform: translateY(-60px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideInRight {
        0% { opacity: 0; transform: translateX(100px); }
        100% { opacity: 1; transform: translateX(0); }
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-12px); }
    }

    .animate-drop { animation: dropIn 1s ease-out forwards; }
    .animate-slide-right { animation: slideInRight 1s ease-out forwards; }
    .animate-float-badge { animation: float 4s ease-in-out infinite; }
</style>
<style>
    /* Memastikan bar mulai dari nol sebelum animasi */
    .skill-progress {
        width: 0;
        transition: width 1.5s cubic-bezier(0.1, 0.5, 0.2, 1);
    }
</style>
<style>
        .job-application-wrapper {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            background: #fff;
            color: #333;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .letter-meta { text-align: right; margin-bottom: 20px; }
        .body-text { margin: 20px 0; text-align: justify; }
        .btn-download {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 4px;
            font-weight: bold;
        }
        .btn-download:hover { background-color: #0056b3; }
    </style>