/* ==========================================================================
   depan.css — beranda tamu bertema putih bercahaya: pembuka sinematik,
   adegan video layar penuh (gaya panggung sinema di film.css) dengan kartu kaca
   berisi judul hijau-emas berdimensi dan lambang 3D yang melayang,
   papan layanan, alur kunjungan, jam layanan, lokasi kantor dalam bingkai 3D,
   dan dermaga running text berbahan kaca. Gaya portal ada di film.css.
   ========================================================================== */

body.depan { background: var(--latar); overflow-x: hidden; }
body.depan > main, body.depan > footer { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- pembuka sinematik
   1. cahaya putih bernapas, lambang Kemenag berputar seperti koin emas dan mendarat
   2. garis emas terbentang, nama kantor muncul
   3. layar memudar sementara panggung video "terbang" dari kejauhan memenuhi layar */
.pembuka {
  position: fixed; inset: 0; z-index: 200; overflow: hidden; cursor: pointer;
  background:
    radial-gradient(60% 50% at 50% 46%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    #F7FCF9;
  animation: pembuka-pudar .75s 1.9s ease forwards, pembuka-paksa .3s 3.4s forwards;
}
.pembuka__cahaya { position: absolute; inset: 0; }
.pembuka__cahaya i { position: absolute; width: 70vmax; aspect-ratio: 1; border-radius: 50%; opacity: .55; animation: pembuka-hanyut 3s ease-in-out infinite alternate; }
.pembuka__cahaya i:nth-child(1) { left: -22vmax; top: -26vmax; background: radial-gradient(closest-side, rgba(0, 195, 100, .45), rgba(0, 195, 100, 0)); }
.pembuka__cahaya i:nth-child(2) { right: -24vmax; top: -18vmax; background: radial-gradient(closest-side, rgba(255, 196, 0, .5), rgba(255, 196, 0, 0)); animation-delay: -1s; }
.pembuka__cahaya i:nth-child(3) { left: 20vw; bottom: -40vmax; background: radial-gradient(closest-side, rgba(30, 164, 255, .3), rgba(30, 164, 255, 0)); animation-delay: -2s; }
@keyframes pembuka-hanyut { to { transform: translate3d(4vmax, 3vmax, 0) scale(1.1); } }
.pembuka__tengah {
  position: absolute; inset: 0; perspective: 900px;
  display: grid; justify-items: center; align-content: center; gap: 20px; padding: 0 24px; text-align: center;
  animation: kredit-pergi .55s 1.65s ease forwards;
}
.pembuka__kop { width: min(460px, 86vw); text-align: left; animation: kredit-teks .9s .15s ease both; }
.pembuka__kop .garis-kop { transform-origin: left; animation: garis-buka 1s .5s var(--kurva) both; }
@keyframes pembuka-pudar { to { opacity: 0; visibility: hidden; } }
@keyframes kredit-pergi { to { opacity: 0; transform: scale(1.08); } }
@keyframes kredit-teks { from { opacity: 0; } }
.pembuka.pergi { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
@keyframes pembuka-paksa { to { visibility: hidden; pointer-events: none; } }

/* ---------------------------------------------------------------- bilah atas: kapsul kaca putih yang melayang di atas video */
.bilah {
  position: fixed; z-index: 60; top: calc(24px + var(--aman-atas)); left: 26px; right: 26px;
  display: flex; align-items: center; gap: 22px;
  height: 64px; padding: 0 12px 0 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 18px 40px -22px rgba(6, 30, 20, .55), inset 0 1px 0 #fff;
  transition: background var(--t), box-shadow var(--t), top var(--t) var(--kurva), left var(--t) var(--kurva), right var(--t) var(--kurva);
}
.bilah.tebal {
  top: calc(12px + var(--aman-atas)); left: 16px; right: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(0, 166, 81, .14), 0 16px 34px -18px rgba(12, 70, 42, .4);
}
.bilah__merek { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--tinta); text-decoration: none; }
.bilah__merek:hover { color: var(--tinta); }
.bilah__merek img { width: 42px; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 120, 60, .25)); }
.bilah__merek span { display: grid; line-height: 1.2; min-width: 0; }
.bilah__merek b { font-weight: 750; font-size: 1rem; white-space: nowrap; }
.bilah__merek small { color: var(--hijau-tua); font-size: .78rem; font-weight: 650; }
.bilah__nav { display: flex; gap: 2px; margin-left: auto; }
.bilah__nav a {
  padding: 9px 14px; border-radius: 99px;
  color: var(--tinta-2); text-decoration: none; font-size: .92rem; font-weight: 650;
  transition: color var(--t-cepat), background var(--t-cepat);
}
.bilah__nav a:hover { color: var(--hijau-tua); background: rgba(0, 166, 81, .09); }
.bilah__isi { margin-left: 6px; }

