:root {
    /* Palet Warna Monokrom */
    --bg-main: #737373;
    --bento-bg: #FFFFFF;
    --bento-border: #E0E0E0;
    --border-dark: #ffffff;
    --text-main: #111111;
    --text-muted: #505050;
    --text-subtle: #7A7A7A;
    --accent-black: #000000;
    --accent-light: #F4F4F4;
}

        /* RESET & BASE */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 100px; }
        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            background-image: none;
    background-attachment: scroll;
        }

        /* --- NAVBAR --- */
        nav {
            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
            background: rgba(11, 14, 20, 0.8); backdrop-filter: blur(15px);
            border: 1px solid var(--bento-border); border-radius: 0;
            padding: 15px 30px; display: flex; gap: 30px; z-index: 1000;
        }
        nav a {
            text-decoration: none; color: var(--accent-black); font-family: 'Inter', sans-serif;
            font-size: 0.85rem; transition: 0.3s;
        }
        nav a:hover { color: var(--accent-black); }

        /* --- GLOBAL LAYOUT & UTILS --- */
       section {
            max-width: 1250px; /* <-- Naikkan dari 1100px jadi 1250px */
            margin: 0 auto; 
            padding: 100px 20px 40px;
        }
       .section-tag {
            font-family: 'Inter', sans-serif; 
            font-size: 1.6rem; /* Ukuran dibesarkan dari 1rem biar lebih proporsional */
            font-weight: 700; /* Ditebalkan biar lebih tegas */
            letter-spacing: 2px; /* Dikasih jarak antar huruf biar estetik tech/coding-nya dapet */
            color: var(--accent-black);
            margin-bottom: 30px; /* Jarak ke bawah ditambah dikit biar lebih lega */
            display: inline-block;
            text-transform: uppercase; /* Dibikin huruf kapital semua biar kerasa kayak judul */
        }

        /* Penyesuaian khusus untuk layar HP biar gak kebesaran */
        @media (max-width: 768px) {
            .section-tag {
                font-size: 1.3rem;
                margin-bottom: 20px;
            }
            body {
        background-attachment: scroll; 
            }
        }
        
        /* Kartu Bento Default */
        .bento-card {
            background: var(--bento-bg); border: 1px solid var(--bento-border);
            border-radius: 0; padding: 30px; backdrop-filter: blur(12px);
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
            position: relative; overflow: hidden; display: flex; flex-direction: column;
        }
        
        .mono { font-family: 'Inter', sans-serif; }
        
        /* Animasi Scroll Reveal */
        .reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* --- TOMBOL DOWNLOAD CV --- */
        .btn-cv {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 25px; /* Memberi jarak dari paragraf di atasnya */
            padding: 12px 24px;
            background: rgba(0, 0, 0, 0.05); /* Latar transparan biru tipis */
            border: 1px solid var(--accent-black); /* Garis batas biru cyan */
            color: var(--accent-black);
            border-radius: 0; /* Sudut membulat menyesuaikan tema bento */
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            width: fit-content;
        }

        /* Efek saat kursor diarahkan ke tombol (Hover) */
        .btn-cv:hover {
            background: rgba(0, 0, 0, 0.08); /* Latar berubah pink transparan */
            border-color: var(--accent-black); /* Garis batas menjadi pink */
            color: var(--accent-black); /* Teks menjadi pink */
            transform: translateY(-3px); /* Tombol sedikit terangkat */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12); /* Efek glow pink di bawah tombol */
        }
    
        /* --- SECTION 2: PROJECTS --- */
       .projects-grid {
            display: grid; grid-template-columns: repeat(3, 2fr); gap: 20px;
        }
        #projects .bento-card:hover {
            transform: translateY(-3px);
            border-color: var(--accent-black);
            box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
        }

        /* Pastikan proj-img punya position: relative buat nahan overlay */
        .proj-img { 
            height: 180px; width: 100%; border-radius: 0; margin-bottom: 20px; 
            overflow: hidden; position: relative; 
        }

        /* Tambahkan transisi biar fotonya bisa nge-zoom mulus */
        .proj-img img { 
            width: 100%; height: 100%; object-fit: cover; 
            transition: transform 0.4s ease; 
        }

        /* --- OVERLAY HOVER PROJECTS --- */
        .proj-overlay {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.5); /* Latar hitam transparan */
            backdrop-filter: blur(2px); /* Blur tipis estetik */
            display: flex; justify-content: center; align-items: center;
            opacity: 0; transition: opacity 0.3s ease;
            z-index: 2;
        }

        .proj-text {
            color: var(--accent-black);
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            transform: translateY(15px); /* Ngumpet agak ke bawah dulu */
            transition: transform 0.3s ease;
            background: rgba(11, 14, 20, 0.9);
            padding: 8px 16px;
            border: 1px solid var(--accent-black);
            border-radius: 0; /* Bentuk tombol kapsul */
        }

        /* Eksekusi animasi saat bento-card disorot mouse */
        #projects .bento-card:hover .proj-overlay { opacity: 1; }
        #projects .bento-card:hover .proj-text { transform: translateY(0); }
        #projects .bento-card:hover .proj-img img { transform: scale(1.08); }

        .bento-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
        .bento-card p.desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

        /* --- SECTION 3: GALLERY --- */
        .gallery-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
        }
        .gallery-item { padding: 0; aspect-ratio: 4/5; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }

       /* --- SECTION 4: EXPERIENCE MODEL TAB BARU --- */
      .exp-bento-wrapper {
            background: var(--bento-bg); 
            border: 1px solid var(--bento-border);
            border-radius: 0; 
            padding: 30px; 
            backdrop-filter: blur(12px);
            width: 100%; /* <-- Ganti max-width: 900px jadi width: 100% */
            margin: 0 auto;
        }

        /* Bagian Tombol Tabs */
        .tabs-header {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 10px;
            justify-content: center;
        }

        .tab-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            padding: 10px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .tab-btn:hover { color: var(--text-main); }

        /* Status Aktif Tombol */
        .tab-btn.active[data-target="work"] { color: var(--accent-black); }
        .tab-btn.active[data-target="org"] { color: var(--accent-black); }

        /* Garis Bawah Animasi (Underline) */
        .tab-btn::after {
            content: '';
            position: absolute;
            bottom: -11px; /* Sejajar dengan garis border-bottom */
            left: 0;
            width: 0%;
            height: 2px;
            transition: width 0.3s ease;
        }

        .tab-btn.active[data-target="work"]::after {
            width: 100%;
            background: var(--accent-black);
            box-shadow: 0 0 10px var(--accent-black);
        }

        .tab-btn.active[data-target="org"]::after {
            width: 100%;
            background: var(--accent-black);
            box-shadow: 0 0 10px var(--accent-black);
        }

        /* Konten Tabs & Animasi Muncul */
        .tab-content {
            display: none;
            animation: fadeIn 0.4s ease forwards;
        }
        .tab-content.active { display: block; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* CSS untuk Detail Card & Timeline (Digabung) */
        .exp-scroll-area { max-height: 550px; overflow-y: auto; padding-right: 15px; }
        .exp-scroll-area::-webkit-scrollbar { width: 6px; }
        .exp-scroll-area::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 0; }
        .exp-scroll-area::-webkit-scrollbar-thumb { background: var(--accent-black); border-radius: 0; }

        /* Styling Kartu Detail (BRIN dkk) */
        .exp-detail-card {
            background: rgba(255, 255, 255, 0.03); /* Warna putih transparan 3% */
            border: 1px solid rgba(255, 255, 255, 0.08); /* Border putih tipis */
            border-radius: 0;
            padding: 25px;
            margin-bottom: 20px;
            transition: all 0.3s ease; /* Biar transisinya mulus */
        }

        .exp-header { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
        .exp-header h4 { font-size: 1.25rem; color: var(--accent-black); font-weight: 700; }
        .exp-header .exp-date { color: var(--text-muted); font-size: 0.9rem; font-family: 'Inter', sans-serif; }
        .exp-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-left: 20px; margin-bottom: 20px; }
        
        /* Pastikan gridnya tetep 2 kolom */
        .exp-photo-grid { 
            display: grid !important; 
            grid-template-columns: repeat(2, 1fr) !important; /* Mutlak 2 kolom di PC */
            gap: 15px; 
            margin-bottom: 20px; 
            width: 100%;
        }

        .exp-photo-grid img { 
            width: 100%; 
            height: auto; 
            aspect-ratio: 825 / 470; /* Rasio figma lu */
            object-fit: cover; 
            border-radius: 0; 
            transition: 0.4s ease; 
            cursor: pointer; 
            display: block; 
        }

        .exp-buttons { 
            display: flex; 
            gap: 30px; 
            margin-top: 30px; /* <-- Tambahin baris ini buat ngasih jarak ke atas */
        }
        
        .btn-doc { flex: 1; padding: 12px; background: rgba(255, 255, 255, 0.103); border: 1px solid var(--bento-border); border-radius: 0; color: var(--accent-black); text-decoration: none; font-size: 0.9rem; font-weight: 600; display: flex; justify-content: center; gap: 8px; transition: 0.3s ease; }
        .btn-doc:hover { background: rgba(0, 0, 0, 0.05); border-color: var(--accent-black); color: var(--accent-black); transform: translateY(-3px); }

        @media (max-width: 768px){
            .tabs-header { flex-direction: column; gap: 10px; border-bottom: none; }
            .tab-btn::after { display: none; } /* Matikan garis bawah di HP biar gak berantakan */
            .tab-btn { border: 1px solid var(--bento-border); border-radius: 0; }
            .tab-btn.active[data-target="work"] { background: rgba(0, 0, 0, 0.08); border-color: var(--accent-black); }
            .tab-btn.active[data-target="org"] { background: rgba(0, 0, 0, 0.08); border-color: var(--accent-black); }
            
            /* Aturan Foto untuk HP (wajib di dalam kurung kurawal @media) */
            .exp-photo-grid { grid-template-columns: 1fr !important; }
            .exp-photo-grid img { height: auto; aspect-ratio: 16/9; }
            .exp-buttons { flex-direction: column; }
        }

        /* --- KUSUS GRID YUBAWAREHOUSE (3 KOLOM & HOVER EFEK) --- */
        .yuba-photo-grid {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important; /* Bikin 3 kolom sejajar */
            gap: 15px;
            margin-bottom: 20px;
            width: 100%;
        }

        .yuba-img-wrapper {
            position: relative;
            display: block;
            border-radius: 0;
            overflow: hidden;
            text-decoration: none;
            aspect-ratio: 1 / 1; /* Biar gambarnya kotak presisi (1:1) kayak IG */
        }

        .yuba-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }

        /* OVERLAY GRADASI (Hitam ke Pink) */
        .yuba-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            /* Gradasi dari Pink di atas, perlahan jadi Hitam pekat di bawah */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.9) 100%);
            opacity: 0; /* Sengaja di-hidden dulu sebelum di-hover */
            display: flex;
            align-items: flex-end; /* Taruh konten di bawah */
            justify-content: center; /* Posisi di tengah horisontal */
            padding-bottom: 15px;
            transition: opacity 0.4s ease;
            z-index: 2;
        }

        /* TEKS LINK CYAN */
        .yuba-link-text {
            color: var(--accent-black);
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            transform: translateY(15px); /* Posisi awal agak turun ke bawah */
            transition: transform 0.4s ease;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* Biar teksnya tetep kebaca jelas */
        }

        /* --- ANIMASI SAAT MOUSE NGE-HOVER --- */
        .yuba-img-wrapper:hover .yuba-overlay {
            opacity: 1; /* Muncullin gradasi pink */
        }

        .yuba-img-wrapper:hover .yuba-link-text {
            transform: translateY(0); /* Teksnya naik ke atas kayak animasi nembul */
        }

        /* Responsive HP buat Yuba Grid */
        @media (max-width: 768px) {
            .yuba-photo-grid { 
                grid-template-columns: 1fr !important; /* Balik jadi numpuk atas-bawah kalau di HP */
            }
        }
    
        /* --- SECTION: RESEARCH --- */
        #research .projects-grid {
            grid-template-columns: repeat(2, 1fr); /* Maksimal 2 kolom biar proporsional */
            max-width: 800px; /* Biar gak terlalu lebar di layar laptop */
            margin: 0 auto;
        }
           

            /* Custom Scrollbar ala City Pop / Tech */
        .exp-scroll-area::-webkit-scrollbar { width: 6px; }
        .exp-scroll-area::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 0; }
        .exp-scroll-area::-webkit-scrollbar-thumb { background: var(--accent-black); border-radius: 0; }
        .exp-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--accent-black); }

        /* Styling Garis Timeline Biar Gak Bablas */
        .timeline { margin-left: 10px; margin-top: 20px; }
        .timeline-item { position: relative; margin-bottom: 40px; padding-left: 30px; }
        
        /* Garis penghubung vertikal */
        .timeline-item::before {
            content: ''; position: absolute; left: 4px; top: 15px; bottom: -55px; width: 2px;
            background: rgba(10, 10, 10, 0.15); z-index: 1;
        }
        /* Matikan garis di item terakhir */
        .timeline-item:last-child::before { display: none; }

        /* Buletan nyala (Cyan/Pink) */
        .timeline-dot {
            content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 10px;
            background: var(--accent-black); border-radius: 0; box-shadow: 0 0 10px var(--accent-black);
            z-index: 2;
        }

        /* Khusus dot untuk organisasi warnanya pink */
        .org-dot .timeline-dot {
            background: var(--accent-black); box-shadow: 0 0 10px var(--accent-black);
        }

        .timeline-date { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 5px; }
        .timeline-item h4 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-main); }
        .timeline-item ul { margin-left: 15px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
        .timeline-item p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
        /* --- SECTION 5: CONTACT --- */
        .contact-card { text-align: center; padding: 60px 40px; }
        .contact-links {
                display: flex;
                justify-content: center;
                gap: 30px;
                margin-top: 30px;
            }

            .btn-contact {
                color: var(--accent-dark);
                background: var(--accent-light);
                border-color: var(--border-dark);
                text-decoration: none;
                padding: 14px 35px;
                }
        .btn-contact:hover { border-color: var(--accent-black); background: rgba(0, 0, 0, 0.05); }

        footer { text-align: center; padding: 30px; color: var(--accent-light); font-size: 0.8rem; border-top: 1px solid var(--bento-border); margin-top: 50px; }

    
        /* =========================================
           RESPONSIVE & MOBILE OPTIMIZATION
           ========================================= */
           
        /* --- Layar Tablet / Laptop Kecil (Max 900px) --- */
               @media (max-width: 1000px) {                    
            /* FIX PROJECTS: Bikin jadi 2 kolom di tablet biar kartunya gak raksasa banget */
            .projects-grid { grid-template-columns: repeat(2, 1fr); } 
            
            .exp-container { grid-template-columns: 1fr; }
            
            /* Gallery udah aman 2 kolom dari settingan lu */
            .gallery-grid { grid-template-columns: repeat(2, 1fr); } 
        }

        /* --- Layar HP (Max 768px) --- */
        @media (max-width: 768px) {
            /* ... keep navbar compact & intro grid layout ... */
            
            /* Reset ukuran span biar numpuk rapi */
            .card-tech { 
                grid-column: span 1; 
                grid-row: auto; 
            }
                         
            /* 1. Navbar dibikin lebih compact & muat di layar */
            nav {
                width: 90%;
                padding: 10px 15px;
                gap: 10px;
                justify-content: center;
                flex-wrap: wrap; /* Biar kalau kepanjangan dia turun ke bawah */
                border-radius: 0;
            }
            nav a { font-size: 0.75rem; padding: 5px; }

            /* 2. Semua Bento Grid jadi 1 Kolom berjejer ke bawah */
            .projects-grid, .gallery-grid { grid-template-columns: 1fr; }
            
            /* Reset ukuran span biar numpuk rapi */
            .card-tech { 
                grid-column: span 1; 
                grid-row: auto; 
            }
            
                     
            /* 4. Experience Kotaknya Disesuaikan */
            .exp-scroll-area { max-height: 400px; } /* Biar di HP scroll-nya gak kepanjangan */
            .timeline-item { margin-bottom: 30px; }

            /* 5. Contact Section - Tombol berjejer ke bawah biar gampang dipencet */
            .contact-card { padding: 40px 20px; }
            .contact-card h2 { font-size: 2rem; }
            .contact-links { 
                flex-direction: column; /* Tombol numpuk atas-bawah */
                gap: 15px; 
            }
            .btn-contact { width: 100%; justify-content: center; } /* Tombol menuhin lebar layar */
        }

        /*  Layar HP (Max 480px) --- */
             .gallery-hover {
            position: relative;
            display: block; 
            text-decoration: none;
            overflow: hidden;
            padding: 0; /* Memastikan gambar full mentok ke ujung kartu */
        }

        .gallery-hover img {
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.5s ease;
            display: block;
        }

        .gallery-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            /* Gradasi dari Hitam pekat di bawah (0%) ke Pink transparan di atas (100%) */
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.15) 100%);
            opacity: 0;
            display: flex;
            align-items: flex-end; /* Mendorong posisi teks agar berada di bawah */
            justify-content: center;
            padding-bottom: 25px; /* Memberi jarak teks dari sisi paling bawah */
            transition: opacity 0.3s ease;
            z-index: 2;
        }

        .gallery-text {
            color: var(--accent-black); /* Teks di bawah menggunakan warna biru cyan */
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            text-align: center;
            transform: translateY(15px); /* Posisi awal teks agak turun bersembunyi */
            transition: transform 0.3s ease;
        }

        /* Animasi eksekusi saat di-hover */
        .gallery-hover:hover .gallery-overlay {
            opacity: 1; /* Menampilkan layar gradasi */
        }

        .gallery-hover:hover .gallery-text {
            transform: translateY(0); /* Teks naik dengan mulus ke posisi normal */
        }

        .gallery-hover:hover img {
            transform: scale(1.08); /* Memberikan efek zoom tipis pada gambar asli */
        }
        /* --- EFEK KLIK KARTU PROJECT --- */
        #projects .bento-card {
            cursor: pointer; /* Mengubah kursor jadi tangan pas hover */
        }

        /* --- MODAL / POP-UP PROJECTS --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px);
            z-index: 2000; display: flex; justify-content: center; align-items: center;
            opacity: 0; visibility: hidden; transition: 0.3s ease;
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }

         .modal-content {
            background: var(--bg-main); border: 1px solid var(--accent-black);
            border-radius: 0; width: 90%; max-width: 650px; padding: 30px;
            position: relative; transform: translateY(30px); transition: 0.4s ease;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
            /* overflow-y dihapus dari sini biar tombol X di luar gak kepotong */
        
        max-height: 85vh; /* Membatasi tinggi maksimal kotak sebesar 85% dari tinggi layar */
        display: flex;
        flex-direction: column;
        }

        .modal-body {
        overflow-y: auto; /* Membuat konten di dalamnya bisa di-scroll */
        padding-right: 15px; /* Memberi ruang agar scrollbar tidak menempel ke teks */
        padding-left: 15px;
        }
        /* 3. (Opsional) Styling scrollbar khusus area modal agar matching dengan tema */
        .modal-body::-webkit-scrollbar { width: 3px; }
        .modal-body::-webkit-scrollbar-track { background: transparent; }
        .modal-body::-webkit-scrollbar-thumb { background: var(--accent-black); border-radius: 0; }

      
        /* Tombol X Mengambang di Luar */
        .close-modal {
            position: absolute; 
            top: -45px; /* Menarik tombol ke luar atas kotak */
            right: 0px; /* Menyejajarkan tombol dengan garis kanan batas gambar */
            width: 38px; 
            height: 38px;
            background: rgba(20, 25, 40, 0.8); /* Background gelap transparan */
            border: 1px solid var(--text-muted); /* Border kotak tipis */
            border-radius: 0; /* Sudut sedikit tumpul (Bento style) */
            padding-top: 4px; /* Dorong X dari atas ke bawah */
            padding-left: 10.4px; /* Dorong X dari kiri ke kanan */
            box-sizing: border-box; /* Wajib ditambahin biar padding gak merubah ukuran asli kotak (38x38) */
            font-size: 1.2rem; 
            color: var(--text-muted); 
            cursor: pointer; 
            transition: 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .close-modal:hover { 
            border-color: var(--accent-black);
            color: var(--accent-black);
            background: rgba(0, 0, 0, 0.08); /* Efek nyala pink pas disorot */
        }

        /* Penyesuaian layar HP biar tombol X gak kepotong batas atas layar */
        @media (max-width: 768px) {
            .close-modal {
                top: -50px;
                right: 0px; 
            }
        }
        /* --- STYLING TOMBOL LINK FIGMA --- */
        .modal-header-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
            flex-wrap: wrap; /* Biar tetap aman kalau dibuka di HP */
            gap: 10px;
        }

        .modal-header-flex h3 {
            margin-bottom: 0 !important; /* Menimpa margin bawah bawaan h3 */
        }

        .btn-figma {
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-main);
            text-decoration: none;
            border: 1px solid var(--text-main);
            padding: 6px 14px;
            border-radius: 0;
            transition: 0.3s ease;
            background: transparent;
        }

        .btn-figma:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--accent-black);
            color: var(--accent-black);
        }

        /* --- STYLING TOMBOL GITHUB & ACTION MODAL --- */
        .modal-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .btn-github {
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-main);
            text-decoration: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0);
            padding: 6px 12px;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }

        .btn-github:hover {
            background: rgba(0, 0, 0, 0.08);
            border-color: var(--accent-black);
            color: var(--accent-black);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        .modal-body img { 
            display: block; 
            margin: 0 auto 20px auto; /* Sekalian mastiin fotonya beneran di tengah */
            width: 100%; 
            max-width: 100%; 
            object-fit: cover; 
            border-radius: 0; /* Menghilangkan frame/garis luarnya */
            background: transparent; 
        }
        .modal-body h3 { font-size: 1.5rem; margin-bottom: 5px; color: var(--text-main); }
        .modal-body .mono { font-size: 0.85rem; color: var(--accent-black); margin-bottom: 20px; display: inline-block; }
        .modal-body p { color: var(--text-muted); line-height: 1.6; margin-bottom: 15px; font-size: 0.95rem; }
        .modal-body ul { margin-left: 20px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; font-size: 0.95rem; }
        .modal-body li { margin-bottom: 8px; }

        /* --- CSS UNTUK IMAGE SLIDER DI MODAL --- */
        .modal-slider { 
            position: relative; 
            width: 100%; 
            margin: 0 auto 20px auto; 
            border-radius: 0; 
            overflow: hidden; 
            border: 0px solid var(--bento-border); 
        }

        /* Mengatur ulang gaya gambar khusus di dalam slider agar tidak tumpang tindih dengan CSS lama */
        .modal-slider img.slide { 
            display: none; 
            width: 100%; 
            margin: 0; 
            border: none; 
            border-radius: 0; 
            object-fit: cover;
        }

        .modal-slider img.slide.active { 
            display: block; 
            animation: fadeSlide 0.5s ease-in-out;
        }

        @keyframes fadeSlide {
            from { opacity: 0.4; }
            to { opacity: 1; }
        }

        /* Tombol Panah Slider */
        .slider-btn { 
            position: absolute; 
            top: 50%; 
            transform: translateY(-50%); 
            background: rgba(11, 14, 20, 0.7); 
            color: var(--text-main); 
            border: 1px solid rgba(255, 255, 255, 0.2); 
            padding: 8px 12px; 
            cursor: pointer; 
            font-size: 1rem; 
            transition: 0.3s; 
            border-radius: 0; 
            backdrop-filter: blur(4px);
        }

        .slider-btn:hover { 
            background: rgba(0, 0, 0, 0.15); 
            color: var(--accent-black); 
            border-color: var(--accent-black);
        }

        .slider-btn.prev { left: 10px; }
        .slider-btn.next { right: 10px; }

        /* --- FULLSCREEN POSTER LIGHTBOX --- */
            .poster-lightbox {
                position: fixed; 
                top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(0, 0, 0, 0.95); /* Latar belakang lebih gelap dari modal biasa */
                backdrop-filter: blur(10px);
                z-index: 9999; /* Z-index tertinggi biar menutupi segalanya, termasuk navbar dan modal awal */
                display: flex; 
                justify-content: center; 
                align-items: center;
                opacity: 0; 
                visibility: hidden; 
                transition: 0.3s ease;
            }

            .poster-lightbox.active {
                opacity: 1; 
                visibility: visible;
            }

            .poster-lightbox img {
                max-width: 95vw; 
                max-height: 90vh; /* Membatasi tinggi gambar biar gak ngelewatin batas layar */
                object-fit: contain; /* Memastikan rasio poster tetap utuh tanpa terpotong */
                border-radius: 0;
                box-shadow: 0 0 50px rgba(0, 0, 0, 0.15); /* Efek glow tipis cyan */
            }

            /* Tombol X untuk Lightbox Poster */
            .close-poster {
                position: absolute; 
                top: 20px; 
                right: 30px; 
                font-size: 2rem; 
                color: var(--text-muted); 
                cursor: pointer; 
                transition: 0.3s ease;
                z-index: 10000;
            }

            .close-poster:hover {
                color: var(--accent-black);
                transform: scale(1.1);
            }

           /* --- TABS KHUSUS GALLERY --- */
            .tab-btn-gallery {
                background: transparent;
                border: none;
                color: var(--text-muted);
                font-family: 'Inter', sans-serif;
                font-size: 1.1rem;
                font-weight: 600;
                padding: 10px 20px;
                cursor: pointer;
                transition: all 0.3s ease;
                position: relative;
            }

            .tab-btn-gallery:hover { color: var(--text-main); }
            .tab-btn-gallery.active[data-target="designs-tab"] { color: var(--accent-black); }
            .tab-btn-gallery.active[data-target="captures-tab"] { color: var(--accent-black); }

            .tab-btn-gallery::after {
                content: ''; position: absolute; bottom: -11px; left: 0; width: 0%; height: 2px; transition: width 0.3s ease;
            }

            .tab-btn-gallery.active[data-target="designs-tab"]::after { width: 100%; background: var(--accent-black); box-shadow: 0 0 10px var(--accent-black); }
            .tab-btn-gallery.active[data-target="captures-tab"]::after { width: 100%; background: var(--accent-black); box-shadow: 0 0 10px var(--accent-black); }

            .tab-content-gallery {
                display: none;
                animation: smoothFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            }
            .tab-content-gallery.active { display: block; }

            @keyframes smoothFadeIn {
                0% { opacity: 0; transform: translateY(15px); }
                100% { opacity: 1; transform: translateY(0); }
            }

            /* --- MASONRY LAYOUT UNTUK CAPTURES --- */
            .captures-masonry {
                column-count: 3; /* Dibagi 3 kolom di PC */
                column-gap: 20px;
                padding-top: 10px;
            }

            .masonry-item {
                break-inside: avoid; /* Mencegah gambar terpotong di tengah pindah kolom */
                margin-bottom: 20px; /* Jarak antar foto dari atas ke bawah */
                display: block;
                width: 100%;
            }

            /* Responsive Tabs & Masonry */
            @media (max-width: 900px) {
                .captures-masonry { column-count: 2; }
            }

            @media (max-width: 768px){
                .tab-btn-gallery::after { display: none; } 
                .tab-btn-gallery { border: 1px solid var(--bento-border); border-radius: 0; }
                .tab-btn-gallery.active[data-target="designs-tab"] { background: rgba(0, 0, 0, 0.08); border-color: var(--accent-black); }
                .tab-btn-gallery.active[data-target="captures-tab"] { background: rgba(0, 0, 0, 0.08); border-color: var(--accent-black); }
                .captures-masonry { column-count: 1; }
            }
            /* --- TABS KHUSUS GALLERY --- */
            .tab-btn-gallery {
                background: transparent;
                border: none;
                color: var(--text-muted);
                font-family: 'Inter', sans-serif;
                font-size: 1.1rem;
                font-weight: 600;
                padding: 10px 20px;
                cursor: pointer;
                transition: all 0.3s ease;
                position: relative;
            }

            .tab-btn-gallery:hover { color: var(--text-main); }

            /* Status Aktif Tombol Gallery */
            .tab-btn-gallery.active[data-target="designs-tab"] { color: var(--accent-black); }
            .tab-btn-gallery.active[data-target="captures-tab"] { color: var(--accent-black); }

            .tab-btn-gallery::after {
                content: '';
                position: absolute;
                bottom: -11px;
                left: 0;
                width: 0%;
                height: 2px;
                transition: width 0.3s ease;
            }

            .tab-btn-gallery.active[data-target="designs-tab"]::after {
                width: 100%;
                background: var(--accent-black);
                box-shadow: 0 0 10px var(--accent-black);
            }

            .tab-btn-gallery.active[data-target="captures-tab"]::after {
                width: 100%;
                background: var(--accent-black);
                box-shadow: 0 0 10px var(--accent-black);
            }

           /* Konten Tab Gallery */
            .tab-content-gallery {
                display: none;
                /* Menggunakan cubic-bezier agar transisinya lebih smooth dan natural */
                animation: smoothFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            }
            .tab-content-gallery.active { display: block; }

            @keyframes smoothFadeIn {
                0% { opacity: 0; transform: translateY(15px); }
                100% { opacity: 1; transform: translateY(0); }
            }

/* =========================================
   MONOCHROME / SHARP-CORNER OVERRIDES
   ========================================= */
*,
*::before,
*::after {
    border-radius: 0;
}

body {
    background: var(--bg-main);
    color: var(--text-main);
    background-image: none;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    min-height: 56px;
    padding: 0 30px;
    background: #FFFFFF;
    border: none;
    border-bottom: 1px solid #D0D0D0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    z-index: 1000;
}

nav a {
    text-decoration: none;
    color: #111111;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

nav a:hover {
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.section-tag {
    display: block;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
}

.bento-card,
.exp-bento-wrapper {
    background: var(--bento-bg);
    border-color: var(--border-dark);
    backdrop-filter: none;
    box-shadow: none;
}

.btn-cv {
    background: var(--accent-light);
    border-color: var(--border-dark);
    color: var(--accent-black);
}

.btn-cv:hover {
    background: var(--accent-black);
    border-color: var(--accent-black);
    color: #FFFFFF;
    box-shadow: none;
}

.proj-text {
    color: #FFFFFF;
    background: var(--accent-black);
    border-color: var(--accent-black);
}

.proj-overlay {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: none;
}

.tabs-header {
    border-bottom-color: var(--border-dark);
}

.tab-btn,
.tab-btn-gallery {
    color: var(--text-muted);
}

.tab-btn:hover,
.tab-btn-gallery:hover {
    color: var(--text-main);
}

.tab-btn.active[data-target="work"],
.tab-btn.active[data-target="org"],
.tab-btn-gallery.active[data-target="designs-tab"],
.tab-btn-gallery.active[data-target="captures-tab"] {
    color: var(--accent-black);
}

.tab-btn.active[data-target="work"]::after,
.tab-btn.active[data-target="org"]::after,
.tab-btn-gallery.active[data-target="designs-tab"]::after,
.tab-btn-gallery.active[data-target="captures-tab"]::after {
    background: var(--accent-black);
    box-shadow: none;
}

.exp-detail-card {
    background: var(--accent-light);
    border-color: var(--border-dark);
}

.exp-detail-card:hover {
    background: #FFFFFF;
    border-color: var(--accent-black);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.10);
}

.exp-header h4,
.timeline-item h4 {
    color: var(--text-main);
}

.btn-doc,
.btn-figma,
.btn-github {
    background: #9995958f;
    color: var(--text-main);
    border-color: var(--border-dark);
}

.btn-doc:hover,
.btn-contact:hover,
.btn-figma:hover,
.btn-github:hover {
    background: var(--accent-black);
    border-color: var(--accent-black);
    color: #FFFFFF;
    box-shadow: none;
}

.yuba-overlay,
.gallery-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.80) 100%
    );
}

