/* ============================================================
   galeri.css
   ============================================================ */

.gal-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--brd); margin-bottom: 40px; }
.gal-tab { font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); padding: 10px 22px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .3s, border-color .3s; }
.gal-tab.on { color: var(--rose); border-bottom-color: var(--rose); }

.gal-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.gal-filter-btn { font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 6px 16px; border: 1px solid var(--brd); color: var(--ink2); background: transparent; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.gal-filter-btn:hover { border-color: var(--rose); color: var(--rose); }
.gal-filter-btn.active { background: var(--rose); border-color: var(--rose); color: #fff; }

/* Masonry-style photo grid */
.gal-photo-grid {
  columns: 4;
  column-gap: 4px;
}
@media (max-width: 900px) { .gal-photo-grid { columns: 3; } }
@media (max-width: 600px) { .gal-photo-grid { columns: 2; } }

.gal-photo-item {
  break-inside: avoid;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.gal-photo-item img { width: 100%; display: block; transition: transform .6s var(--e), filter .5s; filter: saturate(.88); }
.gal-photo-item:hover img { transform: scale(1.04); filter: saturate(1.05); }
.gal-photo-item__ov { position: absolute; inset: 0; background: rgba(19,14,11,.42); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; }
.gal-photo-item:hover .gal-photo-item__ov { opacity: 1; }
.gal-photo-item__ov svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.5; }
.gal-photo-item.hidden { display: none; }

/* Video grid */
.gal-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (max-width: 860px) { .gal-video-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gal-video-grid { grid-template-columns: 1fr; } }

.gal-video-item {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--dark); aspect-ratio: 16/9;
}
.gal-video-item img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .4s, transform .5s var(--e); }
.gal-video-item:hover img { opacity: .5; transform: scale(1.04); }
.gal-video-item__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .4s var(--eo);
}
.gal-video-item:hover .gal-video-item__play { background: var(--rose); border-color: var(--rose); transform: translate(-50%,-50%) scale(1.1); }
.gal-video-item__play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.gal-video-item__label { position: absolute; bottom: 12px; left: 14px; right: 14px; font-size: .72rem; font-weight: 400; color: rgba(255,255,255,.75); }

/* Galeri Lightbox */
.gal-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(19,14,11,.97); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .35s; }
.gal-lightbox.open { opacity: 1; pointer-events: all; }
.gal-lightbox__img { max-width: 88vw; max-height: 88vh; object-fit: contain; transform: scale(.96); transition: transform .4s var(--eo); }
.gal-lightbox.open .gal-lightbox__img { transform: scale(1); }
.gal-lightbox__close { position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; color: rgba(255,255,255,.7); transition: border-color .3s, color .3s; }
.gal-lightbox__close:hover { border-color: var(--rose); color: var(--rose); }
.gal-lightbox__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.gal-lightbox__prev, .gal-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.15); background: none; color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .3s, color .3s; }
.gal-lightbox__prev:hover, .gal-lightbox__next:hover { border-color: var(--gold); color: var(--gold); }
.gal-lightbox__prev svg, .gal-lightbox__next svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.gal-lightbox__prev { left: 20px; }
.gal-lightbox__next { right: 20px; }
.gal-lightbox__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.gal-video-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .35s; }
.gal-video-modal.open { opacity: 1; pointer-events: all; }
.gal-video-modal__inner { width: min(900px,90vw); aspect-ratio: 16/9; background: #000; position: relative; }
.gal-video-modal__inner iframe { width: 100%; height: 100%; border: none; }
.gal-video-modal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25); background: none; color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gal-video-modal__close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }