/* ==========================================================================
   NusaWorld Pass — kartu harga
   27 September 2026, arahan pemilik: kartu harga harus meriah dan menonjol,
   tetapi rapi dan tetap eksklusif.
   - Tiga tiket bertinggi sama. Baris isinya (label, nama paket, deskripsi,
     kotak harga, sobekan, manfaat, tombol) sejajar lintas kartu lewat subgrid.
   - Tiket saling menempel (tanpa celah). Lekuk setengah lingkaran kiri dan
     kanan berada pada baris sobekan yang sama dan berjari-jari sama, jadi di
     setiap sambungan keduanya membentuk satu lingkaran utuh yang presisi.
     Karena itu kartu tidak terangkat saat hover dan tidak ada cahaya/bayangan
     samping yang membuat dua belahan lingkaran berbeda warna.
   - Kemewahan: aksen emas foil, bingkai ganda pada kotak harga, lekuk sobekan
     tiket yang benar-benar berlubang, kilau yang lewat di pita kepala.
   - Kemeriahan: taburan konfeti warna enam bahasa di samping judul, pita
     «Paling Lengkap» emas, dan kartu Kelompok sebagai tiket zamrud berbingkai
     emas yang bercahaya.
   Isi, harga, dan tautan di index.html tidak berubah; berkas ini hanya tampilan.
   Gerak (kilau/kerlip/angkat) mati bila perangkat meminta kurangi animasi.
   ========================================================================== */
.nwh {
  --nwh-foil: linear-gradient(135deg, #FFF3C4 0%, #F8D56E 24%, #E6AC33 50%, #FFE7A0 72%, #D39A27 100%);
  --nwh-gold: #F4C64E;
  --nwh-gold-soft: #FFE7A3;
  position: relative;
  isolation: isolate;
  padding: 104px 28px 100px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 58% 40% at 50% 68%, rgba(46, 175, 115, .20), transparent 72%),
    radial-gradient(ellipse 40% 24% at 50% 5%, rgba(244, 198, 78, .15), transparent 72%),
    radial-gradient(ellipse at 50% 0, #17584f 0, transparent 58%),
    linear-gradient(160deg, #0b3149, #072539 62%, #0f4148);
  scroll-margin-top: 0;
}
.nwh *, .nwh *::before, .nwh *::after { box-sizing: border-box; }
.nwh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 231, 163, .16) 1.2px, transparent 1.4px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
  pointer-events: none;
}
.nwh-shell { position: relative; width: 100%; max-width: 1160px !important; padding: 0; margin: 0 auto; }

