:root{--bg:#100b0d;--panel:#1a1216;--burgundy:#6f1d2a;--rose:#c7929e;--pink:#efd6dd;--olive:#7b8b59;--ivory:#f6f1e9;--muted:#b8a9ae}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);color:#fff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button{font:inherit}.app{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 0,#2c2025,#0d090b 62%)}.hidden{display:none!important}.topbar{position:absolute;z-index:40;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 12px) 16px 22px;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.76),transparent);pointer-events:none}.topbar small{display:block;color:var(--pink);font-size:10px;letter-spacing:.25em}.topbar strong{font:500 22px Georgia,serif;color:var(--ivory)}.screen{position:absolute;inset:0}.home,.mode-picker,.result,.gallery{display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 72px) 20px calc(env(safe-area-inset-bottom) + 26px)}.home-card,.mode-card,.result-card{width:min(440px,100%);text-align:center}.date{display:inline-block;border:1px solid rgba(239,214,221,.35);border-radius:999px;padding:7px 11px;color:var(--pink);letter-spacing:.12em;font-size:12px}.home h1,.mode-picker h1,.result h1{font:500 38px/1.08 Georgia,serif;color:var(--ivory);margin:18px 0 10px}.lead{color:#cdbfc3;margin:0 0 24px}.btn{border:0;border-radius:999px;padding:14px 19px;font-weight:800}.primary{background:var(--pink);color:var(--burgundy)}.ghost{background:rgba(255,255,255,.05);color:var(--ivory);border:1px solid rgba(255,255,255,.18)}.home-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.mode-option{border:1px solid rgba(255,255,255,.16);background:#ffffff0a;border-radius:22px;padding:22px 14px;color:#fff;text-align:left}.mode-option strong{display:block;font-size:18px;color:var(--ivory)}.mode-option span{display:block;color:var(--muted);font-size:12px;margin-top:5px}.camera-screen{background:#000}.camera-wrap{position:absolute;inset:0;background:#000;display:grid;place-items:center;overflow:hidden}.camera-wrap video{width:100%;height:100%;object-fit:cover;background:#000}.camera-wrap video.front{transform:scaleX(-1)}.frame-preview{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}.frame-preview img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.countdown{position:absolute;z-index:25;inset:0;display:grid;place-items:center;font:700 clamp(92px,28vw,180px) Georgia,serif;color:#fff;text-shadow:0 8px 36px #000;background:#0004}.shot-progress{position:absolute;z-index:20;top:calc(env(safe-area-inset-top) + 76px);left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:999px;background:#0009;font-size:12px;backdrop-filter:blur(12px)}.switch-camera{position:absolute;z-index:22;right:18px;bottom:calc(env(safe-area-inset-bottom) + 180px);width:48px;height:48px;border-radius:50%;border:1px solid #ffffff44;background:#120d10aa;color:#fff;font-size:22px}.camera-bottom{position:absolute;z-index:24;left:0;right:0;bottom:0;padding:14px 12px calc(env(safe-area-inset-bottom) + 12px);background:linear-gradient(transparent,rgba(10,6,8,.96) 28%)}.tabs{display:flex;justify-content:center;gap:28px;margin-bottom:10px}.tab{border:0;background:none;color:#a9959c;padding:8px 4px;font-weight:800}.tab.on{color:#fff;border-bottom:2px solid var(--pink)}.picker-row{display:flex;gap:9px;overflow-x:auto;padding:0 2px 14px;scrollbar-width:none}.picker-row::-webkit-scrollbar{display:none}.frame-option,.filter-option{flex:0 0 auto;border:1px solid #ffffff25;background:#ffffff0b;color:#fff;border-radius:16px;padding:7px;min-width:92px}.frame-option.on,.filter-option.on{border-color:var(--pink);box-shadow:0 0 0 2px rgba(239,214,221,.17)}.frame-thumb{width:78px;height:70px;border-radius:11px;background:#21191d;overflow:hidden;display:grid;place-items:center;margin:auto}.frame-thumb img{max-width:100%;max-height:100%;object-fit:contain}.frame-option b,.filter-option b{display:block;font-size:11px;margin-top:6px;white-space:nowrap}.filter-swatch{width:78px;height:70px;border-radius:11px;background:linear-gradient(135deg,#d8c2b7,#6f1d2a);margin:auto}.filter-option[data-filter="bw"] .filter-swatch{filter:grayscale(1)}.filter-option[data-filter="soft"] .filter-swatch{filter:brightness(1.08) contrast(.9)}.filter-option[data-filter="film"] .filter-swatch{filter:sepia(.25) saturate(.8)}.filter-option[data-filter="warm"] .filter-swatch{filter:sepia(.18) saturate(.95)}.shutter-row{position:relative;display:flex;align-items:center;justify-content:center}.shutter{width:74px;height:74px;border-radius:50%;border:5px solid var(--ivory);background:rgba(239,214,221,.2);box-shadow:0 0 0 3px rgba(111,29,42,.64)}.exit-camera{position:absolute;left:6px;border:0;background:none;color:#ddd;font-weight:700}.capture-help{text-align:center;font-size:11px;color:#aa989f;margin-top:7px}.preview-screen{background:#0d090b;overflow:auto;padding:calc(env(safe-area-inset-top) + 72px) 14px calc(env(safe-area-inset-bottom) + 22px)}.preview-card{width:min(520px,100%);margin:auto;text-align:center}.preview-card h2{font:500 30px Georgia,serif;margin:8px 0 16px}.output-preview{position:relative;margin:auto;background:#090708;overflow:hidden;max-height:66vh;display:grid;place-items:center;border-radius:18px}.output-preview>img.result-image{display:block;max-width:100%;max-height:66vh;object-fit:contain}.strip-shots{display:flex;gap:7px;justify-content:center;margin:12px 0}.strip-shots button{width:58px;height:58px;padding:0;border-radius:12px;border:1px solid #ffffff2b;background:#21181c;overflow:hidden}.strip-shots img{width:100%;height:100%;object-fit:cover}.preview-actions,.result-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:15px}.status{min-height:20px;text-align:center;color:#d9cdd1;font-size:12px;margin-top:10px}.spin{display:inline-block;width:15px;height:15px;border:2px solid #6f1d2a55;border-top-color:#6f1d2a;border-radius:50%;animation:spin .7s linear infinite;margin-right:7px;vertical-align:-2px}@keyframes spin{to{transform:rotate(360deg)}}.result-card img{width:100%;max-height:58vh;object-fit:contain;border-radius:18px;background:#090708}.share-button{width:50px;height:50px;border:1px solid #ffffff35;border-radius:50%;background:#ffffff0d;color:#fff;display:grid;place-items:center;margin:14px auto}.share-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2}.gallery{display:block;overflow:auto;background:var(--bg)}.gallery-inner{max-width:960px;margin:auto}.gallery-head{display:flex;align-items:center;justify-content:space-between}.gallery-head h1{font:500 30px Georgia,serif}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-card{background:#1d1518;border-radius:16px;overflow:hidden}.gallery-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}.gallery-card .meta{padding:9px;font-size:11px;color:#baaab0}@media(min-width:720px){.camera-bottom{left:50%;right:auto;transform:translateX(-50%);width:min(720px,100%);border-radius:24px 24px 0 0}.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Photo Strip live stage: camera is clipped to the active PNG opening only. */
.strip-live-stage{position:absolute;z-index:8;left:50%;top:0;width:min(78vw,360px);aspect-ratio:847/1857;background:#080607;transform-origin:50% 0;transition:transform .58s cubic-bezier(.22,.8,.24,1);will-change:transform;overflow:visible;box-shadow:0 22px 54px #0008}.strip-live-stage.no-animate{transition:none}.strip-live-frame{position:absolute;z-index:4;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.strip-live-mask,.strip-live-filled{position:absolute;overflow:hidden;background:#050405}.strip-live-mask{z-index:2;transition:left .55s cubic-bezier(.22,.8,.24,1),top .55s cubic-bezier(.22,.8,.24,1),width .55s cubic-bezier(.22,.8,.24,1),height .55s cubic-bezier(.22,.8,.24,1);box-shadow:0 0 0 2px rgba(255,255,255,.18)}.strip-live-filled{z-index:1}.strip-live-mask video,.strip-live-filled img{display:block;width:100%;height:100%;object-fit:cover;background:#050405}.strip-live-mask video.front{transform:scaleX(-1)}.camera-wrap.strip-mode>#cameraVideo,.camera-wrap.strip-mode>.frame-preview{visibility:hidden}.camera-wrap.strip-mode{background:#050405}.camera-wrap.strip-mode .strip-live-stage{visibility:visible}.camera-wrap:not(.strip-mode) .strip-live-stage{display:none!important}

/* Single Shot live frame: the live camera is clipped to the declared PNG slot. */
.single-live-stage{position:absolute;z-index:8;left:50%;top:46%;transform:translate(-50%,-50%);background:#050405;overflow:visible;box-shadow:0 22px 54px #0008}.single-live-mask{position:absolute;z-index:2;overflow:hidden;background:#050405}.single-live-mask video{display:block;width:100%;height:100%;object-fit:cover;background:#050405}.single-live-mask video.front{transform:scaleX(-1)}.single-live-frame{position:absolute;z-index:4;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.camera-wrap.single-framed-mode>#cameraVideo,.camera-wrap.single-framed-mode>.frame-preview{visibility:hidden}.camera-wrap.single-framed-mode{background:#050405}.camera-wrap:not(.single-framed-mode) .single-live-stage{display:none!important}


/* Compact camera controls in phone landscape so controls never cover the frame. */
@media (orientation:landscape) and (max-height:600px){
  .topbar{padding:calc(env(safe-area-inset-top) + 5px) 12px 12px}
  .topbar small{font-size:8px}
  .topbar strong{font-size:16px}
  .camera-bottom{left:0;right:0;bottom:0;width:100%;transform:none;border-radius:0;padding:6px max(10px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 6px) max(10px,env(safe-area-inset-left));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;background:rgba(10,6,8,.94);backdrop-filter:blur(14px)}
  .tabs{grid-column:1;display:flex;flex-direction:column;gap:0;margin:0;align-items:stretch}
  .tab{padding:3px 6px;font-size:10px;text-align:left;border-left:2px solid transparent;border-bottom:0}
  .tab.on{border-left-color:var(--pink);border-bottom:0}
  .picker-row{grid-column:2;grid-row:1;margin:0;padding:2px 0;gap:6px;min-width:0;align-items:center}
  .frame-option,.filter-option{min-width:64px;padding:4px;border-radius:10px}
  .frame-thumb,.filter-swatch{width:52px;height:38px;border-radius:7px}
  .frame-option b,.filter-option b{font-size:9px;margin-top:3px}
  .shutter-row{grid-column:3;grid-row:1;min-width:104px;justify-content:flex-end;gap:6px}
  .shutter{width:52px;height:52px;border-width:4px;box-shadow:0 0 0 2px rgba(111,29,42,.64)}
  .exit-camera{position:static;font-size:10px;padding:4px}
  .capture-help{display:none}
  #fallbackLabel{display:none!important}
  .switch-camera{right:max(12px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 78px);width:38px;height:38px;font-size:18px}
  .single-live-stage{transform:translate(-50%,-50%)}
  .shot-progress{top:calc(env(safe-area-inset-top) + 44px)}
}


/* Portrait-only UX. On phones held landscape, block the app instead of rendering a compromised landscape layout. */
@media (orientation:landscape) and (max-height:600px){body{overflow:hidden}.app{visibility:hidden;pointer-events:none}body::before{content:"↻\A Putar HP ke posisi portrait\A\A Wedding Camera dirancang khusus untuk posisi tegak.";white-space:pre-line;position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:32px;text-align:center;background:radial-gradient(circle at 50% 0,#2c2025,#0d090b 62%);color:var(--ivory);font:600 20px/1.55 Georgia,serif;letter-spacing:.01em}}