/* ========================================================================================= */
/* NOCTURNA STUDIO - DARK LUXURY THEME CSS (FINAL FIX: SLIDER CALC + GALLERY INTEGRITY) */
/* ========================================================================================= */

/* ========================================================================= */
/* --- 0. CUSTOM LUXURY SCROLLBAR (WEBKIT BROWSERS) --- */
/* ========================================================================= */

/* Menghapus highlight biru saat tap di Mobile */
* {
    -webkit-tap-highlight-color: transparent; /* Ajaib! */
}

/* Lebar Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

/* Track (Jalur) - Hitam Pekat */
::-webkit-scrollbar-track {
    background: #0a0a0a; 
}

/* Handle (Batang Geser) - Emas Redup */
::-webkit-scrollbar-thumb {
    background: #555; /* Warna default (abu gelap) */
    border-radius: 5px;
    border: 2px solid #0a0a0a; /* Memberi jarak dari track */
}

/* Handle saat di-hover - Emas Menyala */
::-webkit-scrollbar-thumb:hover {
    background: #bf9b30; /* GOLD NOCTURNA */
}

::selection {
    background: #bf9b30; /* Background Blok jadi EMAS */
    color: #000000;      /* Teks jadi HITAM */
    text-shadow: none;
}

/* Untuk Firefox */
::-moz-selection {
    background: #bf9b30;
    color: #000000;
    text-shadow: none;
}

/* --- 1. GLOBAL RESET & TYPOGRAPHY (DARK) --- */
html { 
    box-sizing: border-box; 
    scroll-behavior: smooth; /* INI KUNCINYA (Silky Scroll) */
}

*, *:before, *:after { 
    box-sizing: inherit; 
}

ul, ol { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

body {
    /* KUNCI FIX: Path Relatif yang BENAR dari assets/images/ */
    background: #121212 url('../images/cinematic-texture.webp') no-repeat center center fixed; 
    background-size: cover; 
    
    color: #a0a0a0;

    /* --- TAMBAHAN BARU: TRANSISI HALUS (FADE IN) --- */
    opacity: 1;                /* Kondisi akhir: Terlihat jelas */
    transition: opacity 0.5s ease-in-out; /* Logika animasi: Durasi 0.5 detik */
}

body.is-preload {
    opacity: 0;            /* Sembunyikan halaman */
    animation: none;       /* Matikan animasi lain agar tidak berat */
    transition: none;      /* Reset transisi */
}

h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; color: #ffffff; font-weight: 400; letter-spacing: 1px; line-height: 1.3; margin-bottom: 0.5em; }
a { color: #f0f0f0; text-decoration: none; transition: color 0.3s ease; }
a:hover { color: #bf9b30; } 
.button { background: transparent; color: #bf9b30; border: 1px solid #bf9b30; padding: 1em 3em; letter-spacing: 2px; text-transform: uppercase; font-size: 0.8em; display: inline-block; transition: 0.3s; }
.button.primary { background: #bf9b30; color: #000; border-color: #bf9b30; }


/* --- 2. HEADER SPLIT (FINAL PERMANENT STYLE) --- */
#header {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%); 
    width: 100%; height: 90px; z-index: 9999;
    
    /* KUNCI: BACKGROUND HITAM PERMANEN */
    background: #000000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.8); /* Tambah shadow agar terlihat 'melayang' */
    
    display: grid; grid-template-columns: 2fr 1fr 2fr; max-width: 1400px; padding: 0 4em; 
    font-family: 'Playfair Display', serif; color: #fff;
}
.nav-left ul li a, .nav-right ul li a { 
    font-family: 'Playfair Display', serif; /* Perjelas target */
    font-weight: 600; /* Semi-Bold agar tetap terbaca */
    letter-spacing: 2px; /* Tambah jarak untuk kesan editorial */
    text-transform: uppercase; /* Opsional: Membuat semua huruf kapital */
}
/* KONTROL NAVIGASI KIRI */
.nav-left { grid-column: 1 / 2; display: flex; justify-content: flex-end; align-items: center; }
.nav-left ul { display: flex; } 
/* FIX: Jarak Horizontal DITINGKATKAN (misalnya, dari 1.5em menjadi 2.5em) */
.nav-left ul li { margin: 0 4em; line-height: 90px; } 


/* KONTROL NAVIGASI KANAN */
.nav-right { grid-column: 3 / 4; display: flex; justify-content: flex-start; align-items: center; }
.nav-right ul { display: flex; }
/* FIX: Jarak Horizontal DITINGKATKAN */
.nav-right ul li { margin: 0 4em; line-height: 90px; }

/* LOGO TENGAH & NAMA */
.header-center { grid-column: 2 / 3; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 10000; position: relative; }
#logo-icon { width: 30px; height: auto; position: absolute; top: 20px; }
.logo-name { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 1em; letter-spacing: 3px; font-weight: 700; line-height: 1; color: #fff; z-index: 10000; }

/* KUNCI: HAPUS SEMUA KODE ANIMASI/STATE */
#header.transparent-header, #header.scrolled-header { 
    background: #000000; /* Pastikan semua state tetap hitam */
}


/* --- 3. HERO SLIDER (FINAL FIX DENGAN CALC) --- */
#hero-slider {
    position: relative; 
    top: 0; 
    width: 100%; 
    height: calc(100vh - 90px); 
    overflow: hidden; 
    background: #000; 
    z-index: 0;
    margin-top: 0;
}
#hero-slider .slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; 
    background-position: center; 
    opacity: 0; transition: opacity 1.5s ease;
}
#hero-slider .slide:after { background: rgba(0,0,0,0.2); } 

/* Caption positioning (relatif terhadap Slider) */
.caption {
    position: absolute; 
    /* Ubah Penempatan: Rata Kiri dengan margin lebih dalam */
    bottom: 8%; /* Naikkan sedikit dari bawah */
    left: 2%;   /* Menjorok dari kiri (80px -> 10% agar adaptif) */
    
    width: 500px; /* Lebar sedikit diperluas untuk kesan editorial */
    max-width: 50%; /* Lebih adaptif di layar besar */
    text-align: left; /* Teks rata kiri */
    
    background: rgba(0, 0, 0, 0.5); /* Gelap sedikit agar teks kontras */
    border-left: 2px solid #bf9b30; /* Garis emas sebagai aksen */
    padding: 20px;
    
    /* INITIAL STATE: Transparan dan bergeser JAUH ke kiri (Slide In) */
    opacity: 0; 
    transform: translateX(-100px); /* KUNCI ANIMASI: Mulai 100px dari kiri */
    
    /* Transisi untuk opacity dan transform */
    transition: opacity 0.8s ease-out 0.8s, transform 0.8s ease-out 0.8s; /* Delay 0.8s agar dramatis */
}

/* Ukuran Teks (Lebih Kecil) */
.caption h1 { 
    font-size: 1.3em; /* Lebih kecil dari 2em sebelumnya */
    color: #fff; 
    margin-bottom: 0.1em;
}
.caption p { 
    font-size: 0.7em; /* Kecil */
    color: #ddd; 
    letter-spacing: 3px; /* Tambah jarak huruf agar elegan */
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

/* FINAL STATE: KETIKA CLASS is-active DITAMBAHKAN OLEH JS */
.slide.is-active .caption { 
    opacity: 1; 
    transform: translateX(0); /* KUNCI ANIMASI: Geser ke posisi normal */
}


/* --- 4. CONTENT FLOW & GALLERY FIXES --- */

#main-content { 
    padding: 6em 2em; /* Tambah padding atas/bawah agar ruang bernapas */
    text-align: center; 
    margin-top: 0; 
    position: relative; /* KUNCI 1: Dasar untuk Aksen Sudut Absolut */
    background: #151515; /* Sedikit lebih terang dari hitam background */
}

/* Styling Judul H2 */
#main-content h2 {
    font-size: 2.5em; /* Ukuran yang kuat */
    margin-bottom: 0.5em;
    color: #fff;
    letter-spacing: 1.5px;
}

/* Styling Paragraf P */
#main-content p {
    font-family: 'Lora', serif;
    font-size: 1.1em; /* Sedikit lebih besar */
    line-height: 1.8;
    max-width: 800px; /* Batasi lebar agar mudah dibaca */
    margin: 0.5em auto 0;
    color: #ccc;
    letter-spacing: 0.5px;
}


