/* ============================= */
/* RESET */
/* ============================= */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 50% 30%, #2a200b 0%, #0b0b0c 55%, #070707 100%);
  color:#fff;
  overflow-x:hidden;
}

/* ============================= */
/* BACKGROUND FX */
/* ============================= */
.bg-glow{
  position:fixed; inset:-40%;
  background:
    radial-gradient(closest-side at 50% 35%, rgba(255,178,48,.26), transparent 60%),
    radial-gradient(closest-side at 50% 70%, rgba(255,178,48,.12), transparent 65%);
  filter:blur(26px);
  pointer-events:none;
  z-index:0;
}

.bg-spark{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,220,140,.30) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(255,220,140,.25) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 55%, rgba(255,220,140,.20) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 62%, rgba(255,220,140,.16) 0 1px, transparent 2px);
  background-size:420px 420px;
  opacity:.45;
}

/* ============================= */
/* WRAP: FIX NGE-PAS 1 LAYAR */
/* ============================= */
.wrap{
  position:relative;
  z-index:1;

  width:min(560px, 92vw);
  margin:0 auto;

  /* 1 layar desktop */
  min-height:100vh;
  padding: clamp(18px, 3vh, 34px) 16px clamp(14px, 2vh, 26px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  gap: clamp(8px, 1.2vh, 14px);
}

/* Desktop: jangan scroll */
@media (min-width: 769px){
  body{ overflow-y:hidden; }
}

/* ============================= */
/* LOGO (BIAR GAK KEPOTONG) */
/* ============================= */
.top{
  width:100%;
  display:flex;
  justify-content:center;
  padding-top: 6px;
}

.brand__logo{
  width: clamp(80px, 6vw, 100px);
  height:auto;
  display:block;
  margin-top: 6px;
}


/* ============================= */
/* POSTER */
/* ============================= */
.poster{
  width:100%;
}

.poster__frame{
  position:relative;
  width:100%;
  border-radius:14px;
  padding:8px;
  background:linear-gradient(180deg, rgba(255,178,48,.60), rgba(255,178,48,.18));
  box-shadow:
    0 18px 45px rgba(0,0,0,.62),
    0 0 30px rgba(255,178,48,.12);
}

.poster__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;

  /* KUNCI FIT 1 LAYAR */
  max-height: 42vh;        /* <= ini yang bikin muat kayak contoh */
  object-fit: contain;     /* tidak crop */
  background:#0f0f10;
}

/* ============================= */
/* BUTTONS */
/* ============================= */
.cta{
  width:100%;
  display:grid;
  gap: clamp(6px, .9vh, 10px);  /* gap dinamis */
}

.btn{
  width:100%;
  height: clamp(38px, 4.6vh, 48px); /* tombol otomatis mengecil di layar pendek */
  border-radius:9px;

  font-weight:800;
  font-size: clamp(12px, 1.5vw, 14px);
  letter-spacing:.55px;

  text-decoration:none;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;

  border:2px solid rgba(255,178,48,.85);
  box-shadow:
    0 10px 22px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,206,120,.10) inset;

  transition:.15s ease;
}

.btn--primary{
  background:linear-gradient(180deg, #8f2cff 0%, #5a11b8 48%, #3c0a7f 100%);
  color:#fff;
  box-shadow:
    0 16px 32px rgba(0,0,0,.60),
    0 0 22px rgba(156,69,255,.18),
    0 0 0 1px rgba(255,206,120,.10) inset;
}

.btn--dark{
  background:linear-gradient(180deg,#1b1b1b 0%, #0b0b0b 70%, #060606 100%);
  color:#fff;
}

.btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.btn:active{ transform:translateY(0px); }

/* ============================= */
/* HEADLINE (DIPERKECIL BIAR NGE-PAS) */
/* ============================= */
.headline{
  width:100%;
  text-align:center;
}

.headline h1{
  margin-top: clamp(6px, 1vh, 10px);
  margin-bottom: clamp(6px, 1vh, 10px);

  font-size: clamp(14px, 1.6vw, 18px); /* diperkecil */
  line-height: 1.18;                   /* dipadatkan */
  font-weight: 900;

  color:#ffb230;
  text-shadow:
    0 2px 0 rgba(0,0,0,.55),
    0 12px 32px rgba(255,178,48,.12);
}

.headline__kicker{
  font-size: 1em;
}

.divider{
  width: min(520px, 88%);
  height: 1px;
  margin: 8px auto 8px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}

.footnote{
  font-size: 11px;
  opacity: .82;
}

/* ============================= */
/* EXTRA: LAYAR DESKTOP PENDEK (1366x768, dll) */
/* ============================= */
@media (min-width: 769px) and (max-height: 820px){
  .poster__img{ max-height: 38vh; }
  .btn{ height: 40px; }
  .cta{ gap: 7px; }
  .headline h1{ font-size: 15px; line-height:1.16; }
}

@media (min-width: 769px) and (max-height: 740px){
  .poster__img{ max-height: 34vh; }
  .btn{ height: 38px; font-size: 12px; }
  .cta{ gap: 6px; }
  .headline h1{ font-size: 14px; line-height:1.14; }
  .wrap{ gap: 8px; padding-top: 18px; padding-bottom: 16px; }
}

/* ============================= */
/* MOBILE */
/* ============================= */
@media (max-width:768px){
  body{ overflow-y:auto; } /* mobile boleh scroll */

  .wrap{
    min-height:auto;
    padding: 18px 14px 28px;
    gap: 12px;
  }

  .poster__img{
    max-height: none; /* biar banner utuh */
    object-fit: contain;
  }

  .btn{
    height: 48px;
    font-size: 15px;
  }

  .headline h1{
    font-size: 16px;
    line-height: 1.22;
  }
}