/* =====================================================================
   Ptekno - Popup Promo
   Revisi 24 Agu 2026

   Prinsip yang dipakai di sini:

   1. SATU KELUARGA WARNA PER TEMA.
      Versi lama memasang kepala oranye di atas tombol biru-cyan. Dua
      keluarga warna berlawanan suhu di dalam kartu selebar 460px membuat
      mata tidak tahu mana yang penting. Sekarang seluruh aksen (eyebrow,
      badge, angka hitung mundur, tombol) mengambil warna dari dua
      variabel: --a1 dan --a2. Ganti tema = ganti dua nilai itu.

   2. HIERARKI LEWAT UKURAN DAN BOBOT, BUKAN LEWAT KOTAK BERWARNA.
      Judul 26px/700 dengan tracking rapat (Space Grotesk), isi 14.5px/400
      warna redup, label 11px/700 dengan tracking longgar. Rasio ukuran
      judul:isi kira-kira 1.8x - cukup untuk terbaca sebagai dua lapis
      informasi tanpa perlu garis pemisah atau blok warna tambahan.

   3. GELAP, SENADA HERO.
      Kartu putih di atas beranda gelap terasa seperti jendela sistem
      operasi yang menyela. Kartu gelap dengan tepi bercahaya tipis
      terbaca sebagai bagian dari situs.

   Font memakai yang sudah dimuat layout: Space Grotesk (display),
   Inter (teks), JetBrains Mono (angka). Semua diberi fallback sistem.
   ===================================================================== */

.promo-popup {
  --bg:        #0d1220;
  --bg-soft:   #131a2b;
  --line:      rgba(255, 255, 255, .09);
  --ink:       #f2f5fb;
  --ink-dim:   #9aa6bd;
  --ink-faint: #6b7791;
  --radius:    22px;

  /* aksen tema 'flash' (bawaan) */
  --a1: #fb923c;
  --a2: #f43f5e;
  --a-ink: #1a0b02;

  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

/* tema alternatif: dingin, selaras theme-color situs */
.promo-popup.promo-volt {
  --a1: #6366f1;
  --a2: #22d3ee;
  --a-ink: #05101c;
}

/* ---------------------------------------------------------------- latar */

.promo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 18, .72);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  opacity: 0;
  transition: opacity .28s ease;
}

.promo-popup.is-open .promo-backdrop { opacity: 1; }

/* ---------------------------------------------------------------- kartu */

.promo-card {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  display: grid;
  grid-template-columns: 190px 1fr;
  background: linear-gradient(160deg, var(--bg-soft) 0%, var(--bg) 62%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .05) inset,
    0 30px 70px -20px rgba(0, 0, 0, .75),
    0 0 0 1px rgba(0, 0, 0, .4);
  transform: translateY(14px) scale(.975);
  opacity: 0;
  transition: transform .34s cubic-bezier(.2, .8, .25, 1), opacity .28s ease;
}

.promo-popup.is-open .promo-card {
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------- panel visual */

.promo-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px 18px;
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--a1) 26%, transparent) 0%, transparent 62%),
    linear-gradient(155deg, color-mix(in srgb, var(--a1) 16%, transparent), transparent 70%);
  border-right: 1px solid var(--line);
  color: var(--a1);
  overflow: hidden;
}

/* cahaya lembut di belakang ikon - memberi kedalaman tanpa gambar */
.promo-glow {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--a1) 45%, transparent) 0%, transparent 68%);
  filter: blur(26px);
  pointer-events: none;
}

.promo-bolt {
  position: relative;
  width: 84px;
  height: 84px;
  opacity: .92;
  filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--a1) 40%, transparent));
}

.promo-img {
  position: relative;
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  border-radius: 12px;
}

.promo-badge {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: var(--a-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--a2) 60%, transparent);
}

/* ------------------------------------------------------------------ isi */

.promo-body {
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--a1);
}

.promo-eyebrow svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.promo-title {
  margin: 0;
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.promo-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 40ch;
}

/* ------------------------------------------------------- hitung mundur */

.promo-countdown { margin-top: 4px; }

.promo-countdown-label {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.promo-clock {
  display: flex;
  align-items: center;
  gap: 6px;
}

.promo-unit {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 54px;
  padding: 8px 6px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
}

.promo-unit b {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  /* angka bergerak tiap detik: tabular-nums mencegah lebarnya goyang */
  font-variant-numeric: tabular-nums;
  color: var(--a1);
}

.promo-unit i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.promo-sep {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-faint);
  transform: translateY(-6px);
}

/* --------------------------------------------------------------- aksi */

.promo-actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: var(--a-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--a2) 75%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.promo-cta svg {
  width: 17px;
  height: 17px;
  transition: transform .18s ease;
}

.promo-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--a2) 80%, transparent);
}

.promo-cta:hover svg { transform: translateX(3px); }
.promo-cta:active    { transform: translateY(0); }

.promo-dismiss {
  padding: 10px;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  transition: color .16s ease;
}

.promo-dismiss:hover { color: var(--ink-dim); }

/* --------------------------------------------------------- tombol tutup

   Versi lama menaruhnya persis di atas badge sehingga keduanya bertumpuk.
   Sekarang tombol berada di sudut kanan atas KARTU (bukan kepala), dengan
   badge dipindah ke panel kiri - tidak mungkin bertabrakan lagi.
   ---------------------------------------------------------------------- */

.promo-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(13, 18, 32, .7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

.promo-close:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .12);
  transform: rotate(90deg);
}

.promo-close:focus-visible,
.promo-cta:focus-visible,
.promo-dismiss:focus-visible {
  outline: 2px solid var(--a1);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- ponsel */

@media (max-width: 560px) {
  .promo-popup { padding: 14px; }

  .promo-card {
    /* Panel visual jadi pita mendatar di atas: tetap ada penanda promo,
       tetapi tidak memakan tinggi layar yang di ponsel jauh lebih mahal. */
    grid-template-columns: 1fr;
    width: min(100%, 420px);
  }

  .promo-visual {
    padding: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 108px;
  }

  .promo-bolt { width: 52px; height: 52px; }
  .promo-img  { max-height: 116px; }

  .promo-badge {
    bottom: auto;
    top: 14px;
    left: 16px;
    transform: none;
  }

  .promo-body { padding: 22px 20px 20px; gap: 10px; }
  .promo-desc { font-size: 14px; }
  .promo-unit { min-width: 48px; }
  .promo-unit b { font-size: 18px; }
}

/* -------------------------------------------------- preferensi pengguna */

@media (prefers-reduced-motion: reduce) {
  .promo-backdrop,
  .promo-card,
  .promo-cta,
  .promo-cta svg,
  .promo-close {
    transition: none;
  }
  .promo-card { transform: none; }
}

/* Peramban tanpa color-mix() (Safari < 16.2) tetap tampil benar: nilai
   yang tidak dikenali diabaikan, dan properti di bawah ini memberi warna
   solid sebagai dasar. Ditaruh SETELAH aturan utama supaya hanya menang
   bila color-mix gagal diurai. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .promo-visual { background: rgba(251, 146, 60, .12); }
  .promo-glow   { background: radial-gradient(circle, rgba(251, 146, 60, .38) 0%, transparent 68%); }
  .promo-cta    { box-shadow: 0 12px 26px -10px rgba(244, 63, 94, .6); }
  .promo-badge  { box-shadow: 0 6px 18px -4px rgba(244, 63, 94, .5); }
}