/* KUNCI 2: AKSEN SUDUT EMAS (4 Sudut) */

/* Sudut Kiri Atas & Kanan Bawah */
#main-content::before {
    content: '';
    position: absolute;
    width: 30px; 
    height: 30px;
    border: 1px solid #bf9b30; /* Warna GOLD */
    z-index: 10;
}

/* Kiri Atas */
#main-content::before {
    top: 30px; 
    left: 30px; 
    border-right: none; /* Hilangkan garis kanan */
    border-bottom: none; /* Hilangkan garis bawah */
}

/* Kanan Bawah */
#main-content::after {
    content: '';
    position: absolute;
    width: 30px; 
    height: 30px;
    border: 1px solid #bf9b30;
    z-index: 10;
    
    bottom: 30px; 
    right: 30px; 
    border-left: none; /* Hilangkan garis kiri */
    border-top: none; /* Hilangkan garis atas */
}

/* Tambahan: Sudut Kanan Atas & Kiri Bawah (Jika Diperlukan 4 Sudut Penuh) */
/* Jika ingin aksen 4 sudut penuh (seperti bingkai foto): */
#main-content::after {
    /* ... Tambahkan properti untuk Kanan Bawah ... */
}
/* Konten Utama dimulai tepat di bawah Hero Slider */
#main-content { 
    padding: 4em 2em; 
    text-align: center; 
    margin-top: 0; 
}
#portfolio-section { 
    padding: 6em 0; 
    background: #121212; 
    text-align: center; 
}

/* KUNCI FIX 4: GALERI CUSTOM GRID HARUS SINKRON */
.gallery-row {
    display: flex; justify-content: center; gap: 10px; 
    max-width: 1400px; margin: 10px auto; padding: 0 10px; 
}
.gallery-row .thumb {
    overflow: hidden; position: relative; box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}
.gallery-row .thumb a.image { width: 100%; height: 0; display: block; }

/* Sizing Logic (Custom Grid) */
.gallery-2-col .thumb { width: calc(50% - 5px); } 
.portrait-3-4 a.image { padding-bottom: 133.33%; } 
.gallery-1-col .thumb { width: 100%; }
.landscape-16-9 a.image { padding-bottom: 56.25%; } 

.gallery-row .thumb img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}


