@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* Design tokens -- diambil dari sistem desain "PhotoPixel" (Neo-Brutalist).
     Ganti warna di sini kalau brand berubah, jangan diubah satu-satu di
     bawah supaya konsisten di semua halaman. */
  --surface: #fef7ff;
  --surface-dim: #ded7e4;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f8f1fe;
  --surface-container: #f3ebf8;
  --surface-container-high: #ede5f3;
  --surface-container-highest: #e7e0ed;
  --on-surface: #1d1a23;
  --on-surface-variant: #494454;
  --outline: #7b7486;
  --outline-variant: #cbc3d7;
  --primary: #6b38d4;
  --on-primary: #ffffff;
  --primary-container: #8455ef;
  --on-primary-container: #fffbff;
  --primary-fixed: #e9ddff;
  --secondary-container: #fed01b;
  --on-secondary-container: #6f5900;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --success: #22c55e;
  --border-w: 4px;
  --border-w-sm: 2px;
  --shadow-off: 6px;
  --shadow-off-sm: 3px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  background-color: var(--surface-container);
  background-image: radial-gradient(var(--outline-variant) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--on-surface);
  overflow-x: hidden;
}
body {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(12px, 3vw, 24px);
  min-height: 100vh;
  min-height: 100dvh; /* viewport dinamis -- menghindari konten kepotong browser chrome di tablet/HP */
  overflow-y: auto; /* jaring pengaman: kalau layar tetap kurang tinggi, discroll bukan kepotong */
  position: relative;
}
.screen-center { justify-content: center; }

/* Ruang kosong di bawah supaya konten tidak ketutup .bottom-nav yang fixed. */
body.has-bottom-nav { padding: clamp(90px, 15vh, 110px) clamp(12px, 3vw, 24px) clamp(80px, 14vh, 100px); }

/* --- Brand topbar kecil, dipakai di halaman-halaman step (bukan welcome) --- */
.pb-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: clamp(56px, 9vh, 72px);
  padding: 6px 0;
  background: var(--surface);
  border-bottom: var(--border-w) solid var(--on-surface);
  box-shadow: 0 var(--shadow-off) 0 0 rgba(0,0,0,1);
}
/* Logo ppmarcore.png dipakai sebagai brand mark di semua topbar halaman
   step (frame/kamera/preview/hasil) -- tinggi mengikuti sisa ruang topbar
   (dikurangi padding vertikal), lebar menyesuaikan otomatis karena logo
   ini rasionya persegi (1:1). Tulisan "PhotoPixel by MARCore" tetap
   ditampilkan di sebelahnya. */
.pb-topbar-logo-img { height: 100%; width: auto; display: block; flex-shrink: 0; }
.pb-topbar-text { font-weight: 900; font-size: clamp(1rem, 2.6vw, 1.3rem); letter-spacing: .02em; text-transform: uppercase; }
.pb-topbar-text span { color: var(--primary); }

.tagline { opacity: .8; margin: 14px 0 clamp(20px, 5vh, 40px); letter-spacing: 2px; font-weight: 700; }
.welcome { text-align: center; }

/* Logo gambar (ppmarcore.png) menggantikan teks "PhotoPixel / by MARCore".
   Logo ini bentuknya persegi/bulat (1:1) -- pakai satuan vmin (mengikuti
   sisi terpendek layar) supaya scaling tetap proporsional & tidak
   kegedean baik di layar lebar (desktop) maupun layar pendek (tablet
   landscape), lalu dibatasi dengan clamp() biar ada batas atas & bawah. */
