.muted{color:var(--muted)}

/* Isi */
.g-body{padding:1.6rem 1.2rem 5rem}
.tabs{justify-content:center;margin-bottom:1.6rem}
.tab{padding:.38rem .95rem;font-size:.92rem;background:var(--krem)}
.tab small{margin-left:.3rem;font-size:.8em;opacity:.7}

/* Susunan foto: seragam, rapi, dan rata tengah walau fotonya sedikit */
.gal{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem}
.gal a{position:relative;flex:1 1 280px;max-width:380px;aspect-ratio:4/3;display:block;overflow:hidden;
  border-radius:20px;background:var(--pasir2);cursor:zoom-in;
  animation:tile-in .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 45ms);
  transition:transform .35s,box-shadow .35s}
.gal a:hover,.gal a:focus-visible{transform:translateY(-4px);box-shadow:0 18px 38px rgba(20,55,68,.18)}
.gal a.hide{display:none}
.gal img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gal a:hover img,.gal a:focus-visible img{transform:scale(1.07)}
/* keterangan muncul dari bawah saat kursor di atas foto */
.gal a::after{content:attr(data-cap);position:absolute;inset:auto 0 0 0;padding:2.4rem 1.1rem .9rem;
  color:#FFFDF8;font-weight:600;font-size:.95rem;background:linear-gradient(180deg,transparent,rgba(10,28,36,.74));
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.gal a:hover::after,.gal a:focus-visible::after{opacity:1;transform:none}
.chip{position:absolute;top:.8rem;left:.8rem;padding:.2rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600;
  background:rgba(255,253,248,.92);color:var(--laut)}
@keyframes tile-in{from{opacity:0;transform:translateY(16px) scale(.98)}}

.g-empty{text-align:center;padding:4rem 1rem;color:var(--muted)}

/* Ajakan di bawah galeri */
.g-cta{margin:4rem auto 0;max-width:640px;padding:2rem 1.6rem;border-radius:22px;background:var(--pasir2);text-align:center}
.g-cta h2{font-size:1.5rem;margin-bottom:.4rem}
.g-cta p{color:var(--muted);margin-bottom:1.2rem}

/* Foto besar */
.lb{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(10,28,36,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lbin .25s}
.lb[hidden]{display:none}
@keyframes lbin{from{opacity:0}}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:92vw}
.lb img{max-width:92vw;max-height:80vh;border-radius:14px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.4);
  transition:opacity .25s,transform .25s}
.lb img.swap{opacity:0;transform:scale(.98)}
.lb figcaption{display:flex;flex-direction:column;align-items:center;gap:.15rem;color:#EEF3F2;text-align:center;font-weight:600}
.lb-n{color:#A9BCC0;font-weight:400}
.lb button{position:absolute;width:3rem;height:3rem;border:0;border-radius:999px;background:rgba(255,253,248,.14);
  color:#FFFDF8;font-size:1.7rem;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.lb button:hover{background:rgba(255,253,248,.28);transform:scale(1.06)}
.lb .x{top:1rem;right:1rem}
.lb .prev{left:1rem;top:50%;margin-top:-1.5rem}
.lb .next{right:1rem;top:50%;margin-top:-1.5rem}
.lb.single .prev,.lb.single .next{display:none}

/* Zoom foto besar */
.lb button,.lb-zoom{z-index:2}
.lb img{touch-action:none;cursor:zoom-in;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.lb.zoom img{cursor:grab}
.lb.geser img{cursor:grabbing;transition:opacity .25s}
.lb figcaption{transition:opacity .2s}
.lb.zoom figcaption{opacity:0;pointer-events:none}
.lb-zoom{position:absolute;top:1rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.15rem;
  padding:.25rem;border-radius:999px;background:rgba(255,253,248,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb .lb-zoom button{position:static;width:2.5rem;height:2.5rem;font-size:1.4rem;background:transparent}
.lb .lb-zoom button:hover{background:rgba(255,253,248,.2);transform:none}
.lb .lb-zoom .zval{width:auto;min-width:3.6rem;padding:0 .5rem;font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.lb .lb-zoom button:disabled{opacity:.35;cursor:default;background:transparent}

@media (max-width:600px){
  .gal{gap:.7rem}
  .gal a{flex:0 0 calc(50% - .35rem);max-width:none;border-radius:14px}
  .lb .prev,.lb .next{top:auto;bottom:1.2rem;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .gal a{animation:none}
  .gal img,.lb img{transition:none}
}