/* Ikrar — UI photo booth (dioptimalkan untuk tablet & laptop, layar penuh) */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:#0e0c11;color:#f3f0f6;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
svg{display:block}
.bs-hidden-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* tata letak utama: pratinjau kiri, panel style kanan */
.bs{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,24vw,340px);height:100vh;height:100dvh}
.bs-stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.bs-top{display:flex;align-items:center;gap:12px;padding:10px 16px 4px}
.bs-title{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.bs-title b{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-title span{font-size:.74rem;color:#a39cae}
.bs-badge{padding:3px 9px;border-radius:99px;background:var(--p);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.12em}
.bs-top-actions{margin-left:auto;display:flex;gap:6px}
.bs-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid #2c2633;background:#18151d;text-decoration:none;font-size:1.2rem;color:#f3f0f6}
.bs-icon:hover{background:#221e29}
.bs-icon svg{width:20px;height:20px}
.bs-view{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:8px}
#pv{display:block;border-radius:10px;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px #2c2633}
.bs-count{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:min(34vh,30vw);font-weight:800;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.bs-count.pop{animation:pop 1s ease-out}
@keyframes pop{0%{transform:scale(1.6);opacity:0}20%{transform:scale(1);opacity:1}85%{opacity:1}100%{transform:scale(.7);opacity:0}}
.bs-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.bs-flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.bs-shot{position:absolute;top:18px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:99px;background:rgba(0,0,0,.6);font-weight:700;font-size:.9rem;pointer-events:none}
.bs-shot:empty{display:none}
.bs-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:6px 18px 16px}
.bs-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bs-tools.right{justify-content:flex-end;flex-direction:column;align-items:flex-end;gap:2px}
.bs-stylename{font-weight:700;font-size:.9rem}
.bs-key{font-size:.7rem;color:#8d8598}
.bs-chip{padding:8px 12px;border-radius:12px;border:1px solid #2c2633;background:#18151d;font-size:.82rem;font-weight:600}
.bs-chip.on{border-color:var(--p);color:#fff;background:color-mix(in srgb,var(--p) 30%,#18151d)}
.bs-seg{display:inline-flex;padding:3px;border-radius:12px;background:#18151d;border:1px solid #2c2633}
.bs-seg button{border:0;background:none;padding:6px 10px;border-radius:9px;font-size:.8rem;font-weight:700;color:#a39cae}
.bs-seg button.on{background:var(--p);color:#fff}
.bs-seg.wide{display:flex}
.bs-seg.wide button{flex:1;padding:10px}
.bs-shutter{width:86px;height:86px;border-radius:50%;border:5px solid #fff;background:transparent;padding:6px;transition:transform .15s}
.bs-shutter span{display:block;width:100%;height:100%;border-radius:50%;background:var(--p);box-shadow:inset 0 -6px 12px rgba(0,0,0,.25)}
.bs-shutter:active{transform:scale(.92)}
.is-busy .bs-shutter{opacity:.4;pointer-events:none}
.is-busy .bs-side{pointer-events:none;opacity:.6}

/* panel kanan: orientasi menempel di atas, daftar style bisa digulir */
.bs-side{display:flex;flex-direction:column;min-height:0;background:#16131b;border-left:1px solid #26212d}
.bs-orient{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;background:#16131b;border-bottom:1px solid #26212d}
.bs-orient button{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border-radius:12px;border:1px solid #2c2633;background:#1d1923;font-weight:700;font-size:.85rem;color:#c9c2d3}
.bs-orient button svg{width:20px;height:20px}
.bs-orient button.on{background:var(--p);border-color:var(--p);color:#fff}
.bs-styles{flex:1;min-height:0;overflow-y:auto;padding:4px 12px 30px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#3a3343 transparent}
.bs-group{position:sticky;top:0;z-index:1;margin:0 -12px;padding:12px 14px 8px;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9a91a6;background:linear-gradient(#16131b 70%,rgba(22,19,27,0))}
.bs-list{display:grid;grid-template-columns:1fr;gap:10px}
.bs-styles.is-portrait .bs-list{grid-template-columns:1fr 1fr}
.bs-style{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:14px;border:2px solid transparent;background:#1d1923;text-align:left}
.bs-style canvas{width:100%;height:auto;border-radius:9px;background:#000}
.bs-style span{font-size:.8rem;font-weight:700;padding:0 4px 2px}
.bs-style em{position:absolute;top:10px;left:10px;padding:2px 8px;border-radius:99px;background:var(--p);color:#fff;font-size:.6rem;font-style:normal;font-weight:800;letter-spacing:.06em}
.bs-style i{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.7);font-size:.6rem;font-style:normal;font-weight:700}
.bs-style.on{border-color:var(--p);background:color-mix(in srgb,var(--p) 18%,#1d1923)}
.bs-style:hover{background:#25202c}

/* layar persiapan */
.bs-setup{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:radial-gradient(80% 60% at 50% 30%,color-mix(in srgb,var(--p) 30%,#0e0c11),#0e0c11);overflow:auto}
.bs-setup-card{width:min(860px,100%);padding:26px;border-radius:24px;background:#18151d;border:1px solid #2c2633;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.bs-setup-head{text-align:center;margin-bottom:20px}
.bs-kicker{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--a);font-weight:800}
.bs-setup-head h1{margin:6px 0 4px;font-size:clamp(1.6rem,4vw,2.4rem)}
.bs-setup-head p{margin:0;color:#a39cae}
.bs-setup-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.bs-setup-prev{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#000;display:grid;place-items:center}
.bs-setup-prev video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.bs-setup-prev span{position:absolute;bottom:8px;left:10px;font-size:.7rem;color:#bbb;background:rgba(0,0,0,.5);padding:2px 8px;border-radius:6px}
.bs-setup-form{display:flex;flex-direction:column;gap:10px}
.bs-label{font-size:.78rem;font-weight:700;color:#c9c2d3;display:flex;justify-content:space-between;gap:8px}
.bs-label small{color:#8d8598;font-weight:500}
.bs-select{width:100%;padding:12px;border-radius:12px;border:1px solid #2c2633;background:#0f0d12;color:#fff;font:inherit}
.bs-msg{margin:4px 0 0;font-size:.82rem;color:#9fdcb8;min-height:1.2em}
.bs-msg.err{color:#ff9a9a}
.bs-setup-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.bs-setup-actions .primary{flex:1}
.bs-note{margin:14px 0 0;font-size:.76rem;color:#8d8598;line-height:1.5}
.bs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid #2c2633;background:#221e29;font-weight:700;font-size:.9rem;text-decoration:none;color:#f3f0f6}
.bs-btn.primary{background:var(--p);border-color:var(--p);color:#fff}
.bs-btn.ghost{background:transparent}
.bs-btn.big{padding:16px 22px;font-size:1.05rem;width:100%}
.bs-btn[disabled]{opacity:.4;pointer-events:none}

/* layar hasil */
.bs-result{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,28vw,380px);background:rgba(10,8,12,.96);animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.bs-result-img{display:grid;place-items:center;padding:20px;min-height:0}
.bs-result-img img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 60px -20px #000;animation:land .6s cubic-bezier(.2,1.2,.4,1)}
@keyframes land{from{transform:scale(.85) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.bs-result-side{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:24px;background:#16131b;border-left:1px solid #26212d;overflow:auto;text-align:center}
.bs-result-side h2{margin:4px 0 0;font-size:1.3rem}
.bs-qr{display:grid;place-items:center;min-height:220px;padding:14px;border-radius:18px;background:#fff;color:#333}
.bs-qr svg{width:100%;max-width:260px;height:auto}
.bs-qr p{margin:8px 0 0;font-size:.85rem}
.bs-url{margin:0;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:#a39cae;word-break:break-all}
.bs-hint{margin:0;font-size:.82rem;color:#c9c2d3}
.bs-result-sub{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bs-result-sub .bs-btn{padding:10px;font-size:.8rem}
.bs-warn{margin:0;padding:12px;border-radius:12px;background:rgba(255,170,60,.12);border:1px solid rgba(255,170,60,.35);color:#ffcf8a;font-size:.8rem;line-height:1.45;text-align:left}
.bs-err{color:#ff9a9a;font-weight:600}
.bs-spin{width:38px;height:38px;border-radius:50%;border:4px solid rgba(0,0,0,.12);border-top-color:var(--p);animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.bs-loading{position:fixed;inset:0;z-index:100;display:grid;place-content:center;gap:12px;text-align:center;background:#0e0c11;color:#a39cae}
.bs-loading .bs-spin{border-color:#2c2633;border-top-color:var(--p)}

/* layar sempit (HP / tablet potret kecil) */
@media (max-width:760px){
  .bs{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 36vh}
  .bs-side{border-left:0;border-top:1px solid #26212d}
  .bs-list{grid-template-columns:1fr 1fr}
  .bs-styles.is-portrait .bs-list{grid-template-columns:1fr 1fr 1fr}
  .bs-key{display:none}
  .bs-setup-grid{grid-template-columns:1fr}
  .bs-result{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow:auto}
  .bs-result-side{border-left:0}
  .bs-qr{min-height:180px}
  .bs-qr svg{max-width:200px}
}

@media print{
  body *{visibility:hidden}
  #resultImg,#resultImg *{visibility:visible}
  .bs-result{position:static;background:none;display:block}
  #resultImg{position:fixed;inset:0;margin:auto;max-width:100%;max-height:100%;box-shadow:none;border-radius:0;animation:none}
  @page{margin:0}
}