/* ======================================================
   HALAMAN DETAIL PROMO
   Dipakai oleh promo-*.html (satu file per promo).
   Sengaja pakai container sendiri supaya lebar bacanya
   tidak ikut aturan .container di responsive.css.
====================================================== */

.promo-detail {
  padding-top: 132px;
  padding-bottom: 96px;
}

.promo-detail__container {
  width: min(100% - 2.5rem, 62rem);
  margin-inline: auto;
}

/* ======================================================
   BREADCRUMB
====================================================== */
.promo-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;

  margin-bottom: 1.75rem;

  font-size: 0.875rem;
  color: var(--color-muted, #7a7a7a);
}

.promo-breadcrumb a {
  color: var(--color-muted, #7a7a7a);
  text-decoration: none;
  transition: color 0.2s ease;
}

.promo-breadcrumb a:hover {
  color: var(--color-primary, #007cff);
}

.promo-breadcrumb__sep {
  color: #cbd5e1;
}

.promo-breadcrumb__current {
  color: var(--color-text, #303135);
  font-weight: 500;
}

/* ======================================================
   HEADER
====================================================== */
.promo-detail__header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;

  margin-bottom: 2.5rem;
}

.promo-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.promo-badge {
  display: inline-flex;
  align-items: center;

  padding: 0.4rem 0.9rem;
  border-radius: 999px;

  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.promo-badge--brand {
  background: #e6f2ff;
  color: #0062cc;
}

.promo-badge--brand-park {
  background: #fff0ea;
  color: #c2410c;
}

.promo-badge--period {
  background: #f1f5f9;
  color: #475569;
}

/* Judul utama = nama kampanye ("September Ceria"), sengaja pendek dan besar.
   Kalimat panjangnya turun jadi subjudul di bawahnya. */
.promo-detail__title {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text, #303135);

  margin: 0;
}

.promo-detail__subtitle {
  font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text, #303135);

  margin: 0;
  max-width: 44rem;
}

.promo-detail__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #52525b;

  margin: 0;
  max-width: 46rem;
}

/* ======================================================
   POSTER
====================================================== */
.promo-detail__poster {
  margin: 0 0 2.5rem;
}

/* <picture> membungkus <img> (versi HP beda rasio) — jadikan block supaya
   tidak menyisakan celah baseline di bawah gambar. */
.promo-detail__poster picture {
  display: block;
}

.promo-detail__poster img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

/* Poster jadi tombol "perbesar" (dibungkus oleh js/promo-detail.js) */
.promo-detail__poster-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;

  border: none;
  background: none;
  border-radius: 20px;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.promo-detail__poster-btn:focus-visible {
  outline: 3px solid var(--color-primary, #007cff);
  outline-offset: 4px;
}

.promo-detail__poster-cue {
  position: absolute;
  right: 14px;
  bottom: 14px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 0.5rem 0.9rem;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);

  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.promo-detail__poster-cue svg {
  width: 1rem;
  height: 1rem;
}

.promo-detail__poster-btn:hover .promo-detail__poster-cue {
  background: var(--color-primary, #007cff);
  color: #ffffff;
}

/* Poster belum diunggah: tampilkan kotak, bukan ikon rusak. */
.promo-detail__poster-pending {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 180px;
  padding: 1rem;

  border-radius: 20px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;

  color: #64748b;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
}

/* ======================================================
   RINGKASAN CEPAT
====================================================== */
.promo-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;

  margin-bottom: 3rem;
}

.promo-fact {
  padding: 1.125rem 1.25rem;

  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
}

.promo-fact__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.875rem;

  border-radius: 12px;
  background: #e6f2ff;
  color: #0062cc;
}

.promo-fact__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Halaman FRUITCITY PARK memakai aksen hangat, senada lencana brand-nya. */
.promo-facts--park .promo-fact__icon {
  background: #fff0ea;
  color: #c2410c;
}

.promo-fact__label {
  display: block;

  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;

  margin-bottom: 0.375rem;
}

.promo-fact__value {
  display: block;

  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text, #303135);
}

/* ======================================================
   ISI / PROSE
====================================================== */
.promo-section {
  margin-bottom: 2.75rem;
}

.promo-section__title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text, #303135);

  margin: 0 0 0.875rem;
}

.promo-section p {
  font-size: 1rem;
  line-height: 1.8;
  color: #52525b;

  margin: 0 0 1rem;
}

.promo-section p:last-child {
  margin-bottom: 0;
}

.promo-section strong {
  color: var(--color-text, #303135);
  font-weight: 600;
}

/* ======================================================
   DAFTAR BENEFIT
====================================================== */
.promo-perks {
  list-style: none;

  display: grid;
  gap: 0.625rem;

  margin: 1.25rem 0 0;
  padding: 0;
}

.promo-perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;

  padding: 0.875rem 1rem;

  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;

  font-size: 1rem;
  line-height: 1.6;
  color: #52525b;
}

.promo-perks li::before {
  content: "✓";
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  border-radius: 50%;

  background: #e6f2ff;
  color: #0062cc;

  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

/* ======================================================
   LANGKAH KLAIM
====================================================== */
.promo-steps {
  list-style: none;
  counter-reset: promo-step;

  display: grid;
  gap: 0.875rem;

  margin: 0;
  padding: 0;
}

.promo-steps li {
  counter-increment: promo-step;
  position: relative;

  padding: 1.125rem 1.25rem 1.125rem 3.75rem;

  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;

  font-size: 1rem;
  line-height: 1.65;
  color: #52525b;
}

.promo-steps li::before {
  content: counter(promo-step);
  position: absolute;
  left: 1.125rem;
  top: 1.0625rem;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;

  background: var(--color-primary, #007cff);
  color: #ffffff;

  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

/* ======================================================
   DAFTAR CABANG
====================================================== */
.promo-branches {
  list-style: none;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;

  margin: 0;
  padding: 0;
}

.promo-branches li {
  display: flex;
  align-items: center;
  gap: 0.625rem;

  padding: 0.875rem 1rem;

  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;

  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text, #303135);
}

.promo-branches li::before {
  content: "";
  flex: 0 0 auto;

  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;

  background: var(--color-primary, #007cff);
}

/* ======================================================
   CATATAN
====================================================== */
.promo-note {
  display: flex;
  gap: 0.875rem;

  padding: 1.125rem 1.25rem;

  border: 1px solid #fde68a;
  border-radius: 16px;
  background: #fffbeb;

  font-size: 0.9375rem;
  line-height: 1.7;
  color: #78350f;
}

.promo-note__icon {
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

.promo-note p {
  margin: 0;
}

/* ======================================================
   CTA
====================================================== */
.promo-cta {
  margin-top: 3rem;
  padding: 2rem 1.75rem;

  border-radius: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;

  text-align: center;
}

.promo-cta__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #303135);

  margin: 0 0 0.5rem;
}

.promo-cta__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #64748b;

  margin: 0 auto 1.5rem;
  max-width: 34rem;
}

.promo-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
}

/* ======================================================
   KEMBALI
====================================================== */
.promo-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  margin-top: 2.5rem;

  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary, #007cff);
  text-decoration: none;

  transition: gap 0.2s ease;
}

.promo-detail__back:hover {
  gap: 0.75rem;
}

/* ======================================================
   LIGHTBOX POSTER
   z-index harus di atas widget chatbot (2147482000) supaya
   posternya tidak tertutup tombol chat.
====================================================== */
.promo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483400;

  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-lightbox[hidden] {
  display: none;
}

body.promo-lightbox-open {
  overflow: hidden;
}

.promo-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.94);
}