.yuba-link-text,
.gallery-text {
    color: #FFFFFF;
    text-shadow: none;
}

footer {
    border-top-color: var(--border-dark);
}

.modal-overlay {
    background: rgba(0, 0, 0, 0.80);
    backdrop-filter: none;
}

.modal-content {
    background: #FFFFFF;
    border-color: var(--border-dark);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.18);
}

.close-modal {
    background: #FFFFFF;
    border-color: var(--border-dark);
    color: var(--text-main);
    backdrop-filter: none;
}

.close-modal:hover {
    border-color: var(--accent-black);
    color: #FFFFFF;
    background: var(--accent-black);
}

.modal-body .mono {
    color: var(--text-main);
}

.slider-btn {
    background: rgba(0, 0, 0, 0.75);
    color: #FFFFFF;
    border-color: #FFFFFF;
    backdrop-filter: none;
}

.slider-btn:hover {
    background: #FFFFFF;
    color: #000000;
    border-color: #FFFFFF;
}

.poster-lightbox {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: none;
}

.poster-lightbox img {
    box-shadow: 10px 10px 0 rgba(255, 255, 255, 0.10);
}

.close-poster:hover {
    color: #FFFFFF;
}

.exp-scroll-area::-webkit-scrollbar-track {
    background: #E5E5E5;
}

