:root {
    --bg-dark-absolute: #050506;
    --bg-card-glass: rgba(13, 13, 16, 0.4);
    --border-glass-thin: rgba(255, 255, 255, 0.06);
    --border-neon-red: rgba(255, 42, 75, 0.3);
    --primary-red: #ff2a4b;
    --dark-crimson: #4a050f;
    --text-primary: #ffffff;
    --text-secondary: #90909c;
    --font-editorial: 'Syne', sans-serif;
    --font-ui: 'Heebo', sans-serif;
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
    background-color: var(--bg-dark-absolute);
    color: var(--text-primary);
    font-family: var(--font-ui);
    overflow-x: hidden;
    position: relative;
}

.container { width: 100%; max-width: 1050px; margin: 0 auto; padding: 0 5vw; position: relative; z-index: 2; }
.section { min-height: 100vh; padding: 140px 0; display: flex; align-items: center; position: relative; }

/* Ambient Engine (Optimized CSS-Only Animation) */
.mouse-glow { position: fixed; width: 800px; height: 800px; background: radial-gradient(circle, rgba(255, 42, 75, 0.06) 0%, transparent 60%); border-radius: 50%; pointer-events: none; z-index: 1; top: 50%; left: 50%; margin-top: -400px; margin-left: -400px; animation: pulse-glow 10s infinite alternate ease-in-out; }
.ambient-aurora { position: fixed; width: 150vw; height: 150vh; top: -25vh; left: -25vw; background: radial-gradient(circle, var(--dark-crimson) 0%, transparent 50%); z-index: 0; opacity: 0.4; pointer-events: none; animation: float-aurora 15s infinite alternate ease-in-out; transform-origin: center; }

@keyframes pulse-glow {
    0% { transform: scale(0.9) translate(-5%, -5%); opacity: 0.6; }
    100% { transform: scale(1.1) translate(5%, 5%); opacity: 1; }
}
@keyframes float-aurora {
    0% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    100% { transform: scale(1.1) translate(-2%, 3%); opacity: 0.6; }
}

/* Navbar */
.navbar { position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(8, 8, 10, 0.4); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border: 1px solid var(--border-glass-thin); padding: 6px; border-radius: 100px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8); transition: all 0.6s var(--ease-premium); }
.navbar.scrolled { top: 16px; background: rgba(5, 5, 6, 0.75); border-color: var(--border-neon-red); }
.nav-container { display: flex; position: relative; }
.nav-link { color: var(--text-secondary); text-decoration: none; padding: 12px 28px; font-size: 0.9rem; font-weight: 500; z-index: 2; transition: color 0.4s var(--ease-premium); cursor: pointer; }
.nav-link.active, .nav-link:hover { color: var(--text-primary); }
.nav-indicator { position: absolute; height: 100%; background: linear-gradient(135deg, var(--primary-red), #9e0c22); border-radius: 100px; z-index: 1; box-shadow: 0 8px 20px rgba(255, 42, 75, 0.35); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); }

/* ==========================================================================
TEKS RAKSASA DI LATAR BELAKANG (Hero & Kontak)
   ========================================================================== */
.hero-giant-text, .kontak-giant-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-editorial);
    font-size: 12vw; 
    font-weight: 800;
    line-height: 0.85; 
    text-align: center; 
    user-select: none;
    z-index: 0;
    width: 100%;
}
.hero-giant-text {
    color: rgba(255, 255, 255, 0.015);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.03);
}
.kontak-giant-text {
    font-size: 10vw; 
    width: 85%;      
    color: rgba(255, 255, 255, 0.01);
    -webkit-text-stroke: 1px rgba(255, 42, 75, 0.03);
}

/* Layout Umum */
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; width: 100%; }
.hero-tag { font-size: 0.85rem; letter-spacing: 6px; color: var(--text-secondary); display: block; margin-bottom: 24px; }
.hero-name { font-family: var(--font-editorial); font-size: 4.8rem; font-weight: 700; line-height: 0.95; letter-spacing: -2px; }
.text-stroke { color: transparent; -webkit-text-stroke: 1.5px #fff; }

.avatar-container { position: relative; display: flex; justify-content: center; }
.avatar-card { position: relative; width: 280px; height: 380px; border-radius: 24px; overflow: hidden; background: var(--bg-card-glass); border: 1px solid var(--border-glass-thin); box-shadow: 0 50px 100px rgba(0,0,0,0.7); transform-style: preserve-3d; transition: border-color 0.4s, transform 0.4s var(--ease-premium), box-shadow 0.4s; }
.avatar-card:hover { border-color: var(--border-neon-red); transform: translateY(-8px); box-shadow: 0 60px 120px rgba(0,0,0,0.8); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); }
.avatar-card:hover .avatar-img { transform: scale(1.08); }
.glass-reflection { position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); transform: skewX(-20deg); transition: left 0.7s; }
.avatar-card:hover .glass-reflection { left: 150%; }

