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

:root { 
    --bg-base: #0a0a0c; 
    --text-main: #f0ece1; 
    --btn-hover-bg: #f0ece1; 
    --btn-hover-text: #0a0a0c; 
}

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

body { background-color: var(--bg-base); color: var(--text-main); font-family: 'Inter', sans-serif; overflow-x: hidden; transition: background-color 1.2s cubic-bezier(0.25, 1, 0.5, 1), color 1.2s ease; }

/* SHADER & NOISE */
#webgl-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; opacity: 0.6; mix-blend-mode: screen; }
.noise { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; opacity: 0.04; background: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png'); }

/* TEXT SPLIT UTILS */
.char-wrap, .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }
.char, .word { display: inline-block; transform: translateY(110%); opacity: 0; will-change: transform, opacity; }

/* PRELOADER */
.preloader { position: fixed; inset: 0; background: #050505; z-index: 9999999; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.preloader-text { font-family: 'Syncopate', sans-serif; color: white; font-size: 1.5rem; letter-spacing: 5px; margin-bottom: 20px; display: flex; gap: 2px;}
.preloader-bar { width: 200px; height: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.preloader-progress { width: 0%; height: 100%; background: white; }

/* INTERAKTIF CURSOR */
.cursor { width: 8px; height: 8px; background: #fff; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999999; transform: translate(-50%, -50%); mix-blend-mode: difference;}
.cursor-follower { width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999998; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background 0.3s; mix-blend-mode: difference;}
.cursor-follower.active { width: 80px; height: 80px; background: rgba(255,255,255,0.1); backdrop-filter: blur(2px); }

/* NAV */
.mix-blend { mix-blend-mode: difference; color: white !important; }
.glass-nav { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; padding: 2rem 4rem; z-index: 1000; }
.nav-links a { color: inherit; text-decoration: none; margin-left: 2rem; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; display: inline-block;}

/* HERO */
.hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 4rem; }
.subtitle { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: -10px; opacity: 0.7;}
.hero-title { font-family: 'Syncopate', sans-serif; font-size: clamp(4rem, 12vw, 15rem); line-height: 0.85; letter-spacing: -0.05em; color: inherit;}

/* MARQUEE */
.marquee-container { overflow: hidden; white-space: nowrap; padding: 2rem 0; border-top: 1px solid rgba(150,150,150,0.2); border-bottom: 1px solid rgba(150,150,150,0.2); }
.marquee-content { display: inline-block; font-size: 1.5rem; font-weight: 300; letter-spacing: 2px; opacity: 0.6; }

/* PROJECTS */
.showcase-header { padding: 10rem 4rem 2rem; text-align: center; }
.section-title { font-family: 'Syncopate', sans-serif; font-size: clamp(2rem, 6vw, 5rem); line-height: 0.9; text-transform: uppercase; letter-spacing: -3px; }

.project-section { width: 100%; display: flex; align-items: flex-start; padding: 8rem 4rem; border-bottom: 1px solid rgba(150,150,150,0.2); gap: 5rem; position: relative; }
.project-content { display: flex; flex-direction: column; z-index: 10; width: 40%; }
.sticky-content { position: sticky; top: 25vh; } /* NATIVE STICKY POSITION, STABIL 100% */

.project-title { font-family: 'Syncopate', sans-serif; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1; text-transform: uppercase; letter-spacing: -2px; margin-bottom: 0.5rem;}
.project-desc { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.2rem; opacity: 0.8;}
.project-meta { display: flex; gap: 1.5rem; font-size: 0.85rem; text-transform: uppercase; opacity: 0.6; margin-bottom: 1.5rem;}
.project-label { font-family: 'Syncopate', sans-serif; font-size: 0.65rem; border: 1px solid currentColor; opacity: 0.7; text-transform: uppercase; padding: 8px 16px; border-radius: 50px; align-self: flex-start; margin-bottom: 1.5rem; transition: 1s;}

/* BUTTON INTERAKTIF */
.btn-more { padding: 14px 28px; background: transparent; border: 1px solid currentColor; color: inherit; font-family: 'Syncopate', sans-serif; font-size: 0.8rem; font-weight: 700; transition: all 0.4s ease; align-self: flex-start; position: relative; z-index: 1;}
.btn-more:hover { background: var(--btn-hover-bg) !important; color: var(--btn-hover-text) !important; border-color: var(--btn-hover-bg) !important; padding: 14px 40px; letter-spacing: 2px;}

/* VISUAL SLIDER */
.project-visual { position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,0.1); width: 55%; aspect-ratio: 16/9; transform-origin: center;}
.layout-right { flex-direction: row; }
.layout-left { flex-direction: row-reverse; }
.layout-left.is-portrait .project-visual, .layout-right.is-portrait .project-visual { width: 45%; aspect-ratio: 4/5; box-shadow: none; border: 1px solid rgba(150,150,150,0.25); }
/* KELAS BARU: Untuk Project dengan rasio 1:1 (Square) */
.layout-left.is-square .project-visual, .layout-right.is-square .project-visual { 
    width: 45%; 
    aspect-ratio: 1 / 1; 
    box-shadow: none; 
    border: 1px solid rgba(150,150,150,0.25); 
}

/* BAGIAN INI YANG DIUBAH UNTUK EFEK BINGKAI MUSEUM */
.is-square .slide { 
    object-fit: contain; /* Mengubah dari 'cover' menjadi 'contain' agar foto tidak terpotong */
    padding: 2rem;       /* Menambahkan jarak kosong di sekeliling foto (bingkai) */
}
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: translateX(100%); opacity: 0; transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease; }
.is-portrait .slide { object-fit: contain; padding: 2rem; }
.slide.active { transform: translateX(0); opacity: 1; z-index: 2; }
.slider-pagination { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; padding: 8px 16px; background: rgba(0,0,0,0.3); backdrop-filter: blur(12px); border-radius: 50px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: 0.4s; }
.dot.active { background: white; transform: scale(1.5); }
.slider-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(0,0,0,0.3); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; z-index: 10; transition: 0.3s; }
.prev-btn { left: 1rem; } .next-btn { right: 1rem; }