.welcome-logo {
  width: clamp(190px, 34vmin, 380px);
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Tagline welcome screen -- lepas dari kotak, dibuat lebih hidup: warna
   utama gradasi ungu->kuning brand, sedikit miring, dan kata terakhir
   "in Style" disorot warna aksen supaya terasa lebih "keren", bukan teks
   datar di dalam kotak. */
.welcome .tagline-cool {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 700; font-style: italic;
  letter-spacing: .04em;
  margin: 10px 0 clamp(24px, 5vh, 44px);
  background: linear-gradient(90deg, var(--primary), var(--primary-container));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.welcome .tagline-cool span {
  background: none; -webkit-text-fill-color: initial;
  color: var(--on-secondary-container);
  text-decoration: underline; text-decoration-color: var(--secondary-container);
  text-decoration-thickness: 4px; text-underline-offset: 4px;
}
/* Tombol start welcome screen -- ikon kamera + teks START berdampingan */
.btn-start { display: inline-flex; align-items: center; gap: 14px; }
.btn-start-icon { font-size: 1.5em; line-height: 1; }

.btn {
  border: var(--border-w) solid var(--on-surface);
  border-radius: 0;
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.05rem; font-weight: 700; padding: 16px 26px;
  background: var(--surface); color: var(--on-surface); text-decoration: none;
  display: inline-block; text-align: center;
  text-transform: uppercase;
  box-shadow: var(--shadow-off) var(--shadow-off) 0 0 rgba(0,0,0,1);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover { box-shadow: 2px 2px 0 0 rgba(0,0,0,1); transform: translate(4px, 4px); }
.btn:active { box-shadow: none; transform: translate(6px, 6px); }
.btn-huge {
  font-size: clamp(1.2rem, 3.2vw, 1.5rem); padding: clamp(18px, 3vh, 24px) clamp(32px, 6vw, 56px);
  margin-top: 24px;
  background: var(--secondary-container); color: var(--on-secondary-container);
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-secondary { background: var(--surface-container-high); color: var(--on-surface); }
.btn-small { font-size: .8rem; padding: 10px 16px; margin-top: 10px; border-width: var(--border-w-sm); box-shadow: 3px 3px 0 0 rgba(0,0,0,1); }
.btn-small:hover { box-shadow: 1px 1px 0 0 rgba(0,0,0,1); transform: translate(2px, 2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--shadow-off) var(--shadow-off) 0 0 rgba(0,0,0,1); }

.step-title {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: clamp(14px, 3vh, 24px);
  font-weight: 900; text-transform: uppercase;
  border-bottom: var(--border-w-sm) solid var(--on-surface);
  padding-bottom: 8px;
}

.grid { display: grid; gap: 20px; width: 100%; max-width: 900px; }
.grid-frames { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card-select {
  background: var(--surface);
  border: var(--border-w) solid var(--on-surface);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 0 rgba(0,0,0,1);
  padding: 16px; color: var(--on-surface); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 10px; font-size: 1rem; font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.card-select:hover { box-shadow: 3px 3px 0 0 rgba(0,0,0,1); transform: translate(3px, 3px); }
.card-select.selected {
  background: var(--primary-fixed);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 0 var(--primary);
  border-color: var(--primary);
}
.card-select img { width: 100%; border: var(--border-w-sm) solid var(--on-surface); object-fit: cover; max-height: 220px; }

/* --- Navigasi tetap di pojok bawah (Kembali kiri, Lanjut kanan) -- supaya
   perpindahan halaman selalu eksplisit lewat tombol, tidak otomatis. --- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 16px clamp(16px, 4vw, 32px);
  background: var(--surface);
  border-top: var(--border-w) solid var(--on-surface);
  box-shadow: 0 calc(-1 * var(--shadow-off)) 0 0 rgba(0,0,0,1);
  z-index: 20;
}
.bottom-nav-single { justify-content: flex-end; }
.btn-nav {
  font-family: 'Quicksand', sans-serif;
  padding: 14px 26px; font-size: 1rem;
}
.btn-back { background: var(--surface-container-high); color: var(--on-surface); }
.btn-next { background: var(--primary); color: var(--on-primary); }
.btn-close { background: var(--secondary-container); color: var(--on-secondary-container); }

/* Tombol admin, kecil & tidak mencolok, pojok kanan bawah welcome screen. */
.admin-link {
  position: fixed; right: 14px; bottom: 10px;
  font-family: 'Space Mono', monospace;
  font-size: .68rem; letter-spacing: 1px; color: var(--on-surface-variant);
  text-decoration: none; padding: 6px 10px; opacity: .55;
}
.admin-link:hover { opacity: 1; }

.camera-body {
  justify-content: flex-start;
  height: 100vh; height: 100dvh; /* dvh mengoreksi vh kalau didukung browser; vh jadi fallback */
  overflow: hidden; /* halaman kamera full-screen, bukan halaman yang discroll */
  padding-top: clamp(64px, 10vh, 88px) !important;
  padding-bottom: clamp(8px, 2vh, 16px) !important;
}

/* .camera-wrap dipakai utk 2 kotak: live kamera (video) DAN preview hasil
   jepretan (#reviewControls) -- keduanya tampil bergantian (camera.js yang
   toggle display none/flex), jadi selalu cuma satu "frame" yang makan
   ruang layar, sisanya penuh dipakai frame itu (flex:1). Semua kontrol
   (tombol FOTO, RETAKE, GUNAKAN, counter) diletakkan MENUMPUK DI DALAM
   frame ini (position:absolute overlay), bukan di bawahnya -- supaya di
   layar pendek (tablet landscape) frame kamera tetap dapat porsi tinggi
   paling besar dan preview live tidak kepotong. */
.camera-wrap, #reviewControls {
  position: relative; width: 100%; max-width: 900px;
  flex: 1 1 auto; min-height: 0; /* isi sisa ruang layar, bukan cuma ikut rasio video */
  overflow: hidden; background: #000;
  border: var(--border-w) solid var(--on-surface);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 0 rgba(0,0,0,1);
  display: flex; /* JS override ke 'none' saat disembunyikan */
}
.camera-wrap video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; /* isi penuh kotak, kelebihan di-crop -- bukan letterbox kecil di tengah */
  display: block;
  /* Preview DIBUAT mirror (seperti cermin) -- ini yang bikin natural saat
     memposisikan badan/tangan (gerak ke kanan, terasa gerak ke kanan di
     layar). Foto yang TERSIMPAN sekarang JUGA di-flip di capturePhoto()
     (camera.js) supaya hasil akhir sama persis dengan preview ini -- lihat
     komentar di camera.js untuk detail. */
  transform: scaleX(-1);
}

/* Kotak panduan komposisi: rasionya di-set dari JS (camera.js) mengikuti
   ukuran slot foto di frame yang dipilih, lebar hampir penuh dari preview
   kamera (92%), supaya jelas terlihat dan mudah dipakai untuk posisi badan. */
.capture-guide {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92%; border: 4px dashed var(--secondary-container);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
  pointer-events: none;
}

.countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(3rem, 12vw, 8rem); font-weight: 900; color: var(--secondary-container);
  -webkit-text-stroke: 3px var(--on-surface);
  paint-order: stroke fill;
  pointer-events: none;
  z-index: 5;
}
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; }
.flash.active { animation: flash-anim .25s ease-out; }
@keyframes flash-anim { from { opacity: 1; } to { opacity: 0; } }

/* Chip counter "Foto X / 3" -- ngambang di pojok kiri-atas frame, bukan
   baris terpisah di bawah, supaya hemat ruang vertikal. */
.photo-counter {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  font-family: 'Space Mono', monospace; font-size: .85rem;
  font-weight: 700; margin: 0;
  background: var(--surface); border: var(--border-w-sm) solid var(--on-surface);
  padding: 5px 12px;
}

/* Bar tombol yang ngambang di bagian bawah frame (baik untuk tombol FOTO
   maupun RETAKE/GUNAKAN) -- dengan gradasi gelap di baliknya supaya tombol
   tetap kebaca walau preview kamera terang. */
#captureControls, .review-buttons {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: clamp(10px, 2.5vh, 20px) 16px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}
#captureControls .btn-huge, .review-buttons .btn {
  margin-top: 0; /* reset margin-top bawaan .btn-huge, tidak relevan lagi di overlay */
}

.review-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover;
}