/* ---------------------------------------------------------------- adegan pembuka: video sebagai latar utama */
.adegan {
  --px: 0; --py: 0; --g: 0;
  position: relative; height: 100vh; height: 100svh; min-height: 640px;
}
.adegan__isi {
  position: absolute; z-index: 2;
  inset: calc(108px + var(--aman-atas)) clamp(40px, 5.5vw, 100px) calc(110px + var(--aman-bawah));
  display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  pointer-events: none;
}
.adegan__isi > * { pointer-events: auto; }
.adegan__kartu {
  position: relative; display: grid; justify-items: start; text-align: left;
  padding: clamp(24px, 3.4vh, 36px) clamp(26px, 2.6vw, 40px);
  border-radius: 30px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px) saturate(1.45); backdrop-filter: blur(14px) saturate(1.45);
  box-shadow: 0 46px 90px -44px rgba(6, 20, 40, .75), 0 0 0 1px rgba(255, 255, 255, .35), inset 0 1px 0 #fff;
  transform: translate3d(calc(var(--px) * 9px), calc(var(--py) * 7px - var(--g) * 160px), 0);
  opacity: calc(1 - var(--g) * 2.4);
}
.adegan__kartu::before {
  content: ""; position: absolute; left: 30px; right: 30px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #00C364, #FFC400, #FF8A1F, #FF4F8E, #8B6CFF, #1EA4FF, #00C2B2);
}
/* sisi kanan: medali lambang tepat di tengah kolomnya (miring 3D mengikuti penunjuk),
   lalu dua cip informasi berjajar rapi di bawahnya; tidak ada yang saling menimpa */
