*{box-sizing:border-box}
body{font-family:Arial, sans-serif;background:linear-gradient(180deg,#0b1b4d,#1f3b8a);color:#fff;margin:0;min-height:100vh}
.page{display:flex;gap:20px;padding:30px;align-items:center;justify-content:center;flex-wrap: wrap}
.left{position:relative}
.pointer{position:absolute;left:50%;transform:translateX(-50%);top:8px;font-size:32px;color:#ffd700}
.right{width:360px;background:rgba(255,255,255,0.04);padding:20px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.brand h1{margin:0 0 8px;font-size:28px;color:#ffd700;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.form input{width:100%;padding:12px;margin:8px 0;border-radius:6px;border:0}
.btns{display:flex;gap:10px}
.btns button{flex:1;padding:10px;border-radius:8px;border:0;background:#ffd700;color:#111;font-weight:700;cursor:pointer}
#status{margin-top:10px;color:#ffdd99}
.resultBox{margin-top:12px;padding:12px;background:rgba(255,255,255,0.03);border-radius:6px}
canvas{border-radius:10px;background:transparent}
.pointer-img {
  position: absolute;
  left: 50%;
  top: -5px; /* atur sesuai tinggi pointer */
  transform: translateX(-50%);
  width: 100px; /* sesuaikan ukuran pointer */
  pointer-events: none;
}
.wheel-wrap{
  --w: clamp(280px, 78vw, 640px);
  position: relative;
  width: var(--w);
  height: var(--w);
}
#wheel{
  width: 100%;
  height: 100%;
  display: block;
}
.pointer-img{
  position: absolute !important;
  inset: 0 !important;      /* top:0; right:0; bottom:0; left:0 */
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  pointer-events: none;
}
@keyframes pulse-glow {
  0%   { filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  25%  { filter: drop-shadow(0 0 30px rgba(255,215,0,0.9)); }
  50%  { filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  75%  { filter: drop-shadow(0 0 30px rgba(255,215,0,0.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
}

.center-pulse {
  animation: pulse-glow 1.4s ease-out both;
}
/* --- layout responsif untuk roda --- */
.wheel-wrap{
  position: relative;
  --w: clamp(280px, 78vw, 640px);
  width: var(--w);
  height: var(--w);
}
#wheel{ width:100%; height:100%; display:block; }
.pointer-img{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}

/* --- form ala contoh: tanpa panel gelap, judul putih, input & tombol emas --- */
.right{
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: min(92vw, 420px);
  text-align: center;
}

.brand h1{
  margin: 0 0 4px;
  color: #ffd700;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.voucher-title{
  margin: 6px 0 14px;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .3px;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

.form input{
  width: 100%;
  padding: 12px 14px;
  margin: 8px 0;
  border-radius: 8px;
  border: 0;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.form input::placeholder{ color:#8b8b8b; }

.btns{ display:flex; gap:14px; justify-content:center; margin-top:8px; }
.btns button{
  flex:1; min-width:140px; padding:12px 16px;
  border:0; border-radius:999px; font-weight:800; color:#111; cursor:pointer;
  background: linear-gradient(180deg,#FFD760 0%,#F3A600 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  transition: transform .06s ease, filter .2s ease;
}
.btns button:hover{ filter:brightness(1.05); }
.btns button:active{ transform:translateY(1px); }

#status{
  margin:10px 0 4px; color:#ffe7a3;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.resultBox{
  background:rgba(0,0,0,.25);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  padding:12px;
}

/* layout container */
.page{display:flex; gap:24px; align-items:center; justify-content:center; flex-wrap:wrap;}
.left{display:flex; align-items:center; justify-content:center;}
@media (max-width:560px){ .right{ margin-top:14px; } .btns{ gap:10px; } }

/* --- Logo Title --- */
.brand-logo {
  width: 240px;          /*.*/
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.6));
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 560px) {
  .brand-logo {
    width: 200px;
  }
}
html, body { -webkit-text-size-adjust: 100%; }  
.form input {
  font-size: 16px;   /* KUNCI: >=16px */
  line-height: 1.2;
}
body {
  background-image: url('assets/bg-desktop.webp');
  background-size: cover;         
  background-repeat: no-repeat;
  background-position: center top; 
  background-attachment: fixed;    
}

/* versi mobile */
@media (max-width: 768px) {
  body {
    background-image: url('assets/bg-mobile.webp');
    background-attachment: scroll; 
  }
}