/* =====================================================================
   style.css - Website Bali Utama Cakrawala
   Konsep: "Fresko & Koridor Galeri"
   - Dinding plester fresko yang terang, tipografi Bodoni bergaya poster
     museum klasik, aksen oker (pigmen emas tanah) dan merah Venesia.
   - Satu momen utama: koridor karya yang bergeser menyamping, setiap
     karya layar penuh dengan judul raksasa bergaris.
   ===================================================================== */

:root {
  --plester:       #E9E3D8;  /* plester fresko */
  --plester-gelap: #DCD3C3;
  --tinta:         #1A1613;
  --tinta-lembut:  #5A5048;
  --malam:         #15110E;  /* ruang gelap galeri */
  --oker:          #B07A22;  /* oker emas */
  --merah:         #8E2F23;  /* merah Venesia */
  --sage-plester:  #DFE3D5;  /* plester kehijauan */
  --pasir:         #E8DDC8;  /* pasir hangat */

  /* warna sketsa: lembut, tidak mencolok */
  --sk-oker:  #C49A45;
  --sk-sage:  #7F9A74;
  --sk-biru:  #6F8DB3;
  --sk-mawar: #C2807F;
  --sk-ungu:  #9A84AE;
  --sk-bata:  #C0714F;

  --huruf-display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --huruf-teks:    'Jost', 'Futura', 'Century Gothic', 'Segoe UI', sans-serif;
  /* huruf standar untuk paragraf panjang (mudah dibaca) */
  --huruf-baca:    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --tepi: clamp(1.25rem, 4vw, 3.5rem);
  --kurva: cubic-bezier(.7, 0, .2, 1);
  --kurva-lembut: cubic-bezier(.2, .7, .2, 1);

  --butir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--huruf-teks);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .2vw, 1.1rem);
  line-height: 1.75;
  color: var(--tinta);
  background: var(--plester);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--huruf-display); font-weight: 500; margin: 0; line-height: 1; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--oker); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lompat { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--tinta); color: var(--plester); padding: .5rem 1rem; }
.lompat:focus { top: 1rem; }

.judul-bagian {
  font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem);
  letter-spacing: -.02em;
}

/* ---------- Tombol & tautan ---------- */
.tombol {
  display: inline-flex; align-items: center; gap: .8rem;
  font: 400 .95rem var(--huruf-teks); letter-spacing: .06em;
  color: var(--tinta); background: var(--plester);
  border: 1px solid var(--plester);
  padding: 1rem 2.2rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.tombol::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; transition: width .3s; }
.tombol:hover { background: var(--oker); border-color: var(--oker); color: var(--tinta); }
.tombol:hover::after { width: 2.4rem; }
.tombol--gelap { background: var(--tinta); color: var(--plester); border-color: var(--tinta); }
.tombol--gelap:hover { background: var(--merah); border-color: var(--merah); color: var(--plester); }

