/* ==========================================================================
   Popup kupon exit-intent (.wzk-)

   Susunannya SAMA dengan popup aslinya, dan memang disengaja: pita merah
   jambu di puncak, kepala putih, blok navy dengan dua ilustrasi orang mengapit
   pil kupon kuning, kaki putih berisi tombol, dan label SALE menggantung di
   tepi kanan. Berkas ini bukan desain ulang — ia perapian dan optimasi dari
   markup lama yang datang dari template Elementor.

   YANG DIRAPIKAN
   1. Letak modalnya. Versi lama memakai `top: 5%` bersama
      `translate(-50%, -50%)` — dua aturan yang saling meniadakan, jadi
      kartunya memang tergantung di posisi yang salah sejak awal, dan makin
      meleset makin pendek layarnya. Sekarang overlay-nya flex container.
   2. Ritme tegaknya. Jarak antarunsur dulu dikarang lewat margin negatif
      (-7px, -6px, -5px) yang saling tindih; sekarang satu arah, semuanya
      margin-top positif.
   3. Kontras. Tanda silang #B1C3E9 di atas putih cuma 2,2:1 — di bawah ambang
      apa pun. Disclaimer #545E94 11px juga meleset. Keduanya diturunkan
      gelapnya secukupnya tanpa mengubah rona.
   4. Sasaran sentuh. Tombol tutup dari <div> 44x60 jadi <button> 44x44 yang
      benar-benar bisa di-Tab dan ditekan Enter.

   YANG DIOPTIMASI
   1. Dua ilustrasi orang tadinya SVG sebaris sepanjang ~250 baris, ikut
      terunduh di setiap muat halaman dan tidak pernah bisa di-cache. Sekarang
      dua berkas .svg terpisah (~22 KB masing-masing) yang di-cache browser dan
      dimuat malas — halamannya berkurang ~45 KB sebelum apa pun tampil.
   2. Label SALE tadinya data-URI sepanjang 3 KB yang ditempel di dalam
      stylesheet; sekarang berkas .svg biasa.
   3. Gaya dan skripnya keluar dari <style>/<script> sebaris jadi berkas
      sendiri, ikut pola section lain di halaman ini.

   Skripnya: assets/js/kupon-popup.js
   ========================================================================== */

