/* ============================================================
   HaiGili — E-TICKET / ACTIVITY VOUCHER (revisi 3 Okt 2026)
   Model mengikuti gambar referensi Rino (tema terang):
   header brand + E-TICKET/CONFIRMED + BOOKING ID, foto produk,
   kartu KODE BOOKING + KONFIRMASI PESANAN, 4 kartu DETAIL KEGIATAN,
   tabel DAFTAR PESERTA, DETAIL PEMESAN + LOKASI & MEETING POINT,
   kotak INFORMASI PENTING (dinamis per pesanan), footer ilustrasi Gili.

   Sistem ukuran: --u = 1/1000 lebar tiket. Semua ukuran memakai
   calc(N * var(--u)) sehingga proporsi poster tetap sama.
   Unduhan memakai lebar tetap 1000px (--u:1px) -> persis referensi.
   ============================================================ */
.etv{
  --u:1px;
  --navy:#0E2A47; --biru:#1668A8; --biru2:#2E86C8;
  --bg:#F4F9FD; --line:#DCE7F1; --line2:#EDF2F7;
  --abu:#5B6B7C; --abu2:#7A8CA0; --hijau:#2EA44F;
  --kuning:#FFF8E6; --kuning2:#F5B301;
  width:100%;
  max-width:calc(1000 * var(--u));
  margin:0 auto;
  background:#fff;
  border-radius:calc(18 * var(--u));
  overflow:hidden;
  color:var(--navy);
  box-shadow:0 14px 40px rgba(10,37,64,.14);
  -webkit-font-smoothing:antialiased;
}
.etv *{box-sizing:border-box}

