/* =========================================================
   Gaya aplikasi Lomba Bonsai - palet botani & aksen emas
   ========================================================= */
:root {
    --hijau-tua: #1b4332;
    --hijau: #2d6a4f;
    --hijau-muda: #95d5b2;
    --krem: #f7f5f0;
    --emas: #b08968;
    --teks: #2b2b2b;
}

body {
    background-color: var(--krem);
    color: var(--teks);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.app-navbar {
    background: linear-gradient(135deg, var(--hijau-tua), var(--hijau));
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--emas);
    color: #fff;
    font-weight: 700;
    margin-right: .35rem;
}

.btn-cta {
    background: var(--emas);
    border: none;
    color: #fff;
    font-weight: 600;
}

.btn-cta:hover {
    background: #96714f;
    color: #fff;
}

.btn-hijau {
    background: var(--hijau);
    border: none;
    color: #fff;
}

.btn-hijau:hover {
    background: var(--hijau-tua);
    color: #fff;
}

/* Hero */
.hero {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(120deg, rgba(27, 67, 50, .88) 20%, rgba(27, 67, 50, .55)),
        linear-gradient(180deg, var(--hijau-tua), var(--hijau)),
        url("../img/hero-1.jpg") center/cover no-repeat;
    color: #fff;
}

.hero .badge {
    letter-spacing: .08em;
}

.hero-judul {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
}

.hero-sub {
    font-size: 1.15rem;
    opacity: .92;
    max-width: 40rem;
}

.statistik-kaos {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .9rem;
    padding: .85rem 1.1rem;
    backdrop-filter: blur(2px);
}

/* Section */
.section-judul {
    font-weight: 800;
    color: var(--hijau-tua);
}

.section-sub {
    color: #6c757d;
    max-width: 46rem;
}

.kartu-soft {
    background: #fff;
    border: 1px solid rgba(27, 67, 50, .08);
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(27, 67, 50, .06);
}

.img-fallback {
    background: linear-gradient(135deg, var(--hijau), var(--hijau-tua));
}

.galeri-item {
    overflow: hidden;
    border-radius: 1rem;
}

.galeri-item img {
    width: 100%;
    height: 15rem;
    object-fit: cover;
    transition: transform .35s ease;
}

.galeri-item:hover img {
    transform: scale(1.06);
}

/* Form */
.formulir-syarat {
    font-size: .875rem;
    color: #6c757d;
}

input[type="file"]::file-selector-button {
    background: var(--hijau);
    color: #fff;
    border: none;
    border-radius: .4rem;
    padding: .35rem .8rem;
    margin-right: .6rem;
    cursor: pointer;
}

/* Footer */
.app-footer {
    background: var(--hijau-tua);
    color: #fff;
}

.app-footer h5, .app-footer h6 {
    color: #fff;
}

.link-footer {
    color: var(--hijau-muda);
    text-decoration: none;
}

.link-footer:hover {
    color: #fff;
}

/* Cetak kuitansi */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .kuitansi-kartu {
        border: 1px solid #444;
        box-shadow: none;
    }
}

/* =========================================================
   Multi-event: pil pemilih & carousel
   ========================================================= */
.event-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.event-pill {
    display: inline-block;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(27, 67, 50, .18);
    background: #fff;
    color: var(--hijau-tua);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.event-pill:hover {
    background: var(--hijau-muda);
    color: var(--hijau-tua);
}

.event-pill.active {
    background: var(--hijau);
    border-color: var(--hijau);
    color: #fff;
}

.event-slide {
    background:
        linear-gradient(135deg, rgba(27, 67, 50, .96), rgba(45, 106, 79, .88)),
        url("../img/hero-1.jpg") center/cover no-repeat;
    color: #fff;
    border-radius: 1rem;
}

.event-slide .hero-judul,
.event-slide .hero-sub {
    color: #fff;
}

/* Anchor section & panel per event tidak tertutup navbar lengket */
[id^="event-"],
section[id] {
    scroll-margin-top: 5.5rem;
}

/* Hormati preferensi pengurangan animasi */
@media (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: none !important;
    }

    .galeri-item img,
    .event-pill {
        transition: none !important;
    }
}