@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Special+Elite&display=swap');

html { 
    scroll-behavior: smooth; 
    background-color: #050505; /* Warna dasar dipindah ke sini biar nggak nutupin gambar */
}

body { 
    margin: 0; 
    padding: 0; 
    font-family: 'Special Elite', sans-serif; 
    color: #f4eee0; 
    overflow-x: hidden; 
    background: transparent; /* Body harus transparan biar ::before kelihatan */
}

/* =========================================
   CINEMATIC BACKGROUND ANIMATION (ANTI GAGAL)
   ========================================= */
@keyframes revealBackground {
    0% { 
        transform: scale(1.3); 
        opacity: 0; 
    }
    100% { 
        transform: scale(1); 
        opacity: 0.35; 
    }
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* Pastikan path ini benar ya Lik. 
       Kalau CSS ini ditaruh di file css/style.css, pakai '../assets/...'. 
       Kalau ditaruh langsung di index.html, pakai 'assets/...' */
    background-image: url('../assets/img/jogjaview.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: -10;
    
    /* Menjalankan animasi secara otomatis saat web dibuka */
    animation: revealBackground 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

h1, h2, h3 { font-family: 'Cinzel', serif; letter-spacing: 3px; color: #d4af37; font-weight: 700; margin-bottom: 15px; }

/* NAVBAR */
.navbar { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background: rgba(10, 10, 10, 0.9); 
    backdrop-filter: blur(5px); 
    border-bottom: 1px solid rgba(212, 175, 55, 0.3); 
    z-index: 1000; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 30px; 
    box-sizing: border-box; 
}

.navbar .logo { 
    font-family: 'Cinzel', serif; 
    font-size: 1.5rem; 
    color: #d4af37; 
    font-weight: bold; 
    letter-spacing: 4px; 
}

/* Menggunakan 'gap' agar jarak antar menu rapi, baik saat sebaris maupun saat turun baris */
.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 15px; 
}

.nav-links a { 
    color: #f4eee0; 
    text-decoration: none; 
    font-size: 0.8rem; 
    transition: 0.3s; 
    font-family: 'Cinzel', serif; 
    text-transform: uppercase;
    /* margin-left dihapus karena sudah digantikan oleh gap di atas */
}

.nav-links a:hover { 
    color: #d4af37; 
}

.btn-nav { 
    border: 1px solid #d4af37; 
    padding: 8px 15px; 
}

/* Penyesuaian untuk layar "nanggung" (Tablet / HP Landscape) */
@media (max-width: 900px) {
    .navbar {
        flex-direction: column; /* Logo dipindah ke atas, menu rapi di bawahnya */
        gap: 10px;
        padding: 15px;
    }
    .nav-links {
        justify-content: center;
    }
}

#hero { background: transparent; }

/* SECTIONS */
.cinematic-section { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 80px 20px; 
    box-sizing: border-box; 
    text-align: center; 
    background: transparent; 
}

.bg-alt { 
    background: rgba(10, 10, 10, 0.7); 
    backdrop-filter: blur(3px); 
}

/* =========================================
   INI KANDANG TEKSNYA YANG HILANG LIK! WKWK
   ========================================= */
.content { max-width: 800px; width: 100%; margin: 0 auto; }
.left-align { text-align: left; }

p { line-height: 1.8; font-size: 1rem; color: #ccc; }
.subtitle { font-size: 1rem; letter-spacing: 5px; color: #d4af37; text-transform: uppercase; margin-bottom: 30px; }

/* BUTTONS & IMAGES */
.btn-primary { background: #0a0a0a; color: #d4af37; border: 1px solid #d4af37; padding: 15px 30px; cursor: pointer; font-weight: bold; font-family: 'Cinzel', serif; transition: 0.4s; display: inline-block; text-decoration: none; text-transform: uppercase; letter-spacing: 2px;}
.btn-primary:hover { background: #d4af37; color: #0a0a0a; box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.card { background: rgba(255,255,255,0.02); border: 1px solid rgba(212, 175, 55, 0.2); padding: 30px; transition: 0.3s; }
.card:hover { border-color: #d4af37; background: rgba(212, 175, 55, 0.05); }

/* FORMS & TABS */
.tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.tab-btn { background: transparent; border: none; color: #777; font-family: 'Cinzel', serif; font-size: 1.1rem; cursor: pointer; padding: 10px; border-bottom: 2px solid transparent; transition: 0.3s;}
.tab-btn.active { color: #d4af37; border-bottom: 2px solid #d4af37; }

.form-box { 
    background: rgba(5, 5, 5, 0.85); /* Latar belakang hitam yang lebih pekat */
    backdrop-filter: blur(8px); /* Efek kaca buram agar gambar kota tidak ganggu teks */
    padding: 40px; 
    border: 1px solid rgba(212, 175, 55, 0.5); /* Garis batas emas sedikit ditebalkan */
    border-radius: 8px; /* Sedikit lengkungan di ujung kotak biar elegan */
    max-width: 400px; 
    margin: 0 auto; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.9); /* Bayangan luar dipertegas */
}
.hidden { display: none !important; }
input, select { 
    width: 100%; 
    padding: 12px; 
    margin: 10px 0 25px 0; 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid rgba(212, 175, 55, 0.5); 
    color: #f4eee0; /* Warna ketikan diubah jadi putih gading agar kontras */
    font-family: 'Special Elite', sans-serif; 
    outline: none; 
    box-sizing: border-box; 
    text-align: center;
    letter-spacing: 1px;
}
input::placeholder { 
    color: rgba(212, 175, 55, 0.7); /* Warna petunjuk isian diterangkan sedikit */
}
input:focus, select:focus { border-bottom: 2px solid #fff; color: #fff; }
select option { background: #0a0a0a; color: #d4af37; }
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Mengubah ikon kalender hitam bawaan browser menjadi putih */
    cursor: pointer;
}

/* (Opsional) Biar kalau disorot mouse ikonnya jadi keemasan */
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(80%) sepia(30%) saturate(800%) hue-rotate(5deg); 
}

/* MOBILE ADJUSTMENTS */
.mobile-cta { display: none; position: fixed; bottom: 0; width: 100%; background: rgba(10,10,10,0.95); padding: 15px; box-sizing: border-box; z-index: 2000; border-top: 1px solid rgba(212, 175, 55, 0.3); backdrop-filter: blur(5px);}

@media (max-width: 768px) {
    .title-top, .title-bottom {
        font-size: 2.2rem; /* Teks agak dikecilkan agar proporsional */
        line-height: 1.2;  /* Memberi ruang napas atas-bawah */
    }
    .title-divider {
        width: 120px;      /* Garis diperpendek sedikit */
        margin: 15px 0;    /* Jarak garis ke huruf dijauhkan biar tidak nabrak */
    }
    #hero .subtitle {
        font-size: 0.95rem; /* Subtitle disesuaikan */
        line-height: 1.6;
        margin-top: 5px;
        padding: 0 20px;   /* Biar teks tidak mentok pinggiran layar */
    }
}

/* =========================================
   CAROUSEL / SLIDER (Geser Kanan-Kiri)
   ========================================= */
.carousel-wrapper { position: relative; width: 100%; max-width: 800px; margin: 0 auto; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 20px; box-sizing: border-box; }

/* Tombol Navigasi Kanan Kiri */
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.8); color: #d4af37; border: 1px solid #d4af37; width: 45px; height: 45px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; z-index: 10; transition: 0.3s; }
.carousel-nav:hover { background: #d4af37; color: #000; }
.nav-prev { left: -15px; }
.nav-next { right: -15px; }

@media (max-width: 768px) {
    .nav-prev { left: 0px; }
    .nav-next { right: 0px; }
}

/* =========================================
   RUANG NAPAS KHUSUS HP (MOBILE FIX)
   ========================================= */
@media (max-width: 768px) {
    .content p { font-size: 0.85rem; line-height: 1.8; }
    .cinematic-section h2 { font-size: 1.5rem; margin-bottom: 20px; }
    .cinematic-section { padding: 50px 15px; }
}

/* =========================================
   GAYA GAMBAR KARAKTER (Visual Asset)
   ========================================= */
.character-img { width: 100%; height: 350px; object-fit: contain; margin-bottom: 25px; filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.6)); }

/* =========================================
   GAYA KARAKTER DINAMIS (TANPA KOTAK)
   ========================================= */
.dynamic-card { background: transparent; border: none; display: flex; align-items: center; gap: 40px; padding: 0 20px; }
.char-image-container { flex: 1; display: flex; justify-content: center; }
.character-img-dynamic { width: 100%; max-width: 350px; height: 450px; object-fit: contain; filter: drop-shadow(0px 20px 30px rgba(0, 0, 0, 0.9)); }
.char-text-container { flex: 1; text-align: left; }
.char-text-container h3 { color: #d4af37; font-size: 2.5rem; margin-top: 0; margin-bottom: 15px; letter-spacing: 3px; text-shadow: 2px 2px 5px rgba(0,0,0,0.8); }
.char-text-container p { font-size: 1rem; line-height: 1.8; color: #f4eee0; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.asset-placeholder { width: 100%; height: 350px; border: 1px dashed rgba(212, 175, 55, 0.5); margin-bottom: 25px; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 1.5rem; color: #d4af37; letter-spacing: 2px; }

/* =========================================
   GAYA PUSAKA DINAMIS
   ========================================= */
.relic-card { background: transparent; border: none; display: flex; align-items: center; gap: 40px; padding: 0 20px; }
.relic-asset-container { flex: 1; display: flex; justify-content: center; }
.relic-text-container { flex: 1; text-align: left; }
.relic-text-container h3 { color: #d4af37; font-size: 2.5rem; margin-top: 0; margin-bottom: 15px; letter-spacing: 3px; text-shadow: 2px 2px 5px rgba(0,0,0,0.8); }
.relic-text-container p { font-size: 1rem; line-height: 1.8; color: #f4eee0; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.asset-placeholder-relic { width: 100%; max-width: 350px; height: 350px; border: 1px dashed rgba(212, 175, 55, 0.5); display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 1.5rem; color: #d4af37; letter-spacing: 2px; }

/* Responsif untuk Layar HP (Ditumpuk Atas-Bawah) */
@media (max-width: 768px) {
    .dynamic-card, .relic-card { flex-direction: column; gap: 20px; }
    .char-text-container, .relic-text-container { text-align: center; }
    .character-img-dynamic { height: 350px; }
}

/* =========================================
   PERBAIKAN TEKS PROLOG (HERO SECTION)
   ========================================= */
#hero h1 {
    font-size: 4.0rem; /* Ukuran raksasa ala poster bioskop */
    text-shadow: 4px 6px 15px rgba(0, 0, 0, 0.9), 0px 0px 30px rgba(0, 0, 0, 0.7); /* Bayangan ganda biar teksnya benar-benar pop-out */
    margin-bottom: 15px;
}

#hero .subtitle {
    font-size: 1.0rem; /* Diperbesar sedikit agar lebih terbaca */
    text-shadow: 2px 3px 10px rgba(0, 0, 0, 0.9); /* Bayangan pendukung */
    margin-bottom: 40px;
    font-weight: bold; /* Ditebalkan sedikit biar nggak kalah sama bayangannya */
}

/* =========================================
   GAYA JUDUL TERBELAH (HERO TITLE)
   ========================================= */
.hero-title {
    display: flex;
    flex-direction: column; /* Mengubah susunan jadi atas-bawah */
    align-items: center;    /* Memastikan semuanya rata tengah */
    justify-content: center;
}

.title-top {
    font-size: 4.0rem;
    line-height: 1;
}

.title-bottom {
    font-size: 4.0rem;
    line-height: 1;
}

/* Ini wujud garis pembatas emasnya */
.title-divider {
    display: block;
    width: 400px; /* Panjang garis, bisa sampeyan atur nanti */
    height: 3px;  /* Ketebalan garis */
    background-color: #d4af37; /* Warna emas LAKUKOTA */
    margin: 10px 0; /* Jarak antara teks atas, garis, dan teks bawah */
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.9); /* Efek timbul/shadow pada garis */
}

@media (max-width: 768px) {
    .nav-links { display: none; }
}

/* =========================================
   CUSTOM MODAL PENGGANTI ALERT BROWSER
   ========================================= */
.modal-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(5px);
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 9999; /* Pastikan selalu paling depan */
}

.modal-box {
    background: rgba(10, 10, 10, 0.95); 
    border: 1px solid #d4af37;
    padding: 30px; 
    border-radius: 8px; 
    max-width: 400px;
    width: 90%; 
    text-align: center; 
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.2);
}

/* CSS PETA SANDI POROS JOGJA */
        .poros-map {
            display: flex; flex-direction: column; align-items: center;
            margin: 50px 0; position: relative;
        }
        .poros-line {
            position: absolute; top: 20px; bottom: 20px; width: 2px;
            background: linear-gradient(to bottom, rgba(212,175,55,0), rgba(212,175,55,0.8), rgba(212,175,55,0));
            z-index: 1;
        }
        .poros-node {
            background: #050505; border: 1px solid rgba(212,175,55,0.5);
            width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
            border-radius: 50%; margin: 15px 0 5px; z-index: 2;
            color: #d4af37; font-size: 1.2rem;
            box-shadow: 0 0 15px rgba(212,175,55,0.1);
        }
        .poros-node.monument {
            border-radius: 5px; transform: rotate(45deg); border: 2px solid #d4af37;
        }
        .poros-node.monument i {
            transform: rotate(-45deg); font-style: normal;
        }
        .poros-label {
            color: #aaa; font-size: 0.75rem; letter-spacing: 4px;
            margin-bottom: 15px; z-index: 2; background: rgba(5,5,5,0.8);
            padding: 2px 10px; border-radius: 4px;
        }

        .btn-secondary {
            background: transparent;
            color: #d4af37;
            border: 1px solid rgba(212, 175, 55, 0.5);
            padding: 10px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            font-weight: 600;
        }
        
        .btn-secondary:hover {
            background: rgba(212, 175, 55, 0.08);
        }