.adegan__visual {
  position: relative; justify-self: center; width: min(400px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 26px);
  perspective: 1100px;
  transform: translate3d(calc(var(--px) * 22px), calc(var(--py) * 16px - var(--g) * 90px), 0);
  opacity: calc(1 - var(--g) * 2.4);
}
.adegan__medali {
  position: relative; width: min(100%, 44vh); aspect-ratio: 1;
  display: grid; place-items: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--px) * 8deg)) rotateX(calc(var(--py) * -6deg));
}
.adegan__medali .medali { width: 74%; }
/* dua cip sebaris di bawah medali; boleh sedikit lebih lebar dari medali (tetap di tengah kolom) */
.adegan__cip-baris { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px 12px; width: max-content; }
.adegan__cip {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 16px; white-space: nowrap;
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 20px 40px -18px rgba(6, 20, 40, .6), inset 0 1px 0 #fff;
  color: var(--tinta); font-size: .86rem; font-weight: 650; line-height: 1.25;
  animation: cip-apung 7s ease-in-out infinite;
}
.adegan__cip b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--hijau-tua); font-variant-numeric: tabular-nums; }
.adegan__cip small { display: block; color: var(--tinta-3); font-size: .74rem; font-weight: 600; }
.adegan__cip .ikon { width: 30px; height: 30px; padding: 6px; border-radius: 10px; color: #fff; background: linear-gradient(160deg, #19C26D, #00A651); box-shadow: 0 8px 16px -8px rgba(0, 166, 81, .9); }
.adegan__cip--emas .ikon { background: linear-gradient(160deg, #FFD84D, #E6A100); box-shadow: 0 8px 16px -8px rgba(230, 161, 0, .9); }
.adegan__cip--a { animation-delay: -3s; }

/* identitas: salam polos, nama aplikasi dalam satu warna, nama kantor, lalu garis kop ganda
   (tebal-tipis) seperti kop surat resmi — tanpa kapsul, titik berdenyut, gradien, atau kilau */
.panggung__salam { margin: 0; font-size: clamp(.95rem, 1.15vw, 1.05rem); font-weight: 600; color: var(--tinta-2); }
.judul-film {
  margin: 6px 0 0;
  font-family: var(--font-judul); font-weight: 800; line-height: .98; letter-spacing: -.035em;
  font-size: clamp(2.5rem, min(4.9vw, 9.2vh), 4.7rem);
  color: var(--hijau-tua);
  text-wrap: balance;
}
.panggung__instansi { margin-top: 14px; font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 700; color: var(--tinta); letter-spacing: -.005em; }
.panggung__garis { width: 100%; margin: 16px 0 4px; transform-origin: left; }
.panggung__ajakan { max-width: 34rem; margin-top: 10px; font-size: clamp(.98rem, 1.2vw, 1.08rem); color: var(--tinta-2); line-height: 1.6; }
.panggung__aksi { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.panggung__aksi .tombol--besar { min-width: 200px; }

.status-kini {
  --st: var(--tinta-3);
  display: inline-flex; align-items: flex-start; gap: 12px; margin-top: 18px; max-width: 100%;
  padding: 11px 16px 11px 14px; border-radius: 16px; text-align: left;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--garis);
  box-shadow: var(--bayang-kecil);
}
.status-kini p { display: flex; flex-wrap: wrap; gap: 1px .45em; font-size: .9rem; color: var(--tinta-2); }
.status-kini b { color: var(--tinta); font-weight: 700; }
.status-kini__titik { position: relative; width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: var(--st); box-shadow: 0 0 10px var(--st); flex: none; }
.status-kini__titik::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--st); animation: denyut 2.2s ease-out infinite; }
.status-kini--buka { --st: var(--hijau); }
.status-kini--istirahat { --st: var(--emas); }
.status-kini--libur { --st: var(--jingga); }
@keyframes denyut { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }

.panggung__turun {
  position: absolute; left: 50%; bottom: calc(102px + var(--aman-bawah)); z-index: 3;
  width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; border-radius: 50%;
  color: var(--hijau-tua); border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 30px -14px rgba(6, 20, 40, .6);
  opacity: calc(1 - var(--g) * 3);
  animation: turun 2.4s ease-in-out infinite;
}
.panggung__turun:hover { color: var(--hijau); border-color: var(--hijau); }
@keyframes turun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* koreografi masuk: satu momen setelah pembuka — panggung video terbang mendekat, lalu isi menyusul */
.depan:not(.siap) .adegan__kartu > *, .depan:not(.siap) .adegan__visual, .depan:not(.siap) .bilah, .depan:not(.siap) .dermaga,
.depan:not(.siap) .sinema__bingkai { opacity: 0; animation: tampil-paksa .5s 3.6s forwards; }
@keyframes tampil-paksa { to { opacity: 1; } }
.depan.siap .sinema__bingkai { animation: sinema-tiba 1.7s cubic-bezier(.16, .84, .24, 1) both; }
@keyframes sinema-tiba {
  from { opacity: 0; transform: perspective(1400px) translateZ(-520px) rotateX(22deg) scale(.9); }
  35% { opacity: 1; }
  to { opacity: 1; transform: perspective(1400px) translateZ(0) rotateX(0deg) scale(1); }
}
.depan.siap .adegan__kartu { animation: kartu-tiba 1s .35s var(--kurva) both; }
@keyframes kartu-tiba { from { opacity: 0; translate: -30px 0; } }
.depan.siap .panggung__salam { animation: naik .8s .5s var(--kurva) both; }
.depan.siap .judul-film { animation: naik .9s .55s var(--kurva) both; }
.depan.siap .panggung__instansi { animation: naik .8s 1.05s var(--kurva) both; }
.depan.siap .panggung__garis { animation: garis-buka 1s 1.15s var(--kurva) both; }
.depan.siap .panggung__ajakan { animation: naik .8s 1.2s var(--kurva) both; }
.depan.siap .panggung__aksi { animation: naik .8s 1.3s var(--kurva) both; }
.depan.siap .status-kini { animation: naik .8s 1.4s var(--kurva) both; }
.depan.siap .adegan__visual { animation: visual-tiba 1.4s .7s var(--kurva) both; }
@keyframes visual-tiba { from { opacity: 0; scale: .7; } }
.depan.siap .panggung__turun { animation: muncul .8s 2.4s both, turun 2.4s 3.2s ease-in-out infinite; }
.depan.siap .bilah { animation: bilah-turun .9s .3s var(--kurva) both; }
.depan.siap .dermaga { animation: dermaga-naik 1s 1s var(--kurva) both; }
@keyframes naik { from { opacity: 0; transform: translateY(22px); } }
@keyframes garis-buka { from { opacity: 0; transform: scaleX(0); } }
@keyframes muncul { from { opacity: 0; } }
@keyframes bilah-turun { from { opacity: 0; translate: 0 -140%; } }
@keyframes dermaga-naik { from { opacity: 0; transform: translateX(-50%) translateY(120%); } to { opacity: 1; transform: translateX(-50%); } }

/* ---------------------------------------------------------------- bagian halaman */
.bagian { max-width: 1240px; margin: 0 auto; padding: clamp(80px, 9vw, 128px) clamp(16px, 4vw, 48px) 0; scroll-margin-top: 20px; }
.bagian__kepala { max-width: 46rem; margin-bottom: 30px; }
.bagian__kepala h2 {
  position: relative; width: fit-content; padding-bottom: 16px;
  font-family: var(--font-judul); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.03em;
  color: var(--hijau-tua);
}
.bagian__kepala h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 168px; height: 12px;
  background: url("../img/pucuk-rebung.svg") left center / 28px 12px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent);
  filter: drop-shadow(0 2px 3px rgba(242, 179, 0, .5));
}
.bagian__kepala p { margin-top: 12px; color: var(--tinta-2); font-size: var(--fs-3); }