/* EDITORIAL GRID */
.editorial-parallax-section { padding: 10rem 4rem; }
.ep-header { text-align: center; margin-bottom: 8rem; }
.editorial-title { font-family: 'Syncopate', sans-serif; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; color: white;}
.ep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; max-width: 1200px; margin: 0 auto; }
.ep-col { display: flex; flex-direction: column; gap: 8rem; }
.ep-col-2 { margin-top: 15rem; }
.repel-item { position: relative; display: flex; flex-direction: column; }
.ep-image-wrapper { width: 100%; aspect-ratio: 4/5; overflow: hidden; border-radius: 4px;}
.editorial-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.img-hover-zoom:hover { transform: scale(1.08); }
.editorial-caption { font-size: 0.95rem; opacity: 0.8; margin-top: 1.5rem; }

/* ZINE */
.zine-slipstream-section { 
    height: 100vh; /* KUNCI UTAMA: Wajib 100vh agar pas di tengah layar saat di-pin */
    padding: 0;    /* Hapus padding 8rem & 14rem yang membuat elemen mepet ke bawah */
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    overflow: hidden; 
}
.zine-info { 
    padding: 0 4rem; 
    max-width: 800px; 
    margin-bottom: 4rem; 
}
.magazine-side-title { 
    font-family: 'Syncopate', sans-serif; 
    font-size: clamp(3rem, 5vw, 4.5rem); 
    margin: 1rem 0; 
}
.magazine-copy { opacity: 0.8; }
.zine-track-container { 
    width: 100%; 
    overflow: hidden; 
    padding-bottom: 3rem; 
}
.zine-track { 
    display: flex; 
    gap: 2rem; 
    padding: 0 4rem; /* UBAH DI SINI: Beri padding kiri DAN kanan agar tidak menabrak tepi layar di akhir scroll */
    width: max-content; 
    align-items: center; 
}
.zine-page { 
    height: 60vh; 
    aspect-ratio: 1/1.414; 
    object-fit: cover; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* ABOUT */
.about-section { padding: 12rem 5rem; border-top: 1px solid rgba(150,150,150,0.2); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; }
.about-text h2 { font-size: clamp(2rem, 3vw, 2.5rem); margin-bottom: 2rem; }
.exp-item { margin-bottom: 2rem; border-bottom: 1px solid rgba(150,150,150,0.2); padding-bottom: 2rem; transition: 0.3s; }
.exp-item:hover { padding-left: 20px; background: rgba(255,255,255,0.03); }
.exp-item span { font-size: 0.75rem; opacity: 0.6; text-transform: uppercase; font-weight: 600; }
.exp-item h4 { font-size: 1.25rem; margin: 0.5rem 0 0.2rem 0; font-weight: 600; }

/* FOOTER */
.footer { padding: 8rem 4rem 2rem; text-align: center; }
.footer-title a { font-family: 'Syncopate', sans-serif; font-size: clamp(2rem, 10vw, 13rem); text-decoration: none; display: inline-block; transition: 0.4s;}
.footer-title a, .footer-title a .char { color: transparent !important; -webkit-text-stroke: 2px var(--text-main); transition: all 0.4s ease; }
.footer-title a:hover, .footer-title a:hover .char { color: var(--text-main) !important; -webkit-text-stroke: 0px; }
.footer-bottom { display: flex; justify-content: space-between; padding: 2rem; margin-top: 4rem; border-radius: 100px; border: 1px solid rgba(150,150,150,0.2); }

/* MODAL GALLERY */
.project-modal { position: fixed; inset: 0; background: rgba(10,10,10,0.98); color: white; z-index: 100000; opacity: 0; transform: translateY(100%); pointer-events: none; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s; overflow-y: auto; }
.project-modal.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.modal-inner { padding: 8rem 4rem; max-width: 1600px; margin: 0 auto; }
.modal-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 6rem; }
.modal-text-col { position: sticky; top: 8rem; display: flex; flex-direction: column; gap: 1.5rem; border-left: 2px solid white; padding-left: 1.5rem; }
.modal-title { font-family: 'Syncopate', sans-serif; font-size: clamp(2rem, 3vw, 3rem); text-transform: uppercase; }
.modal-close-btn { margin-top: 3rem; background: none; border: none; font-family: 'Syncopate', sans-serif; color: white; border-bottom: 1px solid white; display: inline-block; width: fit-content; transition: 0.3s;}
.modal-close-btn:hover { letter-spacing: 2px; }
.modal-image-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.modal-image-col img { width: 100%; object-fit: contain; opacity: 0; transform: translateY(50px); transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-image-col img.loaded { opacity: 1; transform: translateY(0); }

/* Sembunyikan enter di Desktop agar tetap 1 baris memanjang */
.mobile-br { 
    display: none; 
}

/* Menghapus gaya bawaan link di bagian footer agar teks tidak jadi biru & bergaris bawah */
.footer-bottom a.footer-link {
    color: inherit; /* Mengikuti warna teks bawaan di sekitarnya */
    text-decoration: none; /* Menghilangkan garis bawah */
    cursor: pointer; /* Opsional: Memastikan kursor berubah jadi tangan saat diarahkan (jika tidak dimatikan oleh efek custom) */
}

/* --- MODAL META FIX (PEMBATAS ROLE & YEAR) --- */
.modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Menambahkan garis batas (—) di antara teks */
.modal-meta span:not(:last-child)::after {
    content: "—"; 
    margin-left: 12px;
    opacity: 0.5;
}

/* --- MENGEMBALIKAN SIFAT TEKS NORMAL DI DALAM MODAL --- */
.modal-title .char-wrap,
.modal-title .char {
    display: inline !important; /* Membatalkan sifat kotak terpisah dari JavaScript */
}

/* Memastikan kata yang kelewat panjang menyesuaikan ukuran container */
.modal-title {
    overflow-wrap: break-word !important; 
    hyphens: auto; 
}

/* --- SKILLS SECTION (KEAHLIAN) --- */
.skills-section { 
    margin-top: 8rem; 
    border-top: 1px solid rgba(150,150,150,0.2); 
    padding-top: 5rem; 
}

.skills-main-title { 
    font-size: clamp(2rem, 3vw, 2.5rem); 
    margin-bottom: 4rem; 
}

.skills-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 4rem; 
}

