/* ── Deck presentasi (/presentasi) ─────────────────────────────────────────
   Berdiri sendiri dari tema situs: sebuah deck yang diproyeksikan ke layar
   besar selalu tampil gelap, tidak ikut preferensi terang/gelap pengunjung,
   supaya yang mempresentasikan tahu persis apa yang muncul di proyektor.
   Karena itu palet di bawah tidak memakai token tema yang bisa berubah. */

.deck {
  --d-bg: #061410;
  --d-bg-2: #0b1f19;
  --d-ink: #f2f7f5;
  --d-muted: #9fb8ae;
  --d-line: rgba(255, 255, 255, .12);
  --d-brand: #23d6ae;
  --d-brand-2: #0e7a52;
  --d-warn: #ffcf5c;

  /* Jarak tepi dan posisi bilah dipakai di banyak tempat (bilah atas, bilah
     bawah, dan padding slide yang harus menghindari keduanya) — ditaruh di
     satu variabel supaya ketiganya tidak pernah lepas satu sama lain. */
  --d-gutter: clamp(1rem, .6rem + 1.6vw, 2.4rem);
  --d-bar-y: clamp(.9rem, .6rem + .8vw, 1.6rem);
  --d-safe-top: env(safe-area-inset-top, 0px);
  --d-safe-bottom: env(safe-area-inset-bottom, 0px);
  --d-safe-start: env(safe-area-inset-left, 0px);
  --d-safe-end: env(safe-area-inset-right, 0px);

  position: fixed; inset: 0;
  /* Peramban ponsel menghitung `inset: 0` terhadap viewport BESAR — tinggi
     layar saat bilah alamat tersembunyi. Tanpa baris di bawah, bilah bawah
     deck (tombol maju/mundur) tersembunyi di balik bilah alamat peramban
     selama bilah itu masih tampil. 100dvh mengikuti tinggi yang benar-benar
     terlihat saat itu; 100vh di atasnya hanya cadangan untuk peramban lama. */
  height: 100vh;
  height: 100dvh;
  background: var(--d-bg);
  color: var(--d-ink);
  font-family: var(--font-sans, system-ui, sans-serif);
  overflow: hidden;
}

/* Deck mengunci layar: yang menggulir hanyalah slide yang sedang aktif, jadi
   halaman di belakangnya tidak boleh ikut memantul di iOS. */
.deck-body { margin: 0; overflow: hidden; overscroll-behavior: none; }