.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; width: 100%; max-width: 900px; }
.review-item { text-align: center; }
.review-item img {
  width: 100%; max-height: 40vh; object-fit: contain;
  background: var(--surface);
  border: var(--border-w) solid var(--on-surface);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 0 rgba(0,0,0,1);
}

/* --- Halaman hasil: foto siap-cetak di kiri, QR + tombol cetak di kanan --- */
.result-layout {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(20px, 4vw, 40px); width: 100%; max-width: 980px;
}
.result-photo { flex: 1 1 280px; max-width: 380px; display: flex; justify-content: center; }
.result-photo img {
  width: 100%; max-height: 60vh; object-fit: contain;
  background: var(--surface);
  border: var(--border-w) solid var(--on-surface);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 0 rgba(0,0,0,1);
}
.result-side {
  flex: 1 1 260px; max-width: 340px;
  display: flex; flex-direction: column; align-items: stretch; gap: 18px;
}
.qr-card {
  background: var(--surface); border: var(--border-w) solid var(--on-surface);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 0 rgba(0,0,0,1);
  padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scan-hint { opacity: .85; font-weight: 700; text-align: center; }
#qrcode { background: #fff; padding: 10px; border: var(--border-w-sm) solid var(--on-surface); }
#printStatus { text-align: center; font-weight: 700; }

.download-card { text-align: center; max-width: 420px; }
.download-preview { width: 100%; margin: 16px 0; border: var(--border-w) solid var(--on-surface); }

.error-msg {
  color: var(--on-error-container); background: var(--error-container);
  border: var(--border-w-sm) solid var(--error);
  margin-top: 16px; padding: 10px 14px; text-align: center; font-weight: 700;
}
.hint { font-size: .8rem; opacity: .7; font-weight: 600; }

/* Frame editor (halaman admin -- dibiarkan netral/teknikal, bukan bagian dari
   tampilan yang dilihat tamu photobox) */
.editor-stage {
  position: relative; background-color: var(--surface-container-high); background-repeat: no-repeat;
  overflow: hidden; touch-action: none; margin: 16px 0;
  border: var(--border-w-sm) dashed var(--outline);
}
.slot-box {
  position: absolute; box-sizing: border-box; cursor: move; touch-action: none;
  border: 2px solid var(--primary); background: rgba(107, 56, 212, .18);
  display: flex; align-items: flex-start; justify-content: center;
}
.slot-box .slot-label {
  font-family: 'Space Mono', monospace;
  font-size: .7rem; font-weight: 700; background: var(--primary); color: var(--on-primary);
  padding: 2px 6px; margin-top: 4px; pointer-events: none;
}
.resize-handle {
  position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px;
  background: var(--secondary-container); border: 2px solid var(--on-surface); cursor: se-resize;
  touch-action: none;
}
.slot-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.slot-fields label { font-size: .75rem; opacity: .8; font-weight: 700; }
.slot-fields input { width: 80px; padding: 6px; }
.editor-hint { font-size: .8rem; opacity: .7; margin: 6px 0 20px; font-weight: 600; }

/* --- Tablet / layar landscape: layar lebar tapi pendek, susunan vertikal
   bawaan (didesain untuk HP potrait) gampang bikin tombol paling bawah
   terpotong di luar layar. Di orientasi landscape, batasi tinggi elemen
   besar dan kecilkan jarak vertikal supaya semuanya tetap muat tanpa scroll. --- */
@media (orientation: landscape) and (max-height: 820px) {
  body { padding: 12px; justify-content: flex-start; }
  body.has-bottom-nav { padding-bottom: 76px; }
  .tagline { margin: 8px 0 20px; }
  .step-title { margin-bottom: 12px; }
  .grid, .review-grid { gap: 12px; }
  .camera-body { padding-top: 60px !important; padding-bottom: 6px !important; }
  .pb-topbar { height: 52px; }
  #captureControls .btn-huge { padding: 12px 28px; font-size: 1.05rem; }
}

/* Layar pendek (mis. tablet 7"-8" landscape, atau HP landscape) -- perkecil
   lagi elemen dekoratif yang besar supaya tidak makan tempat vertikal. */
@media (max-height: 600px) {
  .welcome-logo { width: clamp(150px, 30vmin, 240px); }
  .tagline { margin-bottom: 16px; }
  .countdown { font-size: clamp(2.5rem, 10vw, 4rem); }
  .welcome .btn-huge { padding: 14px 28px; font-size: 1.1rem; margin-top: 12px; }
}