/* ================== PENGATURAN DASAR & FONT ================== */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-color: #0a0a0a; /* Hitam pekat */
    font-family: 'Mont', sans-serif; /* Default font */
    color: #ffffff;
    display: flex;
    justify-content: center; /* Pusatkan horizontal */
    align-items: flex-start; /* Tempelkan di atas vertikal */
    overflow: hidden;
    background-image: url('img/bg.jpg');
    background-size: cover; /* Membuat gambar menutupi seluruh area */
    background-position: center center; /* Memusatkan gambar */
    background-repeat: no-repeat; /* Mencegah gambar berulang */
    background-attachment: fixed; /* Membuat gambar diam di tempat (efek parallax) */
}

body.no-scroll {
    overflow: hidden; /* Untuk halaman yang tidak boleh di-scroll (index & showcase) */
}

body.can-scroll {
    overflow-y: auto; /* Izinkan scroll vertikal (untuk halaman galeri) */
    overflow-x: hidden; /* Pastikan scroll horizontal tetap mati */
}

#scalable-wrapper {
    /* Ukuran desain Anda */
    width: 1920px;
    height: 1080px;
    /* FIX: Ubah titik acuan skala ke atas-tengah */
    transform-origin: top center;
    /* FIX: Pindahkan padding ke dalam wrapper agar konten tidak menempel ke tepi */
    padding: 1rem;
    box-sizing: border-box; /* Penting agar padding tidak menambah ukuran total wrapper */
    /* Agar header dan main di dalamnya bisa ditata */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================== PENDAFTARAN FONT LOKAL ================== */
