/* ===== Galeri ===== */
.galeri-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 8px;
}
.galeri-head h1{ margin:0; }
.galeri-search{ display:flex; gap:8px; }
.galeri-search input{
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; min-width:240px; background:#fff;
}
.empty{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:var(--shadow);
}

/* Grid */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:14px; margin:12px 0 10px;
}
.gallery-card{
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
  cursor:pointer; display:flex; flex-direction:column;
}
.gallery-card .thumb{ position:relative; height:180px; background:#eef4fb; }
.gallery-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-card .overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(11,27,58,.0); color:#fff; font-size:28px; transition:background .2s ease, transform .2s ease;
}
.gallery-card:hover .overlay{ background:rgba(11,27,58,.35); transform:scale(1.02); }
.gallery-card figcaption{ padding:10px 12px; }
.gallery-card h3{ margin:0 0 4px; font-size:16px; }
.gallery-card p{ margin:0; color:#44546b; font-size:14px; line-height:1.5; max-height:3.2em; overflow:hidden; }

/* Pagination */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:12px; margin:8px 0 20px;
}
.pagination-btn{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  padding:10px 12px; border-radius:10px; text-decoration:none; cursor:pointer;
}
.pagination-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.page-info{ color:#6b7a90; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(12,16,33,.8); display:none; align-items:center; justify-content:center; z-index:9999;
  padding:24px;
}
.lightbox.open{ display:flex; }
.lb-body{
  max-width:min(1100px, 100%); width:100%; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
}
.lb-body img{ width:100%; height:auto; display:block; background:#000; }
.lb-body figcaption{ padding:12px 14px; }
.lb-body h3{ margin:0 0 6px; }
.lb-body p{ margin:0; color:#44546b; }

.lb-close{
  position:absolute; top:18px; right:18px; width:44px; height:44px;
  border:0; border-radius:50%; background:#ffffff; color:#0b1b3a; font-size:26px; cursor:pointer;
  box-shadow:var(--shadow);
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border:0; border-radius:50%; cursor:pointer; font-size:28px;
  color:#0b1b3a; background:#ffffff; box-shadow:var(--shadow);
}
.lb-nav.prev{ left:24px; }
.lb-nav.next{ right:24px; }

@media (max-width: 720px){
  .galeri-search input{ min-width:160px; }
}