/* =====================================================================
   ALBUM FOTO — susunan & bentuk
   ---------------------------------------------------------------------
   Dimuat setelah site.css. Semua susunan memakai markup yang sama
   (figure.gph), yang membedakan hanya atribut data-layout di wadahnya.
   ===================================================================== */

.gclip{position:absolute;width:0;height:0;overflow:hidden}

.gallery{display:grid;gap:clamp(12px,3vw,24px)}

.gph{
  position:relative;margin:0;padding:0;border:0;background:none;
  cursor:pointer;text-align:center;
  transition:transform .35s cubic-bezier(.2,.8,.25,1),box-shadow .35s ease;
}
.gph:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:8px}
.gph-media{display:block;position:relative;overflow:hidden}
.gph img{width:100%;height:100%;object-fit:cover;background:var(--cream-2);display:block}
.gph .pin{display:none}

/* =========================================================
   1 · BENTUK FOTO
   ========================================================= */
/* Catatan: jangan menaruh aturan "reset" seperti
   .gallery[data-frame] .gph-media{border-radius:0} di sini — bobotnya
   lebih tinggi daripada [data-frame="arch"] .gph-media, jadi malah
   membatalkan semua bentuk di bawah ini. */

[data-frame="soft"]   .gph-media{border-radius:14px}
[data-frame="square"] .gph-media{border-radius:0}
[data-frame="circle"] .gph-media{border-radius:50%}
/* Lengkungan atas seperti jendela gereja */
[data-frame="arch"]   .gph-media{border-radius:50% 50% 12px 12px / 38% 38% 4% 4%}
[data-frame="heart"]   .gph-media{clip-path:url(#gclip-heart)}
[data-frame="scallop"] .gph-media{clip-path:url(#gclip-scallop)}

/* Bentuk bulat, hati, dan kelopak hanya masuk akal di kotak persegi. */
[data-frame="circle"]  .gph-media,
[data-frame="heart"]   .gph-media,
[data-frame="scallop"] .gph-media{aspect-ratio:1/1}

/* Bayangan tidak boleh dipasang di elemen yang dipotong —
   ikut terpotong juga. Dipindah ke pembungkusnya. */
[data-frame="soft"] .gph-media,
[data-frame="square"] .gph-media,
[data-frame="arch"] .gph-media{box-shadow:var(--shadow-md)}

/* =========================================================
   2 · SUSUNAN
   ========================================================= */

/* --- Polaroid (tampilan asli) --- */
.gallery[data-layout="polaroid"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:680px){
  .gallery[data-layout="polaroid"]{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
[data-layout="polaroid"] .gph{
  background:#fff;padding:12px 12px 46px;border-radius:6px;box-shadow:var(--shadow-md);
}
[data-layout="polaroid"] .gph:nth-child(3n+1){rotate:-2.2deg}
[data-layout="polaroid"] .gph:nth-child(3n+2){rotate:1.4deg}
[data-layout="polaroid"] .gph:nth-child(3n+3){rotate:-.7deg}
[data-layout="polaroid"] .gph:hover{transform:translateY(-8px) scale(1.03);rotate:0deg;box-shadow:var(--shadow-lg);z-index:2}
[data-layout="polaroid"] .gph-media{aspect-ratio:1/1;box-shadow:none}
[data-layout="polaroid"] figcaption{
  position:absolute;left:12px;right:12px;bottom:12px;
  font-family:var(--script);font-size:1.15rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
[data-layout="polaroid"] .pin{
  display:block;position:absolute;top:-9px;left:50%;translate:-50% 0;
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#f0a2b0,var(--accent));
  box-shadow:0 3px 6px rgba(120,50,75,.3);
}

/* --- Rapi --- */
.gallery[data-layout="grid"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:680px){
  .gallery[data-layout="grid"]{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
[data-layout="grid"] .gph-media{aspect-ratio:1/1}
[data-layout="grid"] .gph:hover{transform:translateY(-6px)}

/* --- Acak tinggi (tembok bata) --- */
.gallery[data-layout="masonry"]{
  display:block;
  columns:2;column-gap:clamp(12px,3vw,20px);
}
@media (min-width:680px){.gallery[data-layout="masonry"]{columns:3}}
@media (min-width:1000px){.gallery[data-layout="masonry"]{columns:4}}
[data-layout="masonry"] .gph{
  break-inside:avoid;margin:0 0 clamp(12px,3vw,20px);
  display:inline-block;width:100%;
}
[data-layout="masonry"] .gph img{height:auto}
[data-layout="masonry"] .gph:hover{transform:translateY(-6px)}

/* --- Roll film --- */
.gallery[data-layout="filmstrip"]{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 2px 18px;
  /* Supaya foto terakhir bisa berhenti di tengah layar */
  scroll-padding-inline:12px;
  -webkit-overflow-scrolling:touch;
}
[data-layout="filmstrip"] .gph{
  flex:0 0 min(74%,290px);scroll-snap-align:center;
}
[data-layout="filmstrip"] .gph-media{aspect-ratio:4/5}
[data-layout="filmstrip"] figcaption{
  margin-top:10px;font-family:var(--serif);font-size:.95rem;color:var(--ink-soft);
}
.gallery[data-layout="filmstrip"]::-webkit-scrollbar{height:6px}
.gallery[data-layout="filmstrip"]::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--accent) 40%,transparent);border-radius:3px;
}

/* Caption di susunan rapi & acak tinggi */
[data-layout="grid"] figcaption,
[data-layout="masonry"] figcaption{
  margin-top:9px;font-family:var(--serif);font-size:.95rem;color:var(--ink-soft);
  line-height:1.45;
}

/* =========================================================
   3 · BUKU ALBUM
   ========================================================= */
.photobook{width:min(430px,100%);margin:0 auto}

.pb-stack{
  position:relative;
  aspect-ratio:3/4;
  perspective:1800px;
}
.pb-page{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:14px 14px 12px;margin:0;
  background:var(--card);border:1px solid var(--line);
  border-radius:6px 16px 16px 6px;
  box-shadow:var(--shadow-md);
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:transform .75s cubic-bezier(.42,.05,.25,1),box-shadow .5s ease;
}
/* Jahitan buku di sisi kiri */
.pb-page::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:16px;
  border-radius:6px 0 0 6px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 26%,transparent),
    transparent);
  pointer-events:none;
}
.pb-page.is-turned{
  transform:rotateY(-172deg);
  box-shadow:none;
}
.pb-media{
  flex:1;min-height:0;overflow:hidden;border-radius:10px;margin-left:8px;
  display:flex;
}
.pb-media img{width:100%;height:100%;object-fit:cover;background:var(--cream-2)}

/* Sisa ruang di kanan supaya tidak bertabrakan dengan nomor halaman. */
.pb-text{margin:12px 0 0 8px;padding:0 18px 6px 0;text-align:center}
.pb-text h4{
  margin:0;font-family:var(--script);font-size:1.5rem;font-weight:400;
  color:var(--accent);line-height:1.2;
}
.pb-text p{
  margin:6px 0 0;font-family:var(--serif);font-size:.94rem;
  line-height:1.55;color:var(--ink-soft);
  /* Cerita panjang dipotong supaya halamannya tidak pecah */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.pb-num{
  position:absolute;right:14px;bottom:8px;
  font-size:.7rem;color:var(--ink-soft);opacity:.5;
}

/* Bentuk foto ikut berlaku di dalam buku */
.photobook[data-frame="circle"]  .pb-media,
.photobook[data-frame="heart"]   .pb-media,
.photobook[data-frame="scallop"] .pb-media{flex:0 0 auto;aspect-ratio:1/1;border-radius:0}
.photobook[data-frame="circle"]  .pb-media{border-radius:50%}
.photobook[data-frame="heart"]   .pb-media{clip-path:url(#gclip-heart)}
.photobook[data-frame="scallop"] .pb-media{clip-path:url(#gclip-scallop)}
.photobook[data-frame="arch"]    .pb-media{border-radius:50% 50% 10px 10px / 30% 30% 3% 3%}
.photobook[data-frame="square"]  .pb-media{border-radius:0}

.pb-nav{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:18px;
}
.pb-btn{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;line-height:1;
  color:#fff;background:linear-gradient(135deg,var(--accent-ink,var(--accent)),var(--accent2-ink,var(--accent2)));
  border:0;cursor:pointer;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 38%,transparent);
  transition:transform .18s ease,opacity .18s ease;
}
.pb-btn:hover:not(:disabled){transform:scale(1.08)}
.pb-btn:disabled{opacity:.32;cursor:default;box-shadow:none}
.pb-count{font-size:.9rem;color:var(--ink-soft);min-width:56px;text-align:center}
.pb-count b{color:var(--accent);font-size:1.05rem}
.pb-hint{text-align:center;margin:10px 0 0;font-size:.8rem;color:var(--ink-soft);opacity:.75}

@media (prefers-reduced-motion: reduce){
  .gph,.pb-page{transition:none}
}