@font-face {
    font-family: 'KingRimba';
    src: url('fonts/KingRimba.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cyber';
    src: url('fonts/CyberBrush.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mont';
    src: url('fonts/Montserrat.ttf') format('truetype');
}



/* ================== STRUKTUR LAYOUT UTAMA ================== */
.container {


    display: flex;
    width: 100%;
    height: 100vh;
}

.text-section {
    flex: 1.4; /* Rasio yang Anda pilih */
    padding: 1%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    align-items: flex-start;
}

.image-section {
    flex: 1;
    padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}

/* ========================================================== */
/* ========= GAYA TEKS (BAGIAN KIRI) - VERSI FINAL ========== */
/* ========================================================== */

h1 {
    font-family: 'Mont', sans-serif; /* FIX: Penulisan font-family */
    font-size: 3.7rem;
    font-weight: 900; /* FIX: Nilai font-weight yang valid */
    margin: 0 0 0 0;
    display: block;
}

.name-container {
    display: flex; /* Mengaktifkan Flexbox */
    align-items: center; /* Menyejajarkan teks berdasarkan garis dasarnya, hasil terbaik! */
    margin-top: 0;
    margin-bottom: 0rem; /* Jarak ke elemen di bawahnya (badge) */
}

.known-as-text {
    font-family: 'Mont', sans-serif;
    font-size: 3.7rem;
    font-weight: 900; /* FIX: Nilai font-weight yang valid */
    margin: 0;
    line-height: 1;
    /* FIX: Hapus display: block; karena sudah diatur oleh flexbox */
}

.logo-4gosze {
    font-family: 'Cyber', cursive;
    font-weight: 400;
    font-size: 5rem;
    /* FIX: Hapus semua margin, karena jarak diatur oleh flexbox dan container */
    margin: 0;
    margin-left: 2rem; /* Beri jarak antara "KNOWN as" dan "4GOSZE" */
}

/* Style untuk Badge (DITAMBAHKAN) */
.badge-container {
    margin-bottom: 1.5rem; /* Jarak dari badge ke deskripsi */
}

.badge {
    background-color: #fff;
    color: #0a0a0a;
    padding: 5px 15px;
    font-family: 'Mont', italic;
    font-weight: 700;
    font-size: 1.3rem;
    display: inline-block;
    font-style: italic;
}

/* Style untuk Deskripsi (DIPERBARUI) */
.description {
    font-family: 'Mont', sans-serif;
    max-width: 680px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #c0c0c0;
    margin: 0;
    margin-bottom: 3.5rem;
    text-align: justify;
}

/* Style untuk Tombol "START HERE" (DIPERBARUI TOTAL) */
.start-button {
    font-family: 'Mont', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
    /* Menggunakan Flexbox untuk kontrol penuh */
    display: inline-flex;
    align-items: center;
    width: auto; /* Biarkan lebarnya otomatis */
    /* Menambahkan transisi untuk efek hover yang mulus */
    transition: color 0.3s ease;
}

    .start-button::after {
        content: '';
        display: inline-block;
        background-color: #fff;
        width: 100px; /* Panjang awal garis */
        height: 2px;
        margin-left: 1rem;
        position: relative;
        /* Menambahkan transisi untuk efek hover yang mulus */
        transition: width 0.3s ease, background-color 0.3s ease;
    }

        /* Membuat kepala panah */
        .start-button::after::before {
            content: '';
            position: absolute;
            right: -1px;
            top: -3px;
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 6px solid #fff;
            /* Menambahkan transisi untuk efek hover yang mulus */
            transition: border-left-color 0.3s ease;
        }


/* ================= GAYA GAMBAR & GARIS (BAGIAN KANAN) ================= */
.main-image {
    width: 100%;
    max-width: 690px;
    height: auto;
    object-fit: cover;
    z-index: 1;
    transform: translateX(-50px); /* Geser 30px ke kanan. Anda bisa ubah nilainya */
}

.lines-overlay { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    fill: none;
    stroke: #ffffff;
    stroke-width: 15px;
}

/* ================== ANIMASI (SELEKTOR DIPERBARUI) ================== */
.anim-item {
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.main-image.anim-item {
    animation: fadeIn 1.2s ease-out 0.2s forwards;
}

.lines-overlay.anim-item path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 1.5s ease-out 0.8s forwards;
}

.text-section h1.anim-item {
    animation: fadeInSlideUp 0.8s ease-out 1.5s forwards;
}

.text-section .known-as-text.anim-item {
    animation: fadeInSlideUp 0.8s ease-out 1.6s forwards;
}

.text-section .logo-4gosze.anim-item {
    animation: fadeInSlideUp 0.8s ease-out 1.7s forwards;
}

.text-section .badge-container.anim-item { /* FIX: Targetkan container badge */
    animation: fadeInSlideUp 0.8s ease-out 1.9s forwards;
}

.text-section .description.anim-item {
    animation: fadeInSlideUp 0.8s ease-out 2.1s forwards;
}

.text-section .start-button.anim-item {
    animation: fadeInSlideUp 0.8s ease-out 2.3s forwards;
}

/* ========================================================== */
/* =============== EFEK HOVER (TAMBAHKAN INI) =============== */
/* ========================================================== */

/* --- Efek Hover untuk Gambar Profil --- */



/* --- Efek Hover untuk Tombol "START HERE" --- */

/* Saat mouse menyentuh tombol */
.start-button:hover {
    color: #c0c0c0; /* Warna teks sedikit meredup */
}

    /* Garisnya akan memanjang saat di-hover */
    .start-button:hover::after {
        width: 400px; /* Garis memanjang dari 100px menjadi 150px */
    }

/* Anda juga bisa mengubah warna panah saat di-hover jika mau */
/*
.start-button:hover::after {
    background-color: #f0c400; 
}
.start-button:hover::after::before {
    border-left-color: #f0c400;
}
*/

/* ========================================================== */
/* ========= DESAIN RESPONSIF (MEDIA QUERIES) =============== */
/* ========================================================== */

/* Aturan ini akan berlaku jika lebar layar 768px atau lebih kecil (tablet & HP) */
@media (max-width: 768px) {

    /* Mengubah layout utama dari 2 kolom menjadi 1 kolom tumpukan */
    .container {
        flex-direction: column; /* Mengubah arah flex dari baris menjadi kolom */
        height: auto; /* Biarkan tingginya otomatis menyesuaikan konten */
        padding: 8% 5%; /* Beri sedikit padding atas-bawah */
    }

    /* Membuat kedua section mengambil lebar penuh */
    .text-section,
    .image-section {
        flex: 1 1 100%; /* Izinkan elemen untuk grow, shrink, dan basisnya 100% */
        align-items: center; /* Pusatkan semua item di dalamnya */
        text-align: center; /* Pusatkan semua teks */
    }

    .image-section {
        margin-top: 3rem; /* Beri jarak antara teks dan gambar */
    }

    /* Menyesuaikan ukuran font agar tidak terlalu besar di layar kecil */
    h1 {
        font-size: 2.5rem; /* Perkecil dari 3.7rem */
        text-align: center;
    }

    .known-as-text {
        font-size: 1.2rem; /* Perkecil dari 1.5rem */
    }

    .logo-4gosze {
        font-size: 6rem; /* Perkecil dari 8rem */
    }

    .description {
        font-size: 0.9rem;
        text-align: center; /* Justify kurang bagus untuk layar sempit, ganti ke center */
        max-width: 90%; /* Lebarkan sedikit agar muat di layar hp */
    }

    .name-container {
        flex-direction: column; /* Tumpuk "KNOWN as" dan "4GOSZE" secara vertikal */
        align-items: center; /* Pusatkan */
        margin-bottom: 2rem;
    }

    .logo-4gosze {
        margin-left: 0; /* Hapus margin kiri karena sudah ditumpuk */
    }

    /* Mengatur ulang posisi gambar agar kembali ke tengah */
    .main-image {
        transform: none; /* Hapus efek geser ke kanan */
    }
}

/* ========================================================== */
/* ============ GAYA HALAMAN SHOWCASE (BARU) ================ */
/* ========================================================== */

/* Gaya dasar untuk body halaman showcase */
/* Kita perlu menimpa beberapa gaya dari halaman utama *

/* --- Header Navigasi Atas --- */
.showcase-header {
    /* Properti Positioning Baru */
    position: fixed; /* KUNCI UTAMA: Membuat header melayang & menempel di layar */
    top: 0;
    left: 0;
    z-index: 100; /* Memastikan header selalu di lapisan paling atas */
    /* Properti Layout yang Sudah Ada */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* FIX: Atur padding dan background di sini untuk hasil terbaik */
    padding: 2rem 5%;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Background gradasi agar teks tetap terbaca */
}

.scrollable-page .showcase-header {
    position: static;
    background: none;
}

.header-logo {
    font-family: 'Cyber', cursive;
    font-size: 2rem;
    flex-shrink: 0;
}

.header-logo-link {
    text-decoration: none; /* Menghapus garis bawah */
    color: inherit; /* Mengambil warna putih dari parent */
}

.header-line {
    flex-grow: 1; /* Membuat garis mengisi sisa ruang */
    height: 2px;
    background-color: #fff;
}

.header-socials {
    display: flex;
    gap: 2.5rem;
    flex-shrink: 0; /* Mencegah ikon mengecil */
}

    .header-socials a {
        color: #fff;
        text-decoration: none;
        font-weight: 700;
    }

.header-socials svg {
    width: 40px;  /* Atur ukuran ikon */
    height: 40px; /* Atur ukuran ikon */
    fill: #fff;   /* Memberi warna putih pada ikon. Mirip 'color' untuk teks */
    
    /* Menambahkan transisi agar perubahan warna saat hover mulus */
    transition: fill 0.3s ease;
}

/* Efek hover untuk ikon */
.header-socials a:hover svg {
    fill: #c0c0c0; /* Warna ikon sedikit meredup saat di-hover */
}

/* --- Grid Showcase Utama --- */
.showcase-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* FIX: Kita kembalikan ke flex-end agar box-nya rata bawah */
    gap: 3rem;
    flex-grow: 1;
    /* TAMBAHKAN BARIS AJAIB INI */
    margin-top: auto; /* Ini akan mendorong seluruh kontainer ke bawah */
}

/* --- Item Showcase Individual --- */
.showcase-link {
    text-decoration: none; /* Menghapus garis bawah dari link */
    color: #fff;
}

.showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Jarak antara judul dan kotak warna */
}

