/* ══════════════════════════════════════════════════════════
   GALERI — Dokumentasi Kegiatan
   ══════════════════════════════════════════════════════════ */

.galeri[hidden] { display: none !important; }

.galeri {
    width: 100%; min-height: 100vh;
    padding: 5rem 1.6rem 5rem;
    text-align: center; position: relative;
    background: var(--grad-primary);
    overflow: hidden;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0;
}

/* Dekorasi latar */
.galeri::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 10% 90%, rgba(201,168,76,0.1), transparent 45%),
        radial-gradient(ellipse at 90% 10%, rgba(45,147,117,0.08), transparent 45%);
    pointer-events: none;
}

/* ── Container galeri utama ── */
.galeri .container {
    width: 100%; max-width: 600px;
    margin: 0 auto;
    border-radius: var(--r-xl);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(201,168,76,0.18);
    padding: 0 0 1.4rem;
    position: relative; overflow: hidden;
    backdrop-filter: blur(8px);
}

/* Strip emas atas */
.galeri .container::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-gold);
}

/* ── Judul ── */
.galeri .container h2,
.galeri div:nth-of-type(2) h2 {
    font-family: var(--font-display); font-size: 1.7rem;
    font-weight: 700; color: var(--gold-light);
    padding: 1.4rem 1rem 0.2rem;
    letter-spacing: 0.03em;
}

/* ── Sub judul ── */
.galeri-sub {
    font-size: 0.74rem !important;
    color: rgba(255,255,255,0.45) !important;
    letter-spacing: 0.07em;
    margin: 0 0 0.6rem !important;
    line-height: 1.5 !important;
}

/* ── Gambar ── */
.galeri .container figure {
    width: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.galeri .container figure img {
    width: 100%; height: 28rem;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.galeri .container figure img:hover { transform: scale(1.03); }

/* ── Dots ── */
.galeri .container ul {
    display: flex; align-items: center;
    justify-content: center; gap: 0.5rem;
    padding: 0.7rem 0.5rem;
    position: absolute; left: 0; right: 0;
    bottom: 4rem;
}

.galeri .container ul li {
    width: 1.4rem; height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px; list-style: none;
    cursor: pointer; transition: var(--ease);
}

.galeri .container ul li:hover,
.galeri .container ul li.active {
    background: var(--gold-light); width: 2.2rem;
}

/* ── Prev / Next buttons ── */
.galeri .container button:nth-of-type(1),
.galeri .container button:nth-of-type(2) {
    font-size: 3.2rem;
    color: rgba(255,255,255,0.28);
    background: none; border: none;
    position: absolute;
    top: 50%; transform: translateY(-60%);
    z-index: 10; cursor: pointer;
    transition: var(--ease);
}

.galeri .container button:nth-of-type(1):hover,
.galeri .container button:nth-of-type(2):hover {
    color: var(--gold-light);
    transform: translateY(-60%) scale(1.1);
}

.galeri .container button:nth-of-type(1) { left: 0.4rem; }
.galeri .container button:nth-of-type(2) { right: 0.4rem; }

/* ── Tombol lihat semua ── */
.galeri .container button:nth-of-type(3) {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 1.6rem;
    background: var(--grad-gold); color: var(--primary-dark);
    border: none; border-radius: var(--r-pill);
    font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em;
    margin-top: 1rem;
    transition: var(--ease-spring); cursor: pointer;
    box-shadow: var(--shadow-gold);
}

.galeri .container button:nth-of-type(3):hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 28px rgba(201,168,76,0.55);
}

/* ── Modal semua foto ── */
.galeri div:nth-of-type(2) {
    width: 100%; height: 100vh;
    padding: 2rem 1.4rem 6rem;
    position: fixed; inset: 0;
    background: rgba(7,39,31,0.97);
    z-index: 999; overflow-y: auto;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    transform: scale(0); opacity: 0;
    transform-origin: bottom;
    backdrop-filter: blur(24px);
}

.galeri div:nth-of-type(2) > div {
    border-radius: var(--r-lg);
    padding: 0.8rem;
    margin-top: 0.4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.8rem;
}

.galeri div:nth-of-type(2) > div img {
    width: 100%; object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid rgba(201,168,76,0.12);
    transition: var(--ease);
}

.galeri div:nth-of-type(2) > div img:hover {
    transform: scale(1.02);
    border-color: var(--gold);
}

.galeri div:nth-of-type(2) button {
    width: 2.6rem; height: 2.6rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--white);
    cursor: pointer; position: absolute;
    top: 1.2rem; right: 1.2rem;
    transition: var(--ease); padding: 0;
}

.galeri div:nth-of-type(2) button:hover {
    background: var(--gold); color: var(--primary-dark);
}

.galeri div:nth-of-type(2).active { transform: scale(1); opacity: 1; }

/* ── Icon dekoratif ── */
.galeri > i { top: 3rem; left: 4%; animation-delay: 0.5s; }

/* galeri dan wishas: scrollbar tersembunyi */
.galeri .container figure::-webkit-scrollbar,
.galeri div:nth-of-type(2)::-webkit-scrollbar { display: none; }