/* ==================================== */
/* 0. GLOBAL & BASE STYLES */
/* ==================================== */

:root {
    --color-dark: #000000;
    --color-light: #FFFFFF;
    --color-accent: #FF0000; /* Bisa disesuaikan, merah sering muncul di lighting */
    --font-primary: 'Arial', sans-serif;
    --spacing-lg: 60px;
    --spacing-md: 30px;
}

/* Reset dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-dark);
    color: var(--color-light);
    line-height: 1.6;
}

a {
    color: var(--color-light);
    text-decoration: none;
}

/* Heading dan Judul Bagian */
.section-title {
    font-size: 2.5em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
}

.content-section {
    padding: var(--spacing-lg) var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

/* ==================================== */
/* 1. HEADER / COVER SECTION (Page 1) */
/* ==================================== */

.hero-section {
    position: relative;
    height: 100vh; /* Agar menempati seluruh layar awal */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Tambahkan gambar latar belakang jika ada, atau biarkan hitam pekat */
    /* background-image: url('path/to/cover-image.jpg'); 
       background-size: cover; */
}

/* Perlu diperhatikan: Jika Anda tidak lagi menggunakan div .agency-info di HTML, 
   CSS ini tidak akan berlaku. Saya asumsikan Anda telah menggantinya 
   dengan cara yang berbeda atau menghapusnya. 
   Jika Anda ingin "AUCH COLLECTIVE" muncul di sudut kiri atas, Anda harus 
   menambahkannya kembali ke HTML dan menggunakan class ini. */
/* .agency-info {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    font-size: 0.8em;
    font-weight: bold;
} */

.copyright {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    font-size: 0.7em;
    opacity: 0.7;
}

.artist-identity h1 {
    font-size: 4em; /* Sangat besar untuk kesan cover */
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: 0;
}

.artist-identity h2 {
    font-size: 2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 5px;
}

/* ==================================== */
/* 2. BIOGRAPHY SECTION (Page 2) */
/* ==================================== */

#biography {
    background-color: #111; /* Sedikit lebih terang dari hitam background */
}

.bio-text {
    font-size: 1.1em;
    max-width: 800px;
    margin: 0 auto;
}

/* ==================================== */
/* 3. SPINNED VENUES SECTION (Page 3) */
/* ==================================== */

.venue-list-container ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--spacing-md); /* Jarak antar kolom di mobile */
}

.venue-list-container ul li {
    padding: 5px 0;
    font-size: 0.95em;
    border-bottom: 1px dotted #333;
}

/* ==================================== */
/* 4. RATE CARD SECTION (Page 4) */
/* ==================================== */

#rate-card {
    text-align: center;
    background-color: #080808;
}

.rates-container {
    display: flex;
    flex-direction: column; /* Default: Stack vertikal di mobile */
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
}

.rate-card {
    border: 1px solid var(--color-accent);
    padding: var(--spacing-md);
    width: 90%;
    max-width: 400px;
    text-align: left;
}

.rate-card h4 {
    text-transform: uppercase;
    font-size: 1.2em;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.rate-card .price {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-light);
}

.event-rates span {
    float: right;
    font-weight: bold;
}

.rider-note, .disclaimer {
    margin-top: 20px;
    font-style: italic;
    opacity: 0.8;
}

/* ==================================== */
/* 5. ARCHIVES / GALLERY SECTION (Pages 5 & 6) */
/* ==================================== */

/* ===== GALLERY WRAPPER ===== */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}


.image-gallery img {
    width: 100%;
    /* REVISI: Tetapkan tinggi tetap agar gambar seragam */
    height: 150px; 
    /* REVISI: Memastikan gambar mengisi area, memotong jika rasio aspek berbeda */
    object-fit: cover; 
    
    display: block;
    filter: brightness(0.8); /* Gelapkan sedikit agar terlihat seperti foto klub/press */
    transition: filter 0.3s;
}

.image-gallery img:hover {
    filter: brightness(1);
}

/* ==================================== */
/* 6. CONTACT / FOOTER SECTION (Page 7) */
/* ==================================== */

footer {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    border-top: 1px solid #333;
    position: relative; /* Diperlukan untuk absolute positioning agency-footer di desktop */
}

.vibe-title h3 {
    text-transform: uppercase;
    color: var(--color-accent);
}

.vibe-title h4 {
    font-size: 1.5em;
    margin-bottom: var(--spacing-md);
}

.contact-info p {
    margin: 5px 0;
}

.agency-footer {
    margin-top: var(--spacing-md);
    font-size: 0.8em;
    opacity: 0.6;
}

/* ==================================== */
/* MEDIA QUERIES (Desktop Layout) */
/* ==================================== */

@media (min-width: 768px) {
    
    .content-section {
        padding: var(--spacing-lg);
    }

    /* 3. SPINNED VENUES */
    .venue-list-container { 
        display: flex; 
        justify-content: space-around;
        gap: 50px;
    }
    
    /* 4. RATE CARD */
    .rates-container {
        flex-direction: row; /* Desktop: Berjejer horizontal */
        flex-wrap: wrap; /* Jika lebih banyak kartu */
        gap: 40px;
    }

    .rate-card {
        width: 300px; /* Lebar kartu yang lebih terkontrol */
    }
    
    /* 5. ARCHIVES / GALLERY */
    .image-gallery {
        /* Desktop: 3 Kolom untuk 6 gambar agar seimbang (3x2) */
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px;
    }

    .image-gallery img {
        /* Naikkan tinggi tetap untuk tampilan desktop */
        height: 250px; 
    }

    /* 6. CONTACT */
    footer {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: left;
    }

    .agency-footer {
        position: absolute;
        bottom: 10px;
        right: 10px;
        margin-top: 0;
    }
}/* ===== GALLERY WRAPPER ===== */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* ===== EACH IMAGE BOX ===== */
.img-box {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.img-box img {
    width: 100%;
    border-radius: 6px;
    display: block;
    cursor: pointer;
    transition: .3s;
}

/* ===== OVERLAY TEXT (lihat full img) ===== */
.view-text {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    color: #fff;
    opacity: 0;
    transition: .25s ease;
    pointer-events: none;
}

/* Hover hanya desktop */
@media (min-width: 768px) {
    .img-box:hover img {
        opacity: .75;
    }
    .img-box:hover .view-text {
        opacity: 1;
    }
}

/* Mobile: text selalu tampil */
@media (max-width: 576px) {
    .view-text {
        opacity: 1;
        font-size: 12px;
        bottom: 6px;
    }
}

/* ===== BUTTON “Lihat Full Image” ===== */
.view-btn {
    width: 100%;
    margin-top: 8px;
    padding: 10px 0;
    border-radius: 8px;
    background: #d4a65a; /* gold senada */
    border: none;
    color: #000;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: .25s ease;
}

.view-btn:hover {
    background: #c69345;
    transform: translateY(-2px);
}

.view-btn:active {
    transform: scale(.97);
}


/* ===== MODAL POP-UP PREMIUM ===== */
/* ===== MODAL POP-UP PREMIUM (FIXED) ===== */
.img-modal {
    display: none; /* HILANGKAN !important */
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}



@keyframes fadeBg {
    from { opacity: 0; }
    to { opacity: 1; }
}

.img-modal-content {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 14px;
    animation: popScale .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.6);
}

@keyframes popScale {
    from { transform: scale(.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.img-modal-close {
    position: absolute;
    top: 22px;
    right: 26px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    transition: .2s ease;
    user-select: none;
}

.img-modal-close:hover {
    transform: scale(1.2);
    color: #ff4646;
}