.tentang-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.sticky-photo-box { position: sticky; top: 140px; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.5); transition: transform 0.4s var(--ease-premium), box-shadow 0.4s; }
.sticky-photo-box:hover { transform: translateY(-8px); box-shadow: 0 50px 100px rgba(0,0,0,0.7); }
.about-img { width: 100%; display: block; object-fit: cover; }
.section-heading { font-family: var(--font-editorial); font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin-bottom: 20px; }
.editorial-paragraph { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 32px; }
.chips-container { display: flex; flex-wrap: wrap; gap: 12px; }
.skill-chip { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-glass-thin); padding: 10px 22px; border-radius: 100px; font-size: 0.9rem; color: #e2e2e9; transition: all 0.4s; }

.project-showcase { display: flex; flex-direction: column; gap: 56px; }
.project-card-premium { background: var(--bg-card-glass); border: 1px solid var(--border-glass-thin); border-radius: 32px; padding: 24px; backdrop-filter: blur(20px); transition: all 0.5s; }
.project-card-premium:hover { border-color: rgba(255, 42, 75, 0.2); box-shadow: 0 40px 80px rgba(0,0,0,0.6); transform: translateY(-8px) !important; translate: 0 -8px; }
.card-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.project-media { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; }
.project-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s; }
.project-card-premium:hover .project-img { transform: scale(1.04); }
.project-number { font-family: var(--font-editorial); font-size: 2.5rem; font-weight: 800; color: rgba(255, 42, 75, 0.15); display: block; margin-bottom: -5px; }
.project-title-premium { font-family: var(--font-editorial); font-size: 1.5rem; margin-bottom: 12px; }
.project-summary { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; }

/* ==========================================================================
FITUR BARU: LIQUID GLASS FILTER BUTTONS & ANIMATION CONTROL
   ========================================================================== */

.project-filters {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 10px 24px;
    color: var(--text-secondary, #b0b0b0);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.4s var(--ease-premium, ease);
}

/* Hover & Active State (Aura Neon Crimson khas portofolio Anda) */
.filter-btn:hover,
.filter-btn.active {
    color: #ffffff;
    border-color: var(--primary-red, #ff2a4b);
    background: rgba(255, 42, 75, 0.05);
    box-shadow: 0 0 20px rgba(255, 42, 75, 0.2), inset 0 0 8px rgba(255, 42, 75, 0.1);
}

/* Animasi Halus Saat Proyek Di-filter */
.project-card-premium {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.5s, box-shadow 0.5s; /* Menggabungkan transition lama Anda */
}

/* Class pembantu untuk menyembunyikan proyek secara halus */
.project-card-premium.hide-project {
    display: none !important;
    opacity: 0;
    transform: scale(0.95);
}

/* Skills Dual Column */
.skills-dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }
.skills-title { font-size: 0.85rem; letter-spacing: 2px; color: var(--primary-red); margin-bottom: 20px; font-weight: 700; }

/* Liquid Glass Engine */
.skill-chip.liquid-glass {
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: all 0.5s var(--ease-premium);
    display: flex;
    align-items: center;
}
.skill-chip.hard-skill { cursor: pointer; }
.chip-reflection { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 42, 75, 0.15), transparent); transition: 0.6s; transform: skewX(-20deg); }
.skill-chip.liquid-glass:hover { color: #fff; transform: translateY(-5px) scale(1.05); border-color: var(--primary-red); box-shadow: 0 10px 25px rgba(255, 42, 75, 0.2); }
.skill-chip.liquid-glass:hover .chip-reflection { left: 100%; }





/* Galeri Grid */
.galeri-section { flex-direction: column; align-items: flex-start; }
.photo-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.photo-box { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg-card-glass); border: 1px solid var(--border-glass-thin); aspect-ratio: 4/5; cursor: crosshair; transition: all 0.5s; }
.photo-box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%) brightness(0.7); transition: transform 0.8s, filter 0.5s; }
.photo-box:hover { border-color: var(--border-neon-red); transform: translateY(-6px); z-index: 5; }
.photo-box:hover img { transform: scale(1.08); filter: grayscale(0%) brightness(1.1); }