.showcase-title {
    font-family: 'Cyber', cursive;
    font-weight: 900;
    font-size: 2rem;
    letter-spacing: 2px;
    text-transform: uppercase; /* Membuat huruf menjadi kapital semua */
    transition: color 0.3s ease; /* Transisi untuk efek hover */
}

.showcase-box {
    width: 450px; /* Lebar kotak warna */
    height: 750px; /* Tinggi kotak warna */
    transition: transform 0.3s ease; /* Transisi untuk efek hover */

    filter: drop-shadow(8px 8px 0 rgba(30, 30, 30, 1));

}
/* Warna spesifik untuk setiap kotak */
.color-green {
    background-color: #68ff6e;
}

.color-red {
    background-color: #ff5252;
}

.color-blue {
    background-color: #5271ff;
}


/* --- Efek Hover untuk Item Showcase --- */
.showcase-link:hover .showcase-title {
    color: #c0c0c0; /* Judul sedikit meredup */
}

.showcase-link:hover .showcase-box {
    transform: translateY(-30px); /* Kotak sedikit terangkat */
    filter: drop-shadow(8px 8px 0 rgba(255, 255, 255, 1));
}

/* ========================================================== */
/* ========= ANIMASI HALAMAN SHOWCASE (BARU) ================ */
/* ========================================================== */