/* Latar hidup, tapi murni dekoratif — tidak pernah menghalangi teks. */
.deck-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.deck-aurora span {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
}
.deck-aurora span:nth-child(1) { width: 46vw; height: 46vw; top: -14vw; inset-inline-start: -10vw; background: #0e7a52; }
.deck-aurora span:nth-child(2) { width: 38vw; height: 38vw; bottom: -14vw; inset-inline-end: -8vw; background: #17806b; }
.deck-aurora span:nth-child(3) { width: 26vw; height: 26vw; top: 40%; inset-inline-start: 55%; background: #0a5c3d; opacity: .35; }

/* ── Panggung & slide ──────────────────────────────────────────────────── */

.deck-stage { position: absolute; inset: 0; display: grid; }

.slide {
  grid-area: 1 / 1;
  display: grid; place-items: center;
  padding: calc(clamp(2.5rem, 1.5rem + 4vw, 5rem) + var(--d-safe-top))
           calc(clamp(1.25rem, .5rem + 4vw, 5rem) + var(--d-safe-end))
           calc(clamp(4.5rem, 3rem + 5vw, 7rem) + var(--d-safe-bottom))
           calc(clamp(1.25rem, .5rem + 4vw, 5rem) + var(--d-safe-start));
  overflow-y: auto;
  /* Slide panjang digulir sendiri; gerakan gulir tidak boleh merembet ke
     dokumen (memantul) atau memicu pull-to-refresh di tengah presentasi. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.slide.is-active { opacity: 1; visibility: visible; transform: none; }

.slide-inner { width: 100%; max-width: 1080px; }
.slide-inner.narrow { max-width: 820px; }

/* ── Tipografi ─────────────────────────────────────────────────────────── */

.deck .eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: clamp(.7rem, .64rem + .2vw, .8rem); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--d-brand);
  margin-bottom: 1rem;
}
.deck h1 {
  font-size: clamp(2rem, 1.2rem + 4.2vw, 4.4rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 800;
  margin: 0 0 1rem;
}
.deck h2 {
  font-size: clamp(1.6rem, 1.05rem + 2.6vw, 3rem);
  line-height: 1.14; letter-spacing: -.02em; font-weight: 800;
  margin: 0 0 1rem;
}
.deck h3 { font-size: clamp(1rem, .92rem + .4vw, 1.25rem); font-weight: 700; margin: 0 0 .4rem; }
.deck p { margin: 0; color: var(--d-muted); line-height: 1.65; }
.deck .lead { font-size: clamp(1rem, .92rem + .55vw, 1.35rem); color: #cfe3db; }
.deck strong { color: var(--d-ink); }
.deck .accent { color: var(--d-brand); }

/* ── Kartu & kisi ──────────────────────────────────────────────────────── */

.deck-grid { display: grid; gap: clamp(.75rem, .5rem + .8vw, 1.25rem); }
.deck-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.deck-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.deck-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }

.deck-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--d-line);
  border-radius: 16px;
  padding: clamp(1rem, .8rem + .6vw, 1.5rem);
}
.deck-card.is-highlight { border-color: rgba(35, 214, 174, .5); background: linear-gradient(180deg, rgba(35,214,174,.14), rgba(35,214,174,.05)); }
.deck-card .num { font-size: .75rem; font-weight: 800; color: var(--d-brand); letter-spacing: .1em; }

.deck-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: .85rem;
  background: rgba(35, 214, 174, .14); color: var(--d-brand);
}

/* Daftar centang */
.deck-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.deck-list li { display: flex; gap: .65rem; align-items: flex-start; color: #cfe3db; line-height: 1.55; }
.deck-list svg { flex-shrink: 0; margin-top: .2rem; color: var(--d-brand); }

/* Statistik */
.deck-stat .value {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--d-brand), #7df3d8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.deck-stat .label { font-size: .85rem; color: var(--d-muted); margin-top: .45rem; }

/* Hitung mundur */
.deck-countdown { display: flex; flex-wrap: wrap; gap: .6rem; }
.deck-countdown div {
  min-width: 84px; padding: .7rem .9rem; text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--d-line); border-radius: 12px;
}
.deck-countdown b { display: block; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.deck-countdown span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--d-muted); }

/* Harga */
.deck-price { font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; }
.deck-price small { display: block; font-size: .72rem; font-weight: 600; color: var(--d-muted); letter-spacing: 0; margin-top: .15rem; }

/* Kartu kontak pada slide penutup — nilainya berupa tautan yang bisa
   diketuk, bukan teks mati, jadi diberi ukuran sasaran sentuh yang layak. */