.wzk {
  /* Warna aslinya dipertahankan apa adanya — navy, kuning, dan merah jambu
     inilah yang bikin popup ini dikenali. Yang diambil dari wz-ui.css cuma
     nilai yang memang sudah sama persis, supaya kalau warna merek digeser,
     popupnya ikut bergeser sendiri. */
  --wzk-navy: #0a1551;
  --wzk-kuning: #ffd222;
  --wzk-pita: var(--wz-brand, #da336b);
  --wzk-cta: #da326b;
  --wzk-cta-hover: #c71d56;
  /* #545E94 asli cuma 4,0:1 di atas putih — meleset dari AA untuk teks 11px.
     #4a5384 mencapai 4,9:1 dengan rona biru-abu yang sama. */
  --wzk-nota: #4a5384;
  /* Tanda silang asli #B1C3E9 cuma 2,2:1. Ini 4,6:1, masih sekeluarga. */
  --wzk-tutup: #8497c9;
  --wzk-teks: #444;
  --wzk-sans: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto,
              Helvetica, Arial, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: none;
  /* Overlay sekaligus pembungkus flex. Latar gelapnya ikut di sini, jadi tidak
     perlu elemen overlay terpisah yang harus dibuka-tutup barengan dan bisa
     desinkron dari kartunya.

     Gulirnya ditaruh di SINI, bukan di pembungkus dalam kartu. Alasannya satu:
     kaki orang-orangnya sengaja menjulur keluar dari blok navy ke area putih di
     bawahnya — itu bagian dari desain aslinya. Pembungkus yang menggulir pasti
     memotong julurannya, berapa pun radiusnya.

     flex-start + margin:auto, bukan align-items:center: kartu yang lebih tinggi
     daripada layar akan terpotong di ATAS kalau dipusatkan dengan flex, dan
     bagian yang hilang justru judulnya. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  font-family: var(--wzk-sans);
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s ease;
}

.wzk[data-buka] { display: flex; }
.wzk[data-buka="ya"] { opacity: 1; }

/* ---------- Kartu -------------------------------------------------------- */

.wzk__kartu {
  position: relative;
  width: 100%;
  max-width: 600px;
  /* margin:auto memusatkan kartu selama ia muat, dan berhenti memusatkan
     begitu lebih tinggi daripada layar — pasangan yang benar untuk
     align-items:flex-start di induknya. */
  margin: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(10, 21, 81, .28),
              0 2px 8px rgba(10, 21, 81, .12);
  transform: translateY(12px) scale(.975);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, .8, .25, 1), opacity .26s ease;
}

.wzk[data-buka="ya"] .wzk__kartu {
  transform: none;
  opacity: 1;
}

/* Pita merah jambu di puncak. Di versi lama ini dibuat dari dua <div> kosong
   bertumpuk plus sebuah :before — tiga lapis untuk satu batang warna. */
.wzk__pita {
  display: block;
  height: 16px;
  border-radius: 14px 14px 0 0;
  background: var(--wzk-pita);
}

/* ---------- Label SALE ---------------------------------------------------
   Tetap menggantung di tepi kanan seperti aslinya. Bedanya, dulu ia
   ::after selebar dan setinggi seluruh kartu yang digeser ke `left: 94.6%` —
   satu kotak tembus pandang seukuran modal yang menjorok ke luar layar dan
   ikut menghalangi klik. Sekarang ukurannya seukuran gambarnya sendiri.
   ------------------------------------------------------------------------ */

.wzk__sale {
  position: absolute;
  /* z-index wajib: tanpa ini labelnya tertimbun kepala putih dan blok navy yang
     datang sesudahnya di markup, dan yang kelihatan cuma serpihan yang
     menjulur keluar tepi kartu. */
  z-index: 2;
  /* Turun di bawah tombol tutup, bukan menindihnya. Tali gantungnya bagian
     paling atas gambar ini, jadi tag yang ditaruh terlalu tinggi bikin talinya
     melintasi tanda silang dan ujung judulnya sekaligus. */
  top: 62px;
  right: -32px;
  width: 104px;
  height: 137px;
  background: url("../img/kupon-sale.svg") no-repeat center / contain;
  pointer-events: none;
}

/* ---------- Kepala ------------------------------------------------------- */

.wzk__atas {
  /* Kanan lebih lapang daripada kiri: di sanalah label SALE menggantung. */
  padding: 24px 74px 22px 56px;
  text-align: center;
}

.wzk__judul {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wzk-navy);
}

.wzk__sub {
  margin: 9px 0 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wzk-teks);
}

.wzk__sub b {
  font-weight: 700;
  color: var(--wzk-navy);
}

/* ---------- Blok navy ----------------------------------------------------
   Ilustrasinya diletakkan absolut di kedua sisi, seperti aslinya, dan intinya
   diberi padding kiri-kanan supaya teks tidak pernah menabrak orang-orangnya
   di lebar mana pun. Versi lama tidak memberi ruang itu, jadi di lebar tertentu
   pil kuponnya benar-benar bertumpuk dengan ilustrasinya.
   ------------------------------------------------------------------------ */

.wzk__tengah {
  position: relative;
  padding: 26px 24px 30px;
  background: var(--wzk-navy);
  text-align: center;
}

/* bottom negatif: kaki mereka memang menjulur keluar blok navy ke area putih di
   bawahnya, sama seperti aslinya. Karena posisinya absolut, mereka tergambar di
   lapisan yang lebih atas daripada latar .wzk__bawah — jadi julurannya terlihat
   utuh tanpa perlu z-index. */
.wzk__orang {
  position: absolute;
  bottom: -20px;
  width: 25%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.wzk__orang--kiri  { left: 6px; }
.wzk__orang--kanan { right: 6px; }

.wzk__inti {
  position: relative;
  z-index: 1;
  /* Tanpa lorong, sama seperti aslinya. Ilustrasinya pendek dan berlabuh di
     dasar blok, jadi dua baris teks di atasnya lewat di ruang kosong — memberi
     lorong 24% justru memaksa "KHUSUS PENDAFTAR HARI INI" pecah dua baris,
     padahal di versi aslinya ia satu baris. Yang benar-benar sejajar dengan
     orang-orangnya cuma pil kuponnya, dan pil itu jauh lebih sempit daripada
     ruang di antara mereka. */
  padding: 0;
}

.wzk__eyebrow {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--wzk-kuning);
}

