/* Header khusus halaman galeri */
.gallery-topbar{position:sticky;top:0;z-index:40;background:rgba(3,24,19,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(148,163,184,.4)}
.gallery-container{width:min(1120px,92vw);margin:0 auto}
.gallery-page{min-height:100vh;background:radial-gradient(circle at top left,#16a34a,#022c22);padding:3rem 0 3rem;color:#e5e7eb}
.gallery-header{margin-bottom:2rem}
.gallery-header h1{font-size:1.8rem;font-weight:800;margin-bottom:.5rem}
.gallery-header p{font-size:.9rem;color:#cbd5e1;max-width:660px}

/* Filter tombol */
.filters{margin:1.7rem 0 1.5rem}
.filter-row{display:flex;flex-wrap:wrap;gap:.5rem}
.filter-btn{padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(148,163,184,.7);background:rgba(3,24,19,.9);color:#e5e7eb;font-size:.78rem;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.filter-btn:hover{background:rgba(6,95,70,1);transform:translateY(-1px)}
.filter-btn.active{background:linear-gradient(135deg,#22c55e,#bef264);border-color:#22c55e;color:#052e16;font-weight:700}

/* Grid gallery */
.gallery-page .gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  margin-top:1.3rem;
}

/* Gallery card structure */
.gallery-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#020617;
  border:1px solid rgba(148,163,184,.7);
  box-shadow:0 16px 45px rgba(2,20,15,.85);
  cursor:pointer;
  isolation:isolate;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.gallery-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 55px rgba(2,20,15,.95);
  border-color:rgba(148,163,184,.9);
}

.gallery-img-wrap{
  position:relative;
  overflow:hidden;
  background:#020617;
  height:220px;
}

/* Gallery image */
.gallery-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease,opacity .3s ease;
  display:block;
  opacity:1;
}

.gallery-card:hover .gallery-img{
  transform:scale(1.06);
}

/* Overlay halus */
.gallery-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(15,23,42,.8),rgba(15,23,42,.05));
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.gallery-card:hover .gallery-overlay{
  opacity:1;
}

/* Badge */
.gallery-badge{
  position:absolute;
  top:.5rem;
  left:.5rem;
  padding:.2rem .6rem;
  border-radius:999px;
  font-size:.7rem;
  background:rgba(34,197,94,.9);
  color:#052e16;
  font-weight:600;
  z-index:2;
}

/* Caption */
.gallery-caption{
  padding:.75rem 1rem .9rem;
  background:rgba(2,6,23,.95);
}

.gallery-caption .year{
  display:block;
  font-size:.72rem;
  color:#94ffc4;
  font-weight:600;
  margin-bottom:.25rem;
}

/* Image loader */
.gallery-loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:2;
}

.gallery-loader.hidden{
  opacity:0;
  pointer-events:none;
}

.gallery-loader::before{
  content:"";
  width:36px;
  height:36px;
  border-radius:999px;
  background:#020617 url("../img/logo_omada_x.png") center/70% no-repeat;
  box-shadow:0 0 0 2px rgba(148,163,184,.6);
  animation:omada-pulse 1.1s ease-in-out infinite;
}

@keyframes omada-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.1);opacity:.7}
}

/* Responsive untuk gallery page */
@media(max-width:960px){
  .gallery-page .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:768px){
  .gallery-page .gallery-grid{
    grid-template-columns:minmax(0,1fr);
  }
  
  .gallery-img-wrap{
    height:200px;
  }
  
  .gallery-header h1{
    font-size:1.5rem;
  }
}