/* Keyframe baru untuk animasi garis header */
@keyframes drawLineAndFadeIn {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Aturan animasi untuk setiap elemen di halaman showcase */
/* Kita gunakan .showcase-page untuk memastikan aturan ini hanya berlaku di halaman showcase */

/* Aturan animasi untuk setiap elemen di header, sekarang berlaku umum */
.showcase-header .header-logo-link.anim-item {
    animation: fadeInSlideUp 0.6s ease-out 0.2s forwards;
}

.showcase-header .header-line.anim-item {
    transform-origin: left;
    animation: drawLineAndFadeIn 1s ease-out 0.4s forwards;
}

.showcase-header .header-socials.anim-item {
    animation: fadeInSlideUp 0.6s ease-out 0.6s forwards;
}


/* Aturan animasi untuk item di halaman showcase (biarkan seperti ini) */
.showcase-container .showcase-link:nth-child(1).anim-item {
    animation: fadeInSlideUp 0.7s ease-out 1.0s forwards;
}

.showcase-container .showcase-link:nth-child(2).anim-item {
    animation: fadeInSlideUp 0.7s ease-out 1.2s forwards;
}

.showcase-container .showcase-link:nth-child(3).anim-item {
    animation: fadeInSlideUp 0.7s ease-out 1.4s forwards;
}

/* ========================================================== */
/* ========= GAYA HALAMAN GALERI DETAIL (BARU) ============== */
/* ========================================================== */

.gallery-page-content {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    /* FIX: Beri padding atas seukuran tinggi header + sedikit ruang tambahan */
    padding-top: 2rem;
    /* Kita pindahkan padding kiri-kanan ke sini */
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
}

    /* Menambahkan ini untuk menyembunyikan scrollbar di Chrome, Safari, Edge */
    .gallery-page-content::-webkit-scrollbar {
        display: none;
    }

/* --- Bagian Intro --- */
.gallery-intro {
    text-align: center;
    padding: 3rem 1rem;
}

    .gallery-intro h1 {
        font-family: 'Cyber', sans-serif;
        font-weight: 900;
        font-size: 3rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 1rem;
    }

    .gallery-intro p {
        font-size: 1.1rem;
        color: #c0c0c0;
        max-width: 900px;
        margin: 1rem auto 3rem auto;
        line-height: 1.6;
        text-align: justify;
        text-align-last: center;
    }

    .gallery-intro .back-link {
        color: white;
        font-size: 1rem;
        text-decoration: none;
        border-bottom: 2px solid white;
        padding-bottom: 5px;
        font-weight: 700;
        transition: color 0.3s ease, border-color 0.3s ease;
    }

        .gallery-intro .back-link:hover {
            color: #c0c0c0;
            border-color: #c0c0c0;
        }


/* --- Bagian Grid Gambar --- */
.gallery-grid {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    /* Menggunakan CSS Grid untuk layout yang rapi dan responsif */
    display: grid;
    /* Membuat kolom yang lebarnya minimal 300px, dan akan mengisi sisa ruang */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem; /* Jarak antar gambar */
}

.gallery-item {
    display: block;
    overflow: hidden; /* Menyembunyikan bagian gambar yang keluar saat hover */
    position: relative;
}

    .gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        /* Kunci agar gambar mengisi kotak tanpa gepeng */
        object-fit: cover;
        /* Transisi untuk efek zoom saat hover */
        transition: transform 0.4s ease;
    }

    /* Efek Hover untuk gambar di galeri */
    .gallery-item:hover img {
        transform: scale(1.05); /* Sedikit zoom saat kursor di atas gambar */
    }