.deck-contact .label {
  font-size: .72rem; color: var(--d-muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.deck-contact a, .deck-contact p {
  display: block; margin-top: .3rem;
  color: var(--d-ink); font-weight: 600; text-decoration: none;
  word-break: break-word; padding-block: .15rem;
}
.deck-contact a:hover, .deck-contact a:focus-visible { color: var(--d-brand); }

.deck-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  background: rgba(255, 207, 92, .14); color: var(--d-warn);
  border: 1px solid rgba(255, 207, 92, .3);
}

/* Atribut `hidden` bawaan peramban hanya berupa `display: none` dengan
   kekhususan terendah, sehingga kelas mana pun yang menyetel `display`
   (seperti .deck-btn di bawah) akan mengalahkannya dan elemen tetap
   terlihat. Tombol layar penuh menyembunyikan dirinya lewat atribut ini
   saat peramban tidak mendukung Fullscreen API, jadi aturan ini yang
   membuatnya benar-benar tersembunyi. */
.deck [hidden] { display: none !important; }

/* Tombol ajakan */
.deck-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.deck-btn-primary { background: linear-gradient(120deg, var(--d-brand), #4fe7d4); color: #04211a; }
.deck-btn-ghost { background: rgba(255,255,255,.06); color: var(--d-ink); border-color: var(--d-line); }
/* Di layar sentuh, :hover menempel setelah ketukan — tombol jadi terlihat
   "tertekan" sampai pengguna menyentuh hal lain. */
@media (hover: hover) {
  .deck-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
}

/* ── Media: tangkapan layar, mockup ponsel, ilustrasi ───────────────────── */

.deck-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
@media (max-width: 860px) { .deck-split { grid-template-columns: 1fr; } .deck-split > .deck-media { order: -1; } }

.deck-illustration { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; filter: drop-shadow(0 24px 48px rgba(0,0,0,.4)); }

.deck-shot {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--d-line);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  background: #0d1f19;
}
.deck-shot .deck-shot-bar { display: flex; gap: 6px; padding: .6rem .8rem; background: #0a1712; }
.deck-shot .deck-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.deck-shot img { display: block; width: 100%; height: auto; }
.deck-shot figcaption {
  padding: .6rem .9rem .8rem; font-size: .78rem; color: var(--d-muted);
  border-top: 1px solid var(--d-line);
}

.deck-shots-row { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.deck-shots-row .deck-shot { flex: 1 1 240px; max-width: 320px; margin: 0; }

.deck-phone {
  width: clamp(150px, 12vw + 100px, 200px);
  border-radius: 26px; overflow: hidden;
  border: 5px solid #10241d;
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
  background: #061410;
}
.deck-phone img { display: block; width: 100%; height: auto; }
.deck-phone figcaption { padding: .5rem 0 0; text-align: center; font-size: .76rem; color: var(--d-muted); }

.deck-phones-row { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.deck-phones-row figure { margin: 0; }

/* ── Kendali ───────────────────────────────────────────────────────────── */

.deck-progress { position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: rgba(255,255,255,.08); z-index: 6; }
.deck-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--d-brand-2), var(--d-brand)); transition: width .35s ease; }

.deck-topbar {
  position: absolute;
  inset-block-start: calc(var(--d-bar-y) + var(--d-safe-top));
  inset-inline-start: calc(var(--d-gutter) + var(--d-safe-start));
  inset-inline-end: calc(var(--d-gutter) + var(--d-safe-end));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  z-index: 5; pointer-events: none;
}
.deck-topbar > * { pointer-events: auto; }
.deck-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--d-ink); }
.deck-brand img { border-radius: 9px; background: #fff; padding: 3px; }
.deck-brand b { font-weight: 800; letter-spacing: -.01em; font-size: .95rem; }

.deck-bottombar {
  position: absolute;
  inset-block-end: calc(var(--d-bar-y) + var(--d-safe-bottom));
  inset-inline-start: calc(var(--d-gutter) + var(--d-safe-start));
  inset-inline-end: calc(var(--d-gutter) + var(--d-safe-end));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  z-index: 5;
}
.deck-dots { display: flex; flex-wrap: wrap; gap: .4rem; }
.deck-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.22); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
@media (hover: hover) { .deck-dots button:hover { background: rgba(255,255,255,.45); } }
.deck-dots button.is-active { background: var(--d-brand); transform: scale(1.35); }

.deck-nav { display: flex; align-items: center; gap: .5rem; }
.deck-nav button {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid var(--d-line); color: var(--d-ink);
  transition: background .2s ease, opacity .2s ease;
}
@media (hover: hover) { .deck-nav button:hover:not(:disabled) { background: rgba(255,255,255,.16); } }
.deck-nav button:disabled { opacity: .3; cursor: default; }
.deck-counter { font-size: .8rem; color: var(--d-muted); font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }

