/* ============================================================
   GIVEAWAY POPUP — masri.cloud
   Semua selector diawali .gwp supaya tidak bertabrakan dengan
   gaya halaman yang sudah ada. Markup dibangun oleh
   assets/js/giveaway-popup.js, jadi tidak ada sisa di DOM
   bila kampanye sedang tidak berjalan.
   Dicabut: hapus satu <script> di index.html.
   ============================================================ */

.gwp{
  position:fixed; inset:0; z-index:99000;      /* di bawah preloader (999999) */
  display:flex; align-items:center; justify-content:center;
  padding:20px 16px;
}
.gwp[hidden]{ display:none; }

.gwp__backdrop{
  position:absolute; inset:0;
  background:rgba(4,7,14,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:gwpFade .3s ease both;
}

.gwp__dialog{
  position:relative;
  width:min(920px, 100%);
  max-height:min(90vh, 900px);
  display:grid; grid-template-columns:minmax(0,0.84fr) minmax(0,1fr);
  background:#0A0F1C;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  animation:gwpRise .42s cubic-bezier(.22,.9,.3,1) both;
}

.gwp__close{
  position:absolute; top:10px; right:12px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(8,12,22,.72); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  font-size:21px; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .18s, transform .18s;
}
.gwp__close:hover{ background:rgba(255,255,255,.2); transform:rotate(90deg); }
.gwp__close:focus-visible{ outline:3px solid #00F0C8; outline-offset:2px; }

.gwp__poster{ display:block; position:relative; overflow:hidden; background:#060b16; }
.gwp__poster img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block;
}

.gwp__body{
  padding:26px 26px 22px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
  color:#eef2ff;
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
}

.gwp__badge{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:999px;
  background:#00F0C8; color:#061a16;
  font-size:12px; font-weight:800; letter-spacing:.3px;
}

.gwp__title{
  margin:2px 0 0; font-size:clamp(21px,2.4vw,27px); line-height:1.2;
  font-weight:800; letter-spacing:-.4px; color:#fff;
}
.gwp__title b{
  background:linear-gradient(100deg,#00F0C8,#7dd3fc 48%,#3b82f6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gwp__desc{ margin:0; color:#a9b4cc; font-size:14.5px; }

.gwp__points{ margin:4px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.gwp__points li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:14px; color:#cbd5e5;
}
.gwp__points li::before{
  content:'✓'; flex:0 0 19px; width:19px; height:19px; margin-top:2px;
  border-radius:50%; background:rgba(0,240,200,.17); color:#00F0C8;
  display:grid; place-items:center; font-size:11px; font-weight:800;
}

.gwp__deadline{
  margin-top:2px; padding:10px 13px; border-radius:11px;
  background:rgba(59,130,246,.13); border:1px solid rgba(59,130,246,.34);
  font-size:13.5px; color:#bfdbfe;
}
.gwp__deadline b{ color:#fff; }

.gwp__actions{ margin-top:auto; padding-top:14px; display:grid; gap:9px; }
.gwp__cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:12px;
  background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff;
  font-weight:800; font-size:15.5px; text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(59,130,246,.9);
  transition:filter .18s, transform .18s;
}
.gwp__cta:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.gwp__cta:focus-visible{ outline:3px solid #00F0C8; outline-offset:2px; }
.gwp__later{
  padding:9px; border:0; background:none; cursor:pointer;
  color:#71809c; font:inherit; font-size:13.5px; text-decoration:underline;
}
.gwp__later:hover{ color:#a9b4cc; }

@keyframes gwpFade{ from{opacity:0} to{opacity:1} }
@keyframes gwpRise{ from{opacity:0; transform:translateY(26px) scale(.97)} to{opacity:1; transform:none} }

/* ── Ponsel: poster di atas, dipotong pada bagian judulnya ── */
@media (max-width:760px){
  .gwp{ padding:12px; align-items:flex-end; }
  .gwp__dialog{
    grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr);
    max-height:92vh; border-radius:18px;
  }
  /* tinggi pasti, bukan max-height: object-fit:cover butuh itu
     supaya potongannya terarah ke bagian judul poster */
  .gwp__poster{ height:34vh; }
  .gwp__poster img{ object-position:center 12%; }
  .gwp__body{ padding:18px 18px 16px; gap:10px; }
  .gwp__points li:nth-child(n+4){ display:none; }
}
@media (max-width:420px){
  .gwp__poster{ height:28vh; }
}

/* Layar sangat pendek: poster disembunyikan, isi tetap terbaca */
@media (max-height:520px){
  .gwp__poster{ display:none; }
  .gwp__dialog{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .gwp__backdrop,.gwp__dialog{ animation:none; }
  .gwp__close:hover,.gwp__cta:hover{ transform:none; }
}