/* --- 5. MAIN CONTENT & SERVICE --- */
#full-service-package { 
    background-color: #0a0a0a; 
    padding: 6em 0; 
    text-align: center; 
}
#full-service-package h2 {
    margin-bottom: 3em; 
}

/* KUNCI FIX 1: Styling Judul & Aksen Gold */
#full-service-package h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2em; /* Atur ukuran judul */
    color: #bf9b30; /* Warna GOLD */
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative; /* Dasar untuk pseudo-element */
    display: inline-block; /* Agar width content sesuai teks */
    padding: 0 0.5em;
    margin-bottom: 2.5em; /* Jarak yang cukup ke Kartu Service */
}

/* KUNCI FIX 2: Tambahkan Garis Vertikal Pendek (Aksen Gold) */
#full-service-package h2::before,
#full-service-package h2::after {
    content: "";
    position: absolute;
    width: 2px; /* Tebal garis */
    height: 40px; /* Panjang garis */
    background-color: #bf9b30; /* Warna GOLD */
    top: 50%;
    transform: translateY(-50%);
}

#full-service-package h2::before {
    left: -10px; /* Posisi di kiri judul */
}

#full-service-package h2::after {
    right: -10px; /* Posisi di kanan judul */
}

/* Split Content (3 Kolom Flex) */
.split-content {
    display: flex; 
    justify-content: center; 
    gap: 20px; /* Jarak antar kartu lebih rapat */
    max-width: 1400px; 
    margin: 0 auto;
    padding: 0 2em;
}

/* KUNCI FIX 1: Styling Kartu Service SQUARE (1:1) dan Background Image */
.service-pillar {
    /* Set lebar setiap kartu menjadi 1/3 dari lebar kontainer dikurangi jarak */
    width: calc(33.333% - 13.333px); /* Hitungan 3 kolom dengan gap 20px */
    
    position: relative; 
    overflow: hidden;
    cursor: pointer;
    
    /* KUNCI FIX 2: FORCE 1:1 RATIO dengan padding hack */
    padding-bottom: calc(33.333% - 13.333px); /* Tinggi = Lebar */
    height: 0; /* Penting untuk padding hack */
    
    /* Atur Background Image */
    background-size: cover; 
    background-position: center; 
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}

/* KUNCI FIX 3: OVERLAY GELAP KUAT */
.service-pillar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* KETIK ULANG BARIS INI: */
    background: rgba(0, 0, 0, 0.75); /* Overlay 75% hitam */
    z-index: 1;
    transition: background-color 0.3s ease;
}

/* KONTEN TEXT DI DALAM KARTU (Pillar-Content) */
.pillar-content {
    position: absolute; /* Kunci penengahan teks */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* Menengahkan horizontal & vertikal */
    z-index: 2;
    color: white; /* Pastikan teks putih */
    width: 90%;
    text-align: center;
}

/* Hover Effect: Kurangi Overlay saat di-hover */
.service-pillar:hover::after {
    background: rgba(0, 0, 0, 0.6); /* Sedikit lebih transparan saat di-hover */
}

/* Tata Letak Ikon dan Teks */
.service-pillar .icon { 
    font-size: 2.5em; 
    color: #bf9b30; 
    margin-bottom: 0.8em; 
    display: block; 
}
.service-pillar h4 {
    font-family: 'Playfair Display', serif; 
    font-size: 1.4em; /* Sedikit lebih besar agar menonjol */
    letter-spacing: 1px;
    margin-bottom: 0.5em;
}
.service-pillar p {
    font-size: 0.9em;
    color: #d0d0d0;
    line-height: 1.6;
}


/* --- 6. FOOTER (NOCTURNA EXCLUSIVE - CENTER ALIGNED) --- */

#footer { 
    background: #000000; 
    padding: 0; 
    border-top: 1px solid #1a1a1a;
    text-align: center;
}

/* KUNCI FIX 1: Main Content Styling */
.footer-main-content {
    /* Meningkatkan Transparansi Footer */
    background: rgba(0, 0, 0, 0.9); /* 90% Opak, 10% Tembus */
    padding: 5em 2em; 
    /* ... (sisa styling) ... */
}

/* Garis Emas Pembeda dari konten atas */
.footer-main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* Garis emas pendek di tengah */
    height: 1px;
    background-color: #bf9b30; /* Warna GOLD */
}