/* Kontak */
.kontak-section { flex-direction: column; justify-content: center; text-align: center; }
.kontak-main-title { font-family: var(--font-editorial); font-size: 3rem; line-height: 1.05; margin-bottom: 40px; }
.contact-buttons-grid { display: grid; grid-template-columns: repeat(2, minmax(140px, 180px)); gap: 16px; justify-content: center; margin-top: 35px; position: relative; z-index: 10; }

.contact-btn.liquid-glass {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15); 
    border-radius: 100px;
    color: #ffffff; 
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.4s var(--ease-premium);
    text-decoration: none !important; 
}
.contact-arrow { color: var(--primary-red); font-weight: bold; transition: transform 0.3s var(--ease-premium); }
.contact-btn.liquid-glass:hover { color: #fff; border-color: var(--primary-red); background: rgba(255, 42, 75, 0.05); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(255, 42, 75, 0.15); text-decoration: none !important; }
.contact-btn.liquid-glass:hover .contact-arrow { transform: translateX(5px); }

/* Reveal Engine */
.scroll-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease-premium), transform 1.2s var(--ease-premium); }
.scroll-reveal.active { opacity: 1; transform: translateY(0); }

/* Tombol Galeri Scroll Trigger */
.gallery-btn.liquid-glass {
    display: inline-flex; 
    align-items: center;
    gap: 20px; 
    padding: 12px 26px; 
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15); 
    border-radius: 100px; 
    color: #ffffff; 
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none !important; 
    transition: all 0.4s var(--ease-premium);
    cursor: pointer;
}
.gallery-arrow { color: var(--primary-red); font-weight: bold; transition: transform 0.3s var(--ease-premium); }
.gallery-btn.liquid-glass:hover { color: #fff; text-decoration: none !important; border-color: var(--primary-red); background: rgba(255, 42, 75, 0.05); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(255, 42, 75, 0.15); }
.gallery-btn.liquid-glass:hover .gallery-arrow { transform: translateX(5px); }


/* ==========================================================================
FITUR BARU: MODUL INTERACTIVE LIQUID GLASS TIMELINE
   ========================================================================== */

.experience-subsection {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.experience-headline {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--primary-red);
    margin-bottom: 28px;
    font-weight: 700;
    text-align: center; /* Memastikan judul ikut ke tengah layar */
}

/* Jalur Rel Vertikal Kiri (Sekarang Seluruh Blok Berada di Tengah Layar) */
.timeline-track {
    max-width: 650px; /* Batas lebar blok agar tidak merentang ke ujung layar */
    margin: 0 auto; /* Menarik seluruh blok rel & kartu ke tengah secara simetris */
    
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.timeline-item {
    position: relative;
    width: 100%;
}

/* Node Indikator Dinamis (Efek Asli Tetap Sama) */
.timeline-dot {
    position: absolute;
    left: -34px;
    top: 24px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--text-secondary);
    border: 2px solid var(--bg-dark-absolute);
    transition: all 0.4s var(--ease-premium);
    z-index: 5;
}

/* Kartu Pengalaman Liquid Glass (Efek Asli Tetap Sama) */
.exp-card.liquid-glass {
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-glass-thin);
    border-radius: 20px;
    padding: 22px 26px;
    transition: all 0.5s var(--ease-premium);
    cursor: default;
}

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 16px;
}

.exp-role {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.4s var(--ease-premium);
}

.exp-year {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    transition: color 0.4s var(--ease-premium);
}

.exp-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ANIMASI HOVER TIMELINE MOUSE INTERACTION (Efek Asli Tetap Sama) */
.timeline-item:hover .timeline-dot {
    background: var(--primary-red);
    box-shadow: 0 0 12px var(--primary-red);
    transform: scale(1.3);
}

.timeline-item:hover .exp-card.liquid-glass {
    border-color: var(--border-neon-red);
    background: rgba(255, 42, 75, 0.02); 
    transform: translateY(-6px) translateX(4px); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 42, 75, 0.08);
}

.timeline-item:hover .exp-role {
    color: var(--primary-red); 
}

.timeline-item:hover .exp-year {
    color: var(--text-primary);
}

/* ==========================================================================
FITUR BARU: LIQUID GLASS PROJECT ACTION BUTTON
   ========================================================================== */

/* Container tombol agar posisinya rapi di bawah deskripsi projek */
.project-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