.exp-scroll-area::-webkit-scrollbar-thumb {
    background: #111111;
}

.exp-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #000000;
}

/* Mobile tab states */
@media (max-width: 768px) {
    .tab-btn,
    .tab-btn-gallery {
        border-color: var(--border-dark);
    }

    .tab-btn.active[data-target="work"],
    .tab-btn.active[data-target="org"],
    .tab-btn-gallery.active[data-target="designs-tab"],
    .tab-btn-gallery.active[data-target="captures-tab"] {
        background: var(--accent-light);
        border-color: var(--border-dark);
    }
}


/* Final navbar override */
@media (max-width: 768px) {
    nav {
        width: 100%;
        min-height: 52px;
        padding: 8px 12px;
        gap: 8px 16px;
        justify-content: center;
        flex-wrap: wrap;
        border-radius: 0 !important;
    }

    nav a {
        font-size: 0.68rem;
        padding: 4px;
    }
}


/* Account for the fixed full-width navbar */
section {
    padding-top: 110px;
}

/* =========================================
   TYPOGRAPHY
   Titles : Glacial Indifference
   Body   : Inter
   ========================================= */
:root {
    --font-title: 'Glacial Indifference', 'Arial', sans-serif;
    --font-body: 'Inter', sans-serif;
}

body {
    font-family: var(--font-body);
}