/* Logo/Judul Footer */
.footer-logo { 
    font-size: 2em; /* Sedikit lebih besar */
    font-family: "Playfair Display", serif; /* Pastikan font mewah */
    color: #bf9b30; 
    letter-spacing: 0.2em; /* Jarak huruf lebar */
    margin-bottom: 1.5em;
    display: inline-block;
    
    /* Terapkan Efek Metallic Gold Text di sini juga */
    background: linear-gradient(to right, #bf9b30 0%, #f6e27a 45%, #bf9b30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    transition: background-position 0.5s;
}

.footer-logo:hover {
    background-position: right center;
}

/* Navigasi Horizontal (Site Map) */
.footer-nav-links {
    margin-bottom: 2.5em;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.footer-nav-links a {
    color: #a0a0a0;
    margin: 0 1em;
}
.footer-nav-links a:hover {
    color: #bf9b30;
}
.footer-nav-links .separator {
    color: #333; /* Garis pemisah abu-abu gelap */
    display: inline-block;
}

/* --- 6. FOOTER --- */

/* Ikon Sosial (Container) */
.footer-social-icons {
    list-style: none; /* Pastikan tidak ada bullet point */
    display: inline-block;
    padding: 0;
    margin: 0 0 2em 0;
}
.footer-social-icons li {
    display: inline-block;
    margin: 0 1em; /* Jarak antar ikon */
}

/* KUNCI FIX: Filter Emas pada PNG */
.footer-social-icons .social-icon-png {
    width: 45px; /* Ukuran ikon yang pas */
    height: auto;
    
    /* FILTER EMAS (Mengubah Ikon Hitam/Dark menjadi Warna Emas #bf9b30) */
    /* Ini adalah filter kompleks yang meniru warna emas */
    filter: brightness(0) saturate(100%) 
            invert(48%) sepia(26%) saturate(1500%) 
            hue-rotate(5deg) brightness(80%) contrast(120%);
    
    opacity: 0.8; /* Sedikit redup saat normal */
    transition: all 0.3s ease;
}

/* Hover Effect */
.footer-social-icons .social-icon-png:hover {
    opacity: 1; /* Terang penuh saat di-hover */
    transform: scale(1.1);
}


/* KUNCI FIX 3: Copyright Bar (Floating & Minimalis) */
.footer-copyright-bar {
    /* Hapus background hitam & border */
    background: transparent; 
    border-top: none; 
    
    padding: 0 2em 4em 2em; /* Padding bawah besar sebagai penutup halaman */
}

.footer-copyright-bar .copyright {
    font-size: 0.7em; /* Font sangat kecil (Editorial Standard) */
    color: #444; /* Abu sangat gelap/samar */
    margin: 0;
    letter-spacing: 0.25em; /* Spasi SANGAT lebar */
    text-align: center; 
    text-transform: uppercase;
}

.footer-copyright-bar .copyright a {
    color: #666;
    border-bottom: none;
    transition: color 0.3s;
}

.footer-copyright-bar .copyright a:hover {
    color: #bf9b30; /* Emas saat di-hover */
}


/* ========================================================================= */
/* --- FINAL FIX: ISOLASI ICON FONT AWESOME --- */
/* ========================================================================= */

/* Kita menargetkan semua elemen yang menggunakan class 'fa' (Font Awesome) */
.fa {
    /* PENTING: Paksa font-family agar selalu FontAwesome */
    font-family: 'FontAwesome', sans-serif !important;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Pastikan Display: inline-block agar icon memiliki dimensi */
    display: inline-block; 
}

/* Khusus untuk list kontak, pastikan ikon di depan teks */
.contact-list li .icon {
    /* Kita pastikan elemen <span> yang memegang ikon memiliki aturan fa yang kuat */
    font-family: 'FontAwesome', sans-serif !important;
}

/* Jika Anda menggunakan icon di Footer social links: */
.footer-social-icons li a .fa {
    font-family: 'FontAwesome', sans-serif !important;
}

/* ========================================================================= */
/* --- 8. RESPONSIVE MEDIA QUERIES (FINAL) --- */
/* ========================================================================= */

@media screen and (max-width: 980px) {
    /* Header Mobile Fix */
    #header { height: 4em; padding: 0 2em; max-width: 100%; transform: none; left: 0; display: flex; justify-content: space-between; }
    body { padding-top: 4em; } 
    .nav-left, .nav-right, .logo-name { display: none; } 
    .header-center { position: static; transform: none; display: flex; align-items: center; justify-content: flex-start; order: -1; width: auto; }
    #logo-icon { width: 30px; margin-right: 10px; }
    
    /* Global Content Padding */
    .split-content, #contact-info-section { 
        padding: 0 1.5em; /* Padding horizontal lebih kecil */
    }

    /* FIX CONTACT PAGE: STACK 2 KOLOM (Info + Map) menjadi 1 KOLOM */
    #contact-info-section {
        flex-direction: column; /* Menumpuk dari horizontal ke vertikal */
        gap: 30px;
    }
    
    .map-container {
        padding: 0; /* Hapus padding yang mengganggu di mobile */
    }
    .map-container iframe {
        height: 250px; /* Tinggi peta sedikit dikurangi */
    }

    /* FIX FORMULIR: JANGAN TERLALU LEBAR */
    .contact-form-container.form-center-style {
        padding: 2em 1.5em; /* Padding internal dikurangi */
        max-width: 90%;
    }
    .contact-form-container .field-group {
        flex-direction: column; /* Input 2 kolom menjadi 1 kolom */
        gap: 0;
    }
    
    /* Gallery Mobile Fix */
    .gallery-row { flex-direction: column; }
    .gallery-2-col .thumb { width: 100%; }
    .portrait-3-4 a.image { padding-bottom: 75%; }

    /* Footer Mobile Fix */
    .footer-nav-links { font-size: 0.8em; }
    .footer-nav-links a { margin: 0 0.5em; }
}


/* ========================================================================= */
/* --- 5.5. PACKAGES PAGE (Full-Width Alternating List) --- */
/* ========================================================================= */

