/* =========================================================
   assets/css/index.css
   Styling khusus untuk landing page (hero)
   Elemen section umum dan kartu destinasi sudah dipindah
   ke style.css supaya bisa dipakai bersama halaman list
   Berita pariwisata sekarang ada di sidebar (layout.css)
   Panggil setelah style.css di index.php
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: 480px;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(13,18,16,1) 100%), url('/assets/img/hero-default.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.hero-content {
    max-width: 720px;
    text-align: center;
}

.hero-content h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    color: #ffffff;
    margin-bottom: 12px;
}

.hero-content p {
    font-size: 15px;
    color: var(--teks-sekunder);
    margin-bottom: 28px;
}

.hero-search {
    background-color: var(--bg-kartu);
    border: 1px solid var(--border-gelap);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.hero-search-field {
    flex: 1;
    min-width: 140px;
    text-align: left;
}

.hero-search-field label {
    display: block;
    font-size: 12px;
    color: var(--teks-sekunder);
    margin-bottom: 6px;
}

.hero-search-field select,
.hero-search-field input {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--bg-kartu-terang);
    border: 1px solid var(--border-gelap);
    border-radius: 8px;
    color: var(--teks-utama);
    font-size: 13px;
}

.hero-search-button {
    background-color: var(--hijau-tua);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease;
}

.hero-search-button:hover {
    background-color: var(--hijau-muda);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 26px;
    }

    .hero-search {
        flex-direction: column;
        align-items: stretch;
    }
}