/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: Arial, sans-serif;
  color:#fff;

  /* desktop background */
  background-image:url('assets/bg-desktop.webp');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
  background-attachment:fixed;
}

/* blur + darken layer */
.overlay-blur{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  z-index:-1;
}

/* ============ LAYOUT WRAPPER ============ */
.page{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:150px;
  padding:30px;
  min-height:100vh;
}

/* kiri (wheel) */
.left{ display:flex; align-items:center; justify-content:center; }

/* kanan (form panel) */
.right{
  width:min(92vw, 420px);
  padding:40px;
  border-radius:16px;
  background:rgba(20,20,20,.55);
  box-shadow:0 12px 30px rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  text-align:center;
}

/* ============ WHEEL ============ */
.wheel-wrap{
  /* ukuran responsif */
  --w: clamp(280px, 78vw, 640px);
  width:var(--w); height:var(--w);
  position:relative;
  margin:0 auto;
  padding:15px;
  border-radius:50%;
  background: radial-gradient(circle at center, rgba(255,255,255,.08), rgba(0,0,0,.4));
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 60px rgba(255,215,0,.15);
}
#wheel{ width:100%; height:100%; display:block; border-radius:10px; background:transparent; }

/* pointer / overlay image di atas canvas */
.pointer-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}

/* pulse untuk center jewel (emas berdenyut lembut) */
@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 40px rgba(255, 200, 0, 0.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0)); }
}

.center-pulse {
  animation: pulse-glow 1.6s ease-in-out both;
}

/* ============ BRAND & FORM ============ */
.brand-logo{
  width:200px; height:auto; margin-bottom:6px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
  image-rendering:-webkit-optimize-contrast;
}
.voucher-title{
  margin:6px 0 14px;
  color:#ffd36b;
  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:0; border-radius:10px; outline:0;
  background:rgba(255,255,255,.85);
  color:#111; font-size:16px; line-height:1.2;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.18);
}
.form input::placeholder{ color:#8b8b8b; }

.btns{ display:flex; gap:14px; justify-content:center; margin-top:12px; }
.btns button{
  flex:1; min-width:140px;
  padding:12px 16px; border:0; border-radius:999px;
  font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(to bottom, #ffd86b, #c99800);
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 0 20px rgba(255,215,0,.2);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  transition:transform .06s ease, filter .2s ease, box-shadow .15s ease;
}
.btns button:hover{ filter:brightness(1.05); box-shadow:0 8px 22px rgba(0,0,0,.6), 0 0 25px rgba(255,215,0,.3); }
.btns button:active{ transform:translateY(1px); box-shadow:0 4px 10px rgba(0,0,0,.4); }

#status{ margin:10px 0 4px; color:#ffe7a3; text-shadow:0 1px 3px rgba(0,0,0,.35); }

/* ============ MOBILE (≤ 768px) ============ */
@media (max-width: 768px){

  /* gunakan background mobile & fokus ke bagian atas */
  body{
    background-image:url('assets/bg-mobile.webp');
    background-position:center 10%;
    background-attachment:scroll;
  }

  /* wrapper dikompakkan vertikal, tidak paksa 100vh */
  .page{
    flex-direction:column;
    align-items:center; justify-content:flex-start;
    gap:50px;
    padding:12px 10px;
    min-height:100dvh;
  }

  /* lebar aman & center */
  .left, .right{ width:100%; max-width:480px; margin:0 auto; }

  /* wheel lebih besar sedikit & tidak overflow */
  .wheel-wrap{
    --w: clamp(280px, 90vw, 460px);
    aspect-ratio:1/1;
    height:auto;
    padding:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 30px rgba(255,215,0,.12);
  }
  #wheel{ width:100%; height:auto; margin:0; }

  /* panel form lebih ringkas */
  .right{
    padding:16px 14px;
    border-radius:14px;
    background:rgba(20,20,20,.45);
    box-shadow:0 8px 22px rgba(0,0,0,.45);
    backdrop-filter:blur(6px);
  }

  .brand-logo{ width:200px; margin-bottom:4px; }
  .voucher-title{ margin:4px 0 10px; font-size:18px; line-height:1.2; }

  .form input{ margin:6px 0; padding:12px 12px; }
  .btns{ gap:10px; margin-top:10px; }
  .btns button{ min-width:0; padding:12px 14px; }
}

/* ============ SMALL PHONES (≤ 560px) ============ */
@media (max-width:560px){
  .brand-logo{ width:180px; }
}