.kaca {
  border-radius: 24px; padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--bayang), inset 0 1px 0 #fff;
}

/* papan layanan */
.papan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; perspective: 1400px; }
.papan__kartu {
  --warna: var(--hijau);
  position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 20px; border-radius: 22px; overflow: hidden;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -22px rgba(12, 70, 42, .4), 0 1px 2px rgba(12, 70, 42, .06), inset 0 1px 0 #fff;
  transition: transform .45s var(--kurva), box-shadow .45s, border-color .3s;
}
.papan__kartu::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--warna), color-mix(in srgb, var(--warna) 35%, #fff));
}
.papan__kartu::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--warna) 22%, transparent), transparent);
}
@media (hover: hover) {
  .papan__kartu:hover {
    transform: translateY(-6px) rotateX(3deg);
    border-color: color-mix(in srgb, var(--warna) 45%, #fff);
    box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--warna) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--warna) 30%, transparent);
  }
}
.papan__atas { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.papan__huruf {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px;
  font-family: var(--font-judul); font-weight: 800; font-size: 1.65rem; letter-spacing: -.02em;
  color: var(--warna); color: color-mix(in srgb, var(--warna) 62%, #0F2A1E);
  background: #fff;
  background: linear-gradient(160deg, #fff 0%, color-mix(in srgb, var(--warna) 20%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--warna) 40%, transparent);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 color-mix(in srgb, var(--warna) 30%, #fff), 0 12px 24px -12px color-mix(in srgb, var(--warna) 80%, transparent);
}
.papan__ikon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--warna); color: color-mix(in srgb, var(--warna) 75%, #0F2A1E); background: color-mix(in srgb, var(--warna) 12%, #fff); }
.papan__ikon .ikon { width: 24px; height: 24px; }
.papan__kartu h3 { position: relative; z-index: 1; font-size: 1.08rem; line-height: 1.3; }
.papan__kartu p { position: relative; z-index: 1; color: var(--tinta-2); font-size: .92rem; }
.papan__lokasi { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 2px; padding: 4px 10px; border-radius: 99px; font-size: .8rem; font-weight: 650; color: var(--tinta-2); background: var(--permukaan-3); }
.papan__lokasi .ikon { width: 14px; height: 14px; color: var(--hijau-tua); }

/* alur kunjungan */
.alur { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.alur::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 47px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #00C364, #FFC400 35%, #FF8A1F 55%, #1EA4FF 80%, #00C2B2);
  box-shadow: 0 0 14px rgba(255, 196, 0, .45);
}
.alur li {
  position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px 18px 24px; border-radius: 22px;
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -24px rgba(12, 70, 42, .45);
}
.alur__no {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; font-size: 1.35rem; color: #fff;
  background: radial-gradient(circle at 35% 30%, #5BE89B 0%, #12B85F 40%, #00A651 65%, #007A3D 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 70, 35, .35), 0 0 0 5px #fff, 0 0 0 7px rgba(242, 179, 0, .55), 0 12px 26px -8px rgba(0, 166, 81, .7);
  text-shadow: 0 1px 0 rgba(0, 70, 35, .4);
}
.alur h3 { font-size: 1.08rem; }
.alur p { color: var(--tinta-2); font-size: .92rem; }

/* jam layanan */
.bagian--jadwal { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.jadwal .bagian__kepala { margin-bottom: 18px; }
.jadwal__tabel { width: 100%; border-collapse: collapse; font-size: .98rem; }
.jadwal__tabel th, .jadwal__tabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--garis); }
.jadwal__tabel thead th { font-size: .82rem; color: var(--tinta-3); font-weight: 700; }
.jadwal__tabel tbody th { font-weight: 700; }
.jadwal__tabel tr.hari-ini { background: linear-gradient(90deg, rgba(0, 166, 81, .12), rgba(0, 166, 81, 0)); }
.jadwal__tabel tr.hari-ini th { box-shadow: inset 4px 0 0 var(--hijau); }
.jadwal__tabel tr.tutup td { color: var(--tinta-3); }
.jadwal__tanda { margin-left: 8px; padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 750; color: #fff; background: var(--hijau); vertical-align: middle; box-shadow: 0 6px 14px -6px rgba(0, 166, 81, .8); }
.libur h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 14px; }
.libur h3 .ikon { color: var(--jingga); }
.libur ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.libur li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, #FFF7E6, #fff); border: 1px solid rgba(242, 179, 0, .35); }
.libur li b { color: #8A5A00; font-size: .95rem; }
.libur li span { color: var(--tinta-2); font-size: .9rem; }
.libur > p { color: var(--tinta-2); }

/* lokasi */
.bagian--lokasi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.bingkai-kantor { margin: 0; perspective: 1300px; display: grid; gap: 14px; justify-items: center; }
.bingkai-kantor__ruang {
  position: relative; padding: 10px; border-radius: 24px;
  background: linear-gradient(145deg, #FFF0B8 0%, #F2B300 30%, #B98200 55%, #FFD84D 80%, #C99000 100%);
  box-shadow: 0 34px 70px -30px rgba(0, 70, 40, .55), 0 0 40px rgba(242, 179, 0, .25);
  transform: rotateY(14deg) rotateX(3deg); transition: transform 1s var(--kurva);
}
.bingkai-kantor__ruang img { display: block; width: 100%; border-radius: 15px; }
.bingkai-kantor__ruang::after {
  content: ""; position: absolute; inset: 10px; border-radius: 15px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 38%);
}
@media (hover: hover) { .bingkai-kantor:hover .bingkai-kantor__ruang { transform: rotateY(4deg) rotateX(1deg); } }
.bingkai-kantor figcaption { color: var(--tinta-2); font-size: .9rem; font-weight: 600; }
.lokasi h2 { font-family: var(--font-judul); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.03em; color: var(--hijau-tua); }
.lokasi address { margin: 14px 0 18px; font-style: normal; color: var(--tinta); line-height: 1.7; }
.kontak { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.kontak li { display: flex; align-items: center; gap: 12px; }
.kontak .ikon { width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--hijau-tua); background: #E8F8EF; }
.kontak a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.kontak a:hover { color: var(--hijau-tua); text-decoration: underline; }

/* kaki */
.kaki {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  max-width: 1240px; margin: 90px auto 0; padding: 26px clamp(16px, 4vw, 48px) calc(118px + var(--aman-bawah));
  border-top: 1px solid var(--garis-2); color: var(--tinta-3); font-size: .88rem;
}
.kaki p { display: flex; flex-wrap: wrap; gap: 16px; }
.kaki a { color: var(--tinta-2); }
.mode-kios [data-tautan-petugas] { display: none; }

/* ---------------------------------------------------------------- dermaga running text (kaca putih bercahaya) */
.dermaga {
  position: fixed; left: 50%; bottom: calc(14px + var(--aman-bawah)); z-index: 70;
  width: min(1240px, calc(100% - 28px)); transform: translateX(-50%);
  perspective: 900px;
}
.dermaga__slab {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch;
  height: 62px; border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 166, 81, .18), 0 22px 44px -18px rgba(12, 70, 42, .45), 0 0 34px -6px rgba(242, 179, 0, .35), inset 0 1px 0 #fff;
  transform: rotateX(8deg); transform-origin: 50% 100%;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
}
.dermaga__slab::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: -8px; height: 12px; pointer-events: none;
  background: url("../img/pucuk-rebung.svg") center / 28px 12px repeat-x;
  filter: drop-shadow(0 2px 3px rgba(242, 179, 0, .5));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dermaga__slab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, #00C364, #FFC400, #FF8A1F, #FF4F8E, #8B6CFF, #1EA4FF, #00C2B2);
  opacity: .85;
}
.dermaga__prisma { display: grid; place-items: center; padding: 0 14px; perspective: 420px; border-right: 1px solid var(--garis); }
.prisma { position: relative; width: 158px; height: 34px; transform-style: preserve-3d; animation: prisma-putar 13.5s cubic-bezier(.7, 0, .2, 1) infinite; }
.prisma__muka {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .84rem; font-weight: 750; color: #fff; white-space: nowrap;
  border-radius: 9px;
  background: linear-gradient(180deg, #19C26D, #00A651 60%, #008C44);
  box-shadow: inset 0 1px 0 rgba(255, 233, 160, .7);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; text-shadow: 0 1px 0 rgba(0, 70, 35, .35);
}
.prisma__muka--2 { background: linear-gradient(180deg, #FFD84D, #F2B300 60%, #D99A00); color: #3A2800; text-shadow: none; }
.prisma__muka--3 { background: linear-gradient(180deg, #2EC9F5, #1EA4FF 60%, #1D7FE0); }
.prisma__muka .ikon { width: 17px; height: 17px; }
.prisma__muka--1 { transform: rotateX(0deg) translateZ(9.8px); }
.prisma__muka--2 { transform: rotateX(120deg) translateZ(9.8px); }
.prisma__muka--3 { transform: rotateX(240deg) translateZ(9.8px); }
@keyframes prisma-putar {
  0%, 27% { transform: translateZ(-9.8px) rotateX(0deg); }
  33%, 60% { transform: translateZ(-9.8px) rotateX(-120deg); }
  66%, 94% { transform: translateZ(-9.8px) rotateX(-240deg); }
  100% { transform: translateZ(-9.8px) rotateX(-360deg); }
}
.dermaga__jalur {
  display: flex; align-items: center; font-size: 1.02rem; font-weight: 650; color: var(--tinta);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.dermaga__jalur .pita__item--penting span { color: #B23A06; }
.dermaga__jam { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-left: 1px solid var(--garis); }
.dermaga__jam b { font-size: 1.5rem; font-weight: 800; color: var(--hijau-tua); line-height: 1; font-variant-numeric: tabular-nums; }
.dermaga__jam > span { display: grid; line-height: 1.25; font-size: .78rem; font-weight: 650; color: var(--tinta); white-space: nowrap; }
.dermaga__jam small { color: var(--tinta-3); font-size: .72rem; font-weight: 600; }

/* ---------------------------------------------------------------- responsif */
@media (max-width: 1100px) {
  .alur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alur::before { display: none; }
}
@media (max-width: 1180px) and (min-width: 961px) {
  .adegan__isi { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
  .adegan__cip-baris { flex-wrap: wrap; width: auto; }
}
@media (max-width: 960px) {
  .bilah__nav { display: none; }
  .bilah { top: calc(14px + var(--aman-atas)); left: 18px; right: 18px; height: 58px; }
  .bilah.tebal { top: calc(8px + var(--aman-atas)); left: 10px; right: 10px; }
  .adegan { min-height: 680px; }
  .sinema { inset: 8px; }
  .sinema__bingkai { border-radius: 24px; }
  .sinema__layar { border-radius: 21px; }
  .adegan__isi {
    inset: calc(84px + var(--aman-atas)) 18px calc(84px + var(--aman-bawah));
    display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 12px;
  }
  .adegan__visual { order: -1; width: min(280px, 44vw); }
  .adegan__cip-baris { display: none; }
  .bilah__isi { margin-left: auto; }
  .adegan__kartu { width: min(600px, 100%); justify-items: center; text-align: center; padding: 22px 20px 20px; border-radius: 26px; }
  .panggung__garis { transform-origin: center; }
  .panggung__aksi { justify-content: center; }
  .status-kini { text-align: left; }
  .panggung__turun { display: none; }
  .bagian { padding-top: 70px; }
  .bagian--jadwal, .bagian--lokasi { grid-template-columns: 1fr; }
  .bingkai-kantor__ruang { transform: rotateY(6deg) rotateX(2deg); }
  .dermaga__jam > span { display: none; }
}
@media (max-width: 600px) {
  .bilah__isi { display: none; }
  .bilah { height: 54px; left: 14px; right: 14px; padding: 0 12px; border-radius: 17px; }
  .bilah__merek img { width: 36px; }
  .adegan__isi { inset: calc(76px + var(--aman-atas)) 14px calc(78px + var(--aman-bawah)); }
  .adegan__visual { width: min(190px, 52vw); }
  .adegan__kartu { padding: 18px 16px 16px; border-radius: 22px; }
  .judul-film { margin-top: 6px; font-size: clamp(2rem, 9.6vw, 2.8rem); }
  .panggung__salam { font-size: .86rem; padding: 6px 13px 6px 10px; }
  .panggung__instansi { font-size: 1rem; margin-top: 8px; }
  .panggung__garis { margin-top: 8px; }
  .panggung__ajakan { font-size: .92rem; margin-top: 6px; line-height: 1.5; }
  .panggung__aksi { width: 100%; gap: 10px; margin-top: 16px; }
  .panggung__aksi .tombol { flex: 1 1 0; min-width: 0; padding: .78em .8em; font-size: .98rem; }
  .status-kini { margin-top: 14px; padding: 9px 12px 9px 11px; }
  .status-kini p { font-size: .82rem; }
  .alur { grid-template-columns: 1fr; }
  .dermaga { width: calc(100% - 16px); bottom: calc(8px + var(--aman-bawah)); }
  .dermaga__slab { height: 54px; border-radius: 14px; grid-template-columns: minmax(0, 1fr) auto; }
  .dermaga__prisma { display: none; }
  .dermaga__jam { padding: 0 12px; }
  .dermaga__jam b { font-size: 1.2rem; }
  .bilah__merek small { display: none; }
}
@media (max-width: 960px) and (max-height: 760px) {
  .panggung__ajakan { display: none; }
  .adegan__visual { width: min(150px, 40vw); }
}
@media (max-width: 960px) and (max-height: 640px) {
  .adegan__visual { display: none; }
}
@media (max-height: 860px) and (min-width: 961px) {
  .adegan__isi { inset: calc(98px + var(--aman-atas)) clamp(40px, 5.5vw, 100px) calc(100px + var(--aman-bawah)); }
  .judul-film { font-size: clamp(2.3rem, min(4.4vw, 8.2vh), 4.4rem); margin-top: 6px; }
  .panggung__instansi { margin-top: 8px; }
  .panggung__garis { margin-top: 8px; }
  .panggung__ajakan { margin-top: 6px; line-height: 1.5; }
  .panggung__aksi { margin-top: 16px; }
  .panggung__aksi .tombol--besar { min-height: 50px; }
  .status-kini { margin-top: 12px; padding-top: 9px; padding-bottom: 9px; }
  .adegan__kartu { padding: 22px 30px; }
  .panggung__turun { display: none; }
}
@media (max-height: 720px) and (min-width: 961px) {
  .panggung__ajakan { display: none; }
  .adegan__medali { width: min(100%, 40vh); }
}
@media (prefers-reduced-motion: reduce) {
  .pembuka { display: none; }
  .prisma { animation: none; }
  .depan.siap .sinema__bingkai, .depan.siap .adegan__visual, .adegan__cip { animation: none; }
  .depan.siap .adegan__kartu, .depan.siap .adegan__kartu > *, .depan.siap .judul-film, .depan.siap .panggung__garis,
  .depan.siap .bilah, .depan.siap .dermaga, .depan.siap .panggung__turun { animation: none; }
}
.hemat-grafis .adegan__kartu, .hemat-grafis .bilah, .hemat-grafis .dermaga__slab { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .95); }
.hemat-grafis .adegan__cip, .hemat-grafis .panggung__turun, .hemat-grafis .prisma,
.hemat-grafis .status-kini__titik::after { animation: none; }
.hemat-grafis .adegan__kartu, .hemat-grafis .adegan__visual { transform: translate3d(0, calc(var(--g) * -120px), 0); }