.tautan {
  font: 400 .95rem var(--huruf-teks); letter-spacing: .04em;
  color: inherit; background: none; border: 0; padding: 0 0 3px; cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.tautan:hover { color: var(--merah); }

/* ---------- Tirai pindah halaman ---------- */
.tirai { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.tirai__panel { position: absolute; inset: 0; transform: translateY(100%); }
.tirai__panel--1 { background: var(--oker); }
.tirai__panel--2 { background: var(--plester); background-image: var(--butir); }
.tirai__merek {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: italic 500 clamp(1.8rem, 1rem + 3vw, 3.4rem) var(--huruf-display);
  color: var(--tinta); opacity: 0;
}
/* datang dari halaman lain: mulai tertutup */
.tirai-tutup .tirai { pointer-events: auto; }
.tirai-tutup .tirai__panel { transform: none; }
.tirai-tutup .tirai__merek { opacity: 1; }
/* membuka saat halaman baru siap */
.tirai--buka .tirai__panel--2 { animation: tiraiKeluar .9s var(--kurva) both; }
.tirai--buka .tirai__panel--1 { animation: tiraiKeluar .9s .14s var(--kurva) both; }
.tirai--buka .tirai__merek    { animation: pudar .35s both; }
/* menutup saat meninggalkan halaman */
.tirai--tutup { pointer-events: auto; }
.tirai--tutup .tirai__panel--1 { animation: tiraiMasuk .6s var(--kurva) both; }
.tirai--tutup .tirai__panel--2 { animation: tiraiMasuk .6s .12s var(--kurva) both; }
.tirai--tutup .tirai__merek    { animation: muncul .4s .45s both; }
@keyframes tiraiMasuk  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes tiraiKeluar { from { transform: translateY(0); }    to { transform: translateY(-100%); } }
@keyframes pudar  { from { opacity: 1; } to { opacity: 0; } }
@keyframes muncul { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Kepala ---------- */
.kepala {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem var(--tepi);
  color: var(--plester);
  /* di atas foto galeri: bayangan gelap tipis supaya tulisan tetap terbaca */
  background-image: linear-gradient(180deg, rgba(21,17,14,.6) 0%, rgba(21,17,14,0) 100%);
  transition: background-color .45s ease, color .45s ease, padding .45s ease, box-shadow .45s ease;
}
/* setelah digulir (dan di halaman selain beranda): bilah plester solid */
.kepala--padat {
  color: var(--tinta);
  background-color: rgba(233,227,216,.95);
  background-image: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(26,22,19,.12), 0 10px 30px rgba(26,22,19,.06);
  padding-top: .85rem; padding-bottom: .85rem;
}
.kepala__merek {
  font: italic 500 1.35rem var(--huruf-display);
  text-decoration: none; letter-spacing: -.01em;
}
.kepala__menu { display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); }
.kepala__menu a {
  font-size: .95rem; font-weight: 400; letter-spacing: .03em;
  text-decoration: none; position: relative; padding: .2rem 0;
}
.kepala__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--kurva);
}
.kepala__menu a:hover::after, .kepala__menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.kepala__tombol { display: none; }

