@font-face { font-family:"Transcend Black"; src:url("../img/assets/d701d34c9bbc2b3726177775e9aed15c.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; }
:root { --petrol:#234a5e; --petrol-d:#16323f; --petrol-m:#2f6079; --gold:#b9975b; --gold-l:#e6cb96; --gold-d:#80622a; --wall:#f5f7f4; --ink:#1b3a4a; --mist:#dfe7e8; }
body { margin:0; background:#16323f; }
a { color:#234a5e; } a:hover { color:#16323f; }
.tour, .tour * { box-sizing:border-box; }
.tour { position:relative; width:100%; height:100vh; height:100dvh; min-height:480px; overflow:hidden; background:var(--petrol-d); color:var(--ink); font-family:Mulish,system-ui,sans-serif; user-select:none; }
.tour button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.tour button:focus-visible, .tour a:focus-visible, .tour input:focus-visible, .tour textarea:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.disp { font-family:Marcellus,Georgia,serif; font-weight:400; }
.title-bl { font-family:"Transcend Black",Marcellus,Georgia,serif; font-weight:900; }
.ar { font-family:Amiri,serif; direction:rtl; }
.view { position:absolute; inset:0; }
.view.is-out { animation:walk-out .43s ease-in forwards; }
.view.is-in { animation:walk-in .55s cubic-bezier(.2,.8,.2,1); }
.view.from-luar { transform-origin:50% 88%; }
@keyframes walk-out { to { transform:scale(1.55); opacity:0; } }
@keyframes walk-in { from { transform:scale(1.14); opacity:0; } }
.logo-top { position:absolute; z-index:30; left:50%; top:12px; width:min(86vw,460px,60vh); height:auto; transform:translateX(-50%); pointer-events:none; background:rgba(255,255,255,.95); border-radius:999px; }
.tour:has(.aula) button.musik { bottom:300px; }
.tour:has(.luar) button.musik { bottom:160px; }
.tour:has(.foto) button.musik { top:calc(min(86vw,460px,60vh) * .185 + 28px); bottom:auto; }
.tour button.musik { position:absolute; z-index:31; right:12px; bottom:200px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(230,203,150,.6); background:rgba(22,50,63,.82); color:var(--gold-l); }
.tour button.musik[hidden] { display:none; }

/* halaman luar */
.luar { position:absolute; inset:0; isolation:isolate; overflow:hidden; background:#0f2a3a; }
.luar-gedung { position:absolute; z-index:1; left:50%; top:0; height:100%; width:auto; max-width:none; transform:translateX(-50%); }
.luar-shade { position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(13,36,50,.86) 0,rgba(13,36,50,.8) 62%,rgba(13,36,50,.3) 100%); }
/* Baris tengah mengisi sisa layar, sehingga tombol tepat di antara tanggal dan kartu nama. */
.luar-copy { position:absolute; z-index:3; inset:0; margin:0 auto; width:min(calc(100% - 40px),620px); color:#fff; text-align:center; display:grid; grid-template-rows:auto minmax(min-content,1fr) auto; justify-items:center; gap:10px; animation:rise .8s .2s both; }
.luar-teks { padding-top:calc(min(86vw,460px,60vh) * .185 + 28px); display:flex; flex-direction:column; align-items:center; gap:10px; }
.luar-copy .luar-act { margin:0; align-self:center; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } }
.luar-copy .ar { font-size:28px; line-height:1.3; color:var(--gold-l); margin:0; }
.luar-tag { margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#dbe8ee; display:none; }
.luar-copy h1 { margin:0; font-size:clamp(30px,8.4vw,60px); line-height:1.12; }
.luar-copy h1 span { display:block; color:var(--gold-l); }
.pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pill { margin:0; padding:7px 16px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(230,203,150,.5); font-size:14px; font-weight:700; }
.inv-card { align-self:end; width:min(100%,400px); margin:0 0 max(20px,env(safe-area-inset-bottom)); padding:12px 18px; border-radius:14px; background:rgba(10,28,40,.66); border:1px solid rgba(255,255,255,.24); font-size:13px; line-height:1.4; color:#dbe8ee; }
.inv-card b { display:block; margin:2px 0; font-size:20px; color:#fff; }
.inv-card small { font-size:12px; color:var(--gold-l); }
.luar-act { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px; }
.luar-act button { white-space:nowrap; font-size:14px !important; padding:0 15px !important; }
.btn-gold { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px !important; border-radius:999px; background:var(--gold-l) !important; color:var(--petrol-d) !important; font-weight:800 !important; text-decoration:none; transition:transform .2s; }
.btn-gold:hover { transform:translateY(-2px); }
.btn-ghost { min-height:48px; padding:0 20px !important; border-radius:999px; border:1.5px solid rgba(255,255,255,.7) !important; color:#fff !important; font-weight:700 !important; }
.aerial { position:absolute !important; z-index:12; inset:0; display:block; width:100%; background:var(--petrol-d) !important; overflow:hidden; animation:aerial-out .7s ease-in 2.8s forwards; }
.aerial img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:54% 50%; transform-origin:52% 52%; animation:aerial-zoom 3.5s cubic-bezier(.4,0,.6,1) forwards; }
.aerial-cap { position:absolute; left:50%; bottom:9%; transform:translateX(-50%); width:max-content; max-width:88%; padding:12px 20px; border-radius:10px; background:rgba(22,50,63,.86); color:#fff; font-size:15px; font-weight:700; text-align:center; }
.aerial-cap small { display:block; margin-top:3px; font-size:13px; font-weight:600; color:var(--gold-l); }
@keyframes aerial-zoom { from { transform:scale(1.02); } to { transform:scale(2.3); } }
@keyframes aerial-out { to { opacity:0; visibility:hidden; } }
@media (min-aspect-ratio:1/1) {
  .luar-gedung { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%); }
  .luar-copy .ar { font-size:36px; }
  .luar-tag { display:block; }
  .pill { font-size:16px; }
  .inv-card { font-size:14px; }
  .luar-act button { font-size:16px !important; padding:0 24px !important; }
}
@media (max-height:620px) { .inv-card, .luar-tag { display:none; } .luar-copy h1 { font-size:30px; } .luar-copy .ar { font-size:24px; } }

/* ruang 3D */
.stage { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; background:#16323f; }
.stage:active { cursor:grabbing; }
.cam { position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; transition:transform .85s cubic-bezier(.22,.8,.2,1); }
.face, .floor, .ceil { pointer-events:auto; }
.cam.still { transition:none; }
.face { position:absolute; left:50%; top:50%; width:522px; height:780px; margin:-390px 0 0 -261px; backface-visibility:hidden; background:url("../img/assets/8c8f90e3384ac8fd891be4e7a5ba9030.png") no-repeat -86px calc(100% - 66px) / 172px auto, url("../img/assets/8c8f90e3384ac8fd891be4e7a5ba9030.png") no-repeat calc(100% + 86px) calc(100% - 66px) / 172px auto, url("../img/assets/4d0058addab5d70c29ebe28119d66070.jpg") left center / auto 125%, #fbfcfb; box-shadow:inset 34px 0 44px -34px rgba(23,50,64,.3), inset -34px 0 44px -34px rgba(23,50,64,.3); overflow:hidden; }
.face::before { content:""; position:absolute; left:0; right:0; top:0; height:38px; background:var(--petrol); border-bottom:3px solid var(--gold); }
.face::after { content:""; position:absolute; left:0; right:0; bottom:0; height:60px; background:var(--petrol); border-top:3px solid var(--gold); }
.floor, .ceil { position:absolute; left:50%; top:50%; border-radius:50%; }
.floor { transform:translateY(390px) rotateX(90deg); background:repeating-radial-gradient(circle at center,transparent 0 118px,rgba(230,203,150,.3) 118px 121px),radial-gradient(circle at center,#3a6377 0,#274a5d 55%,#1a3644 100%); display:flex; align-items:center; justify-content:center; }
.floor img { width:40%; height:auto; }
.ceil { transform:translateY(-390px) rotateX(-90deg); background:radial-gradient(circle at center,#fff 0,#e9efef 24%,#b6c7ce 70%,#8ea5af 100%); }
.p { position:absolute; left:30px; right:30px; top:68px; bottom:90px; display:flex; flex-direction:column; }
.eyebrow { margin:0; font-size:20px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-d); }
.h-wall { margin:6px 0 0; font-size:44px; line-height:1.12; color:var(--petrol); }
.rule { width:84px; height:3px; margin:18px 0; background:var(--gold); border:0; flex:none; }
.txt { margin:0; font-size:24px; line-height:1.46; color:var(--ink); user-select:text; }

/* pintu */
.door { position:absolute !important; inset:0; display:block; width:100%; height:100%; text-align:center; }
.door-plaque { position:absolute; left:32px; right:32px; top:60px; height:170px; display:flex; flex-direction:column; justify-content:center; }
.door-cap { font-size:20px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d); }
.door-name { margin-top:6px; font-size:38px; line-height:1.14; color:var(--petrol); }
.arch { position:absolute; clip-path:polygon(0 100%,0 34%,2% 28%,6% 23%,13% 18%,22% 14%,31% 10%,40% 5%,50% 0,60% 5%,69% 10%,78% 14%,87% 18%,94% 23%,98% 28%,100% 34%,100% 100%); }
.arch-o { left:91px; bottom:0; width:340px; height:540px; background:var(--gold); }
.arch-i { left:12px; right:12px; top:18px; bottom:0; background:repeating-linear-gradient(45deg,rgba(230,203,150,.2) 0 2px,transparent 2px 30px),repeating-linear-gradient(-45deg,rgba(230,203,150,.2) 0 2px,transparent 2px 30px),linear-gradient(180deg,#2f6079 0,#234a5e 58%,#16323f 100%); display:flex; align-items:center; justify-content:center; }
.arch-i.glass { background:repeating-linear-gradient(45deg,rgba(255,255,255,.6) 0 3px,transparent 3px 26px),repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 3px,transparent 3px 26px),linear-gradient(180deg,#d6edf6 0,#8cc4df 62%,#5d9dc0 100%); }
.door-no { font-size:124px; color:var(--gold-l); transition:transform .25s; }
.door:hover .door-no { transform:scale(1.12); }
.banner { position:absolute; left:32px; right:32px; top:38px; height:668px; padding:34px 26px 74px; background:linear-gradient(180deg,#2c5b73,#1f4557); color:#fff; text-align:center; clip-path:polygon(0 0,100% 0,100% 100%,50% 92%,0 100%); display:flex; flex-direction:column; align-items:center; }
.banner .ar { font-size:42px; line-height:1.3; margin:0; color:var(--gold-l); }
.banner-welcome { margin:14px 0 0; font-size:24px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#dbe8ee; }
.banner h2 { margin:10px 0 0; font-size:60px; line-height:1.08; white-space:nowrap; }
.banner-prog { margin:12px 0 0; font-size:42px; color:var(--gold-l); }
.banner-met { margin:14px 0 0; font-size:27px; font-weight:800; }
.banner-date { margin:10px 0 0; font-size:22px; color:#dbe8ee; }

/* isi ruang */
.cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin-top:16px; }
.cal-h { text-align:center; font-size:19px; font-weight:800; color:var(--gold-d); padding:4px 0; }
.cal-d { height:54px; display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:600; color:var(--ink); background:#fff; border-radius:6px; }
.cal-d.on { background:var(--petrol); color:#fff; font-weight:800; box-shadow:0 0 0 3px var(--gold); }
.time-big { margin:12px 0 0; font-size:34px; color:var(--petrol); text-align:center; }
.cd { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.cd-t { height:128px; border-radius:10px; background:var(--petrol); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cd-n { font-size:58px; line-height:1; color:var(--gold-l); }
.cd-l { margin-top:6px; font-size:20px; font-weight:700; }
.wall-btn { min-height:60px; font-size:23px; width:100%; }
.loc-photo { width:100%; height:258px; object-fit:cover; border-radius:10px; border:4px solid #fff; box-shadow:0 8px 22px rgba(23,50,64,.28); display:block; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.frame { display:flex !important; flex-direction:column; background:#fff !important; border:1.5px solid var(--gold) !important; padding:6px !important; min-height:194px; transition:transform .2s; text-align:center; }
.frame:hover { transform:scale(1.04); }
.ph { flex:1; min-height:120px; background:radial-gradient(circle at 50% 36%,#a9bcc5 0 21%,transparent 22%),radial-gradient(ellipse 46% 42% at 50% 104%,#a9bcc5 0 98%,transparent 100%),#e3eaec; }
.frame img { flex:1; min-height:120px; width:100%; object-fit:cover; display:block; }
.frame-nm { margin-top:5px; height:44px; font-size:18px; line-height:1.2; font-weight:700; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.sesi { display:flex; align-items:center; gap:20px; height:158px; padding:0 22px; background:#fff; border-radius:10px; box-shadow:0 3px 12px rgba(23,50,64,.14); }
.sesi-n { flex:none; width:92px; font-size:62px; color:var(--gold-d); }
.sesi-t { font-size:30px; line-height:1.22; font-weight:700; color:var(--petrol); }
.ded-img { width:100%; height:330px; object-fit:cover; object-position:50% 70%; border-radius:10px; display:block; }
.spon { height:158px; background:#fff; border-radius:8px; padding:8px; box-shadow:0 3px 10px rgba(23,50,64,.16); display:flex; align-items:center; justify-content:center; }
.spon img { width:100%; height:100%; object-fit:contain; display:block; }
.bank { margin-top:18px; padding:24px; border-radius:12px; background:var(--petrol); color:#fff; }
.bank-n { margin:0; font-size:44px; color:var(--gold-l); }
.bank-a { margin:6px 0 16px; font-size:24px; }
.bank-l { display:block; font-size:20px; font-weight:700; color:#dbe8ee; }
.bank-in { width:100%; margin:4px 0 16px; padding:0; border:0; background:none; font-family:Mulish,sans-serif; font-size:44px; font-weight:800; letter-spacing:.03em; color:#fff; user-select:text; }
.msg-ok { margin:10px 0 0; font-size:21px; font-weight:700; color:var(--petrol); }
.f-lbl { display:block; margin:12px 0 4px; font-size:21px; font-weight:800; color:var(--petrol); }
.f-in { width:100%; height:58px; padding:0 14px; border:2px solid #aab9c0; border-radius:8px; background:#fff; color:var(--ink); font:600 24px Mulish,sans-serif; user-select:text; }
textarea.f-in { height:112px; padding:10px 14px; resize:none; }
.f-opts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.f-opt { min-height:58px; border:2px solid var(--petrol) !important; border-radius:8px; font-size:20px !important; font-weight:800 !important; color:var(--petrol) !important; }
.f-opt.on { background:var(--petrol) !important; color:#fff !important; }
.f-err { margin:10px 0 0; font-size:21px; font-weight:800; color:#a11a2a; text-align:center; }
.f-send { margin-top:14px; }

/* aula & keluar */
.aula { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; background:#16323f; }
.aula-bg { position:absolute; inset:-30px; width:calc(100% + 60px); height:calc(100% + 60px); object-fit:cover; filter:blur(24px) brightness(.62); }
.aula-img { position:absolute; left:50%; top:46%; width:max(100%,150vw); height:auto; transform:translate(-50%,-50%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%); }
.aula-plate { position:absolute; z-index:5; left:50%; bottom:148px; transform:translateX(-50%); width:min(92%,620px); padding:14px 22px; border-radius:12px; background:rgba(22,50,63,.9); color:#fff; text-align:center; }
.aula-plate h2 { margin:0; font-size:24px; color:var(--gold-l); }
.aula-plate p { margin:4px 0 0; font-size:15px; }
.keluar { position:absolute; inset:0; padding:88px 22px 80px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; color:var(--ink); text-align:center; background:url("../img/assets/8c8f90e3384ac8fd891be4e7a5ba9030.png") no-repeat -90px bottom / 180px auto, url("../img/assets/8c8f90e3384ac8fd891be4e7a5ba9030.png") no-repeat calc(100% + 90px) bottom / 180px auto, url("../img/assets/4d0058addab5d70c29ebe28119d66070.jpg") center / cover, #fff; overflow:auto; }
.kel-door { position:relative; flex:none; width:min(44vw,24vh); aspect-ratio:34/50; }
.kel-door .arch-o { inset:0; left:0; width:100%; height:100%; }
.kel-door .arch-i { left:4%; right:4%; top:4%; }
.kel-door img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:54% 50%; }
.kel-sign { display:inline-block; padding:5px 14px; border-radius:6px; background:#1f7a55; color:#fff; font-size:15px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.keluar h2 { margin:8px 0 0; font-size:clamp(38px,9vw,66px); line-height:1.05; color:var(--petrol); }
.keluar .ar { margin:0; font-size:28px; color:var(--gold-d); }
.kel-q { margin:10px auto 0; max-width:600px; font-size:16px; line-height:1.55; color:var(--ink); user-select:text; }
@media (min-aspect-ratio:1/1) {
  .aula-img { width:max(100%,133.34vh); top:50%; -webkit-mask-image:none; mask-image:none; }
  .aula-plate { bottom:96px; }
  .keluar { flex-direction:row; gap:6vw; padding:100px 7vw 100px; text-align:left; }
  .kel-door { width:min(26vw,38vh); }
  .kel-q { margin-left:0; font-size:18px; }
}

/* photobooth */
.foto { position:absolute; inset:0; overflow:auto; padding:calc(min(86vw,460px,60vh) * .185 + 30px) 20px 156px; display:flex; flex-direction:column; align-items:center; gap:16px; color:var(--ink); background:url("../img/assets/8c8f90e3384ac8fd891be4e7a5ba9030.png") no-repeat -90px bottom / 180px auto, url("../img/assets/8c8f90e3384ac8fd891be4e7a5ba9030.png") no-repeat calc(100% + 90px) bottom / 180px auto, url("../img/assets/4d0058addab5d70c29ebe28119d66070.jpg") center / cover, #fff; }
.fb-side { max-width:520px; text-align:center; }
.fb-sign { background:var(--gold-d); }
.fb-h { margin:8px 0 0; font-size:clamp(30px,6.4vw,52px); line-height:1.08; color:var(--petrol); }
.fb-q { font-size:15px; }
.fb-main { flex:none; width:min(100%,400px); display:flex; flex-direction:column; gap:12px; }
.fb-box { position:relative; width:100%; aspect-ratio:4/5; container-type:inline-size; overflow:hidden; border-radius:12px; background:radial-gradient(circle at 50% 38%,#3a6377 0,#234a5e 60%,#16323f 100%); box-shadow:0 12px 30px rgba(23,50,64,.3); }
.fb-video, .fb-shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.fb-video { transform:scaleX(-1); }
.fb-edit { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; }
.fb-edit:active { cursor:grabbing; }
.fb-edit-img { position:absolute; max-width:none; height:auto; display:block; user-select:none; pointer-events:none; }
.fb-zoom { flex:1 0 100%; display:flex; align-items:center; gap:10px; }
.fb-zoom input { flex:1; min-width:0; height:44px; accent-color:var(--petrol); }
.fb-zbtn { flex:none; width:44px; height:44px; border-radius:50%; border:2px solid var(--petrol) !important; background:#fff !important; color:var(--petrol) !important; display:flex; align-items:center; justify-content:center; }
.fb-zval { flex:none; width:48px; font-size:14px; font-weight:800; color:var(--petrol); text-align:right; }
.fb-empty { position:absolute; left:0; right:0; top:0; bottom:27.8cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#dbe8ee; font-size:15px; font-weight:700; }
.fb-ov { position:absolute; inset:0; pointer-events:none; }
.fb-frame { position:absolute; inset:0; width:100%; height:100%; display:block; }
.fb-logo { position:absolute; top:4.44cqw; left:50%; width:55.6cqw; height:auto; transform:translateX(-50%); background:#fff; border-radius:999px; }
.fb-band { position:absolute; left:0; right:0; bottom:0; height:27.8cqw; padding-top:1.2cqw; background:linear-gradient(180deg,#2c5b73,#16323f); border-top:.56cqw solid var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6cqw; text-align:center; color:#fff; }
.fb-ar { font-size:3.7cqw; line-height:1.2; color:var(--gold-l); }
.fb-t { font-size:7.2cqw; line-height:1.05; }
.fb-p { font-size:2.8cqw; font-weight:800; color:var(--gold-l); }
.fb-d { font-size:2.4cqw; font-weight:600; color:#dbe8ee; }
.fb-border { position:absolute; inset:1.67cqw; border:1.11cqw solid var(--gold-l); }
.fb-count { position:absolute; left:50%; top:42%; width:30cqw; height:30cqw; margin:-15cqw 0 0 -15cqw; border-radius:50%; background:rgba(22,50,63,.72); color:var(--gold-l); font-size:18cqw; line-height:30cqw; text-align:center; }
.fb-act { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.fb-act .btn-gold { font-size:15px; padding:0 20px !important; }
.btn-line { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px !important; border-radius:999px; border:2px solid var(--petrol) !important; background:rgba(255,255,255,.9) !important; color:var(--petrol) !important; font-size:15px; font-weight:800 !important; text-decoration:none; cursor:pointer; }
.btn-line:focus-within { outline:3px solid var(--gold); outline-offset:3px; }
.btn-gold[disabled] { opacity:.55; cursor:default; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fb-msg { margin:0; padding:10px 14px; border-radius:10px; background:#fbe9ea; color:#8a1424; font-size:14px; font-weight:700; text-align:center; }
.fb-msg.ok { background:#e5f2ec; color:#17603f; }
.fb-tip { margin:0; font-size:13px; line-height:1.45; color:var(--ink); text-align:center; }
@media (min-aspect-ratio:1/1) {
  .foto { flex-direction:row; justify-content:center; gap:6vw; padding:calc(min(86vw,460px,60vh) * .185 + 30px) 6vw 96px; }
  .fb-side { text-align:left; }
  .fb-q { margin-left:0; font-size:18px; }
  .fb-main { width:min(400px,calc((100vh - 290px) * .8)); min-width:280px; }
}

/* navigasi */
.dock { position:absolute; z-index:20; left:12px; right:12px; bottom:12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.dock-ic { flex:none; width:52px; height:52px; border-radius:50%; background:rgba(22,50,63,.92) !important; color:#fff !important; display:flex; align-items:center; justify-content:center; }
.dock-back { flex:none; height:52px; padding:0 16px 0 12px !important; border-radius:26px; background:rgba(22,50,63,.92) !important; color:#fff !important; display:flex; align-items:center; gap:6px; font-size:14px !important; font-weight:800 !important; }
@media (max-width:400px) { .dock-back { width:52px; padding:0 !important; justify-content:center; } .dock-back span { display:none; } }
.dock-room { flex:1 1 0; min-width:0; max-width:340px; height:52px; padding:0 16px !important; border-radius:26px; background:rgba(22,50,63,.92) !important; color:#fff !important; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dock-name { max-width:100%; font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dock-sub { font-size:12px; font-weight:600; color:var(--gold-l); }
.dock-atas { flex:1 0 100%; display:flex; gap:8px; }
.dock-next { flex:1 1 0; min-width:0; }
.dock-next .btn-gold { width:100%; padding:0 14px !important; font-size:15px; line-height:1.2; }
.dock-next button.btn-gold { min-height:52px; }
.hint { position:absolute; z-index:15; left:50%; bottom:146px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; width:max-content; padding:9px 16px; border-radius:999px; background:rgba(22,50,63,.92); color:#fff; font-size:14px; font-weight:700; pointer-events:none; }
.hint svg { animation:wiggle 1.3s ease-in-out infinite; }
@keyframes wiggle { 50% { transform:translateX(7px); } }
@media (min-width:760px) {
  .dock { flex-wrap:nowrap; }
  .dock-atas { display:contents; }
  .dock-back { order:-1; }
  .dock-next { order:1; flex:0 1 auto; }
  .dock-next .btn-gold { width:auto; padding:0 26px !important; }
  .hint { bottom:84px; }
}
.ovl { position:absolute; z-index:50; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; }
.scrim { position:absolute !important; inset:0; background:rgba(12,30,40,.84) !important; width:100%; }
.card { position:relative; width:min(100%,420px); max-height:100%; overflow:auto; padding:16px; border-radius:14px; background:url("../img/assets/4d0058addab5d70c29ebe28119d66070.jpg") center / cover, var(--wall); color:var(--ink); }
.card.wide { width:min(100%,640px); }
.lbfs { position:absolute; z-index:60; inset:0; background:#0c1e28; color:#fff; animation:lb-in .22s ease-out; }
@keyframes lb-in { from { opacity:0; } }
.lbfs-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.lbfs .ph { position:absolute; inset:0; min-height:0; background-color:#16323f; }
.lbfs-cap { position:absolute; left:0; right:0; bottom:0; padding:64px 20px 26px; text-align:center; background:linear-gradient(180deg,transparent,rgba(12,30,40,.94) 62%); }
.lb-no { margin:0; font-size:14px; font-weight:800; letter-spacing:.08em; color:var(--gold-l); text-transform:uppercase; }
.lb-nm { margin:4px 0 0; font-size:clamp(26px,5vw,44px); line-height:1.15; color:#fff; }
.lbfs-btn { position:absolute !important; z-index:2; width:52px; height:52px; border-radius:50%; background:rgba(12,30,40,.78) !important; color:#fff !important; display:flex; align-items:center; justify-content:center; }
.lbfs-btn.close { top:14px; right:14px; }
.lbfs-btn.prev { left:12px; top:50%; margin-top:-26px; }
.lbfs-btn.next { right:12px; top:50%; margin-top:-26px; }
.card-btn { min-height:46px; border-radius:8px; border:2px solid var(--petrol) !important; color:var(--petrol) !important; font-size:14px !important; font-weight:800 !important; }
.plan-h { margin:0 0 12px; font-size:30px; color:var(--petrol); }
.plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.plan-r { display:flex !important; align-items:center; gap:10px; min-height:58px; padding:6px 10px !important; border-radius:8px; background:#fff !important; text-align:left; font-size:14px !important; font-weight:700 !important; }
.plan-r.on { background:var(--petrol) !important; color:#fff !important; }
.plan-n { flex:none; font-size:22px; color:var(--gold); }
.plan-w { display:block; font-size:12px; color:var(--gold-l); }
@media (prefers-reduced-motion:reduce) {
  .tour *, .view { animation:none !important; transition:none !important; }
  .aerial { display:none !important; }
}

/* tambahan untuk versi dinamis */
.wall-note { margin:auto 0; text-align:center; }
.wall-note .h-wall { margin-bottom:18px; }
.loading-off[disabled] { opacity:.6; cursor:default; }
.noscript { padding:32px 20px; color:#fff; text-align:center; font-family:Mulish,system-ui,sans-serif; }

/* Foto asli tidak boleh memanjangkan baris: 3 baris x 9 peserta harus muat di satu dinding. */
.frame { min-height:0; }
.frame img, .frame .ph { flex:none; height:134px; min-height:0; }
.frame img { object-position:50% 20%; }
.frame-nm { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.tour button.wall-btn { font-size:23px; }

/* tautan foto lokasi */
.loc-link { display:block; margin-top:12px; border-radius:10px; transition:transform .2s; }
.loc-link:hover { transform:translateY(-2px); }

/* buku tamu */
.f-situs { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.buku { display:flex; flex-direction:column; height:100%; }
.rs-stat { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.rs-st { padding:10px 4px; border-radius:10px; color:#fff; text-align:center; }
.rs-st.rs-hadir, .rs-status.rs-hadir { background:#17694a; }
.rs-st.rs-tidak, .rs-status.rs-tidak { background:#a11a2a; }
.rs-st.rs-ragu, .rs-status.rs-ragu { background:var(--gold-d); }
.rs-n { display:block; font-size:46px; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; }
.rs-l { display:block; margin-top:2px; font-size:18px; font-weight:700; }
.rs-sub { margin-top:14px; }
.rs-list { display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; margin-top:8px; }
.tour .rs-item { display:block; width:100%; padding:9px 14px; border-radius:10px; background:#fff; text-align:left; box-shadow:0 3px 10px rgba(23,50,64,.16); transition:transform .2s; }
.tour .rs-item:hover { transform:translateY(-2px); }
.rs-kepala { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rs-nama { min-width:0; overflow:hidden; font-size:20px; font-weight:800; color:var(--petrol); text-overflow:ellipsis; white-space:nowrap; }
.rs-status { flex:none; padding:2px 8px; border-radius:4px; color:#fff; font-size:15px; font-weight:800; }
.rs-isi { display:-webkit-box; margin-top:3px; overflow:hidden; font-size:19px; line-height:1.3; color:var(--ink); -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow-wrap:anywhere; }
.rs-kosong { margin:auto 0; text-align:center; }
.rs-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.rs-hal { font-size:18px; font-weight:800; color:var(--petrol); font-variant-numeric:tabular-nums; }
.btn-line[disabled] { opacity:.4; cursor:default; }
.rs-penuh { margin:0 0 14px; font-size:16px; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere; user-select:text; }