/* =========================================================
   SINGLE-MOBILE MODE (dipakai di semua device)
   ========================================================= */

/* --- VARIABEL MOBILE --- */
:root{
  /* Lebar kanvas “HP” saat dibuka di desktop juga */
  --stage-max: 430px;                /* ubah kalau mau kanvas >/< 430px */

  /* Posisi (persen dari tinggi gambar BG) */
  --head-top: 1.0%;
  --card-top: 8.2%;
  --grand-top: 23%;
  --event-top: 35%;

  /* Ukuran elemen */
  --logo-w:  min(720px, 88%);
  --card-w:  min(620px, 76%);
  --input-h: 50px;
  --btn-h:   50px;
  --badge-w: min(360px, 70%);
  --footer-w:min(360px, 70%);

  /* DAILY section */
  --event-w:       min(700px, 88%);
  --event-min-h:   260px;
  --pill-h:        50px;

  /* Tampilan kartu */
  --card-bg: rgba(22,22,24,.72);
  --card-stroke: rgba(255,255,255,.18);
}

/* =========================================================
   BASE
   ========================================================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:#fff; background:#000;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

/* Kanvas: selalu pusat & selebar stage-max (atau 100vw kalau lebih kecil) */
.stage{
  position:relative;
  width:min(100vw, var(--stage-max));
  margin:0 auto;
}
.stage__bg{
  display:block;
  width:100%; height:auto;          /* tinggi ikut rasio gambar */
  pointer-events:none; user-select:none;
}

/* Overlay lembut di atas */
.overlay-top{
  position:absolute; inset:0 0 auto 0; height:34%;
  background: radial-gradient(1200px 70% at 50% 0%,
              rgba(0,0,0,.18) 0%, rgba(0,0,0,.7) 70%, transparent 100%);
  pointer-events:none; z-index:1;
}

/* Layer konten */
.layer{
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:2; width:min(820px, 90%);
}
.layer--head  { top:var(--head-top);  text-align:center; }
.layer--card  { top:var(--card-top);  }
.layer--grand { top:var(--grand-top); text-align:center; }
.layer--event { top:var(--event-top); text-align:center; }

/* Headline / Logo */
.headline__image{
  display:block; width:var(--logo-w); height:auto; margin-inline:auto;
  filter:drop-shadow(0 8px 28px rgba(0,0,0,.55));
}

/* Card login */
.card{
  background:var(--card-bg);
  border:1px solid var(--card-stroke);
  border-radius:16px;
  backdrop-filter: blur(10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 10px 40px rgba(0,0,0,.6);
  padding: clamp(10px, 2.2vw, 18px);
  width: var(--card-w);
}
.card__form{ display:flex; flex-direction:column; gap:14px; }

.field{ display:flex; flex-direction:column; gap:8px; }
.field__label{
  font-size:11px; letter-spacing:.22em; font-weight:600; opacity:.9; text-align:center;
}
.field__bar{
  position:relative; height:var(--input-h); border-radius:999px;
  background:center/100% 100% no-repeat url('https://i.postimg.cc/BbXSPHfs/Login-Bar.webp');
  display:flex; align-items:center; padding:0 16px; overflow:hidden; isolation:isolate;
}
.field__bar::after{
  content:""; position:absolute; inset:5px; border-radius:999px;
  background:linear-gradient(180deg,#ffffff 0%, #f4f4f4 55%, #ededed 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.12); z-index:0;
}
.field__bar input{
  position:relative; z-index:1;
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  color:#111; font-size:16px; font-weight:600;
}
.field__bar input::placeholder{ color:#7c7c7c; font-weight:500; }

.helper{ margin:.15rem 0 .3rem; font-size:11px; text-align:center; opacity:.85; }

.btn-wrap{ display:flex; justify-content:center; }
.btn-img{
  margin:.2rem auto 0; display:inline-flex; border:0; background:transparent;
  cursor:pointer; transition:transform .06s ease; padding:0;
}
.btn-img img{ height:var(--btn-h); width:auto; display:block; }
.btn-img:active{ transform:translateY(1px) scale(.99); }

/* Grand prize */
.grand{ width:min(600px, 90%); margin-inline:auto; }
.grand__badge{ width:var(--badge-w); height:auto; display:block; margin:0 auto 10px;
  filter:drop-shadow(0 8px 28px rgba(0,0,0,.6)); }
.grand__date{ font-weight:800; letter-spacing:.12em; font-size:clamp(18px,4.6vw,24px); margin:6px 0 10px; }
.grand__footer{ width:var(--footer-w); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)); }

/* DAILY section (area kuning) */
.event{ width: var(--event-w); margin-inline:auto; padding-bottom: 32px; }
.event__group{ margin: 18px 0 26px; }

.event__title{ margin: 0 auto 12px; }
.field__bar.is-title{ justify-content:center; height: var(--pill-h); }
.field__bar.is-title::after{ inset:6px; }
.field__bar.is-title span{
  position:relative; z-index:1;
  font-weight:800; letter-spacing:.22em; color:#222; font-size:14px;
}

.event__panel{
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 40px rgba(0,0,0,.6);
  min-height: var(--event-min-h);
  padding: 16px;
}
.event__placeholder{ margin:0; opacity:.85; font-size:12px; letter-spacing:.04em; }

/* FINAL OVERRIDE – pastikan tidak ada rule lama yang menimpa */
.layer--head{  top:var(--head-top)  !important; }
.layer--card{  top:var(--card-top)  !important; }
.layer--grand{ top:var(--grand-top) !important; }
.layer--event{ top:var(--event-top) !important; }