/* Kamera film tamu: kamera sekali pakai bersampul nama mempelai + layar kamera penuh.
   Semua warna dari palet adat undangan (--t-*). Satu-satunya warna di luar palet: oranye cap tanggal (--stamp). */
.kamera{--cam-body:var(--t-night);--cam-hair:color-mix(in srgb,var(--t-metal) 55%,transparent);--stamp:#F08A3C}
.tpl-sinema .kamera,.tpl-kampung .kamera{--cam-body:color-mix(in srgb,var(--t-tone) 34%,var(--t-night))}

/* ---------- badan kamera ---------- */
.cam-body{position:relative;width:min(100%,336px);aspect-ratio:336/200;margin:6px auto 0;border-radius:16px;background:var(--cam-body);color:var(--t-paper);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--t-paper) 14%,transparent),inset 0 -2px 0 rgba(0,0,0,.25),0 22px 40px -22px rgba(0,0,0,.55);transform:rotate(-1.5deg)}
.cam-body i{display:block}
.cam-shutter-top{position:absolute;left:12%;top:-6px;width:15%;height:8px;border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--cam-body) 75%,var(--t-paper))}
.cam-vfwin{position:absolute;left:7%;top:7%;width:13%;height:13%;border-radius:4px;background:linear-gradient(135deg,#2b3236,#0d1012 60%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.cam-flashwin{position:absolute;right:7%;top:7%;width:24%;height:13%;border-radius:3px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--t-paper) 82%,var(--t-mist)) 0 3px,color-mix(in srgb,var(--t-paper) 62%,var(--t-mist)) 3px 5px);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
/* sampul kertas: nama mempelai, tanggal, dan pita motif kain adat di kedua tepinya */
.cam-sleeve{position:absolute;left:0;right:0;top:27%;bottom:24%;display:flex;align-items:center;padding:0 0 0 7%;background:var(--t-paper);color:var(--t-ink)}
.cam-sleeve::before,.cam-sleeve::after{content:"";position:absolute;left:0;right:0;height:7px;background:var(--kain2,none) 0 50%/auto 100% repeat-x;opacity:.7}
.cam-sleeve::before{top:3px}.cam-sleeve::after{bottom:3px}
.cam-sleeve-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;max-width:54%}
.cam-sleeve-text b{font-family:var(--f-names,var(--f-display));font-weight:400;font-size:clamp(17px,5.4vw,22px);line-height:1.05}
.cam-sleeve-text span{font-size:10px;letter-spacing:.24em;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--t-ink) 70%,transparent)}
.cam-lens{position:absolute;right:9%;top:50%;width:33%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#07090a 0 30%,#1d2326 31% 46%,#0b0d0e 47% 60%,color-mix(in srgb,var(--cam-body) 70%,#000) 61% 100%);
  box-shadow:0 0 0 3px var(--cam-body),0 0 0 4px var(--cam-hair),0 6px 14px rgba(0,0,0,.4)}