.gallery-item.ratio-square .showcase-box {
    height: auto; /* PENTING: Hapus tinggi tetap agar rasio bisa bekerja */
    aspect-ratio: 1 / 1; /* KUNCI UTAMA: Membuat gambar menjadi persegi */
}

    /* ========================================================== */
/* ========= ANIMASI HALAMAN GALERI DETAIL (BARU) =========== */
/* ========================================================== */

/* Animasi untuk bagian Intro */
.gallery-intro h1.anim-item {
    animation: fadeInSlideUp 0.7s ease-out 1.2s forwards;
}

.gallery-intro p.anim-item {
    animation: fadeInSlideUp 0.7s ease-out 1.4s forwards;
}

.gallery-intro .back-link.anim-item {
    animation: fadeInSlideUp 0.7s ease-out 1.6s forwards;
}

/* HAPUS SEMUA .gallery-grid .gallery-item:nth-child(...) */
/* DAN GANTI DENGAN SATU ATURAN INI */

.gallery-grid .gallery-item.anim-item {
    /* Menerapkan animasi dasar tanpa jeda */
    animation: fadeInSlideUp 0.6s ease-out forwards;
    /* Jeda atau 'delay' akan kita tambahkan via JavaScript */
}

/* TAMBAHKAN ATURAN BARU INI di style.css */

/* Mengatur item galeri dengan rasio landscape */
.gallery-item.ratio-landscape .showcase-box {
    height: auto; /* Override tinggi tetap */
    aspect-ratio: 16 / 9; /* KUNCI UTAMA: Rasio landscape (widescreen) */
}

.gallery-item img.showcase-box {
    /* ... (width, object-fit, transition) ... */
    height: 750px; /* Tinggi default untuk rasio potret */
}

.gallery-item.ratio-portrait-43 .showcase-box {
    height: auto;
    /* Rasio 3:4 untuk potret (lebar 3, tinggi 4) */
    aspect-ratio: 3 / 4;
}
/* ========================================================== */
/* ===== KUSTOMISASI GAYA GLIGHTBOX (VERSI DIPERKUAT) ======= */
/* ========================================================== */

/* 1. Mengatur KONTAINER panel deskripsi */
.gslide-description {
    background: transparent !important; /* Latar belakang tetap transparan */
    /* FIX UTAMA: Beri padding yang cukup di semua sisi agar kontainer punya ruang */
    padding: 0px 0px !important;
    /* Memastikan posisinya selalu di bawah dan membentang */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* Agar padding tidak merusak lebar */
}

    /* 2. Mengatur TEKS judul di dalamnya */
    .gslide-description .gslide-title {
        font-family: 'Mont', sans-serif;
        color: #ffffff !important; /* Tambahkan !important di sini */
        font-size: 1.2rem; /* Anda bisa sesuaikan ukurannya */
        font-weight: 700;
        text-align: center;
        /* Menghapus margin atau padding bawaan yang mungkin ada */
        margin: 0;
        padding: 0;
        /* Memastikan teks terlihat jelas */
        display: block;
        width: 100%;
    }
.gslide-inner-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Memusatkan gambar secara horizontal */
    align-items: center; /* Memusatkan gambar secara vertikal */
}

/* 2. Pastikan pembungkus gambar juga fleksibel */
.gslide-media {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

    /* 3. Beri batasan tinggi pada gambar agar tidak terlalu besar */
    .gslide-media img {
        /* Batasi tinggi gambar maksimal 80% dari tinggi layar */
        /* Ini untuk memberi ruang bagi tombol close dan deskripsi */
        max-height: 85vh;
        width: auto;
        height: auto;
    }