/* Main headings / section titles */
h1, h2, h3, h4, h5, h6,
.section-tag {
    font-family: var(--font-title);
}

/* Keep navigation and supporting UI clean with Inter */
nav,
nav a,
button,
.btn-cv,
.btn-doc,
.btn-contact,
.btn-figma,
.btn-github,
.tab-btn,
.tab-btn-gallery {
    font-family: var(--font-body);
}

/*
  Glacial Indifference must be available to the browser for the exact typeface
  to render. If you have the .woff/.woff2 files, load them with @font-face
  (or load the font from your HTML). Otherwise the browser will use the fallback.
*/


/* =========================================
   NEW HOME / HERO LAYOUT
   ========================================= */

.hero-layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 70px 40px 80px;

    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 70px;

    align-items: center;
}


/* INTRO */

.hero-intro {
    color: var(--text-main);
}

.section-label {
    display: block;

    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;

    margin-bottom: 24px;

    color: var(--accent-black);
}


.hero-intro h1 {
    font-family: var(--font-title);

    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 0.95;

    letter-spacing: -2px;

    margin: 0 0 28px;

    color: var(--accent-light);
}


.hero-intro p {
    max-width: 650px;

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;

    color: var(--accent-light);

    margin-bottom: 30px;
}


/* PHOTO */