/* ---------- Judul ---------- */
.nwh-heading { position: relative; max-width: 780px; margin: 0 auto; text-align: center; }
.nwh-heading::before, .nwh-heading::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 230px;
  height: 250px;
  background: no-repeat center / contain;
  pointer-events: none;
}
.nwh-heading::before { right: calc(100% + 18px); background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="230" height="250" viewBox="0 0 230 250"%3E%3Crect x="34.0" y="31.0" width="16" height="6" rx="1.5" fill="%23F4C64E" opacity="1" transform="rotate(28 42 34)"/%3E%3Crect x="154.5" y="19.5" width="11" height="5" rx="1.5" fill="%23E0527E" opacity="1" transform="rotate(-34 160 22)"/%3E%3Ccircle cx="98" cy="70" r="4" fill="%2335C27F" opacity="1"/%3E%3Cpath d="M196,87 C198.42,95.58 198.42,95.58 207,98 C198.42,100.42 198.42,100.42 196,109 C193.58,100.42 193.58,100.42 185,98 C193.58,95.58 193.58,95.58 196,87Z" fill="%23FFE7A3" opacity="1"/%3E%3Crect x="21.5" y="125.5" width="13" height="5" rx="1.5" fill="%234FA8EA" opacity="1" transform="rotate(62 28 128)"/%3E%3Crect x="121.5" y="141.5" width="9" height="9" rx="1.5" fill="%23A57BE0" opacity="1" transform="rotate(45 126 146)"/%3E%3Ccircle cx="212" cy="178" r="3.2" fill="%23F28C3F" opacity="1"/%3E%3Cpath d="M58,199 C59.54,204.46 59.54,204.46 65,206 C59.54,207.54 59.54,207.54 58,213 C56.46,207.54 56.46,207.54 51,206 C56.46,204.46 56.46,204.46 58,199Z" fill="%23FFFFFF" opacity="0.85"/%3E%3Crect x="160.5" y="223.5" width="15" height="5" rx="1.5" fill="%2335C27F" opacity="1" transform="rotate(-14 168 226)"/%3E%3Ccircle cx="20" cy="238" r="2.6" fill="%23F4C64E" opacity="1"/%3E%3Crect x="88.5" y="18.25" width="7" height="3.5" rx="1.5" fill="%23FFFFFF" opacity="0.7" transform="rotate(10 92 20)"/%3E%3C/svg%3E'); }
.nwh-heading::after { left: calc(100% + 18px); background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="230" height="250" viewBox="0 0 230 250"%3E%3Crect x="180.0" y="27.0" width="16" height="6" rx="1.5" fill="%23F4C64E" opacity="1" transform="rotate(-26 188 30)"/%3E%3Crect x="64.5" y="17.5" width="11" height="5" rx="1.5" fill="%234FA8EA" opacity="1" transform="rotate(32 70 20)"/%3E%3Ccircle cx="132" cy="72" r="4" fill="%23E0527E" opacity="1"/%3E%3Cpath d="M34,89 C36.42,97.58 36.42,97.58 45,100 C36.42,102.42 36.42,102.42 34,111 C31.58,102.42 31.58,102.42 23,100 C31.58,97.58 31.58,97.58 34,89Z" fill="%23FFE7A3" opacity="1"/%3E%3Crect x="195.5" y="123.5" width="13" height="5" rx="1.5" fill="%2335C27F" opacity="1" transform="rotate(-58 202 126)"/%3E%3Crect x="99.5" y="145.5" width="9" height="9" rx="1.5" fill="%23F28C3F" opacity="1" transform="rotate(45 104 150)"/%3E%3Ccircle cx="18" cy="182" r="3.2" fill="%23A57BE0" opacity="1"/%3E%3Cpath d="M172,197 C173.54,202.46 173.54,202.46 179,204 C173.54,205.54 173.54,205.54 172,211 C170.46,205.54 170.46,205.54 165,204 C170.46,202.46 170.46,202.46 172,197Z" fill="%23FFFFFF" opacity="0.85"/%3E%3Crect x="54.5" y="225.5" width="15" height="5" rx="1.5" fill="%23F4C64E" opacity="1" transform="rotate(16 62 228)"/%3E%3Ccircle cx="210" cy="240" r="2.6" fill="%234FA8EA" opacity="1"/%3E%3Crect x="134.5" y="20.25" width="7" height="3.5" rx="1.5" fill="%23FFFFFF" opacity="0.7" transform="rotate(-10 138 22)"/%3E%3C/svg%3E'); }
.nwh-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 18px;
  border: 1px solid rgba(244, 198, 78, .5);
  border-radius: 999px;
  color: var(--nwh-gold-soft);
  background: rgba(255, 231, 163, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px -14px rgba(244, 198, 78, .6);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.nwh-kicker::before, .nwh-kicker::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--nwh-foil);
  transform: rotate(45deg);
}
.nwh-heading h2 {
  margin: 20px 0 14px;
  color: #fff;
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -1.6px;
  text-wrap: balance;
  text-shadow: 0 4px 22px rgba(0, 10, 22, .35);
}
.nwh-heading p { max-width: 580px; margin: 0 auto; color: #C9E4E0; font-size: 17px; line-height: 1.65; }
.nwh-promo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 100%;
  margin-top: 28px;
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  color: #3A2A06;
  background: var(--nwh-foil);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 200, .65), 0 14px 32px -12px rgba(244, 198, 78, .65);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
  overflow: hidden;
}
.nwh-promo b {
  position: relative;
  z-index: 1;
  padding: 7px 15px;
  border-radius: 999px;
  color: var(--nwh-gold-soft);
  background: #0B2A44;
  font-size: 14.5px;
  font-weight: 900;
  letter-spacing: -.1px;
}
.nwh-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .75) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  background-position: 100% 0;
  animation: nwh-kilau 6s ease-in-out 1.2s infinite;
}