/* ---------- header ---------- */
.etv-hd{display:flex;align-items:center;gap:calc(18 * var(--u));padding:calc(28 * var(--u)) calc(40 * var(--u)) calc(18 * var(--u))}
.etv-brand{display:flex;align-items:center;gap:calc(11 * var(--u));flex:none}
.etv-brand img{width:calc(56 * var(--u));height:calc(56 * var(--u));object-fit:contain;flex:none}
.etv-nm{font-size:calc(35 * var(--u));font-weight:800;line-height:1;letter-spacing:calc(-.8 * var(--u))}
.etv-nm span{color:var(--biru2)}
.etv-tag{font-size:calc(10 * var(--u));font-weight:700;letter-spacing:calc(1.7 * var(--u));color:var(--abu2);margin-top:calc(5 * var(--u));white-space:nowrap}
.etv-hvr{width:calc(1.6 * var(--u));align-self:stretch;background:var(--line);flex:none;margin:calc(4 * var(--u)) calc(6 * var(--u))}
.etv-etb{flex:1;min-width:0}
.etv-et1{font-size:calc(36 * var(--u));font-weight:800;line-height:1;letter-spacing:calc(.3 * var(--u))}
.etv-et2{font-size:calc(12.5 * var(--u));font-weight:700;letter-spacing:calc(3.4 * var(--u));color:var(--abu);margin-top:calc(6 * var(--u))}
.etv-rt{text-align:right;flex:none}
.etv-ok{display:inline-block;background:var(--hijau);color:#fff;font-size:calc(14 * var(--u));font-weight:800;letter-spacing:calc(1.3 * var(--u));border-radius:calc(40 * var(--u));padding:calc(5 * var(--u)) calc(16 * var(--u))}
.etv-bid{font-size:calc(10 * var(--u));font-weight:700;letter-spacing:calc(1.7 * var(--u));color:var(--abu2);margin-top:calc(9 * var(--u))}
.etv-bic{font-size:calc(18.5 * var(--u));font-weight:800;margin-top:calc(2 * var(--u));word-break:break-word}

/* ---------- foto produk ---------- */
.etv-hero{position:relative;height:calc(250 * var(--u));margin:0 calc(40 * var(--u));border-radius:calc(16 * var(--u));overflow:hidden;background:linear-gradient(135deg,#CFE6F3,#EAF4FA)}
.etv-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 24%,rgba(255,255,255,.58) 44%,rgba(255,255,255,0) 62%)}
.etv-hov{position:absolute;left:calc(30 * var(--u));top:calc(24 * var(--u));right:calc(50%);z-index:3}
.etv-k{font-size:calc(12.5 * var(--u));font-weight:700;letter-spacing:calc(2.6 * var(--u));color:#3E6482}
.etv-h1{font-size:calc(47 * var(--u));font-weight:800;line-height:1.1;letter-spacing:calc(-1.2 * var(--u));margin-top:calc(8 * var(--u));word-break:break-word}
.etv-loc{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:calc(20 * var(--u));font-weight:700;margin-top:calc(12 * var(--u))}
.etv-loc svg{width:calc(22 * var(--u));height:calc(22 * var(--u));color:var(--biru);flex:none}

/* ---------- kartu kode booking ---------- */
.etv-kd{display:flex;align-items:center;gap:calc(26 * var(--u));margin:calc(18 * var(--u)) calc(40 * var(--u)) 0;background:var(--bg);border:calc(1.5 * var(--u)) solid var(--line);border-radius:calc(16 * var(--u));padding:calc(18 * var(--u)) calc(24 * var(--u))}
.etv-ck{font-size:calc(12 * var(--u));font-weight:700;letter-spacing:calc(2.4 * var(--u));color:var(--abu)}
.etv-cv{font-size:calc(44 * var(--u));font-weight:800;line-height:1.05;letter-spacing:calc(.4 * var(--u));margin-top:calc(4 * var(--u));word-break:break-word}
.etv-vs2{width:calc(1.5 * var(--u));align-self:stretch;background:var(--line);flex:none}
.etv-kk{font-size:calc(12.5 * var(--u));font-weight:800;letter-spacing:calc(1.2 * var(--u))}
.etv-kv{font-size:calc(14.5 * var(--u));color:var(--abu2);margin-top:calc(3 * var(--u))}
.etv-rpt{margin:calc(12 * var(--u)) calc(40 * var(--u)) 0;padding-top:calc(11 * var(--u));border-top:calc(1.5 * var(--u)) solid var(--line2);font-size:calc(15 * var(--u));color:#93A3B4;letter-spacing:calc(.5 * var(--u))}

/* ---------- judul bagian ---------- */
.etv-sec{display:flex;align-items:center;gap:calc(9 * var(--u));font-size:calc(14.5 * var(--u));font-weight:800;letter-spacing:calc(1.4 * var(--u));margin:calc(24 * var(--u)) calc(40 * var(--u)) calc(12 * var(--u))}
.etv-sec i{width:calc(4 * var(--u));height:calc(19 * var(--u));background:var(--biru);border-radius:calc(2 * var(--u));display:block;flex:none}

/* ---------- 4 kartu detail kegiatan ---------- */
.etv-g4{display:flex;gap:calc(11 * var(--u));margin:0 calc(40 * var(--u))}
.etv-cc{flex:1;min-width:0;border:calc(1.5 * var(--u)) solid var(--line);border-radius:calc(13 * var(--u));padding:calc(13 * var(--u)) calc(15 * var(--u));display:flex;gap:calc(11 * var(--u));align-items:flex-start}
.etv-cc i{width:calc(26 * var(--u));height:calc(26 * var(--u));flex:none;color:var(--biru);display:block;margin-top:calc(2 * var(--u))}
.etv-cc i svg{width:100%;height:100%;display:block}
.etv-cl{font-size:calc(10.5 * var(--u));font-weight:700;letter-spacing:calc(1.4 * var(--u));color:var(--abu2)}
.etv-cvv{font-size:calc(19 * var(--u));font-weight:800;line-height:1.2;margin-top:calc(3 * var(--u));word-break:break-word}
.etv-csu{font-size:calc(12.5 * var(--u));color:var(--abu2);margin-top:calc(2 * var(--u))}

/* ---------- tabel daftar peserta ---------- */
.etv-tb{margin:0 calc(40 * var(--u));border:calc(1.5 * var(--u)) solid var(--line);border-radius:calc(13 * var(--u));overflow:hidden}
.etv-th,.etv-tr{display:flex;align-items:center;padding:calc(11 * var(--u)) calc(16 * var(--u))}
.etv-th{background:var(--bg);font-size:calc(10.5 * var(--u));font-weight:700;letter-spacing:calc(1.3 * var(--u));color:var(--abu);border-bottom:calc(1.5 * var(--u)) solid var(--line)}
.etv-tr{border-bottom:calc(1.5 * var(--u)) solid var(--line2);font-size:calc(16 * var(--u))}
.etv-tr:last-child{border-bottom:none}
.etv-tn{width:calc(52 * var(--u));flex:none;color:var(--abu)}
.etv-tm{flex:1;min-width:0;font-weight:600;word-break:break-word}
.etv-tt{width:calc(215 * var(--u));flex:none;color:var(--abu)}

/* ---------- detail pemesan + lokasi/meeting point ---------- */
.etv-two{display:flex;gap:calc(11 * var(--u));margin:calc(20 * var(--u)) calc(40 * var(--u)) 0;align-items:stretch}
.etv-bx{flex:1;min-width:0;border:calc(1.5 * var(--u)) solid var(--line);border-radius:calc(13 * var(--u));padding:calc(15 * var(--u)) calc(17 * var(--u))}
.etv-bxt{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:calc(12.5 * var(--u));font-weight:800;letter-spacing:calc(1.2 * var(--u))}
.etv-bxt i{width:calc(3.5 * var(--u));height:calc(15 * var(--u));background:var(--biru);border-radius:calc(2 * var(--u));display:block;flex:none}
.etv-sr{display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(10 * var(--u)) 0;border-bottom:calc(1.5 * var(--u)) solid var(--line2)}
.etv-sr:last-child{border-bottom:none}
.etv-sr i{width:calc(21 * var(--u));height:calc(21 * var(--u));flex:none;color:var(--biru);display:block}
.etv-sr i svg{width:100%;height:100%;display:block}
.etv-srl{flex:1;min-width:0;font-size:calc(14.5 * var(--u));color:var(--abu)}
.etv-srv{font-size:calc(15 * var(--u));font-weight:800;text-align:right;max-width:58%;word-break:break-word}
.etv-mp{display:flex;gap:calc(12 * var(--u));margin-top:calc(12 * var(--u))}
.etv-mpi{width:calc(38 * var(--u));height:calc(38 * var(--u));flex:none;color:var(--biru)}
.etv-mpi svg{width:100%;height:100%;display:block}
.etv-mpn{font-size:calc(19 * var(--u));font-weight:800;line-height:1.25;word-break:break-word}
.etv-mpd{font-size:calc(14 * var(--u));color:var(--abu2);line-height:1.5;margin-top:calc(5 * var(--u))}

/* ---------- informasi penting (dinamis per pesanan) ---------- */
.etv-imp{margin:calc(20 * var(--u)) calc(40 * var(--u)) 0;background:var(--kuning);border-radius:calc(14 * var(--u));padding:calc(18 * var(--u)) calc(20 * var(--u));display:flex;gap:calc(15 * var(--u))}
.etv-impi{width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:50%;background:var(--kuning2);color:#fff;font-size:calc(23 * var(--u));font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.etv-impt{font-size:calc(14 * var(--u));font-weight:800;letter-spacing:calc(1.2 * var(--u))}
.etv-ol{margin-top:calc(9 * var(--u))}
.etv-li{display:flex;gap:calc(9 * var(--u));font-size:calc(14.5 * var(--u));line-height:1.55;color:#3C4C5C;padding:calc(3 * var(--u)) 0}
.etv-li b{flex:none;min-width:calc(17 * var(--u));font-weight:600}

/* ---------- footer ilustrasi ---------- */
.etv-ft{position:relative;margin-top:calc(26 * var(--u));padding:calc(20 * var(--u)) calc(40 * var(--u)) calc(24 * var(--u));text-align:center;overflow:hidden}
.etv-fti{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;display:block}
.etv-fty{position:relative;z-index:2}
.etv-ft1{font-size:calc(13 * var(--u));color:var(--abu2)}
/* logo footer: PNG transparan (emblem + wordmark) supaya tajam; tagline tetap teks HTML */
.etv-ftl{display:block;width:calc(128 * var(--u));max-width:calc(128 * var(--u));height:auto;margin:calc(6 * var(--u)) auto 0}
.etv-ftb{display:flex;align-items:center;justify-content:center;gap:calc(9 * var(--u));margin-top:calc(5 * var(--u))}
.etv-ftb img{width:calc(33 * var(--u));height:calc(33 * var(--u));object-fit:contain;flex:none}
.etv-ftn{font-size:calc(28 * var(--u));font-weight:800;line-height:1}
.etv-ftn span{color:var(--biru2)}
.etv-ftg{font-size:calc(10 * var(--u));font-weight:700;letter-spacing:calc(2.2 * var(--u));color:var(--abu2);margin-top:calc(5 * var(--u))}

/* ---------- tombol bawah (ukuran UI, tidak ikut skala poster) ---------- */
.etv-cap{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 10px}
.etv-tip{font-size:13px;line-height:1.55;color:#6B7C90;text-align:center;margin:0 4px 8px}

/* ---------- layar sempit (HP): blok ditumpuk agar tetap terbaca ---------- */
.etv.sm .etv-hd{flex-wrap:wrap;gap:calc(14 * var(--u))}
.etv.sm .etv-hvr{display:none}
.etv.sm .etv-brand{flex:1 1 100%;min-width:0}
.etv.sm .etv-etb{flex:1 1 auto}
.etv.sm .etv-rt{flex:0 0 auto}
.etv.sm .etv-hero{height:calc(230 * var(--u))}
.etv.sm .etv-hov{right:calc(34%)}
.etv.sm .etv-h1{font-size:calc(36 * var(--u))}
.etv.sm .etv-loc{font-size:calc(17 * var(--u))}
.etv.sm .etv-kd{flex-direction:column;align-items:flex-start;gap:calc(12 * var(--u))}
.etv.sm .etv-vs2{width:100%;height:calc(1.5 * var(--u));align-self:auto}
.etv.sm .etv-cv{font-size:calc(36 * var(--u))}
.etv.sm .etv-g4{flex-wrap:wrap}
.etv.sm .etv-cc{flex:1 1 calc(50% - 6 * var(--u))}
.etv.sm .etv-two{flex-direction:column}
.etv.sm .etv-tt{width:calc(140 * var(--u))}
.etv.sm .etv-srv{max-width:52%}

/* ---------- sembunyikan tombol WhatsApp melayang saat melihat e-tiket ---------- */
body:has(#etv) #wafloat,body:has(#etv) .wafloat{display:none !important}

/* ---------- cetak ---------- */
@media print{
  .etv-cap,.etv-tip,.nav,.topbar,.tabbar,#hdr,header,footer,#wafloat,.wafloat{display:none !important}
  .etv{box-shadow:none;max-width:none;width:1000px}
}
.etv-impb{flex:1;min-width:0}

/* ---- hiasan footer: bentuk CSS (image/SVG tidak ikut tergambar html2canvas) ---- */
.etv-ft{background:#fff}
.etv-ftw{display:block;position:absolute;left:calc(-14 * var(--u));right:calc(-14 * var(--u));bottom:calc(-34 * var(--u));height:calc(96 * var(--u));background:#CFE4F4;border-radius:50% 50% 0 0/100% 100% 0 0;z-index:0}
.etv-fth{display:block;position:absolute;bottom:calc(40 * var(--u));width:calc(210 * var(--u));height:calc(64 * var(--u));background:#E2EFF9;border-radius:50%;z-index:1}
.etv-fth.a{left:calc(6 * var(--u))}
.etv-fth.b{left:calc(126 * var(--u));width:calc(140 * var(--u));height:calc(44 * var(--u));bottom:calc(34 * var(--u))}
.etv-fpi{display:block;position:absolute;right:calc(40 * var(--u));bottom:calc(30 * var(--u));width:calc(330 * var(--u));height:calc(46 * var(--u));background:#BBD9EE;border-radius:50%;z-index:1}
.etv-fpl{display:block;position:absolute;bottom:calc(52 * var(--u));width:calc(40 * var(--u));height:calc(58 * var(--u));z-index:2}
.etv-fpl.s2{width:calc(34 * var(--u));height:calc(46 * var(--u))}
.etv-fpl .t{display:block;position:absolute;left:calc(18 * var(--u));bottom:0;width:calc(4.4 * var(--u));height:calc(48 * var(--u));background:#2C6E9C;border-radius:calc(3 * var(--u))}
.etv-fpl.s2 .t{left:calc(15 * var(--u));height:calc(38 * var(--u))}
.etv-fpl .d{display:block;position:absolute;width:calc(34 * var(--u));height:calc(13 * var(--u));background:#2C6E9C;border-radius:50%}
.etv-fpl .d.a{left:calc(-8 * var(--u));top:calc(3 * var(--u));transform:rotate(-24deg)}
.etv-fpl .d.b{left:calc(12 * var(--u));top:calc(0 * var(--u));transform:rotate(22deg)}
.etv-fpl.s2 .d{width:calc(28 * var(--u));height:calc(11 * var(--u))}
.etv-fty{position:relative;z-index:3}