/* Kedua bilah melayang di atas slide. Begitu slide yang aktif memang bisa
   digulir — nyaris selalu di ponsel — teksnya lewat persis di belakang tombol
   dan keduanya sama-sama tidak terbaca; gradasi ini yang memisahkannya. Hanya
   muncul saat kelas .is-scrollable dipasang, supaya slide yang muat seluruhnya
   tetap menampilkan latar auroranya utuh sampai ke tepi.
   `pointer-events: none` supaya gradasi tidak diam-diam menelan ketukan pada
   isi slide di belakangnya. */
.deck.is-scrollable .deck-topbar::before,
.deck.is-scrollable .deck-bottombar::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset-inline: calc(-1 * (var(--d-gutter) + 1rem));
}
.deck.is-scrollable .deck-topbar::before {
  inset-block: calc(-1 * (var(--d-bar-y) + var(--d-safe-top))) -2.4rem;
  background: linear-gradient(to bottom, var(--d-bg) 38%, rgba(6, 20, 16, 0));
}
.deck.is-scrollable .deck-bottombar::before {
  inset-block: -2.4rem calc(-1 * (var(--d-bar-y) + var(--d-safe-bottom)));
  background: linear-gradient(to top, var(--d-bg) 38%, rgba(6, 20, 16, 0));
}

/* Petunjuk gulir. Slide yang lebih tinggi dari layar tidak memberi tanda apa
   pun bahwa masih ada isi di bawahnya — di ponsel hampir semua slide begitu,
   dan isi yang tidak terlihat sama saja dengan isi yang tidak ada. */
.deck-scrollhint {
  position: absolute; z-index: 4;
  inset-block-end: calc(var(--d-bar-y) + var(--d-safe-bottom) + 3.6rem);
  inset-inline-start: 50%;
  display: none; align-items: center; gap: .35rem;
  padding: .38rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--d-line); background: rgba(6, 20, 16, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--d-muted); font: inherit; font-size: .72rem; font-weight: 600;
}
.deck-scrollhint.is-visible { display: inline-flex; animation: deck-hint-bob 1.9s ease-in-out infinite; }
@keyframes deck-hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 4px); }
}

/* ── Ponsel ────────────────────────────────────────────────────────────────
   Deck ini paling sering dibuka pertama kali di ponsel — tautannya dibagikan
   lewat WhatsApp, bukan diproyeksikan — jadi layar sempit bukan kasus
   pinggiran. Yang diatur di sini: bilah atas/bawah tidak boleh menabrak isi
   slide, kartu dirapatkan supaya gulirnya tidak berlipat, dan gambar tidak
   lagi mendahului judul. */
@media (max-width: 720px) {
  .deck-dots { display: none; }
  .deck-bottombar { justify-content: flex-end; }

  .slide {
    place-items: start center;
    padding-block-start: calc(4.25rem + var(--d-safe-top));
    padding-block-end: calc(5.5rem + var(--d-safe-bottom));
    padding-inline: calc(1.15rem + var(--d-safe-start)) calc(1.15rem + var(--d-safe-end));
  }

  /* Semua kisi menumpuk jadi satu kolom di lebar ini, jadi setiap piksel
     padding kartu berubah menjadi gulir tambahan. */
  .deck-grid { gap: .6rem; }
  .deck-card { padding: .9rem 1rem; border-radius: 14px; }
  .deck-icon { width: 34px; height: 34px; border-radius: 10px; margin-bottom: .55rem; }
  .deck-icon svg { width: 18px; height: 18px; }
  .deck .eyebrow { margin-bottom: .6rem; }
  .deck h1, .deck h2 { margin-bottom: .7rem; }
  .deck p, .deck .lead { line-height: 1.55; }
  .deck-list { gap: .55rem; }

  /* Gambar tidak lagi naik ke atas judul: yang harus terbaca lebih dulu di
     ponsel adalah judul dan ajakannya, bukan ilustrasi. */
  .deck-split { gap: 1.25rem; }
  .deck-split > .deck-media { order: 0; }
  .deck-illustration { max-width: 200px; }

  .deck-shots-row { gap: .8rem; margin-top: 1.2rem; }
  .deck-shots-row .deck-shot { max-width: none; }
  .deck-shot figcaption { padding: .5rem .7rem .6rem; font-size: .74rem; }

  /* Empat mockup ponsel berjajar: satu per baris membuat slide ini sendirian
     sepanjang empat layar. */
  .deck-phones-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.2rem; }
  .deck-phone { width: 100%; border-width: 4px; border-radius: 20px; }

  /* 44px — ukuran sasaran sentuh terkecil yang masih nyaman untuk ibu jari. */
  .deck-nav button { width: 44px; height: 44px; }
  .deck-btn { padding: .7rem 1.15rem; }
}