.page-content {
    padding-top: 5em;
    background: #0a0a0a;
}
.major-header {
    text-align: center;
    padding: 3em 0 2em;
    max-width: 800px;
    margin: 0 auto;
}
.major-header .main-title {
    font-size: 3em;
    color: #bf9b30; /* GOLD */
    letter-spacing: 4px;
    margin-bottom: 0.2em;
}
.major-header .subtitle {
    font-family: 'Lora', serif;
    font-size: 1.1em;
    color: #ccc;
}

/* KUNCI FIX 1: PACKAGE CARD (Full-Width, Alternating) */
.package-card {
    position: relative;
    width: 100%;
    height: 70vh; /* Tinggi yang dramatis */
    margin-bottom: 3em;
    overflow: hidden;
    background-color: #000;
}

/* Base Image Background (Diisi oleh JS) */
.package-card:after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* TAMBAHKAN LINE INI UNTUK JS BISA BEKERJA */
    background-image: var(--package-bg-url); 
}

/* KUNCI FIX 2: OVERLAY GRADIENT (Fade Statis) */
.package-card:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
}

/* KIRI (Normal) - Fade KIRI (konten di KIRI) */
.package-card:not(.alternating):before {
    /* Gradient: Dari Hitam Penuh (Kiri) ke Transparan (Kanan) */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 40%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%);
}

/* KANAN (Alternating) - Fade KANAN (konten di KANAN) */
.package-card.alternating:before {
    /* Gradient: Dari Transparan (Kiri) ke Hitam Penuh (Kanan) */
    background: linear-gradient(to left, rgba(0, 0, 0, 0.95) 40%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%);
}

/* Konten Teks */
.package-content {
    position: absolute;
    top: 0;
    width: 45%; /* Ambil kurang dari setengah lebar */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4em;
    z-index: 3;
}
.package-content.align-left { left: 0; text-align: left; }
.package-content.align-right { right: 0; text-align: right; }

/* KUNCI FIX 3: Styling List Emas/Misterius */
.package-title {
    font-size: 2.5em;
    color: #fff;
    letter-spacing: 3px;
    margin-bottom: 0.1em;
}
.package-price {
    font-family: 'Montserrat', sans-serif;
    color: #bf9b30; /* GOLD */
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 2em;
}
.feature-list {
    list-style: none;
    margin-bottom: 3em;
}
.feature-list li {
    font-family: 'Lora', serif;
    font-size: 1em;
    color: #ccc;
    margin-bottom: 0.8em;
    line-height: 1.5;
}
.feature-list li:before {
    content: '★'; /* Simbol bintang emas */
    color: #bf9b30;
    margin-right: 0.8em;
}

/* Tombol Info Lanjut */
.info-button {
    font-family: 'Montserrat', sans-serif;
    padding: 1.2em 4em;
    font-weight: 700;
}


/* --- 6.5. MODAL STYLING (Untuk Info Lanjut) --- */
.modal-overlay {
    display: none; /* Default hidden */
    position: fixed;
    z-index: 10000; /* Paling atas */
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9); /* Overlay sangat gelap */
    padding-top: 50px;
}
.modal-content {
    background-color: #121212;
    margin: 10% auto; 
    padding: 40px;
    border: 1px solid #bf9b30; /* Border emas */
    width: 80%; max-width: 500px;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.7);
}
.modal-title {
    font-size: 2em;
    color: #bf9b30;
}
.modal-content p {
    font-size: 1em;
    color: #aaa;
    margin-bottom: 1.5em;
}
.modal-content .close-btn {
    color: #bf9b30;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px; right: 20px;
}
.modal-wa-button {
    margin-top: 1em;
    background: #bf9b30;
    color: #000;
}

/* ========================================================================= */
/* --- 7. CONTACT PAGE (Flow Layout: Info Atas + Form Bawah) --- */
/* ========================================================================= */

.page-content-flow {
    /* Meningkatkan Transparansi agar background body lebih terlihat */
    background: rgba(18, 18, 18, 0.7); /* 90% Opak, 10% Tembus */
    padding-bottom: 5em;
}
.page-content-flow .major-header {
    padding: 5em 0 2em;
}


/* KUNCI FIX A: KONTAK INFORMASI (SPLIT 2 KOLOM RATA TENGAH) */
#contact-info-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 4em;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.contact-details {
    /* Kolom Detail Kontak (Kiri) -> Porsi lebih kecil */
    flex: 0.9; 
    text-align: left;
    padding-right: 20px;
}
.details-title {
    font-size: 1.8em;
    color: #bf9b30; /* Emas */
    margin-bottom: 1em;
    letter-spacing: 2px;
}
.details-title.sub-title {
    font-size: 1.2em; /* Lebih kecil dari judul utama */
    color: #f0f0f0;
    margin-top: 1.5em; /* Jarak ke atas */
    margin-bottom: 0.5em;
    border-bottom: 1px solid #1a1a1a; /* Garis tipis pemisah */
    padding-bottom: 5px;
}
.consultation-note {
    font-size: 0.9em;
    color: #999;
    font-style: italic;
    margin-top: 1em;
    text-align: left; /* Biar rapi */
}
.contact-list {
    list-style: none;
    padding: 0;
}
.contact-list li {
    font-family: 'Lora', serif;
    color: #ccc;
    margin-bottom: 1em;
    font-size: 1em;
}
.contact-list li .icon {
    color: #bf9b30;
    width: 20px; /* Lebar icon agar sejajar */
    text-align: center;
    margin-right: 0.8em;
}