.skill-col h4 { 
    font-size: 1.1rem; 
    margin-bottom: 1rem; 
    font-weight: 600; 
}

.skill-col p { 
    font-size: 0.95rem; 
    opacity: 0.8; 
    line-height: 1.8; 
}

/* ========================================= */
/* FINAL RESPONSIVE MOBILE FIX (LAYAR HP)    */
/* ========================================= */
@media screen and (max-width: 768px) {

    /* MARQUEE MOBILE FIX */
    .marquee-track {
        display: flex !important;
        align-items: center !important;
        gap: 3rem !important; 
    }

    /* Menggunakan Universal Selector > * untuk memastikan targetnya kena */
    .marquee-track > * {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
        line-height: 1 !important;
        white-space: normal !important; 
        
        /* KUNCI BARU: Kunci lebar maksimal di 9 karakter */
        max-width: 9ch !important; 
        
        text-align: center !important;
        display: block !important; 
        flex-shrink: 0 !important;
    }
    
    /* 1. Kursor Normal */
    * { cursor: auto !important; }
    .cursor, .cursor-follower { display: none !important; }

    /* 2. Global Padding & Hero */
    .glass-nav, .hero, .showcase-header, .editorial-parallax-section, .about-section, .footer { 
        padding-left: 1.5rem !important; 
        padding-right: 1.5rem !important; 
    }
    .hero-title, .footer-title a { font-size: clamp(2.5rem, 10vw, 3.5rem) !important; line-height: 1.1 !important; }
    .section-title, .editorial-title { font-size: clamp(2rem, 8vw, 2.5rem) !important; line-height: 1.2 !important; white-space: normal !important; }

    .editorial-parallax-section { padding: 3rem 3rem; }
    .ep-header { text-align: center; margin-bottom: 3rem; }

    /* Cari bagian ini di dalam @media screen milikmu dan ganti nilainya */
    .hero-title { 
        font-size: clamp(3rem, 13vw, 4.3rem) !important; /* Ukuran di HP dibuat lebih besar dan mantap */
        line-height: 1.0 !important; 
    }
    
    .subtitle { 
        font-size: 0.8rem !important; /* Ukuran di HP dikecilkan agar proporsional dan tidak makan tempat */
        margin-bottom: 1.5rem !important; 
        line-height: 1.4 !important; 
    }

    /* 3. Project Showcase (Susunan Teks & Gambar) */
    .project-section { 
        display: flex !important; 
        flex-direction: column !important; 
        height: auto !important; 
        padding: 3rem 1.5rem !important; 
        gap: 1.5rem !important; 
    }
    .project-content { 
        width: 100% !important; 
        position: relative !important; /* Hapus posisi sticky/absolute */
        top: 0 !important;
        padding: 0 !important;
    }
    .project-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        margin-bottom: 0.5rem !important;
    }
    .project-meta {
        display: block !important;
        margin-bottom: 1rem !important;
    }

    /* 4. Project Visual (Rasio Gambar) */
    .project-visual { 
        width: 100% !important; 
        height: auto !important; 
        aspect-ratio: 4 / 5 !important; /* Default memanjang ke bawah untuk Social Media */
        position: relative !important;
    }

    /* KHUSUS Product Photography (1:1) */
    #project-4 .project-visual {
        aspect-ratio: 1 / 1 !important;
    }
    
    /* KHUSUS Brand Guidelines (Target langsung ke ID agar 100% akurat dan tidak meleset) */
    #project-1 .project-visual {
        aspect-ratio: 16 / 9 !important; /* Mempertahankan rasio lanskap/melebar */
    }

    .project-visual img, .project-visual video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0; left: 0;
    }

    /* 5. Editorial Poster (Hapus Jarak Kosong) */
    .ep-grid, .ep-col { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 1.5rem !important; 
    }
    .ep-col-2 { 
        margin-top: 0 !important; /* Menghilangkan margin raksasa dari versi desktop */
    }

    /* 6. Zine Magazine (Native Horizontal Scroll) */
    .zine-slipstream-section { 
        height: auto !important; 
        padding: 3rem 0 !important; 
    }
    .zine-info { padding: 0 1.5rem !important; margin-bottom: 1.5rem !important; }
    .magazine-side-title { font-size: clamp(2rem, 8vw, 2.5rem) !important; line-height: 1.1 !important; }
    
    .zine-track-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Scroll licin di HP */
        scrollbar-width: none !important; 
    }
    .zine-track-container::-webkit-scrollbar { display: none !important; }
    
    .zine-track { 
        display: flex !important;
        padding: 0 1.5rem !important; 
        gap: 1rem !important; 
        width: max-content !important; 
    }
    .zine-page { 
        height: 45vh !important; 
        /* Kita ganti aspect-ratio & width auto dengan perhitungan pasti (calc) */
        width: calc(45vh / 1.414) !important; 
        flex-shrink: 0 !important; 
    }



    /* 7. Footer & Modals */
    .footer-bottom { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 1rem !important; 
        margin-top: 2rem !important; 
        text-align: center;
    }
    .modal-grid { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 1.5rem !important; 
    }
    .modal-text-col { 
        position: relative !important; 
        top: 0 !important; 
        border-left: none !important; 
        padding-left: 0 !important; 
        border-bottom: 1px solid rgba(255,255,255,0.2) !important; 
        padding-bottom: 1.5rem !important; 
    }

    /* Aktifkan enter di Mobile agar jadi 2 baris */
    .mobile-br { 
        display: block !important; 
    }

    /* Pastikan teksnya rata tengah saat ditumpuk */
    .marquee-track h1, 
    .marquee-text,
    .marquee-track span {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: normal !important;
    }
    /* --- ABOUT SECTION MOBILE FIX --- */
    .about-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 3rem !important; /* Memberi jarak antara teks About dan daftar pengalaman */
    }

    .about-text h2 {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        word-break: keep-all !important; /* Mencegah kata terpotong aneh seperti "M-e" */
        margin-bottom: 1.5rem !important;
    }

    .about-text p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* --- MODAL GALLERY MOBILE FIX --- */
    .modal-image-col {
        grid-template-columns: 1fr !important; /* Memaksa grid menjadi 1 kolom di layar kecil */
        gap: 1.5rem !important; /* Memberi jarak vertikal antar gambar */
    }

    /* --- NAVBAR MOBILE FIX --- */
    .glass-nav {
        align-items: center !important;
        flex-wrap: wrap !important; /* Mengizinkan menu turun baris dengan rapi jika layar HP sangat kecil */
        row-gap: 1rem !important;
    }

    .logo {
        font-size: 0.85rem !important;
    }

    .nav-links {
        display: flex !important;
        gap: 1rem !important; /* Jarak proporsional antar menu di HP */
    }

    .nav-links a {
        margin-left: 0 !important; /* Menghapus jarak 2rem bawaan desktop */
        font-size: 0.75rem !important; /* Menyesuaikan ukuran teks menu */
    }

    /* --- MODAL TITLE MOBILE FIX --- */
    .modal-title {
        /* Sedikit mengecilkan ukuran maksimalnya di HP agar kata yang panjang tidak terpotong */
        font-size: clamp(1.5rem, 8vw, 2rem) !important; 
        word-break: break-word !important;
    }

    .project-meta {
        display: flex !important;
        flex-wrap: wrap !important; /* Membiarkan teks turun baris jika layarnya sangat sempit */
        gap: 10px !important; /* Jarak aman antar teks */
        margin-bottom: 1rem !important;
    }

    /* Menambahkan garis pembatas (—) khusus di preview HP */
    .project-meta span:not(:last-child)::after {
        content: "—";
        margin-left: 10px;
        opacity: 0.5;
    }

    /* --- SKILLS MOBILE FIX --- */
    .skills-section { 
        margin-top: 4rem !important; 
        padding-top: 3rem !important; 
    }
    
    .skills-main-title { 
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important; 
        margin-bottom: 2rem !important; 
    }
    
    .skills-grid { 
        grid-template-columns: 1fr !important; /* Memaksa jadi 1 baris ke bawah */
        gap: 2.5rem !important; 
    }
}