/* Base Style Tombol Modern */
.project-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--text-primary, #ffffff);
    text-decoration: none;
    
    /* Efek Kaca Tipis */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    
    transition: all 0.4s var(--ease-premium);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Icon Panah di dalam tombol */
.project-link-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--ease-premium);
}

/* EFEK HOVER MOUSE INTERACTIVE */
.project-link-btn:hover {
    color: #ffffff;
    border-color: var(--border-neon-red, rgba(255, 42, 75, 0.6));
    background: rgba(255, 42, 75, 0.08); /* Bias merah transparan di dalam tombol */
    box-shadow: 0 0 20px rgba(255, 42, 75, 0.25), inset 0 0 8px rgba(255, 42, 75, 0.2);
    transform: translateY(-2px);
}

/* Efek Micro-Interaction: Panah sedikit bergeser ke kanan saat di-hover */
.project-link-btn:hover svg {
    transform: translateX(4px);
}

/* Efek Active (Saat Diklik) */
.project-link-btn:active {
    transform: translateY(0);
}

/* Responsive Layout Controls */
@media (max-width: 1024px) {
    .hero-name { font-size: 4.5rem; }
    .hero-giant-text, .kontak-giant-text { font-size: 22vw; } 
    .tentang-grid, .card-inner { grid-template-columns: 1fr; gap: 48px; }
    .hero-grid { grid-template-columns: 1fr; gap: 64px; }
    .hero-right { order: -1; }
    .sticky-photo-box { position: relative; top: 0; max-width: 450px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .skills-dual-grid { grid-template-columns: 1fr; gap: 30px; }
    /* Memastikan layar HP tidak terpotong */
    .timeline-track { max-width: 100%; margin: 0 8px; } 
}

@media (max-width: 480px) {
    .contact-buttons-grid { grid-template-columns: 1fr; width: 85%; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
HASIL MERGE: DUAL LAYOUT TIMELINE (CENTERED, PROPORSIONAL & RESPONSIVE)
   ========================================================================== */

/* 1. Pengaturan grid bagian atas (Foto & Bio) agar tetap terbagi dua dengan aman */
.tentang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* 2. Container pembungkus baru setelah dikeluarkan dari kungkungan grid atas */
.experience-subsection {
    width: 100%;
    margin-top: 100px;                             /* Memberikan jarak nafas lega dari area skills */
    padding-top: 60px;
    border-top: 1px solid rgba(255, 42, 75, 0.15); /* Garis batas atas tipis yang elegan */
}

/* 3. Layout Utama: Menyeimbangkan 2 kolom di tengah layar desktop */
.timeline-dual-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Membagi halaman menjadi 2 kolom seimbang */
    gap: 64px;                      /* Diperlebar dari 48px ke 64px agar tidak terlihat sempit */
    max-width: 1100px;              /* KUNCI DESKTOP: Menahan lebar maksimal agar card tidak kemelaran */
    margin: 0 auto;                 /* KUNCI DESKTOP: Memosisikan kedua rumpun tepat di tengah-tengah layar */
    align-items: start;             /* Menjaga kedua kepala kolom tetap sejajar di atas */
}

/* 4. Kolom Timeline (Gabungan Properti Lama & Baru) */
.timeline-column {
    position: relative;             /* DIURUS: Mempertahankan properti lama Anda untuk penargetan absolute dot/line */
    width: 100%;
}

/* 5. Judul Headline Kolom (RIWAYAT PENDIDIKAN & PENGALAMAN) */
.timeline-column .experience-headline {
    margin-bottom: 40px;            /* Jarak ke bawah sedikit dinaikkan agar lebih proporsional */
    font-size: 1.15rem;             /* Sentuhan tipografi baru agar terlihat lebih tegas & rapi */
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ==========================================================================
RESPONSIVE CONTROL: Otomatis bertumpuk saat dibuka di Layar HP / Tablet
   ========================================================================== */
@media (max-width: 992px) {
    .tentang-grid {
        grid-template-columns: 1fr; /* Grid atas (Foto & Bio) otomatis bertumpuk di HP */
    }

    .experience-subsection {
        margin-top: 60px;
        padding-top: 40px;
    }

    .timeline-dual-layout {
        grid-template-columns: 1fr; /* Berubah menjadi mode satu kolom penuh (vertikal) */
        gap: 50px;                  /* Jarak vertikal pemisah antara blok Pendidikan dan Pengalaman */
        max-width: 100%;            /* Membebaskan lebar penuh mengikuti layar HP */
    }
}

/* ==========================================================================
KONDISI DEFAULT (TAMPILAN LAPTOP / PC DESKTOP)
   ========================================================================== */
.gallery-mobile-btn {
    display: none; /* Sembunyikan tombol secara permanen di monitor desktop */
}

.galeri-section .gallery-mobile-btn {
    display: none !important; /* KUNCI: Dipaksa GAIB di desktop, mengalahkan class contact-btn */
}

/* ==========================================================================
MASTER BUG FIX: PERBAIKAN TOTAL TAMPILAN HP (MOBILE) agar PRESISI & PROFESIONAL
   ========================================================================== */

/* MEDIA QUERY: Perintah khusus hanya aktif di layar HP (Maks 768px) */
@media (max-width: 768px) {

    /* 1. RESET GLOBAL & CONTAINER: Mengunci layar agar tidak bisa geser kanan-kiri (Fix Overflow) */
    html, body {
        width: 100vw !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important; /* KUNCI UTAMA: Potong teks latar yang luber */
        box-sizing: border-box !important;
    }

    .container, .main-wrapper, section {
        width: 90% !important; /* Ambil 90% lebar HP untuk space aman pinggir */
        margin: 0 auto !important; /* KUNCI: Force container simetris di tengah */
        padding: 0 !important;
        display: block !important;
    }

    /* 2. FIX BUG VISUAL 1: NAVBAR LUBER (Teks Terpotong di Kanan) */
    .navbar, nav {
        position: fixed !important;
        top: 15px !important;
        left: 50% !important;              /* Geser titik awal ke 50% lebar layar */
        transform: translateX(-50%) !important; /* Tarik mundur agar center sempurna */
        width: max-content !important;    /* Navbar mengikuti lebar teks di HP */
        max-width: 90vw !important;        /* Batas lebar agar tidak menjebol layar */
        padding: 8px 12px !important;
        border-radius: 20px !important;
    }

    /* Mengatur menu teks navbar agar tidak tumpang tindih */
    .navbar ul, nav ul {
        display: flex !important;
        flex-wrap: wrap !important; /* KUNCI: Jika penuh, menu turun baris ke bawah */
        justify-content: center !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar li, nav li {
        font-size: 13px !important; /* Perkecil sedikit teks di HP */
    }

    /* 3. UBAH TATA LETAK GRID/HERO MENJADI KOLOM (Ke bawah, dari atas ke bawah) */
    .hero-section {
        display: flex !important;
        flex-direction: column-reverse !important; /* MEMBALIK URUTAN: Foto otomatis naik ke atas, teks turun ke bawah */
        align-items: center !important;            /* Memastikan semua konten tegak lurus di tengah */
        gap: 24px !important;                       /* Jarak vertikal yang ideal antara foto dan teks */
        width: 100% !important;
        text-align: center !important;
    }

    /* 4. FIX BUG VISUAL 2: NAMA TUMPANG TINDIH & TERPOTONG */
    /* Menargetkan h1 Nama Anda */
    .section-heading, .hero-name, h1 { 
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-top: 15px !important;   /* Jarak antara bagian bawah foto dengan nama Anda */
        margin-bottom: 8px !important;
        width: 100% !important;
    }

    /* Teks Deskripsi di bawah nama ("UI/UX Designer...") */
    .hero-title, p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 0 !important;   /* Menghapus margin bawah yang berlebihan */
    }

    /* Memastikan ukuran kotak foto profil tetap proporsional dan presisi di tengah */
    .sticky-photo-box, .hero-image, .profile-pic {
        width: 100% !important;
        max-width: 260px !important;   /* Ukuran pas untuk layar HP agar terkesan bersih */
        margin: 0 auto !important;
        display: block !important;
    }

    .about-img, img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    /* Targetkan heading di bagian kontak Anda */
    .contact-section h2, 
    .contact-main-title, 
    #kontak h2 { 
        font-size: 24px !important;       /* Ukuran yang ideal untuk judul di HP (tidak kebesaran) */
        line-height: 1.3 !important;      /* Memberi ruang antar-baris agar tidak dempet saat melipat */
        text-align: center !important;    /* Dipaksa rata tengah agar estetik */
        white-space: normal !important;   /* WAJIB: Memaksa teks melipat ke bawah secara alami, bukan memanjang ke samping */
        word-wrap: break-word !important; /* Mencegah kata yang panjang menjebol layar */
        margin-bottom: 15px !important;   /* Jarak aman ke elemen di bawahnya */
        width: 100% !important;
        display: block !important;
    }

    /* ---------------------------------------------------
    FIX: MERAMPINGKAN TINGGI SECTION GALERI DI HP
       --------------------------------------------------- */
    
    /* 1. Menghapus tinggi berlebih dan menyesuaikan padding section */
    #galeri, .galeri-section {
        min-height: auto !important;
        height: auto !important;
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* 2. Menghilangkan ruang kosong (margin) di bawah teks 
          karena grid fotonya sudah disembunyikan */
    .galeri-section .project-header {
        margin-bottom: 0 !important;
    }

    /* 3. Merapikan jarak antara teks caption (editorial) dengan tombol */
    .galeri-section .editorial-paragraph {
        margin-bottom: 10px !important;
        padding: 0 15px !important;
        font-size: 14px !important;
    }

    /* 1. ELIMINASI BUG: Sembunyikan seluruh container grid foto di HP */
    .galeri-section .photo-grid {
        display: none !important;
    }

    .galeri-section .gallery-mobile-btn {
        display: inline-flex !important;   /* Membuka kembali tombol khusus di layar HP */
        justify-content: space-between !important; /* Teks di kiri, panah di kanan */
        align-items: center !important;
        
        width: 100% !important;
        max-width: 290px !important;       /* Lebar ideal tombol di HP */
        margin: 25px auto 0 auto !important; /* Posisi otomatis di tengah */
        box-sizing: border-box !important;
    }


    /* 3. OPTIMALISASI UKURAN TEKS JUDUL DI HP */
    .galeri-section .section-heading {
        font-size: 1.8rem !important; /* Menyusutkan ukuran 2.5rem agar pas dengan layar HP */
        line-height: 1.3 !important;
    }

    .kontak-giant-text {
        font-size: 3rem !important;      /* Menyusutkan ukuran font raksasa menjadi pas di layar HP */
        line-height: 1.1 !important;     /* Merapatkan jarak antara kata TERIMA dan KASIH */
        text-align: center !important;
        word-wrap: break-word !important;
        margin-bottom: 20px !important;  /* Jarak ideal dengan teks di bawahnya */
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------
    FIX: TEKS "MARI BERKOLABORASI" DI HP
       --------------------------------------------------- */
    .kontak-main-title {
        font-size: 24px !important;       /* Ukuran yang tidak memakan tempat */
        line-height: 1.3 !important;
        text-align: center !important;
        white-space: normal !important;   /* Memaksa teks turun baris jika kepanjangan */
        word-wrap: break-word !important; 
        margin-bottom: 25px !important;
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------
    OPSIONAL: MERAPIKAN GRID TOMBOL KONTAK DI HP
       --------------------------------------------------- */
    .contact-buttons-grid {
        display: flex !important;
        flex-direction: column !important; /* Menumpuk tombol WhatsApp, Email, dll ke bawah */
        gap: 15px !important;
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .contact-btn {
        width: 100% !important;            /* Memanjangkan tombol agar mudah di-tap penuh */
        justify-content: space-between !important; /* Teks di kiri, panah di kanan */
    }

}


/* ==========================================================================
STYLE TOMBOL HAMBURGER DEFAULT (UNTUK LAPTOP/PC DISEMBUNYIKAN)
   ========================================================================== */
.hamburger {
    display: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff; /* Warna garis hamburger, sesuaikan dengan tema Anda */
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
}

/* ==========================================================================
KONDISI RESPONSIVE: KHUSUS LAYAR HP (Maks 768px)
   ========================================================================== */
@media (max-width: 768px) {

    .hero-section {
        display: flex !important;
        flex-direction: column-reverse !important; /* MEMBALIK URUTAN: Foto otomatis naik ke atas, teks turun ke bawah */
        align-items: center !important;            /* Memastikan semua konten tegak lurus di tengah */
        gap: 24px !important;                       /* Jarak vertikal yang ideal antara foto dan teks */
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Memaksa kapsul navbar Anda presisi di tengah atas HP */
    .navbar {
        position: fixed !important;
        top: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        max-width: 340px !important; /* Batas lebar kapsul melayang yang ideal di HP */
        padding: 12px 20px !important;
        display: flex !important;
        flex-direction: column !important; /* Menyusun konten dari atas ke bawah */
        align-items: center !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
        transition: all 0.3s ease-in-out !important;
    }

    /* Munculkan tombol garis 3 di HP */
    .hamburger {
        display: block !important;
    }

    /* SEMBUNYIKAN CONTAINER UTAMA SECARA DEFAULT (MUNCUL SAAT DIKLIK) */
    .nav-container {
        display: none !important; 
        flex-direction: column !important; /* Ubah menu berjajar ke samping menjadi tumpuk ke bawah */
        width: 100% !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 0px;
        transition: all 0.3s ease-in-out;
    }

    /* KUNCI: Ketika navbar memiliki class .open, buka container menunya */
    .navbar.open .nav-container {
        display: flex !important;
        margin-top: 15px !important; /* Beri jarak dari tombol hamburger saat terbuka */
    }

    /* MATIKAN INDIKATOR SLIDE DI HP (Agar tidak ngebug melintang horizontal) */
    #navIndicator {
        display: none !important;
    }

    /* Menyesuaikan ukuran text link agar pas di-tap jari */
    .nav-link {
        width: 100% !important;
        text-align: center !important;
        padding: 6px 0 !important;
        font-size: 15px !important;
    }

    /* ANIMASI KOSMETIK: Mengubah 3 garis menjadi tanda silang (X) saat diklik */
    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0 !important;
    }
    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }
}

.timeline-box, .card-riwayat, .scroll-reveal {
    will-change: transform, opacity; /* Memberitahu browser untuk bersiap menganimasikan bagian ini */
    transform: translateZ(0);        /* Memaksa browser menggunakan GPU agar scroll super mulus */
}

/* ==========================================================================
FITUR BARU: LIGHT MODE & BAHASA
   ========================================================================== */

[data-theme="light"] {
    --bg-dark-absolute: #f2f2f5;
    --bg-card-glass: rgba(255, 255, 255, 0.7);
    --border-glass-thin: rgba(0, 0, 0, 0.08);
    --border-neon-red: rgba(255, 42, 75, 0.5);
    --text-primary: #15151a;
    --text-secondary: #5a5a66;
}

[data-theme="light"] .mouse-glow { background: radial-gradient(circle, rgba(255, 42, 75, 0.08) 0%, transparent 60%); }
[data-theme="light"] .ambient-aurora { background: radial-gradient(circle, rgba(255, 42, 75, 0.1) 0%, transparent 50%); }
[data-theme="light"] .hero-giant-text { color: rgba(0, 0, 0, 0.02); -webkit-text-stroke: 1px rgba(0, 0, 0, 0.04); }
[data-theme="light"] .kontak-giant-text { color: rgba(0, 0, 0, 0.02); -webkit-text-stroke: 1px rgba(255, 42, 75, 0.1); }
[data-theme="light"] .text-stroke { -webkit-text-stroke: 1.5px #111; }
[data-theme="light"] .avatar-card { box-shadow: 0 40px 80px rgba(0,0,0,0.15); }
[data-theme="light"] .avatar-card:hover { box-shadow: 0 50px 100px rgba(0,0,0,0.25); }
[data-theme="light"] .sticky-photo-box { box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
[data-theme="light"] .sticky-photo-box:hover { box-shadow: 0 40px 80px rgba(0,0,0,0.25); }
[data-theme="light"] .project-card-premium { box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
[data-theme="light"] .project-card-premium:hover { box-shadow: 0 40px 80px rgba(255,42,75,0.15); }

[data-theme="light"] .skill-chip { background: rgba(0, 0, 0, 0.04); color: #444; border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .skill-chip.liquid-glass { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.1); color: var(--text-primary); }
[data-theme="light"] .skill-chip.liquid-glass:hover { color: var(--primary-red); }

[data-theme="light"] .contact-btn.liquid-glass, 
[data-theme="light"] .gallery-btn.liquid-glass, 
[data-theme="light"] .project-link-btn,
[data-theme="light"] .filter-btn {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}
[data-theme="light"] .contact-btn.liquid-glass:hover, 
[data-theme="light"] .gallery-btn.liquid-glass:hover, 
[data-theme="light"] .project-link-btn:hover,
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.active {
    background: rgba(255, 42, 75, 0.08);
    color: var(--primary-red);
}

[data-theme="light"] .timeline-dot { background: #d0d0d5; border-color: #f2f2f5; }
[data-theme="light"] .exp-card.liquid-glass { background: rgba(255, 255, 255, 0.65); border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .exp-year { color: rgba(0, 0, 0, 0.4); }

/* Language Toggle Logic */
.lang-en { display: none; }
body[data-lang="en"] .lang-id { display: none; }
body[data-lang="en"] .lang-en { display: inline; }

/* ==========================================================================
DESKTOP NAVBAR WRAPPER & SIDE CONTROLS
   ========================================================================== */
.desktop-nav-wrapper {
    position: fixed;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    transition: top 0.6s var(--ease-premium);
}
.desktop-nav-wrapper.scrolled {
    top: 16px;
}
.desktop-nav-wrapper > * {
    pointer-events: auto;
}

/* Modifikasi navbar lama agar tidak fixed di dalam wrapper */
.navbar {
    position: static !important;
    transform: none !important;
}
[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.9);
}

.nav-side-control {
    background: rgba(8, 8, 10, 0.4);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid var(--border-glass-thin);
    padding: 6px 14px;
    border-radius: 100px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.6s var(--ease-premium);
}
[data-theme="light"] .nav-side-control {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.desktop-nav-wrapper.scrolled .nav-side-control {
    background: rgba(5, 5, 6, 0.75);
    border-color: var(--border-neon-red);
}
[data-theme="light"] .desktop-nav-wrapper.scrolled .nav-side-control {
    background: rgba(255, 255, 255, 0.9);
}

.nav-side-control a, .nav-side-control button {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-ui);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s;
    text-decoration: none;
    padding: 6px;
}
.nav-side-control a:hover, .nav-side-control button:hover {
    color: var(--primary-red);
}
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
    color: var(--text-primary);
}
[data-theme="light"] .icon-btn {
    background: rgba(0, 0, 0, 0.05);
}
.icon-btn:hover {
    background: rgba(255, 42, 75, 0.1);
    color: var(--primary-red);
}
.icon-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.lang-icon {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
}

/* ==========================================================================
MOBILE HEADER REDESIGN
   ========================================================================== */
.mobile-header {
    display: none; 
}
.mobile-menu-overlay {
    display: none;
}

@media (max-width: 992px) {
    .desktop-nav-wrapper { display: none !important; }
    .hamburger { display: none !important; }
    .navbar { display: none !important; }

    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0; left: 0; width: 100%;
        background: rgba(8, 8, 10, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 15px 24px;
        z-index: 1000;
        border-bottom: 1px solid var(--border-glass-thin);
    }
    [data-theme="light"] .mobile-header {
        background: rgba(255, 255, 255, 0.9);
    }
    
    .mobile-logo {
        font-family: var(--font-editorial);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-primary);
        text-decoration: none;
    }

    .mobile-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 24px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1010;
    }
    .mobile-hamburger span {
        width: 24px;
        height: 2px;
        background: var(--text-primary);
        border-radius: 10px;
        transition: all 0.3s linear;
        position: relative;
        transform-origin: 1px;
    }
    .mobile-hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .mobile-hamburger.open span:nth-child(2) { opacity: 0; }
    .mobile-hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    /* Overlay Fullscreen Menu */
    .mobile-menu-overlay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(5, 5, 6, 0.98);
        z-index: 990;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    [data-theme="light"] .mobile-menu-overlay {
        background: rgba(242, 242, 245, 0.98);
    }
    .mobile-menu-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-nav-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    .mobile-nav-link {
        font-family: var(--font-editorial);
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.3s;
    }
    .mobile-nav-link.active, .mobile-nav-link:hover {
        color: var(--text-primary);
    }
    
    .mobile-cv-btn {
        margin-top: 40px;
        background: var(--primary-red);
        color: #fff;
        padding: 12px 32px;
        border-radius: 100px;
        text-decoration: none;
        font-weight: 600;
        box-shadow: 0 10px 20px rgba(255, 42, 75, 0.3);
    }
}

/* ==========================================================================
   THEME TOGGLE ICONS (SUN/MOON)
   ========================================================================== */
.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s var(--ease-premium);
}
.theme-toggle .icon-moon {
    display: none;
}
.theme-toggle .icon-sun {
    display: block;
}

[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}
[data-theme="light"] .theme-toggle .icon-sun {
    display: none;
}

/* ==========================================================================
   HERO IMAGE THEME TOGGLE
   ========================================================================== */
.hero-light-img {
    display: none;
}
.hero-dark-img {
    display: block;
}

[data-theme="light"] .hero-light-img {
    display: block;
}
[data-theme="light"] .hero-dark-img {
    display: none;
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATION FOR LAPTOPS/DESKTOPS (LAG FIX)
   ========================================================================== */
@media screen and (min-width: 1024px) {
    .project-card-premium,
    .photo-box {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(18, 18, 22, 0.95) !important;
    }
    
    [data-theme="light"] .project-card-premium,
    [data-theme="light"] .photo-box {
        background: rgba(255, 255, 255, 0.95) !important;
    }
}