/* GMaps Container */
.map-container {
    /* Kolom Map/Alamat (Kanan) -> Porsi lebih besar */
    flex: 1.1; 
    min-height: 300px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #1a1a1a;
}
.map-container iframe {
    display: block;
}
.map-address-title {
    margin-bottom: 0.5em;
}
.map-address {
    font-size: 1em;
    color: #ccc;
    margin-bottom: 1em;
    text-align: left;
    /* KUNCI FIX: Pastikan teks bisa mengisi ruang tanpa terpotong */
    word-wrap: break-word; 
}

/* KUNCI FIX B: ORNAMEN PEMISAH EMAS (Divider) */
.divider-ornament {
    width: 100px;
    height: 1px;
    background-color: #bf9b30;
    margin: 6em auto 4em; /* Jarak atas bawah yang dramatis */
    position: relative;
}

/* KUNCI FIX C: FORMULIR DI TENGAH (MENGGANTI FULL SCREEN) */
.contact-form-container.form-center-style {
    position: relative;
    z-index: 5;
    width: 90%; 
    max-width: 800px; 
    padding: 3em 4em;
    margin: 0 auto; /* Tengah */
    text-align: center;
    
    background: rgba(18, 18, 18, 0.9);
    border: 1px solid #bf9b30; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}

/* KUNCI FIX 1: FORM CONTAINER (Semi-Opaque Frame) */
.contact-form-container {
    position: relative;
    z-index: 5;
    width: 90%; 
    max-width: 800px; /* Lebar maksimal */
    padding: 3em 4em;
    text-align: center;
    
    /* GAYA SEMI-OPAQUE FRAME */
    background: rgba(18, 18, 18, 0.9); /* Abu-abu tua transparan (Taupe) */
    border: 1px solid #bf9b30; /* Border Emas */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}

/* KUNCI FIX 2: JUDUL DENGAN ORNAMEN ABSTRAK (Garis Emas) */
.form-title-ornament {
    font-size: 2.5em;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 2em;
    position: relative;
    display: inline-block;
}

/* Ornamen Kiri (Memulai Garis) */
.ornament-bracket-left, .ornament-bracket-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px; /* Panjang Garis */
    height: 1px;
    background-color: #bf9b30;
}

.ornament-bracket-left {
    left: -70px; /* Jarak dari teks */
}
.ornament-bracket-right {
    right: -70px; /* Jarak dari teks */
}

/* Styling Formulir Input */
#contact-form input, #contact-form textarea, #contact-form select {
    background: rgba(255, 255, 255, 0.05); /* Input field yang sangat gelap */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
    padding: 1em;
    width: 100%;
    margin-bottom: 1em;
    transition: border-color 0.3s ease;
}
#contact-form input:focus, #contact-form textarea:focus, #contact-form select:focus {
    border-color: #bf9b30; /* Emas saat focus */
    box-shadow: 0 0 5px rgba(191, 155, 48, 0.5);
}
#contact-form input::placeholder, #contact-form textarea::placeholder {
    color: #999;
}

/* Grouping Input (2 Kolom) */
.field-group {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}
.field-group input, .field-group .select-wrapper {
    flex: 1;
}

/* Tombol Submit */
.actions {
    list-style: none;
    padding: 0;
    margin-top: 2em;
}
.actions li {
    display: inline-block;
}
.actions .button.primary {
    background: #bf9b30;
    color: #000;
    border-color: #bf9b30;
    padding: 1.2em 4em;
    font-size: 1em;
    letter-spacing: 1px;
}

/* Kotak Pesan Sukses/Error */
.message-box {
    margin-top: 2em;
    padding: 1em;
    border: 1px solid #bf9b30;
    background: rgba(191, 155, 48, 0.1);
    color: #bf9b30;
}
.message-box.error {
    border-color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
}

/* ========================================================================= */
/* --- 9. CINEMATIC GALLERY PAGE (NEW) --- */
/* ========================================================================= */

/* --- A. HERO SECTION (70vh, Zoom/Fade Effect) --- */
#gallery-hero {
    position: relative;
    width: 100%;
    height: 70vh; /* Tinggi Dramatis */
    overflow: hidden;
    margin-top: -90px; /* Kompensasi Header */
}
#gallery-hero {
    position: relative;
    width: 100%;
    height: 70vh; 
    overflow: hidden;
    margin-top: -90px; 
    
    /* KUNCI FIX: Shadow Eksternal ke Bawah (Efek Melayang) */
    /* Offset Y 30px, Blur 60px, Warna Hitam Pekat */
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.9); 
    
    /* Pastikan Z-Index lebih tinggi dari Gallery di bawahnya agar shadow tidak tertutup */
    z-index: 20; 
}
.hero-title {
    /* Naikkan z-index agar teks tetap terang dan terbaca di atas shadow */
    z-index: 10; 
}

/* Background Image untuk efek Zoom */
.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    
    transform: scale(1); 
    transition: transform 0.1s linear; 
    z-index: 1;

    /* --- PERFORMANCE FIX (GPU ACCELERATION) --- */
    /* 1. Memberi tahu browser bahwa elemen ini akan berubah bentuk */
    will-change: transform; 
    
    /* 2. Memaksa elemen masuk ke layer GPU tersendiri (Hardware Acceleration) */
    transform: translateZ(0) scale(1); 
    
    /* 3. Mencegah flickering/kedip saat rendering ulang */
    backface-visibility: hidden;
    perspective: 1000px;
}
/* Overlay Hitam untuk efek Fade */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); /* Gelap awal */
    z-index: 2;
}