/* ---------- Susunan kartu: tiga kolom, tujuh baris bersama ---------- */
.nwh-stage { position: relative; padding-top: 70px; }
.nwh-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
}
.nwh-card {
  /* warna tiap tiket */
  --surface: #FFFFFF;
  --ink: #0B2A44;
  --muted: #4A6A80;
  --accent: #1B6CA8;
  --accent-soft: #E6F2FC;
  --line: rgba(27, 108, 168, .22);
  --rim: rgba(255, 255, 255, 0);
  --band: linear-gradient(120deg, #E4F4FF 0%, #BEE2FB 52%, #E9F6FF 100%);
  --band-ink: #155A8F;
  --band-line: rgba(21, 90, 143, .32);
  --panel: linear-gradient(155deg, #F4FAFF, #E3F0FC);
  --guilloche: rgba(27, 108, 168, .09);
  --perf: rgba(27, 108, 168, .34);
  --check-bg: #E3F0FB;
  --check-ink: #1B6CA8;
  --btn: linear-gradient(180deg, #2584CA, #15609B);
  --btn-ink: #FFFFFF;
  --btn-icon: rgba(255, 255, 255, .18);
  --btn-glow: rgba(27, 108, 168, .6);
  --lift: 0px;
  --ring: #E3B447;
  --seam-l: 0px;
  --seam-r: 0px;
  position: relative;
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  color: var(--ink);
  border-radius: 24px;
  margin-block: calc(-1 * var(--lift));
  margin-inline: calc(-1 * var(--seam-l)) calc(-1 * var(--seam-r));
  box-shadow: 0 34px 30px -30px rgba(0, 8, 20, .85);
}
.nwh-card--kelompok {
  --surface: #0A4533;
  --ink: #FFFFFF;
  --muted: #BCE3CF;
  --accent: #F4C64E;
  --accent-soft: rgba(244, 198, 78, .13);
  --line: rgba(244, 198, 78, .42);
  --rim: #E3B447;
  --band: linear-gradient(120deg, #11644A 0%, #0B4A37 55%, #146E52 100%);
  --band-ink: #FFE7A3;
  --band-line: rgba(255, 231, 163, .42);
  --panel: linear-gradient(155deg, #0E5A43, #06362A);
  --guilloche: rgba(244, 198, 78, .13);
  --perf: rgba(244, 198, 78, .5);
  --check-bg: rgba(244, 198, 78, .16);
  --check-ink: #FFE08A;
  --btn: var(--nwh-foil);
  --btn-ink: #2F2205;
  --btn-icon: #2F2205;
  --btn-glow: rgba(244, 198, 78, .7);
  --lift: 12px;
  /* Kartu tengah digambar di atas tetangganya dan melebar 1px melewati tiap
     sambungan; titik pusat lekuknya dikompensasi 1px sehingga tetap tepat di
     sambungan. Kolom piksel sambungan jadi tertutup penuh: tidak ada garis
     rambut dan cincin emas tidak terputus pada skala layar berapa pun. */
  --seam-l: 1px;
  --seam-r: 1px;
  z-index: 1;
}
.nwh-card--sekolah {
  --surface: #FFFDF6;
  --accent: #A56A12;
  --accent-soft: #FFF1CC;
  --line: rgba(165, 106, 18, .26);
  --band: linear-gradient(120deg, #FFF4D2 0%, #FFDD83 52%, #FFF2C6 100%);
  --band-ink: #7A5211;
  --band-line: rgba(122, 82, 17, .32);
  --panel: linear-gradient(155deg, #FFFAEB, #FFEFC6);
  --guilloche: rgba(165, 106, 18, .1);
  --perf: rgba(165, 106, 18, .36);
  --check-bg: #FFF0C9;
  --check-ink: #95600F;
  --btn: linear-gradient(180deg, #16466B, #0B2A44);
  --btn-glow: rgba(11, 42, 68, .55);
}

/* Lapisan belakang tiket. Pita, badan, sobekan dan kaki digambar oleh kotak
   yang bertumpuk; pada skala layar 125%/150% batas kotak jatuh di tengah piksel
   dan latar gelap bisa merembes sebagai garis rambut. Dua lapisan ini mengisi
   warna tiket di belakangnya, menumpang 2px melewati batas, dan ikut dilubangi
   di titik lekuk sehingga lingkaran tetap bersih. */
.nwh-card::before, .nwh-card::after {
  content: "";
  grid-column: 1;
  z-index: -1;
  background: var(--surface);
  pointer-events: none;
}
.nwh-card::before {
  grid-row: 2 / 6;
  margin: -2px 0;
  -webkit-mask: radial-gradient(circle at var(--seam-l) calc(100% + 11px), transparent 12.2px, #000 12.6px) left bottom / 51% 100% no-repeat, radial-gradient(circle at calc(100% - var(--seam-r)) calc(100% + 11px), transparent 12.2px, #000 12.6px) right bottom / 51% 100% no-repeat;
  mask: radial-gradient(circle at var(--seam-l) calc(100% + 11px), transparent 12.2px, #000 12.6px) left bottom / 51% 100% no-repeat, radial-gradient(circle at calc(100% - var(--seam-r)) calc(100% + 11px), transparent 12.2px, #000 12.6px) right bottom / 51% 100% no-repeat;
}
.nwh-card::after {
  grid-row: 7;
  margin-top: -2px;
  border-radius: 0 0 24px 24px;
  -webkit-mask: radial-gradient(circle at var(--seam-l) -11px, transparent 12.2px, #000 12.6px) left top / 51% 100% no-repeat, radial-gradient(circle at calc(100% - var(--seam-r)) -11px, transparent 12.2px, #000 12.6px) right top / 51% 100% no-repeat;
  mask: radial-gradient(circle at var(--seam-l) -11px, transparent 12.2px, #000 12.6px) left top / 51% 100% no-repeat, radial-gradient(circle at calc(100% - var(--seam-r)) -11px, transparent 12.2px, #000 12.6px) right top / 51% 100% no-repeat;
}

/* Pita kepala tiket */
.nwh-strip {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: calc(17px + var(--lift)) 22px 17px;
  border: 1.5px solid var(--rim);
  border-bottom: 1px solid transparent; /* bukan 0: tepi 0 + sudut bulat meninggalkan semburat emas di skala 125% */
  border-radius: 24px 24px 0 0;
  background: var(--band);
  box-shadow: inset 0 -1px 0 var(--band-line);
}
.nwh-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%) no-repeat;
  background-size: 260% 100%;
  background-position: 100% 0;
  animation: nwh-kilau 7s ease-in-out infinite;
}
.nwh-card--kelompok .nwh-strip::after {
  background-image: linear-gradient(105deg, transparent 42%, rgba(255, 231, 163, .38) 50%, transparent 58%);
  animation-delay: .9s;
}
.nwh-card--sekolah .nwh-strip::after { animation-delay: 1.8s; }
.nwh-pass-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.nwh-pass-brand img { display: block; flex: 0 0 auto; width: 116px; height: 25px; object-fit: contain; }
.nwh-pass-brand b {
  padding-left: 12px;
  border-left: 1.5px solid var(--band-line);
  color: var(--band-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .24em;
}
.nwh-featured {
  position: absolute;
  top: -16px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  color: #2F2205;
  background: var(--nwh-foil);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 200, .75), 0 10px 20px -8px rgba(0, 0, 0, .55), 0 0 22px rgba(244, 198, 78, .45);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nwh-featured::after {
  content: "";
  position: absolute;
  inset: -20px -24px -16px -30px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="34" height="40" viewBox="0 0 34 40"%3E%3Cpath d="M14,5.5 C15.870000000000001,12.129999999999999 15.870000000000001,12.129999999999999 22.5,14 C15.870000000000001,15.870000000000001 15.870000000000001,15.870000000000001 14,22.5 C12.129999999999999,15.870000000000001 12.129999999999999,15.870000000000001 5.5,14 C12.129999999999999,12.129999999999999 12.129999999999999,12.129999999999999 14,5.5Z" fill="%23FFE7A3" opacity="1"/%3E%3Ccircle cx="28" cy="32" r="2" fill="%23FFFFFF" opacity="0.9"/%3E%3C/svg%3E') left top / 34px 40px no-repeat, url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="34" viewBox="0 0 30 34"%3E%3Cpath d="M18,14 C19.32,18.68 19.32,18.68 24,20 C19.32,21.32 19.32,21.32 18,26 C16.68,21.32 16.68,21.32 12,20 C16.68,18.68 16.68,18.68 18,14Z" fill="%23FFFFFF" opacity="0.95"/%3E%3Cpath d="M6,2.5 C6.77,5.23 6.77,5.23 9.5,6 C6.77,6.77 6.77,6.77 6,9.5 C5.23,6.77 5.23,6.77 2.5,6 C5.23,5.23 5.23,5.23 6,2.5Z" fill="%23F4C64E" opacity="1"/%3E%3C/svg%3E') right bottom / 30px 34px no-repeat;
  pointer-events: none;
  animation: nwh-kerlip 2.6s ease-in-out infinite;
}
.nwh-featured::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* Badan tiket: empat baris bersama */
.nwh-body {
  grid-column: 1;
  grid-row: 2 / span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  padding: 22px 22px 24px;
  border: 1.5px solid var(--rim);
  border-block: 0;
  background: var(--surface);
}
.nwh-intro, .nwh-intro > div { display: contents; }
.nwh-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.nwh-account {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
}
.nwh-card--mandiri .nwh-account { color: #155A8F; }
.nwh-card--sekolah .nwh-account { color: #7A5211; }
.nwh-eyebrow { color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.nwh-body h3 { margin: 0 0 10px; color: var(--ink); font-size: clamp(38px, 3.5vw, 46px); font-weight: 900; line-height: 1.02; letter-spacing: -1.4px; }
.nwh-desc { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.6; text-wrap: pretty; }

/* Kotak harga: bingkai ganda + pola guilloche seperti tiket berharga */
.nwh-price {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  overflow: hidden;
}
.nwh-price::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border: 1px dashed var(--line);
  border-radius: 13px;
  pointer-events: none;
}
.nwh-price::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  z-index: -1;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 9px, var(--guilloche) 9px 10px);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  pointer-events: none;
}
.nwh-price del {
  align-self: flex-start;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #E2553F;
}
.nwh-price-now { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0; }
.nwh-price-now strong {
  max-width: 100%;
  color: var(--ink);
  font-size: clamp(40px, 3.3vw, 45px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.6px;
  white-space: nowrap;
}
.nwh-card--kelompok .nwh-price-now strong {
  background: var(--nwh-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.nwh-price-now > span { color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.4; }
.nwh-price > p { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 800; line-height: 1.5; }
.nwh-price > em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  color: #3A2A06;
  background: var(--nwh-foil);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 200, .7), 0 6px 14px -6px rgba(214, 154, 39, .7);
  font-size: 12px;
  line-height: 1.3;
  font-style: normal;
  font-weight: 900;
}
.nwh-price > em::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.nwh-price--pending .nwh-price-now strong { font-size: clamp(30px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -.9px; white-space: normal; }
.nwh-price--pending > p { margin-top: 10px; }

/* Sobekan tiket: lekuk kiri-kanan benar-benar berlubang dan bercincin emas.
   Jari-jari, tebal cincin dan posisi barisnya sama di semua kartu, sehingga
   dua lekuk yang bertemu di sambungan menjadi satu lingkaran emas utuh. */
.nwh-tear {
  position: relative;
  grid-column: 1;
  grid-row: 6;
  height: 26px;
  background:
    radial-gradient(circle at var(--seam-l) 50%, transparent 11.4px, var(--ring) 11.8px, var(--ring) 13px, var(--surface) 13.4px) left center / 51% 100% no-repeat,
    radial-gradient(circle at calc(100% - var(--seam-r)) 50%, transparent 11.4px, var(--ring) 11.8px, var(--ring) 13px, var(--surface) 13.4px) right center / 51% 100% no-repeat;
}
.nwh-tear span { display: none; }
.nwh-tear i { position: absolute; left: 22px; right: 22px; top: 12px; border-top: 2px dashed var(--perf); }

/* Kaki tiket */
.nwh-foot {
  grid-column: 1;
  grid-row: 7;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 22px calc(26px + var(--lift));
  border: 1.5px solid var(--rim);
  border-top: 1px solid transparent; /* bukan 0, lihat pita */
  border-radius: 0 0 24px 24px;
  background: var(--surface);
}
.nwh-foot ul { display: grid; align-content: start; gap: 11px; padding: 0; margin: 0 0 22px; list-style: none; }
.nwh-foot li { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.nwh-foot li::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 0;
  border-radius: 50%;
  color: var(--check-ink);
  background: var(--check-bg);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}
.nwh-foot .nwh-highlight { font-weight: 900; }
.nwh-trial {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1.5px dashed rgba(46, 175, 115, .6);
  border-radius: 14px;
  color: #1D5E43;
  background: #EDFAF3;
}
.nwh-trial > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: #2EAF73; color: #fff; font-size: 13px; font-weight: 900; }
.nwh-trial p { display: grid; gap: 1px; margin: 0; }
.nwh-trial strong { color: #17563C; font-size: 13px; line-height: 1.35; font-weight: 900; }
.nwh-trial small { color: #3F7A5E; font-size: 12px; line-height: 1.3; font-weight: 700; }
.nwh-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  margin-top: auto;
  padding: 10px 11px 10px 20px;
  border-radius: 15px;
  color: var(--btn-ink);
  background: var(--btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 24px -14px var(--btn-glow);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.nwh-button > span { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--btn-icon); color: inherit; font-size: 18px; line-height: 1; }
.nwh-card--kelompok .nwh-button > span { color: var(--nwh-gold-soft); }

.nwh-footnote {
  max-width: 680px;
  margin: 50px auto 0;
  padding: 20px 16px 0;
  border-top: 1px solid rgba(244, 198, 78, .24);
  color: #C5DFDF;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  text-wrap: pretty;
}
.nwh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nwh a:focus-visible { outline: 3px solid var(--nwh-gold-soft); outline-offset: 4px; }

@keyframes nwh-kilau { 0% { background-position: 100% 0; } 34%, 100% { background-position: 0% 0; } }
@keyframes nwh-kerlip { 0%, 100% { opacity: .4; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.04); } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nwh-button:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 18px 28px -14px var(--btn-glow); }
  .nwh-button:active { transform: translateY(1px); }
}

/* ---------- Layar menengah ---------- */
@media (min-width: 1101px) and (max-width: 1190px) {
  .nwh-body { padding-inline: 20px; }
  .nwh-foot { padding-inline: 20px; }
  .nwh-price { padding-inline: 16px; }
  .nwh-price-now strong { font-size: 40px; }
}
@media (max-width: 1180px) {
  .nwh-heading::before, .nwh-heading::after { width: 72px; height: 56px; top: 2px; }
  .nwh-heading::before { right: auto; left: calc(50% - 190px); background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="72" height="56" viewBox="0 0 72 56"%3E%3Crect x="9.0" y="12.0" width="10" height="4" rx="1.5" fill="%23F4C64E" opacity="1" transform="rotate(28 14 14)"/%3E%3Ccircle cx="42" cy="30" r="2.6" fill="%2335C27F" opacity="1"/%3E%3Cpath d="M62,6 C63.32,10.68 63.32,10.68 68,12 C63.32,13.32 63.32,13.32 62,18 C60.68,13.32 60.68,13.32 56,12 C60.68,10.68 60.68,10.68 62,6Z" fill="%23FFE7A3" opacity="1"/%3E%3Crect x="20.0" y="42.25" width="8" height="3.5" rx="1.5" fill="%23E0527E" opacity="1" transform="rotate(-40 24 44)"/%3E%3C/svg%3E'); }
  .nwh-heading::after { left: calc(50% + 118px); background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="72" height="56" viewBox="0 0 72 56"%3E%3Crect x="53.0" y="12.0" width="10" height="4" rx="1.5" fill="%23F4C64E" opacity="1" transform="rotate(-28 58 14)"/%3E%3Ccircle cx="30" cy="30" r="2.6" fill="%234FA8EA" opacity="1"/%3E%3Cpath d="M10,6 C11.32,10.68 11.32,10.68 16,12 C11.32,13.32 11.32,13.32 10,18 C8.68,13.32 8.68,13.32 4,12 C8.68,10.68 8.68,10.68 10,6Z" fill="%23FFE7A3" opacity="1"/%3E%3Crect x="44.0" y="42.25" width="8" height="3.5" rx="1.5" fill="%23A57BE0" opacity="1" transform="rotate(40 48 44)"/%3E%3C/svg%3E'); }
}
@media (max-width: 1100px) {
  .nwh { padding: 88px 28px 84px; }
  .nwh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; margin: 0 auto; column-gap: 0; }
  .nwh-card--sekolah { grid-column: 1 / -1; width: 50%; justify-self: center; margin-top: 56px; }
  .nwh-card--kelompok { --seam-r: 0px; }
  .nwh-price { padding-inline: 16px; }
}

/* ---------- HP: satu kolom, tanpa subgrid ---------- */
@media (max-width: 760px) {
  .nwh { padding: 68px 18px 70px; }
  .nwh-heading h2 { margin-top: 18px; }
  .nwh-heading p { font-size: 15.5px; }
  .nwh-promo { margin-top: 24px; }
  .nwh-stage { padding-top: 50px; }
  .nwh-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; max-width: 460px; row-gap: 44px; }
  .nwh-card { grid-row: auto; grid-template-rows: repeat(7, auto); }
  .nwh-body { display: flex; flex-direction: column; grid-template-rows: none; }
  .nwh-card--sekolah { grid-column: auto; width: 100%; margin-top: 0; }
  .nwh-card--kelompok { --lift: 0px; --seam-l: 0px; --seam-r: 0px; }
  .nwh-price-now strong { font-size: clamp(40px, 11vw, 50px); }
  .nwh-footnote { padding-inline: 0; margin-top: 40px; font-size: 12.5px; }
}
@media (max-width: 390px) {
  .nwh { padding-inline: 14px; }
  .nwh-heading::before { left: calc(50% - 176px); }
  .nwh-heading::after { left: calc(50% + 104px); }
  .nwh-heading h2 { font-size: 36px; letter-spacing: -1.2px; }
  .nwh-promo { gap: 8px; padding: 6px 14px 6px 6px; font-size: 12.5px; }
  .nwh-promo b { font-size: 13.5px; padding: 6px 12px; }
  .nwh-strip { padding: calc(16px + var(--lift)) 16px 16px; }
  .nwh-pass-brand { gap: 10px; }
  .nwh-pass-brand img { width: 106px; height: 23px; }
  .nwh-pass-brand b { padding-left: 10px; letter-spacing: .18em; }
  .nwh-featured { right: 12px; padding: 6px 12px 6px 10px; letter-spacing: .06em; }
  .nwh-body { padding: 20px 18px 22px; }
  .nwh-foot { padding: 16px 18px calc(24px + var(--lift)); }
  .nwh-body h3 { font-size: 38px; }
  .nwh-price { padding: 18px 16px; }
  .nwh-price-now strong { font-size: clamp(36px, 10.6vw, 42px); letter-spacing: -1.4px; }
  .nwh-price--pending .nwh-price-now strong { font-size: 30px; }
  .nwh-tear i { left: 18px; right: 18px; }
  .nwh-button { font-size: 14px; }
}

@media (max-width: 340px) {
  .nwh-price { padding-inline: 14px; }
  .nwh-price-now strong { font-size: 33px; letter-spacing: -1.2px; }
  .nwh-featured { right: 10px; letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  .nwh-strip::after, .nwh-promo::after { animation: none; display: none; }
  .nwh-featured::after { animation: none; }
  .nwh-button { transition: none; }
  .nwh-button:hover, .nwh-button:active { transform: none; }
}