/* ---------- 1. Hero menempel, lalu ditutup "Tentang kami" ---------- */
.tumpuk { position: relative; }
.hero {
  --p: 0; /* 0 = di atas, 1 = sudah tertutup (diatur script.js) */
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden;
  background: var(--malam);
  color: var(--plester);
}
.hero__panggung {
  position: absolute; inset: 0;
  transform: scale(calc(1 + var(--p) * .12));
  transform-origin: 50% 30%;
}
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero__slide.aktif { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide.aktif img { animation: kenburns 9s ease-out both; }
.hero__slide--kosong { background: #4A4136; background-image: var(--butir); }
@keyframes kenburns { from { transform: scale(1.12) translateX(1.5%); } to { transform: scale(1) translateX(0); } }

.hero::after { /* bayangan agar teks terbaca + gelap saat digulir */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(21,17,14,.85) 0%, rgba(21,17,14,.25) 50%, rgba(21,17,14,.35) 100%),
    rgba(21,17,14, calc(var(--p) * .7));
}
.hero__teks {
  position: absolute; z-index: 2;
  left: var(--tepi); right: var(--tepi); bottom: clamp(6rem, 14vh, 9rem);
  transform: translateY(calc(var(--p) * -90px));
  opacity: calc(1 - var(--p) * 1.6);
}
.hero__judul {
  font-size: clamp(3.2rem, 1rem + 8.5vw, 10rem);
  line-height: .9; letter-spacing: -.035em;
  max-width: 12ch;
}
.hero__sub {
  font: italic 400 clamp(1.3rem, 1rem + 1.3vw, 2.3rem) var(--huruf-display);
  color: #E8C88A; margin: 1.4rem 0 1rem; line-height: 1.2;
}
.hero__ket { max-width: 46ch; font-size: clamp(1rem, .95rem + .25vw, 1.15rem); color: rgba(233,227,216,.85); margin: 0; }

.hero__kendali {
  position: absolute; z-index: 3; right: var(--tepi); bottom: 2.2rem;
  display: flex; align-items: center; gap: 1rem;
  font: 400 .9rem var(--huruf-teks); letter-spacing: .08em;
  opacity: calc(1 - var(--p) * 2);
}
.hero__progres { width: 90px; height: 1px; background: rgba(233,227,216,.3); overflow: hidden; }
.hero__progres span { display: block; height: 100%; width: 100%; background: var(--plester); transform-origin: left; transform: scaleX(0); }
.hero__progres span.jalan { animation: progres var(--durasi, 6.5s) linear both; }
@keyframes progres { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__panah {
  width: 42px; height: 42px; border-radius: 50%;
  background: none; border: 1px solid rgba(233,227,216,.45); color: var(--plester);
  cursor: pointer; font-size: 1rem; transition: background-color .3s, color .3s;
}
.hero__panah:hover { background: var(--plester); color: var(--tinta); }
.hero__gulir {
  position: absolute; z-index: 3; left: var(--tepi); bottom: 2.4rem;
  font-size: .85rem; letter-spacing: .12em; text-decoration: none; color: rgba(233,227,216,.8);
  display: flex; align-items: center; gap: .8rem;
  opacity: calc(1 - var(--p) * 2);
}
.hero__gulir::before { content: ""; width: 1px; height: 38px; background: currentColor; animation: denyut 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes denyut { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ---------- 2. Tentang kami ---------- */
.tentang {
  position: relative; z-index: 1;
  background: var(--plester); background-image: var(--butir);
  padding: clamp(5rem, 11vw, 10rem) var(--tepi);
  box-shadow: 0 -40px 80px rgba(0,0,0,.35);
}
.tentang__wadah {
  max-width: 82rem; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
  row-gap: clamp(2.5rem, 5vw, 4.5rem);
}
.tentang__kepala { grid-column: 1 / -1; }
.tentang__sub {
  font: 400 clamp(1.05rem, 1rem + .3vw, 1.25rem) var(--huruf-baca);
  color: var(--merah); margin: 1rem 0 0; letter-spacing: 0;
}
.tentang__foto {
  grid-column: 1 / span 6; margin: 0;
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; align-self: start;
  background: var(--plester-gelap);
}
.tentang__foto { transform: translateZ(0); } /* layer sendiri: mencegah kedip di HP */
.tentang__foto img {
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover;
  will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.tentang__foto-kosong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinta-lembut); font-style: italic; }
.tentang__isi {
  grid-column: 8 / span 5; align-self: center; max-width: 36rem;
  font-family: var(--huruf-baca); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.8; color: #2E2722;
}
.tentang__isi p { margin: 0 0 1.15em; }
.tentang__lead { /* sama seperti paragraf lain: tanpa tebal */
  font-size: inherit; font-weight: 400; line-height: inherit; color: inherit;
}

/* ---------- 3. Koridor karya (geser menyamping) ---------- */
.koridor { position: relative; z-index: 1; background: var(--sage-plester); background-image: var(--butir); color: var(--tinta); }
.koridor__pembuka { position: relative; overflow: hidden; padding: clamp(6rem, 12vw, 10rem) var(--tepi) clamp(3rem, 6vw, 5rem); }
.koridor__judul {
  font-size: clamp(3.6rem, 1rem + 11vw, 13rem);
  font-style: italic; line-height: .88; letter-spacing: -.04em;
}
.koridor__pembuka p { max-width: 40ch; margin: 2rem 0 0 auto; color: var(--tinta-lembut); }

.koridor__rel {
  /* tiap karya cukup ~60% tinggi layar untuk digulir, supaya cepat dilewati */
  --langkah: 60vh;
  position: relative;
  height: calc(100vh + (var(--jumlah, 1) - 1) * var(--langkah));
}
.koridor__layar { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--malam); }
.koridor__trek { display: flex; height: 100%; width: calc(var(--jumlah, 1) * 100vw); will-change: transform; }

.panel { position: relative; flex: 0 0 100vw; height: 100%; overflow: hidden; color: var(--plester); }
.panel__bingkai { position: absolute; inset: 0; overflow: hidden; }
.panel__gambar {
  position: absolute; top: 0; left: -15%;
  width: 130%; max-width: none; height: 100%; object-fit: cover;
  will-change: transform;
}
.panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(21,17,14,.55) 0%, transparent 55%),
              linear-gradient(0deg, rgba(21,17,14,.6) 0%, transparent 40%);
}
.panel__raksasa { /* judul raksasa bergaris, bergerak dengan laju berbeda */
  position: absolute; z-index: 2; left: var(--tepi); top: 14vh;
  margin: 0; white-space: nowrap; pointer-events: none;
  font: italic 500 clamp(4rem, 1.5rem + 10vw, 14rem) var(--huruf-display);
  line-height: 1; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233,227,216,.85);
  will-change: transform;
}
.panel__label { /* hanya judul + "Lihat utuh" */
  position: absolute; z-index: 3; left: var(--tepi); bottom: clamp(5.5rem, 12vh, 8rem);
  width: min(30rem, calc(100% - 2 * var(--tepi)));
  display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
}
.panel__nomor {
  grid-row: span 4;
  font: italic 400 3.2rem var(--huruf-display); line-height: .85; color: #E8C88A;
}
.panel__label h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); line-height: 1.1; }
.panel__tgl { font-size: .9rem; letter-spacing: .04em; color: rgba(233,227,216,.7); margin: .4rem 0 .6rem; }
.panel__ket { font-size: 1rem; line-height: 1.6; color: rgba(233,227,216,.9); margin-bottom: 1rem; }
.panel__label .tautan { justify-self: start; color: var(--plester); }
.panel__label .tautan:hover { color: #E8C88A; }

.koridor__lewati { /* tombol untuk langsung melompati semua slide karya */
  position: absolute; z-index: 4; left: var(--tepi); bottom: 2.1rem;
  display: inline-flex; align-items: center; gap: .6rem;
  font: 400 .9rem var(--huruf-teks); letter-spacing: .04em; text-decoration: none;
  color: var(--tinta); background: rgba(233,227,216,.92);
  padding: .65rem 1.2rem; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: background-color .25s, transform .25s;
}
.koridor__lewati:hover { background: var(--plester); transform: translateY(-2px); }
#lanjut-karya { scroll-margin-top: 70px; }
.koridor__lewati svg { transition: transform .25s; }
.koridor__lewati:hover svg { transform: translateY(2px); }
.koridor__status {
  position: absolute; z-index: 4; right: var(--tepi); bottom: 2.4rem; color: var(--plester);
  display: flex; align-items: center; gap: 1rem;
  font: 400 .9rem var(--huruf-teks); letter-spacing: .08em;
}
.koridor__garis { width: clamp(80px, 14vw, 200px); height: 1px; background: rgba(233,227,216,.3); }
.koridor__garis span { display: block; height: 100%; background: var(--plester); transform-origin: left; transform: scaleX(0); }

.koridor__penutup {
  padding: clamp(5rem, 10vw, 8rem) var(--tepi);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
  position: relative; overflow: hidden;
}
.koridor__penutup p { font: italic 400 clamp(1.4rem, 1rem + 1.5vw, 2.4rem) var(--huruf-display); margin: 0; max-width: 24ch; line-height: 1.2; }

/* ---------- 4. Kontak ---------- */
.kontak {
  position: relative; z-index: 1;
  background: var(--plester); background-image: var(--butir);
  padding: clamp(5rem, 11vw, 9rem) var(--tepi);
}
.kontak__wadah {
  max-width: 82rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 7rem);
}
.kontak__intro p { margin-top: 1.6rem; max-width: 34ch; color: var(--tinta-lembut); }
.kontak__baris { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.isian--nama { grid-column: 1 / -1; }
.isian { margin-bottom: 1.6rem; }
.isian label { display: block; font-size: .85rem; letter-spacing: .05em; color: var(--tinta-lembut); margin-bottom: .2rem; }
.isian input, .isian textarea {
  width: 100%;
  font: 400 1.15rem var(--huruf-teks); color: var(--tinta);
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(26,22,19,.35);
  padding: .55rem 0;
  transition: border-color .3s;
}
.isian textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.isian input::placeholder { color: rgba(26,22,19,.3); }
.isian input:focus, .isian textarea:focus { outline: none; border-bottom: 2px solid var(--oker); }
.isian__galat { min-height: 1.3em; margin: .35rem 0 0; font-size: .88rem; color: var(--merah); }
.isian--salah input, .isian--salah textarea { border-bottom-color: var(--merah); }
.madu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pemberitahuan { padding: 1rem 1.2rem; margin-bottom: 2rem; border-left: 3px solid; font-weight: 400; }
.pemberitahuan--sukses { background: rgba(62,107,74,.12); border-color: #3E6B4A; color: #234030; }
.pemberitahuan--gagal  { background: rgba(142,47,35,.1);  border-color: var(--merah); color: var(--merah); }

/* ---------- Kaki ---------- */
.kaki {
  position: relative; z-index: 1;
  background: var(--pasir); background-image: var(--butir); color: var(--tinta);
  padding: clamp(4rem, 8vw, 6rem) var(--tepi) 2rem;
  overflow: hidden;
}
.kaki__atas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.kaki__ajakan { font: italic 400 clamp(1.4rem, 1rem + 1.4vw, 2.3rem) var(--huruf-display); max-width: 22ch; margin: 0; line-height: 1.2; }
.kaki__menu { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.kaki__menu a { text-decoration: none; font-weight: 400; border-bottom: 1px solid rgba(26,22,19,.3); }
.kaki__menu a:hover { border-color: var(--tinta); }
.kaki__merek {
  margin: clamp(3rem, 7vw, 5rem) 0 1rem;
  font: italic 500 clamp(2.6rem, 9.6vw, 11rem) var(--huruf-display);
  letter-spacing: -.045em; line-height: .9; white-space: nowrap;
  color: var(--tinta);
}
.kaki__hak { font-size: .85rem; color: var(--tinta-lembut); margin: 0; }

/* ---------- Halaman arsip (karya.php) ---------- */
.arsip { position: relative; overflow: hidden; background: var(--plester); background-image: var(--butir); padding: clamp(8rem, 14vw, 11rem) var(--tepi) 6rem; min-height: 100vh; }
.arsip__kepala { max-width: 82rem; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.arsip__judul { font-size: clamp(3.2rem, 1rem + 9vw, 11rem); font-style: italic; letter-spacing: -.04em; line-height: .9; }
.arsip__kepala p { max-width: 42ch; margin-top: 1.8rem; color: var(--tinta-lembut); }
.arsip__grid {
  max-width: 82rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2.5rem);
}
.kartu { margin: 0; }
.kartu__gambar {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--plester-gelap);
}
.kartu__gambar img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--kurva-lembut); }
.kartu__gambar:hover img { transform: scale(1.06); }
.kartu figcaption { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-top: 1.1rem; }
.kartu__nomor { font: italic 400 2rem var(--huruf-display); color: var(--oker); line-height: 1; }
.kartu h2 { font-size: 1.45rem; line-height: 1.15; }
.kartu__tgl { font-size: .85rem; letter-spacing: .04em; color: var(--tinta-lembut); margin: .35rem 0 .5rem; }
.kartu__ket { font-size: .98rem; line-height: 1.6; color: var(--tinta-lembut); margin: 0; }
.arsip__kosong { max-width: 82rem; margin: 0 auto; font-style: italic; }
.arsip__kembali { max-width: 82rem; margin: clamp(4rem, 8vw, 6rem) auto 0; }