/* Judul Hero */
.hero-title {
    position: absolute;
    bottom: 10%; left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
    width: 80%;
}
.hero-title h2 {
    font-size: 3em;
    color: #fff;
    letter-spacing: 5px;
    margin-bottom: 0.2em;
    text-transform: uppercase;
}
.hero-title p {
    font-family: 'Lora', serif;
    font-style: italic;
    color: #bf9b30; /* Emas */
    font-size: 1.2em;
}

/* ========================================================================= */
/* --- B. GALLERY LIST (IMMERSIVE STACKING - TRANSPARENT LANDSCAPE) --- */
/* ========================================================================= */

#cinematic-gallery {
    /* FIX: Tambahkan Padding Atas untuk memberi jarak dari Hero */
    padding-top: 5vh; /* Jeda sebesar 20% tinggi layar (Space Texture) */
    
    padding-bottom: 10vh; /* Sedikit jarak di bawah sebelum footer */
    width: 100%;
    margin: 0 auto;
    
    /* Background Container Transparan agar texture body terlihat di celah ini */
    background-color: transparent; 
    
    /* Pastikan z-index aman */
    position: relative;
    z-index: 10;
}

/* ITEM WRAPPER (STICKY STACKING) */
.cine-item {
    position: -webkit-sticky;
    position: sticky;
    top: 0; /* Menempel di atas */
    
    height: 100vh; /* Full Height agar centering pas */
    width: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* FIX 1: Background Item Transparan (Sesuai Request) */
    background-color: transparent !important; 
    
    /* Hilangkan shadow kotak pembungkus agar bersih */
    box-shadow: none; 
    
    /* Transisi Opacity */
    opacity: 0; 
    transition: opacity 0.8s ease;
}

/* State Aktif */
.cine-item.is-visible {
    opacity: 1;
}

/* GAMBAR (LANDSCAPE 4:3 & LEBIH BESAR) */
.image-wrapper {
    position: relative;
    
    /* FIX: Ukuran Dikecilkan dari 85vw ke 60vw agar lebih proporsional */
    width: 65vw; /* Lebar 60% layar (Sweet Spot untuk Desktop) */
    max-width: 1000px; /* Batas maksimal diturunkan dari 1400px */
    
    /* Rasio tetap Landscape Klasik */
    aspect-ratio: 4/2.5; 
    height: auto; 
    
    /* Styling Visual */
    box-shadow: 0 30px 70px rgba(0,0,0,0.9); 
    background: #000; 
    z-index: 5;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    /* KUNCI: Object Fit Cover agar gambar mengisi 4:3 tanpa gepeng */
    object-fit: cover; 
    display: block;
}

/* --- C. CAPTION OVERLAY --- */
.cine-caption {
    position: absolute;
    bottom: 0; /* Tempel di bawah gambar pas */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    padding: 30px 20px;
    /* Gradient lebih gelap agar teks terbaca jelas di atas foto */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent);
    transition: transform 0.1s ease-out; /* Transisi cepat */
    will-change: transform; /* Hint GPU */
    z-index: 10;
}

.cine-caption h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2em; /* Font diperbesar sedikit */
    color: #fff;
    letter-spacing: 4px;
    margin: 0 15px;
    display: inline-block;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    transition: transform 0.1s ease-out; /* Transisi cepat */
    will-change: transform; /* Hint GPU */
    z-index: 10;
}

.cine-ornament {
    color: #bf9b30;
    font-weight: 300;
}

/* Navigasi Footer Gallery */
.gallery-footer-nav {
    position: relative;
    z-index: 100; /* Pastikan tombol berada di lapisan paling atas */
    
    /* FIX 1: Background Transparan (Tombol Melayang) */
    background: transparent; 
    /* Opsi: Jika ingin sedikit bayangan agar tombol lebih pop, gunakan ini: */
    /* background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); */
    
    /* FIX 2: Space Antara Gallery & Tombol */
    margin-top: 20vh; /* Memberi jarak scroll 20% layar dari foto terakhir */
    padding-bottom: 10vh; /* Memberi ruang nafas sebelum Footer Web */
    
    text-align: center;
}
.gallery-footer-nav .button.primary {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Shadow pada tombol agar tidak tenggelam */
}

/* RESPONSIVE FIX (HP) */
@media screen and (max-width: 736px) {
    .image-wrapper {
        /* Di HP tetap agak lebar agar terlihat jelas */
        width: 85vw; 
    }
}
/* --- BACK TO TOP BUTTON --- */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #bf9b30;
    color: #bf9b30;
    text-align: center;
    line-height: 50px; /* Center vertikal */
    border-radius: 50%; /* Bulat */
    z-index: 9999;
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

#back-to-top:hover {
    background: #bf9b30;
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(191, 155, 48, 0.4);
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* ========================================================================= */
/* --- UNIVERSAL HOVER ZOOM EFFECT --- */
/* ========================================================================= */

/* 1. Class untuk PEMBUNGKUS (Wrapper) Gambar */
.hover-zoom {
    display: block;          /* Pastikan elemen dianggap kotak */
    overflow: hidden;        /* KUNCI: Memotong gambar yang membesar agar tidak keluar kotak */
    position: relative;      /* Menjaga struktur */
    cursor: pointer;         /* Mengubah kursor jadi telunjuk */
}

