/* Reset ringan */
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; color:#1d1d1f; background:#fff; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

/* Menu Bar */
.menu-bar { position:sticky; top:0; z-index:100; background:rgba(16,24,32,.92); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); box-shadow:0 2px 6px -2px rgba(0,0,0,.4); }
.menu-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:2rem; padding:.55rem clamp(.85rem,2vw,2rem); }
.menu-inner .logo { font-weight:700; font-size:1.05rem; letter-spacing:.5px; color:#ffb400; }
.menu-toggle { display:none; background:none; border:1px solid rgba(255,255,255,.2); color:#fff; padding:.45rem .7rem; font-size:1rem; border-radius:6px; cursor:pointer; }
.menu-links { list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
.menu-links li a { display:block; padding:.6rem .95rem; border-radius:6px; font-size:.85rem; font-weight:500; color:#ecf0f3; transition:.25s; }
.menu-links li a:hover, .menu-links li a.active { background:rgba(255,255,255,.12); }

@media (max-width:860px) {
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .menu-links { position:absolute; left:0; right:0; top:100%; flex-direction:column; background:rgba(16,24,32,.97); padding:.75rem .75rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); max-height:0; overflow:hidden; transition:max-height .5s ease; }
  .menu-links.open { max-height:400px; }
  .menu-links li a { padding:.75rem .85rem; }
}

.site-header { padding:1.25rem clamp(1rem,2.5vw,3rem); background:#101820; color:#fff; }
.site-header h1 { margin:0 0 .25rem; font-size:clamp(1.5rem,4vw,2.5rem); }
.tagline { margin:0; opacity:.65; font-size:.9rem; }

.hero { position:relative; min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.55) saturate(1.1); }
.hero-overlay { position:absolute; inset:0; background:radial-gradient(circle at 50% 60%,rgba(0,0,0,.15),rgba(0,0,0,.75)); }
.hero-content { position:relative; padding:2rem 1.25rem; max-width:800px; }
.hero-content h2 { font-size:clamp(2rem,6vw,3rem); margin:0 0 1rem; }
.hero-content p { margin:0 0 1.25rem; line-height:1.4; }
.btn { display:inline-block; background:#ffb400; color:#101820; padding:.85rem 1.4rem; border-radius:50px; font-weight:600; box-shadow:0 4px 14px -4px rgba(0,0,0,.4); transition:.25s; }
.btn:hover { background:#ffd166; transform:translateY(-2px); }

.gallery { padding:3rem clamp(1rem,2.5vw,3rem) 4rem; }
.grid { --min:220px; display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(var(--min),1fr)); }
.card { position:relative; overflow:hidden; border-radius:14px; background:#111; isolation:isolate; }
.card img { width:100%; height:260px; object-fit:cover; transition:transform .6s cubic-bezier(.4,.2,.1,1); }
.card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05)); opacity:.8; transition:.4s; }
.card .caption { position:absolute; left:0; bottom:0; padding:.75rem 1rem; font-weight:600; letter-spacing:.5px; color:#fff; z-index:2; font-size:.95rem; }
.card:hover img { transform:scale(1.08); }
.card:hover::after { opacity:.3; }

.site-footer { padding:2rem 1rem; text-align:center; font-size:.8rem; background:#101820; color:#d0d3d6; }

/* Halaman foto tunggal */
body.photo-page { background:#050607; color:#f5f6f7; min-height:100dvh; display:flex; flex-direction:column; }
.photo-info-bar { padding:.6rem 1rem; background:#101820; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; opacity:.8; text-align:center; }

/* Single view (index) */

.single-view-wrapper { padding:0; margin:0; min-height:100dvh; display:flex; flex-direction:column; }
.single-view-wrapper.fullscreen { position:fixed; inset:0; z-index:99; background:#050607; }
.single-view-wrapper .intro { max-width:900px; margin:1.2rem auto 1.5rem; color:#fff; text-align:center; }
.single-view-wrapper h1 { margin:.2rem 0 .4rem; font-size:clamp(1.6rem,4vw,2.4rem); }
.single-view { width:100vw; height:calc(100dvh - 60px); max-width:100vw; max-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.single-view figure {
  margin:0;
  position:fixed;
  left:0; top:100px; right:0; bottom:0;
  width:100vw; height:calc(100vh - 100px);
  display:flex; align-items:center; justify-content:center;
  background:#181c20;
  overflow:auto;
  border-radius:0;
  box-shadow:none;
  z-index:10;
}
.zoom-container {
  width:100vw; height:calc(100vh - 100px);
  overflow:auto;
  display:flex; align-items:center; justify-content:center;
}
.zoom-container {
  width:100vw; height:80vh;
  overflow:auto;
  display:flex; align-items:center; justify-content:center;
}
.zoom-container img {
  display:block;
  max-width:100vw;
  max-height:100%;
  width:auto;
  height:100%;
  border-radius:0;
  background:#0d0f10;
  object-fit:contain;
  transition:opacity .7s cubic-bezier(.4,.2,.1,1), transform .3s cubic-bezier(.4,.2,.1,1);
  opacity:1;
  transform:scale(1);
  cursor:grab;
}
.zoom-container img:active { cursor:grabbing; }
.single-view figure::-webkit-scrollbar { width:12px; height:12px; background:#222; }
.single-view figure::-webkit-scrollbar-thumb { background:#444; border-radius:8px; }
.single-view figure { scrollbar-width:thin; scrollbar-color:#444 #222; }
.inline-nav button#zoom-in-btn, .inline-nav button#zoom-out-btn, .inline-nav button#zoom-reset-btn { font-size:1.2rem; padding:.55rem .8rem; }
.single-view img.fade { opacity:0; transform:scale(1.08); }
.single-view img.zoom { animation:zoomIn .7s cubic-bezier(.4,.2,.1,1); }
@keyframes zoomIn { 0%{transform:scale(.92);} 100%{transform:scale(1);} }
.single-view figcaption {
  position:fixed;
  left:0; right:0; bottom:0;
  margin:0;
  padding:.7rem 1.2rem;
  font-size:1.1rem;
  opacity:.85;
  text-align:center;
  color:#fff;
  background:linear-gradient(to top,rgba(24,28,32,.92),rgba(24,28,32,.2));
  z-index:20;
}
.inline-nav { display:flex; gap:1.25rem; align-items:center; justify-content:center; margin:1.5rem 0 0; }
.inline-nav button { background:#101820; color:#fff; border:1px solid rgba(255,255,255,.15); padding:.55rem 1rem; font-size:1.1rem; border-radius:10px; cursor:pointer; transition:.25s; }
.inline-nav button:hover { background:#18242f; }
.inline-nav button:disabled { opacity:.35; cursor:not-allowed; }
#fullscreen-btn { font-size:1.2rem; padding:.55rem .8rem; }

@media (max-width:860px){
  .single-view-wrapper .intro { margin:1rem 1rem 1.2rem; }
  .single-view { height:calc(100dvh - 90px); }
  .single-view figure { height:calc(100dvh - 140px); }
}

@media (max-width:860px){
  .single-view-wrapper { padding:1rem 1rem 2.5rem; }
  .single-view img { border-radius:14px; }
}
.photo-main { flex:1; display:flex; flex-direction:column; padding:1rem clamp(.75rem,2vw,2rem) 3rem; align-items:center; }
.photo-main figure { margin:0; max-width:min(1400px,100%); width:100%; }
.photo-main img { width:100%; height:auto; border-radius:18px; box-shadow:0 16px 40px -10px rgba(0,0,0,.55); }
.photo-main figcaption { text-align:center; font-size:.85rem; opacity:.7; margin-top:.75rem; }
.pager { margin:2.25rem 0 1rem; display:flex; gap:2rem; justify-content:space-between; width:100%; max-width:900px; font-size:.95rem; font-weight:600; }
.pager a { color:#ffb400; }
.pager a:hover { text-decoration:underline; }
.pager .disabled { opacity:.35; cursor:not-allowed; }

@media (max-width:740px) {
  .hero { min-height:55vh; }
  .card img { height:200px; }
  .photo-main { padding:1rem 1rem 2rem; }
  .pager { flex-direction:column; gap:1rem; text-align:center; }
}

@media (prefers-color-scheme: dark) {
  body:not(.photo-page) { background:#0c0f11; color:#e2e5e9; }
  .site-header { background:#0c0f11; }
  .gallery { background:linear-gradient(#0c0f11,#12171b); }
  .site-footer { background:#0c0f11; }
}