.wzk__diskon {
  margin: 10px 0 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}

.wzk__label {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

/* ---------- Pil kupon ----------------------------------------------------
   Bentuk pil kuningnya persis aslinya. Dua perapian kecil: garis putus-putus
   di dalam supaya ia terbaca sebagai kupon dan bukan sekadar tombol kuning,
   dan tabular-nums supaya lebarnya tidak bergoyang selama kodenya diacak
   menunggu jawaban server.
   ------------------------------------------------------------------------ */

/* Latar kuning dan bentuk pilnya pindah ke pembungkus, karena sekarang isinya
   dua: kodenya, dan tombol salin. Kalau tombolnya ditaruh DI DALAM .wzk__kode,
   ia akan terhapus tiap 50ms — skripnya menulis kode acak ke situ lewat
   textContent selama menunggu jawaban server. */
.wzk__kupon {
  display: inline-flex;
  align-items: stretch;
  margin: 12px 0 0;
  border-radius: 50px;
  background: var(--wzk-kuning);
  box-shadow: inset 0 0 0 2px rgba(10, 21, 81, .16);
  /* overflow dibiarkan terlihat: tooltipnya muncul DI ATAS pil, dan pembungkus
     yang memotong pasti memenggalnya. Sudut tombolnya dibulatkan sendiri lewat
     border-radius, bukan lewat pemotongan induknya. */
  transition: opacity .2s ease;
}

.wzk__kode,
p.wzk__kode {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 11px 20px 11px 30px;
  background: none;
  font-family: var(--wzk-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .06em;
  text-indent: .06em;
  color: #080808;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Tombol salin -------------------------------------------------
   Menempel di kanan pil, dipisah garis putus-putus — garis sobek kupon. Itu
   yang membuat penambahan ini terbaca sebagai bagian dari kuponnya, bukan
   tombol asing yang ditempel di sebelahnya.
   ------------------------------------------------------------------------ */

.wzk__salin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 0;
  border-left: 2px dashed rgba(10, 21, 81, .26);
  border-radius: 0 50px 50px 0;
  background: transparent;
  color: var(--wzk-navy);
  cursor: pointer;
}

/* Tombol ini sengaja TIDAK punya keadaan hover maupun fokus — tidak di
   ikonnya, tidak di bidang latarnya. Pil kuponnya dijaga tetap satu bidang
   kuning utuh dalam keadaan apa pun; satu-satunya hal yang boleh berubah di
   sana adalah ikonnya, waktu kodenya benar-benar tersalin.

   Konsekuensinya disadari: pengguna keyboard tidak melihat di mana fokusnya
   berada saat men-Tab ke tombol ini. Tombolnya tetap bisa dijangkau dan
   ditekan Enter — yang hilang cuma penandanya. Kalau suatu saat penanda itu
   mau dikembalikan, cukup hapus blok :focus di bawah ini; aturan fokus umum
   .wzk :focus-visible akan mengambil alih lagi dengan sendirinya. */
/* Yang ditimpa di sini BUKAN cuma latarnya. reset.css membawa aturan bawaan
   tema:

     button:hover, button:focus { background-color: #cc3366; color: #fff }

   `color` itulah biang "hover putih"-nya: ikonnya digambar dengan
   stroke="currentColor", jadi begitu warnanya jadi putih, ikonnya ikut putih di
   atas kuning dan praktis hilang. Kekhususan aturan reset (0,1,1) mengalahkan
   .wzk__salin polos (0,1,0), jadi warnanya harus ditegaskan ulang di tiap
   keadaan — bukan sekali di aturan dasarnya. */
.wzk__salin:hover,
.wzk__salin:active {
  background: transparent;
  color: var(--wzk-navy);
}

.wzk__salin:focus,
.wzk__salin:focus-visible {
  outline: none;
  background: transparent;
  color: var(--wzk-navy);
}

.wzk__salin svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Centang disembunyikan sampai kodenya benar-benar tersalin. */
.wzk__ikon-cek { display: none; }

/* Sesudah tersalin ikonnya bertukar jadi centang, dan itu saja. Kabarnya
   dibawa tooltip di bawah ini — bukan oleh perubahan warna tombolnya. */
.wzk__salin[data-salin] .wzk__ikon-salin { display: none; }
.wzk__salin[data-salin] .wzk__ikon-cek { display: block; }

/* ---------- Tooltip ------------------------------------------------------
   Muncul sesudah diklik, bukan saat hover: yang perlu dikabarkan hasilnya,
   bukan nama tombolnya. Ia menggantung di atas pil dengan ekor kecil yang
   menunjuk balik ke tombolnya, jadi jelas siapa yang sedang bicara.
   ------------------------------------------------------------------------ */

.wzk__tip {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 7px;
  /* Balonnya PUTIH, bukan navy. Tooltip navy di atas blok yang juga navy cuma
     menyisakan teks melayang tanpa kotak — kabarnya sampai, bentuknya hilang.
     Putih di sini satu-satunya nada yang pasti menonjol dari latarnya. */
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  color: var(--wzk-navy);
  font-family: var(--wzk-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .16s ease, transform .16s ease;
}

/* Ekor segitiga di bawah balon. */
.wzk__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #fff;
}

.wzk__salin[data-salin] .wzk__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Selama kodenya masih diacak — dan sesudah kuponnya kedaluwarsa — tidak ada
   yang layak disalin, jadi tombolnya dimatikan. disabled, bukan sekadar
   diredupkan: perangkap fokus di popup ini menyaring tombol dengan
   :not([disabled]), jadi ia otomatis ikut keluar dari urutan Tab. */
.wzk__salin[disabled] {
  opacity: .4;
  cursor: default;
}

/* Selama kode masih diacak, pilnya diredupkan sedikit — cukup untuk memberi
   tahu "ini belum kodemu" tanpa perlu spinner terpisah. */
.wzk[data-fase="memuat"] .wzk__kupon {
  opacity: .62;
}

/* ---------- Kaki --------------------------------------------------------- */

.wzk__bawah {
  padding: 26px 40px 22px;
  border-radius: 0 0 14px 14px;
  background: #fff;
  text-align: center;
}

.wzk__waktu {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wzk-teks);
}

.wzk__waktu b {
  font-weight: 700;
  color: var(--wzk-navy);
}

/* Angka hitung mundurnya. tabular-nums wajib: tanpa itu seluruh baris
   bergoyang sekali per detik di sudut mata. */
.wzk__jam {
  font-weight: 700;
  color: var(--wzk-navy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Di bawah 10 menit angkanya pindah ke merah jambu merek. Eskalasinya nyata —
   bukan warna mendesak yang sudah menyala sejak detik pertama. */
.wzk__waktu[data-sisa="mendesak"] .wzk__jam {
  color: var(--wzk-cta);
}

.wzk__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin: 14px 0 0;
  padding: 13px 40px;
  border: 0;
  border-radius: 50px;
  background: var(--wzk-cta);
  color: #fff;
  font-family: var(--wzk-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

/* Panah menyusul kebiasaan tombol lain di halaman ini — semua CTA di sini
   membawa panah yang sama. Popupnya jadi ikut satu keluarga. */
.wzk__cta svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform .16s ease;
}

.wzk__cta:hover {
  background: var(--wzk-cta-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(218, 50, 107, .32);
}

.wzk__cta:hover svg { transform: translateX(3px); }
.wzk__cta:active { transform: none; }

/* Selama kode belum datang tombolnya belum boleh diklik — href-nya memang
   belum berisi kupon apa pun. Diberi tampilan menunggu, bukan disembunyikan,
   supaya tinggi kartunya tidak melompat saat kodenya mendarat. */
.wzk__cta[aria-disabled="true"] {
  background: #c9ccdb;
  color: #5d6480;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* Tanpa href tombolnya tidak menuju ke mana pun lagi (kupon kedaluwarsa), jadi
   panahnya ikut dilepas — panah maju di tombol yang tidak bisa maju adalah
   janji yang tidak ditepati. */
.wzk__cta:not([href]) svg { display: none; }

.wzk__nota {
  margin: 14px 0 0;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wzk-nota);
}

/* ---------- Tombol tutup -------------------------------------------------
   <button> sungguhan, 44px, dan tidak disembunyikan. Popup yang susah ditutup
   memang menahan orang lebih lama, tapi yang tertahan bukan orang yang mau
   membeli — dan halaman ini masih harus dipakai sesudah popupnya lewat.
   ------------------------------------------------------------------------ */

.wzk__tutup {
  position: absolute;
  top: 22px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wzk-tutup);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.wzk__tutup svg { width: 15px; height: 15px; display: block; }

.wzk__tutup:hover {
  background: #f1f3f9;
  color: var(--wzk-navy);
}

/* ---------- Fokus --------------------------------------------------------
   Popup ini mengunci fokus, jadi cincinnya wajib kelihatan — kalau tidak,
   pengguna keyboard terjebak di dalam kotak yang tak bisa ia lihat isinya.
   ------------------------------------------------------------------------ */

/* .wzk__salin dikecualikan atas permintaan — lihat catatan di blok tombol
   salin. Sisanya (tombol tutup dan CTA) tetap wajib berpenanda: popup ini
   mengunci fokus, dan tanpa cincin yang kelihatan pengguna keyboard terjebak
   di dalam kotak yang tak bisa ia lihat isinya. */
.wzk :focus-visible:not(.wzk__salin) {
  outline: 3px solid var(--wzk-pita);
  outline-offset: 3px;
  border-radius: 8px;
}

.wzk__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layar sedang -------------------------------------------------
   Ilustrasinya menyempit lebih cepat daripada kartunya, jadi lorong aman di
   tengah dilebarkan bertahap. Tanpa ini "DAPATKAN DISKON 10%" mulai menabrak
   kepala orang-orangnya di sekitar 520px.
   ------------------------------------------------------------------------ */

@media (max-width: 620px) {
  .wzk { padding: 16px; }

  .wzk__atas { padding: 22px 66px 20px 52px; }
  .wzk__judul { font-size: 26px; }
  .wzk__sub { font-size: 16px; }

  .wzk__eyebrow { font-size: 20px; }
  .wzk__diskon { font-size: 34px; }

  .wzk__kode,
  p.wzk__kode { font-size: 26px; padding: 10px 16px 10px 24px; }
  .wzk__salin { padding: 0 12px; }
  .wzk__salin svg { width: 24px; height: 24px; }

  .wzk__bawah { padding: 18px 24px 20px; }
  .wzk__cta { font-size: 20px; padding: 12px 32px; }
}

/* ---------- Layar kecil --------------------------------------------------
   Di bawah 480px ilustrasinya dilepas sama sekali. Ia hiasan, dan pada lebar
   segitu ia memakan lebih dari separuh blok navy sementara satu-satunya hal
   yang benar-benar perlu terbaca — kode kuponnya — tinggal kebagian sisa.
   ------------------------------------------------------------------------ */

@media (max-width: 480px) {
  .wzk { padding: 0; align-items: flex-end; }

  .wzk__kartu {
    max-width: none;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .wzk__pita { border-radius: 16px 16px 0 0; }
  .wzk__bawah { border-radius: 0; }

  .wzk__sale { display: none; }
  .wzk__orang { display: none; }

  .wzk__atas { padding: 20px 52px 18px; }
  .wzk__judul { font-size: 23px; }
  .wzk__sub { font-size: 15px; }

  .wzk__tengah { padding: 22px 20px; }
  .wzk__eyebrow { font-size: 18px; }
  .wzk__diskon { font-size: 30px; }
  .wzk__label { font-size: 15px; }

  .wzk__kode,
  p.wzk__kode {
    font-size: 25px;
    letter-spacing: .05em;
    text-indent: .05em;
    padding: 10px 14px 10px 20px;
  }

  /* 23px ikon + 11px padding di tiap sisi = 45px, masih di atas ambang
     sasaran sentuh 44px. Jangan diperkecil lagi tanpa menaikkan paddingnya. */
  .wzk__salin { padding: 0 11px; }
  .wzk__salin svg { width: 23px; height: 23px; }

  .wzk__bawah {
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .wzk__cta {
    display: flex;
    width: 100%;
    font-size: 19px;
    padding: 12px 20px;
  }

  .wzk__tutup { top: 14px; right: 8px; }
}

/* ---------- Gerak dikurangi ----------------------------------------------
   Dilewati sama sekali, bukan dipercepat — sama seperti section lain di
   halaman ini.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .wzk,
  .wzk__kartu,
  .wzk__cta,
  .wzk__cta svg,
  .wzk__tutup {
    transition: none;
  }

  .wzk__kartu { transform: none; }
}