@media (max-width: 560px) {
  /* Label tombol bilah atas disembunyikan: ikonnya sudah cukup jelas, dan
     teks penuhnya membuat bilah patah jadi dua baris lalu menimpa judul. */
  .deck-btn-label { display: none; }
  .deck-topbar .deck-btn { padding: .5rem .65rem; }
  .deck-brand img { width: 26px; height: 26px; }
  .deck-brand b { font-size: .88rem; }

  /* Ilustrasi di slide sampul dan slide mitra murni hiasan (aria-hidden).
     Di layar sepanjang ini harganya satu layar penuh gulir untuk sesuatu
     yang tidak menambah satu kata pun — jadi dilepas, dan slidenya kembali
     muat dalam satu layar. */
  .deck-illustration { display: none; }

  /* Tiga tangkapan layar situs versi desktop pada slide alat bantu: dilebarkan
     penuh di layar selebar ini, isinya tetap tidak terbaca, sementara harganya
     tiga layar gulir. Enam kartu di atasnya sudah menyebut alat yang sama
     berikut jumlah datanya. Tangkapan layar tunggal (slide SJPH) tetap
     ditampilkan — itu satu-satunya bukti visual bahwa produknya nyata. */
  .deck-shots-row { display: none; }

  /* Hitung mundur dikunci empat kolom; versi flex-wrap memecahnya jadi 3 + 1
     yang terbaca seperti tampilan rusak. */
  .deck-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .deck-countdown div { min-width: 0; padding: .6rem .25rem; }
  .deck-countdown b { font-size: 1.4rem; }
  .deck-countdown span { font-size: .6rem; letter-spacing: .06em; }
}

/* ── Cetak / ekspor PDF ────────────────────────────────────────────────────
   Setiap slide jadi satu halaman, semuanya terlihat sekaligus — supaya deck
   ini bisa dibagikan sebagai PDF lewat "Print to PDF" tanpa alat lain. */
@media print {
  /* Tinggi 100dvh dan overflow tersembunyi di layar harus dilepas di sini,
     kalau tidak hasil cetaknya terpotong di layar pertama. */
  .deck-body { overflow: visible; }
  .deck { position: static; height: auto; overflow: visible; background: #fff; color: #0c1a16; }
  .deck-aurora, .deck-topbar, .deck-bottombar, .deck-progress,
  .deck-scrollhint { display: none !important; }
  .deck-stage { display: block; }
  .slide {
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    page-break-after: always; break-after: page;
    min-height: 92vh; padding: 2rem; overflow: visible;
  }
  .deck h1, .deck h2, .deck h3, .deck strong { color: #0c1a16; }
  .deck p, .deck .lead, .deck-list li { color: #33463f; }
  .deck-card { border-color: #d8e5e0; background: #f7faf9; }
  .deck-stat .value { color: #0e7a52; -webkit-text-fill-color: #0e7a52; }
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .deck-btn, .deck-dots button, .deck-progress i { transition: none; }
  .deck-scrollhint.is-visible { animation: none; transform: translateX(-50%); }
}