.halaman { max-width: 82rem; margin: 4rem auto 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.halaman a, .halaman span {
  min-width: 2.8rem; padding: .5rem .9rem; text-align: center;
  border: 1px solid rgba(26,22,19,.25); text-decoration: none; font-weight: 400;
}
.halaman a:hover { border-color: var(--tinta); }
.halaman span[aria-current] { background: var(--tinta); color: var(--plester); border-color: var(--tinta); }
.halaman .halaman__jeda { border: 0; min-width: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--malam); color: var(--plester);
}
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; animation: muncul .4s both; }
.lightbox::backdrop { background: rgba(0,0,0,.7); }
.lightbox__isi {
  margin: 0; height: 100vh; height: 100dvh; padding: 4.5rem 1rem 2rem;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.4rem; justify-items: center;
}
.lightbox__isi img { max-height: 100%; max-width: 100%; object-fit: contain; }
.lightbox__isi figcaption { max-width: 60ch; text-align: center; max-height: 26vh; overflow-y: auto; }
.lightbox__isi h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); font-style: italic; }
.lightbox__tgl { font-size: .9rem; letter-spacing: .05em; color: rgba(233,227,216,.65); margin: .5rem 0 .7rem; }
.lightbox__isi figcaption p:last-child { white-space: pre-line; margin: 0; }
.lightbox__tutup, .lightbox__navi { background: none; border: 0; color: var(--plester); cursor: pointer; font-family: var(--huruf-teks); }
.lightbox__tutup { position: absolute; top: 1rem; right: 1.4rem; font-size: 2.6rem; line-height: 1; z-index: 2; font-weight: 300; }
.lightbox__navi { font-size: 1.6rem; width: 56px; height: 56px; margin: 0 clamp(.4rem, 2vw, 1.5rem); border: 1px solid rgba(233,227,216,.35); border-radius: 50%; }
.lightbox__navi:hover, .lightbox__tutup:hover { color: #E8C88A; border-color: #E8C88A; }
.lightbox__navi[hidden] { display: block; visibility: hidden; }

/* ---------- Sketsa latar warna-warni ---------- */
.sketsa { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tentang__wadah, .kontak__wadah, .koridor__pembuka > :not(.sketsa), .koridor__penutup > :not(.sketsa),
.kaki > :not(.sketsa), .arsip__kepala > :not(.sketsa), .arsip__grid, .halaman, .arsip__kembali { position: relative; z-index: 1; }
.sketsa__item { position: absolute; display: block; will-change: transform; }
.sk {
  width: 100%; height: 100%; display: block; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: .5;
}
.sk--oker  { color: var(--sk-oker); }
.sk--sage  { color: var(--sk-sage); }
.sk--biru  { color: var(--sk-biru); }
.sk--mawar { color: var(--sk-mawar); }
.sk--ungu  { color: var(--sk-ungu); }
.sk--bata  { color: var(--sk-bata); }
/* noda cat air yang sangat lembut */
.sketsa__cat { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .32; }
.sketsa__cat--oker  { background: radial-gradient(circle at 40% 40%, var(--sk-oker), transparent 68%); }
.sketsa__cat--sage  { background: radial-gradient(circle at 40% 40%, var(--sk-sage), transparent 68%); }
.sketsa__cat--biru  { background: radial-gradient(circle at 40% 40%, var(--sk-biru), transparent 68%); }
.sketsa__cat--mawar { background: radial-gradient(circle at 40% 40%, var(--sk-mawar), transparent 68%); }
.sketsa__cat--ungu  { background: radial-gradient(circle at 40% 40%, var(--sk-ungu), transparent 68%); }
.sketsa__cat--bata  { background: radial-gradient(circle at 40% 40%, var(--sk-bata), transparent 68%); }


/* ---------- Halaman galeri satu karya (gal.php) ---------- */
.gal {
  position: relative; overflow: hidden;
  background: var(--plester); background-image: var(--butir);
  padding: clamp(7.5rem, 13vw, 10rem) var(--tepi) clamp(4rem, 8vw, 6rem);
  min-height: 100vh;
}
.gal > :not(.sketsa) { position: relative; z-index: 1; }
.gal__kepala { max-width: 60rem; margin: 0 auto clamp(3rem, 7vw, 5.5rem); text-align: center; }
.gal__label { font: 400 .9rem var(--huruf-teks); letter-spacing: .14em; color: var(--tinta-lembut); margin: 0 0 .8rem; }
.gal__oleh {
  font-size: clamp(2.8rem, 1.2rem + 7vw, 7.5rem);
  font-style: italic; letter-spacing: -.035em; line-height: .95;
}
.gal__koleksi { font: 500 clamp(1.05rem, 1rem + .4vw, 1.3rem) var(--huruf-baca); color: var(--merah); margin: 1.3rem 0 .4rem; }
.gal__jumlah { font: 400 .92rem var(--huruf-baca); color: var(--tinta-lembut); margin: 0; }
.gal__pesan { max-width: 60rem; margin: 0 auto 2.5rem; }

.gal__daftar { max-width: 62rem; margin: 0 auto; display: grid; gap: clamp(4rem, 9vw, 7rem); }
.gal__karya { scroll-margin-top: 90px; }
.gal__gambar {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; position: relative;
  background: var(--plester-gelap);
  box-shadow: 0 30px 60px rgba(26,22,19,.18);
}
.gal__gambar img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: #EFE9DE; }
.gal__teks {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem);
  max-width: 46rem; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
}
.gal__nomor { font: italic 400 clamp(2.4rem, 2rem + 1.5vw, 3.4rem) var(--huruf-display); line-height: .9; color: var(--oker); }
.gal__teks h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.1; margin-bottom: .9rem; }
.gal__teks p { /* sama seperti teks di bawah "Kirim pesan" pada halaman utama */
  font-family: var(--huruf-teks); font-weight: 300; font-style: normal;
  font-size: inherit; line-height: 1.75; color: var(--tinta-lembut);
  margin: 0 0 1em;
}
.gal__hubungi { margin-top: .6rem; }
.gal__kosong { max-width: 40rem; margin: 4rem auto; text-align: center; }
.gal__kosong h1 { font-size: clamp(2.4rem, 1.5rem + 4vw, 4.5rem); font-style: italic; margin-bottom: 1rem; }
.gal__kosong p { font-family: var(--huruf-baca); color: var(--tinta-lembut); margin-bottom: 2rem; }