.cam-lens i{position:absolute;left:30%;top:26%;width:18%;height:12%;border-radius:50%;background:rgba(255,255,255,.35);filter:blur(1px);transform:rotate(-30deg)}
.cam-make{position:absolute;left:7%;bottom:8%;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--t-paper) 58%,transparent)}
/* jendela penghitung frame: angka berputar seperti roda kamera sekali pakai */
.cam-counter{position:absolute;right:7%;bottom:6%;width:30px;height:24px;border-radius:12px;background:#0b0c0d;box-shadow:inset 0 0 0 1px var(--cam-hair);overflow:hidden;display:grid;place-items:start center}
.cam-dial{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.cam-dial i{display:block;height:24px;line-height:24px;font-style:normal;font:600 13px/24px var(--f-body);font-variant-numeric:tabular-nums;color:#f3ede2;text-align:center}
.cam-dial[data-left="0"]{transform:translateY(0)}
.cam-dial[data-left="1"]{transform:translateY(-24px)}
.cam-dial[data-left="2"]{transform:translateY(-48px)}
.cam-dial,.cam-dial[data-left="3"]{transform:translateY(-72px)}

/* ---------- keadaan di bawah kamera ---------- */
.cam-status{margin:30px auto 0;max-width:330px;display:flex;flex-direction:column;align-items:center;gap:12px}
.cam-msg{color:var(--muted);font-size:14.5px;max-width:32ch}
.cam-msg b{color:var(--ink);font-weight:600}
.cam-msg--sm{font-size:12.5px;margin-top:6px}
.cam-when{font-family:var(--f-display);font-size:19px;line-height:1.35;color:var(--ink)}
.cam-cd{display:flex;gap:14px;font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cam-cd b{display:block;font:500 22px/1.2 var(--f-display);letter-spacing:0;color:var(--ink)}
.cam-open{gap:10px;min-width:220px;border-radius:10px}

/* ---------- rol tamu ---------- */
.cam-roll{margin:38px auto 0;max-width:336px}
.cam-roll[hidden]{display:none}
.cam-roll-label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cam-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:fr}
.cam-slots li{display:flex;flex-direction:column;gap:8px;counter-increment:fr}
.cam-slot{position:relative;aspect-ratio:8/11;border-radius:3px;border:1px dashed color-mix(in srgb,var(--ink) 28%,transparent);display:grid;place-items:center;padding:0;background:none;overflow:hidden}
.cam-slot::before{content:"Frame " counter(fr);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cam-slot.has{border:0;box-shadow:0 8px 18px -10px rgba(0,0,0,.45);cursor:zoom-in}
.cam-slot.has::before{content:none}
.cam-slot img{width:100%;height:100%;object-fit:cover}
.cam-dl{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:600;text-decoration:none;color:var(--ink);padding:6px 4px;border-radius:6px}
.cam-dl .ic{width:15px;height:15px}
.cam-note{margin-top:16px;font-size:12.5px;color:var(--muted)}

/* ---------- layar kamera ---------- */
html.cam-lock,html.cam-lock body{overflow:hidden}
.cam-ui{--ui-bg:#0d0d0e;--ui-ink:#efe9df;--ui-dim:rgba(239,233,223,.6);--stamp:#F08A3C;
  position:fixed;left:0;top:0;width:100%;height:100dvh;z-index:200;background:var(--ui-bg);color:var(--ui-ink);display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);font-family:var(--f-body)}
.cam-ui[hidden]{display:none}
.cam-ui .ic{width:22px;height:22px}
.cam-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;max-width:480px;width:100%;margin:0 auto}
.cam-left{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-dim)}
.cam-counter--sm{position:relative;right:auto;bottom:auto;box-shadow:inset 0 0 0 1px rgba(239,233,223,.25)}
.cam-iconbtn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(239,233,223,.08);display:grid;place-items:center;color:var(--ui-ink)}
.cam-iconbtn:disabled{opacity:.35}
.cam-stage{flex:1;min-height:0;display:grid;place-items:center;padding:4px 14px}
.cam-vf,.cam-review{grid-area:1/1}
.cam-vf{position:relative;width:min(calc(100vw - 28px),452px,calc((100dvh - 268px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .75));aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#000}
.cam-vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .3s}
.cam-vf.is-front video{transform:scaleX(-1)}
.cam-vf[data-film="hangat"] video{filter:sepia(.2) saturate(.88) contrast(.94) brightness(1.04)}
.cam-vf[data-film="monokrom"] video{filter:grayscale(1) contrast(1.2) brightness(1.02)}
.cam-vf[data-film="sinema"] video{filter:contrast(1.06) saturate(.76) hue-rotate(-8deg) brightness(.97)}
/* Asli: tanpa filter. Jendela bidik menampilkan warna kamera apa adanya, tanpa vignette, grain, dan cap tanggal */
.cam-vf[data-film="asli"] video{filter:none}
.cam-vf[data-film="asli"] .cam-vignette,.cam-vf[data-film="asli"] .cam-grain,.cam-vf[data-film="asli"] .cam-vf-stamp{display:none}
.cam-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 55%,rgba(0,0,0,.5));pointer-events:none}
.cam-grain{position:absolute;inset:-40%;background-image:var(--grain,none);background-size:180px;opacity:.22;mix-blend-mode:overlay;pointer-events:none;animation:camgrain .5s steps(3) infinite}
@keyframes camgrain{0%{transform:translate(0,0)}33%{transform:translate(-9%,6%)}66%{transform:translate(7%,-8%)}100%{transform:translate(0,0)}}
/* garis bidik rangefinder */
.cam-marks{position:absolute;inset:9%;pointer-events:none;
  background:linear-gradient(var(--ui-ink),var(--ui-ink)) 0 0/18px 1px,linear-gradient(var(--ui-ink),var(--ui-ink)) 0 0/1px 18px,
  linear-gradient(var(--ui-ink),var(--ui-ink)) 100% 0/18px 1px,linear-gradient(var(--ui-ink),var(--ui-ink)) 100% 0/1px 18px,
  linear-gradient(var(--ui-ink),var(--ui-ink)) 0 100%/18px 1px,linear-gradient(var(--ui-ink),var(--ui-ink)) 0 100%/1px 18px,
  linear-gradient(var(--ui-ink),var(--ui-ink)) 100% 100%/18px 1px,linear-gradient(var(--ui-ink),var(--ui-ink)) 100% 100%/1px 18px;background-repeat:no-repeat;opacity:.7}