/* 2. Target Gambar di dalamnya */
.hover-zoom img {
    width: 100%;             /* Pastikan gambar mengisi kotak */
    height: auto;
    display: block;
    
    /* Transisi Halus (Cinematic Slow) */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);     /* Ukuran normal */
}

/* 3. Efek saat Mouse di atas Pembungkus */
.hover-zoom:hover img {
    transform: scale(1.08);  /* Perbesar 8% (Cukup dramatis tapi elegan) */
}

/* ========================================================================= */
/* --- FINAL VISUAL TOUCH: LUXURY TYPOGRAPHY & BUTTONS --- */
/* ========================================================================= */

/* 1. EDITORIAL SPACING (Membuat judul terlihat lebih mahal) */
h1, h2, h3, .logo-name {
    letter-spacing: 0.15em !important; /* Jarak antar huruf diperlebar 15% */
}

/* Judul Hero (Slider) butuh jarak lebih ekstrem */
header p, .hero-title p {
    letter-spacing: 0.2em !important; /* Sangat lebar & elegan */
}

/* 2. GOLDEN GLOW BUTTONS (Efek tombol menyala) */
/* Saat tombol di-hover, beri pendaran cahaya emas */
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
    box-shadow: 0 0 20px rgba(191, 155, 48, 0.6); /* Cahaya Emas */
    border-color: #bf9b30 !important;
    transform: translateY(-2px); /* Sedikit naik ke atas */
}

/* ========================================================================= */
/* --- FINAL LUXURY POLISH: METALLIC TEXT & MOODY IMAGES --- */
/* ========================================================================= */

/* 1. METALLIC GOLD TEXT (Efek Teks Emas Berkilau) */
/* Target: Logo Header, Judul Hero, Judul Caption, Judul Section */
h1.logo-name a, 
.hero-title h2, 
h2.major, 
.cine-caption h3 {
    /* Gradasi: Emas Gelap -> Emas Terang -> Emas Gelap */
    background: linear-gradient(to right, #bf9b30 0%, #f6e27a 45%, #bf9b30 100%);
    
    /* Teknik memotong background mengikuti bentuk teks */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Membuat warna asli transparan agar gradasi terlihat */
    color: transparent;
    
    /* Setup animasi kilauan */
    background-size: 200% auto;
    transition: background-position 0.5s ease;
}

/* Efek Kilau Bergeser saat Hover (Khusus Logo) */
h1.logo-name a:hover {
    background-position: right center; /* Kilau emas bergerak */
    color: transparent; 
}

/* 2. MOODY IMAGE FOCUS (Gambar Redup, Terang saat Disorot) */
/* Target: Semua gambar di dalam wrapper .image atau .image-wrapper */
.image img, 
.image-wrapper img {
    filter: brightness(0.85); /* Default: Turunkan brightness 15% (Moody) */
    transition: filter 0.4s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Saat Mouse Hover: Terang & Pop Up */
.image:hover img, 
.image-wrapper:hover img {
    filter: brightness(1.0); /* Lebih terang dari normal (Spotlight) */
    /* (Opsional: Gabungkan dengan efek zoom yang sudah ada) */
}

/* ========================================================================= */
/* --- FINAL DETAIL: LUXURY FORM STYLING --- */
/* ========================================================================= */

/* 1. Reset Tampilan Input agar Transparan */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: rgba(255, 255, 255, 0.03) !important; /* Sangat transparan */
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* Garis tipis samar */
    border-radius: 0 !important; /* Sudut kotak tajam */
    color: #fff !important; /* Teks putih */
    padding: 1.2em 1em !important; /* Ruang dalam lega */
    transition: all 0.3s ease;
    box-shadow: none !important;
}

/* 2. Saat Input Diklik (Focus State) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    background: rgba(191, 155, 48, 0.05) !important; /* Sedikit sentuhan emas background */
    border-bottom: 1px solid #bf9b30 !important; /* Garis bawah jadi EMAS menyala */
    outline: none; /* Hapus outline biru bawaan browser */
}

/* 3. Placeholder (Teks petunjuk samar) */
::-webkit-input-placeholder { color: #555 !important; letter-spacing: 1px; }
:-moz-placeholder { color: #555 !important; letter-spacing: 1px; }
::-moz-placeholder { color: #555 !important; letter-spacing: 1px; }
:-ms-input-placeholder { color: #555 !important; letter-spacing: 1px; }

/* Garis Loading Emas di Pucuk Layar */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px; /* Garis tipis */
    background: #bf9b30; /* Warna Emas */
    z-index: 99999;
    
    /* Animasi Loading Loop */
    width: 0%;
    animation: loadProgress 2s ease-in-out infinite;
    
    /* Hanya muncul saat body punya class is-preload */
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s;
}

/* Saat Loading (is-preload aktif) */
body.is-preload #page-loader {
    opacity: 1;
    visibility: visible;
    width: 100%; /* Atau gunakan keyframe di bawah untuk animasi gerak */
}

@keyframes loadProgress {
    0% { width: 0%; left: 0; }
    50% { width: 70%; left: 0; }
    100% { width: 100%; left: 100%; } /* Efek garis jalan cepat */
}