/* SNAPBOOTH V2 — DESIGN SYSTEM (C0)
   Port palet & komponen dari V1. Semua chamber pakai class & variabel ini,
   JANGAN nulis ulang token warna di tiap chamber. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* BOLD & PLAYFUL — vibrant violet + aksen pink + teks navy, background gradient lembut.
     Nama var lama dipertahankan (di-remap) biar semua komponen ikut berubah otomatis. */
  /* Palette SAGE: green tua #437a52 · sage #6b8d6a · olive #97b56f · mint #c6dcc1 · peach #e9cdb4 · cream #f0e2cb */
  --bg1:#cfe3cb; --bg2:#f3e7d0; --ink:#2e5239; --muted:#6e7d6a;
  --gold:#5f8060; --gold-soft:#c6dcc1; --wine:#437a52; --wine-dark:#355f41;
  --card:#fefcf6; --line:#e3dcc6; --r:20px;
  /* status */
  --wait:#c08a3e; --shoot:#437a52; --done:#2e7d4f; --err:#c0563f;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0; min-height:100%; color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:linear-gradient(150deg,#cfe3cb 0%,#ecd6be 58%,#f3e7d0 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.kiosk{ overflow:hidden; user-select:none; } /* booth fullscreen */

/* ---- tipografi (modern sans, heading tracking ketat) ---- */
.logo{ font-family:"Inter",system-ui,sans-serif; font-weight:800; line-height:1; letter-spacing:-.03em; margin:0; color:#2e5239; }
.logo span{ color:#7a9a5c; }
.rule{ width:48px; height:2px; background:var(--ink); border-radius:2px; margin:6px 0; }
.tagline{ color:var(--muted); font-weight:500; letter-spacing:0; margin:0; }
.sub{ color:var(--muted); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:12px; }
h1,h2{ font-family:"Inter",system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; }

/* ---- kartu / panel ---- */
.card,.glass{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06); padding:34px;
}
.mcard{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px 24px; cursor:pointer; text-align:center; transition:transform .18s,border-color .18s,box-shadow .18s; }
.mcard:hover{ transform:translateY(-3px); border-color:var(--ink); box-shadow:0 14px 34px rgba(0,0,0,.10); }

/* ---- tombol ---- */
.btn-big{ font-size:clamp(15px,2vw,17px); font-weight:700; letter-spacing:.01em; color:#fff; cursor:pointer; border:none; padding:17px 44px; border-radius:999px; background:var(--wine); box-shadow:0 8px 22px rgba(67,122,82,.36); transition:background .2s,transform .14s,box-shadow .2s; }
.btn-big:hover{ background:var(--wine-dark); box-shadow:0 12px 30px rgba(67,122,82,.50); transform:translateY(-1px); } .btn-big:active{ transform:translateY(1px); } .btn-big:disabled{ background:#c4ccba; color:#fff; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink); font-weight:600; font-size:14px; letter-spacing:0; padding:11px 24px; border-radius:999px; cursor:pointer; transition:border-color .15s,background .15s; }
.btn-ghost:hover{ border-color:var(--ink); background:#fafafa; }
.btn-danger{ background:#fff; border:1px solid var(--err); color:var(--err); font-weight:700; text-transform:uppercase; font-size:12px; padding:9px 14px; border-radius:999px; cursor:pointer; }
.btn-danger:hover{ background:var(--err); color:#fff; }

/* ---- form ---- */
input,select{ font-size:16px; font-family:inherit; font-weight:600; color:var(--ink); padding:13px 15px; border-radius:10px; border:1px solid var(--line); background:#fff; outline:none; width:100%; }
input:focus,select:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(24,24,27,.12); }
label{ color:var(--muted); font-weight:700; font-size:14px; }

/* ---- KPI / chip (admin) ---- */
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.kpi .lbl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.kpi .val{ font-family:"Inter",system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; font-size:28px; margin-top:8px; }
.kpi.hl{ background:var(--wine); border-color:var(--wine); } .kpi.hl .lbl{ color:var(--gold-soft); } .kpi.hl .val{ color:#f3ead9; }
.schip{ border-radius:12px; padding:14px 16px; color:#fff; font-weight:700; }
.schip.menunggu{ background:var(--wait); } .schip.foto{ background:var(--shoot); } .schip.selesai{ background:var(--done); }
.badge{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; color:#fff; }

/* ---- layar booth (fullscreen step) ---- */
.screen{ position:fixed; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; padding:24px; gap:18px; text-align:center; }
.screen.active{ display:flex; animation:fade .4s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ---- util ---- */
.hidden{ display:none !important; }
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--ink); color:#f3ead9; font-weight:700; padding:13px 24px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.3); opacity:0; transition:.25s; z-index:99; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }
.shake{ animation:shake .4s; } @keyframes shake{ 0%,100%{transform:none} 20%{transform:translateX(-7px)} 60%{transform:translateX(7px)} }