.hero-photo {
    width: 100%;
    max-width: 340px;

    justify-self: end;

    border: 1px solid var(--border-dark);

    overflow: hidden;
}

.hero-photo img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;
    object-fit: cover;
}


/* =========================================
   SKILLS
   ========================================= */

.skills-section {
    background: var(--bento-bg);

    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);

    padding: 45px max(40px, calc((100% - 1100px) / 2));
}


.skills-section .section-label {
    margin-bottom: 25px;
}


.skill-row {
    display: grid;

    grid-template-columns: 210px 1fr;

    gap: 30px;

    padding: 18px 0;

    border-top: 1px solid var(--bento-border);
}


.skill-row:last-child {
    border-bottom: 1px solid var(--bento-border);
}


.skill-category {
    font-family: var(--font-body);

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.8px;

    color: var(--text-main);
}


.skill-stack {
    font-family: var(--font-body);

    font-size: 18px;
    line-height: 1.3;

    color: var(--text-main);
}


/* =========================================
   CV BUTTON
   ========================================= */

.btn-cv {
    display: inline-flex;

    align-items: center;
    gap: 9px;

    padding: 13px 26px;

    background: var(--accent-light);
    color: var(--text-main);

    border: 1px solid var(--bento-border);

    text-decoration: none;

    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;

    transition: 0.2s ease;
}

.btn-cv:hover {
    background: var(--accent-black);
    color: #fff;

    border-color: var(--accent-black);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 800px) {

    .hero-layout {
        grid-template-columns: 1fr;

        gap: 40px;

        padding: 55px 25px 60px;
    }

    .hero-photo {
        justify-self: start;

        max-width: 300px;
    }

    .hero-intro h1 {
        font-size: 3.4rem;
    }

    .skill-row {
        grid-template-columns: 1fr;

        gap: 8px;
    }

}


@media (max-width: 480px) {

    .hero-layout {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-intro h1 {
        font-size: 2.8rem;
    }

    .skill-stack {
        font-size: 18px;
    }

}