.promo-lightbox__stage {
  position: relative;

  width: 100%;
  height: 100%;
  padding: 1rem;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.promo-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;

  border-radius: 12px;
  cursor: zoom-in;
}

/* Diperbesar: gambar dibuat lebih lebar dari layar lalu panggungnya digeser.
   Ini yang membuat tulisan syarat & ketentuan di poster terbaca di HP. */
.promo-lightbox.is-zoomed .promo-lightbox__stage {
  align-items: flex-start;
  justify-content: flex-start;
}

.promo-lightbox.is-zoomed .promo-lightbox__img {
  max-width: none;
  max-height: none;
  width: 230%;

  border-radius: 0;
  cursor: zoom-out;
}

.promo-lightbox__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;

  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;

  transition: background 0.2s ease;
}

.promo-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.promo-lightbox__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.promo-lightbox__hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);

  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;

  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width: 768px) {
  .promo-detail {
    padding-top: 104px;
    padding-bottom: 64px;
  }

  .promo-detail__poster img,
  .promo-detail__poster-pending {
    border-radius: 16px;
  }

  /* Poster HP berformat 4:5 potret — samakan kotak penampungnya supaya
     tata letak tidak meloncat saat gambarnya selesai dimuat. */
  .promo-detail__poster-pending {
    aspect-ratio: 4 / 5;
  }

  .promo-cta {
    padding: 1.75rem 1.25rem;
  }

  .promo-cta__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-detail__back,
  .promo-breadcrumb a {
    transition: none;
  }
}