/* Popup Hubungi */
.hubungi {
  width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem);
  padding: 0; border: 0; overflow: auto;
  background: var(--plester); background-image: var(--butir); color: var(--tinta);
  box-shadow: 0 40px 100px rgba(21,17,14,.4);
}
.hubungi[open] { animation: hubungiMasuk .4s var(--kurva-lembut) both; }
@keyframes hubungiMasuk { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hubungi::backdrop { background: rgba(21,17,14,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hubungi__isi { padding: clamp(1.6rem, 5vw, 2.6rem); }
.hubungi__tutup {
  position: absolute; top: .8rem; right: .9rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(26,22,19,.07); color: var(--tinta); font-size: 1.6rem; line-height: 1;
}
.hubungi__tutup:hover { background: rgba(26,22,19,.14); }
.hubungi__label { font: 400 .82rem var(--huruf-teks); letter-spacing: .12em; color: var(--tinta-lembut); margin: 0 0 .5rem; }
.hubungi h2 { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.8rem); font-style: italic; margin-bottom: .4rem; }
.hubungi__karya { font: 500 1.02rem var(--huruf-baca); color: var(--merah); margin: 0 0 1.6rem; }
.hubungi .isian input, .hubungi .isian textarea { font-family: var(--huruf-baca); }
.hubungi .isian textarea { min-height: 6rem; }
.hubungi .tombol { width: 100%; justify-content: center; }
.hubungi__terima { text-align: center; padding-top: 3rem; padding-bottom: 3rem; }
.hubungi__terima p:not(.hubungi__label) { font: 400 1.02rem/1.7 var(--huruf-baca); color: var(--tinta-lembut); margin: .6rem 0 2rem; }
.hubungi__terima .tombol { width: auto; }
@media (max-width: 860px) {
  .hubungi .kontak__baris { grid-template-columns: 1fr; }
}

/* ---------- Efek muncul saat digulir (hanya bila JS aktif) ---------- */
.js [data-ungkap] {
  opacity: 0; transform: translateY(36px);
  transition: opacity 1s var(--kurva-lembut), transform 1.1s var(--kurva-lembut);
}
.js [data-ungkap="tirai"] { opacity: 1; transform: none; }
.js [data-ungkap="tirai"]::after { /* tirai warna plester yang tersingkap ke atas */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--plester);
  transform-origin: top; transition: transform 1.4s var(--kurva);
}
.js [data-ungkap].tampak { opacity: 1; transform: none; }
.js [data-ungkap="tirai"].tampak::after { transform: scaleY(0); }
/* sketsa "tergambar" perlahan saat masuk layar */
.js [data-ungkap="gores"] {
  opacity: .5;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.8s ease-in-out;
}
.js [data-ungkap="gores"].tampak { opacity: .5; stroke-dashoffset: 0; }

/* ---------- Responsif ---------- */
@media (max-width: 860px) {
  .kepala__tombol {
    display: block; position: relative; z-index: 2; width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer; color: inherit;
  }
  .kepala__tombol .garis, .kepala__tombol .garis::before {
    position: absolute; left: 8px; width: 28px; height: 1px; background: currentColor; content: "";
    transition: transform .35s var(--kurva);
  }
  .kepala__tombol .garis { top: 18px; }
  .kepala__tombol .garis::before { left: 0; top: 8px; }
  .kepala__menu {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 1.2rem;
    padding: var(--tepi);
    background: var(--plester); background-image: var(--butir);
    clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--kurva);
  }
  .kepala__menu a { font: italic 500 2.4rem var(--huruf-display); color: var(--tinta); }
  .kepala.menu-buka { background: none; box-shadow: none; color: var(--tinta); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kepala.menu-buka .kepala__menu { clip-path: inset(0 0 0 0); }
  .kepala.menu-buka .garis { transform: translateY(4px) rotate(45deg); }
  .kepala.menu-buka .garis::before { transform: translateY(-8px) rotate(-90deg); }
  .kepala.menu-buka .kepala__merek, .kepala.menu-buka .kepala__tombol { position: relative; z-index: 2; color: var(--tinta); }

  .tentang__foto, .tentang__isi { grid-column: 1 / -1; }
  .kontak__wadah { grid-template-columns: 1fr; }
  .kontak__baris { grid-template-columns: 1fr; }
  .hero__kendali .hero__progres { display: none; }
  .hero__gulir { display: none; }
  .panel__nomor { font-size: 2.4rem; }
  .lightbox[open] { grid-template-columns: 1fr; }
  /* Di HP: tombol panah di tengah sisi kiri/kanan gambar, jauh dari bilah
     navigasi HP di bagian bawah layar */
  .lightbox__navi {
    position: absolute; z-index: 3; top: 50%; bottom: auto;
    transform: translateY(-50%);
    width: 44px; height: 44px; margin: 0; font-size: 1.25rem;
    background: rgba(21,17,14,.55); border-color: rgba(233,227,216,.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .lightbox__navi--prev { left: .5rem; }
  .lightbox__navi--next { right: .5rem; }
  .lightbox__isi {
    padding: calc(3.8rem + env(safe-area-inset-top, 0px)) .8rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Hormati pengguna yang mematikan animasi ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
  .js [data-ungkap] { opacity: 1; transform: none; }
  .js [data-ungkap="tirai"]::after { display: none; }
  .js [data-ungkap="gores"] { opacity: .5; stroke-dashoffset: 0; }
  .hero { position: relative; }
  /* koridor menjadi tumpukan vertikal biasa */
  .koridor__rel { height: auto; }
  .koridor__layar { position: relative; height: auto; }
  .koridor__trek { flex-direction: column; width: 100%; transform: none !important; }
  .panel { flex: none; width: 100%; height: 100vh; }
  .panel__gambar { left: 0; width: 100%; transform: none !important; }
  .panel__raksasa { transform: none !important; }
  .koridor__status { display: none; }
}