.cam-marks i{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1px solid rgba(239,233,223,.55)}
.cam-vf-film{position:absolute;left:12px;top:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,233,223,.85);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cam-vf-stamp{position:absolute;right:5%;bottom:3.5%;height:4.2%;width:auto;pointer-events:none}
.cam-flashfx{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam-flashfx.go{animation:camflash .45s ease-out}
@keyframes camflash{0%{opacity:.95}100%{opacity:0}}
.cam-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center;background:#141416;font-size:14px;line-height:1.55;color:var(--ui-dim)}
.cam-fallback[hidden]{display:none}

/* hasil: cetak foto yang "dicuci" perlahan */
.cam-review[hidden]{display:none}
.cam-print{margin:0;position:relative;width:min(calc(100vw - 40px),420px,calc((100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .727));aspect-ratio:8/11;box-shadow:0 24px 50px -20px rgba(0,0,0,.8)}
.cam-print img{width:100%;height:100%;display:block}
.cam-print::after{content:"";position:absolute;inset:0;background:#e9e3d8;opacity:0;pointer-events:none}
.cam-print.develop img{animation:camdev 1.8s cubic-bezier(.3,0,.2,1) both}
.cam-print.develop::after{animation:camdevpaper 1.8s cubic-bezier(.3,0,.2,1) both}
@keyframes camdev{0%{filter:brightness(1.5) contrast(.4) saturate(0) blur(2px)}100%{filter:none}}
@keyframes camdevpaper{0%{opacity:.85}100%{opacity:0}}

/* kontrol bawah */
.cam-dock{max-width:480px;width:100%;margin:0 auto;padding:8px 16px 14px;display:flex;flex-direction:column;gap:12px}
.cam-films{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.cam-films label{position:relative}
.cam-films input{position:absolute;opacity:0;pointer-events:none}
.cam-films span{display:flex;align-items:center;gap:6px;padding:8px 10px;white-space:nowrap;border-radius:8px;font-size:12.5px;color:var(--ui-dim);border:1px solid transparent;cursor:pointer}
.cam-films input:checked+span{color:var(--ui-ink);border-color:rgba(239,233,223,.28);background:rgba(239,233,223,.06)}
.cam-films input:focus-visible+span{outline:2px solid var(--ui-ink);outline-offset:2px}
.can{display:block;width:9px;height:14px;border-radius:2px;box-shadow:inset 0 2px 0 rgba(0,0,0,.25),inset 0 -2px 0 rgba(0,0,0,.25)}
.can--asli{background:#E4DED3}.can--hangat{background:#C9935F}.can--monokrom{background:#9a9893}.can--sinema{background:#4E7C7A}
@media (max-width:360px){.cam-dock{padding-left:8px;padding-right:8px}.cam-films{gap:2px}.cam-films span{padding:7px 6px;gap:5px;font-size:12px}}
.cam-ctrl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center}
.cam-ctrl[hidden],.cam-films[hidden],.cam-decide[hidden]{display:none}
.cam-ctrl-gap{width:44px}
.cam-shutter{width:76px;height:76px;border-radius:50%;border:3px solid var(--ui-ink);background:none;padding:5px;display:block}
.cam-shutter i{display:block;width:100%;height:100%;border-radius:50%;background:var(--ui-ink);transition:transform .12s}
.cam-shutter:active i{transform:scale(.88)}
.cam-shutter:disabled{opacity:.35}
.cam-decide{display:flex;flex-direction:column;align-items:center;gap:10px}
.cam-decide-row{display:flex;gap:10px;width:100%;max-width:360px}
.cam-decide-row .cam-btn{flex:1}
.cam-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:10px;border:1px solid var(--ui-ink);background:var(--ui-ink);color:var(--ui-bg);font:600 14.5px/1 var(--f-body)}
.cam-btn--ghost{background:none;color:var(--ui-ink);border-color:rgba(239,233,223,.35)}
.cam-btn:disabled{opacity:.5}
.cam-hint{font-size:12px;color:var(--ui-dim)}
.cam-error{font-size:13px;color:#ffb38a;text-align:center;max-width:36ch}
.cam-ui :focus-visible{outline:2px solid var(--ui-ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .cam-grain{animation:none}
  .cam-dial{transition:none}
  .cam-print.develop img,.cam-print.develop::after{animation:none}
  .cam-flashfx.go{animation:none}
}