.wz-em--start {
  --wz-em-start-dur: 6.5s;
  background: var(--wz-wash-soft);
  scroll-margin-top: var(--wz-em-anchor);
}

.wz-em--start::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--wz-decor-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--wz-decor-ink) 1px, transparent 1px),
    radial-gradient(min(640px, 120vw) 440px at 86% 40%, color-mix(in srgb, var(--wz-blue) 8%, transparent), transparent 62%),
    radial-gradient(min(560px, 110vw) 420px at 6% 70%, rgba(218, 51, 107, .08), transparent 60%);
  background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%;
  mask-image: var(--wz-decor-mask);
}

.wz-em--start .wz-em__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr); gap: 56px; }
.wz-em--start .wz-em__title .wz-em__rose { display: block; }

.wz-em__start-item:nth-child(1), .wz-em__start-tab:nth-child(1), .wz-em__start-pane:nth-child(1) { --k: var(--wz-green); --m: var(--wz-green-wash); }
.wz-em__start-item:nth-child(2), .wz-em__start-tab:nth-child(2), .wz-em__start-pane:nth-child(2) { --k: var(--wz-blue); --m: var(--wz-blue-wash); }
.wz-em__start-item:nth-child(3), .wz-em__start-tab:nth-child(3), .wz-em__start-pane:nth-child(3) { --k: var(--wz-violet); --m: var(--wz-violet-wash); }
.wz-em__start-item:nth-child(4), .wz-em__start-tab:nth-child(4), .wz-em__start-pane:nth-child(4) { --k: var(--wz-accent); --m: var(--wz-tint); }
.wz-em--start { --wz-em-start-ink: var(--wz-green); }
.wz-em--start[data-langkah="1"] { --wz-em-start-ink: var(--wz-blue); }
.wz-em--start[data-langkah="2"] { --wz-em-start-ink: var(--wz-violet); }
.wz-em--start[data-langkah="3"] { --wz-em-start-ink: var(--wz-accent); }

.wz-em__start-list { margin: 24px 0 0; padding: 0; list-style: none; }
.wz-em__start-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; }

.wz-em__start-rail { display: flex; flex-direction: column; align-items: center; }
.wz-em__start-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--wz-line);
  border-radius: 50%;
  background: #fff;
  color: var(--wz-ink-mute);
  font: 700 13px/1 var(--wz-display-font);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.wz-em__start-dot b, .wz-em__start-dot svg { grid-area: 1 / 1; }
.wz-em__start-dot svg { width: 14px; height: 14px; stroke-width: 2.4; opacity: 0; }

.wz-em__start-line { position: relative; flex: 1; width: 2px; min-height: 14px; overflow: hidden; background: var(--wz-line); }
.wz-em__start-line u { position: absolute; inset: 0; background: var(--k); transform: scaleY(0); transform-origin: top; }

.wz-em__start-item:last-child .wz-em__start-line { visibility: hidden; }

.wz-em__start-body { min-width: 0; padding-bottom: 14px; }
.wz-em__start-item:last-child .wz-em__start-body { padding-bottom: 0; }
.wz-em__start-body h3 { font: inherit; }

.wz-em__start-btn {
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wz-ink);
  font: 700 17px/30px var(--wz-display-font);
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
}

.wz-em--start .wz-em__start-btn:is(:hover, :focus, :active) { background: none; color: var(--k); }
.wz-em__start-btn:focus-visible { outline: 2px solid var(--wz-accent); outline-offset: 3px; border-radius: 4px; }

.wz-em__start-desc { display: grid; grid-template-rows: 1fr; }
.wz-em__start-desc > p { min-height: 0; overflow: hidden; padding-top: 2px; color: var(--wz-ink-soft); font-size: 15px; line-height: 1.55; }

.wz-em--start.is-js .wz-em__start-btn { color: var(--wz-ink-mute); }
.wz-em--start.is-js .is-active .wz-em__start-btn { color: var(--wz-ink); }
.wz-em--start.is-js .wz-em__start-btn:is(:hover, :focus-visible) { color: var(--k); }
.wz-em--start.is-js .is-done .wz-em__start-btn { color: var(--wz-ink-soft); }

.wz-em--start.is-js .is-done .wz-em__start-dot { border-color: var(--m); background: var(--m); color: var(--k); }
.wz-em--start.is-js .is-done .wz-em__start-dot b { opacity: 0; }
.wz-em--start.is-js .is-done .wz-em__start-dot svg { opacity: 1; }

.wz-em--start.is-js .wz-em__start-line u { transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.wz-em--start.is-js .is-done .wz-em__start-line u { transform: none; }
.wz-em--start.is-js .is-active .wz-em__start-dot { border-color: var(--k); background: var(--k); color: #fff; }

.wz-em--start.is-js .wz-em__start-desc { grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.4, 0, .2, 1); }
.wz-em--start.is-js .wz-em__start-desc > p { visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .3s ease, visibility 0s .55s; }
.wz-em--start.is-js .is-active .wz-em__start-desc { grid-template-rows: 1fr; }

.wz-em--start.is-js.is-ukur .wz-em__start-item .wz-em__start-desc { grid-template-rows: 0fr; }

.wz-em--start.is-js.is-tenang .wz-em__start-item .wz-em__start-desc { transition: none; }
.wz-em--start.is-js .is-active .wz-em__start-desc > p { visibility: visible; opacity: 1; transform: none; transition: opacity .4s ease .18s, transform .5s cubic-bezier(.2, .7, .2, 1) .18s, visibility 0s; }

@media (prefers-reduced-motion: no-preference) {
  .wz-em--start.is-js.is-in .is-active .wz-em__start-line u { animation: wz-em-start-timer var(--wz-em-start-dur) linear forwards; }
}
.wz-em--start.is-js:not(.is-in) .is-active .wz-em__start-line u,
.wz-em--start.is-js:has(.wz-em__start-list :focus-visible) .is-active .wz-em__start-line u { animation-play-state: paused; }
@media (hover: hover) {
  .wz-em--start.is-js:has(.wz-em__start-list:hover, .wz-em__start-stage:hover) .is-active .wz-em__start-line u { animation-play-state: paused; }
}

@keyframes wz-em-start-timer { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.wz-em__start-stage { min-width: 0; margin: 0; container-type: inline-size; }

.wz-em__start-win {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--wz-line-warm);
  border-radius: 18px;
  box-shadow: 0 22px 54px -20px color-mix(in srgb, var(--wz-em-shadow) 30%, transparent);
  background: #fff;
  color: var(--wz-ink);
  font-family: var(--wz-ui-font);
  font-size: clamp(8.5px, 2.32cqw, 13px);
  line-height: 1.4;
}
.wz-em__start-win :where(i, em) { font-style: normal; }
.wz-em__start-win .wz-em__icon { width: 1.1em; height: 1.1em; }

.wz-em__start-bar { display: flex; align-items: center; gap: .6em; padding: 1em 1.4em; border-bottom: 1px solid var(--wz-line-warm); background: var(--wz-em-surface-soft); }
.wz-em__start-bar > i { width: .78em; height: .78em; border-radius: 50%; background: #ff5f57; }
.wz-em__start-bar > i:nth-child(2) { background: #febc2e; }
.wz-em__start-bar > i:nth-child(3) { background: #28c840; }
.wz-em__start-bar > span { margin-left: .5em; overflow: hidden; color: var(--wz-em-chrome); font-size: .92em; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.wz-em__start-bar > em { flex: none; margin-left: auto; padding: .3em .8em; border-radius: 999px; background: var(--wz-em-ok-wash); color: var(--wz-btn-teal); font-size: .85em; font-weight: 700; }

.wz-em__start-tabs { position: relative; display: flex; gap: 1.7em; padding: 0 1.4em; border-bottom: 1px solid var(--wz-line-warm); }
.wz-em__start-tab { display: flex; align-items: center; gap: .45em; margin-bottom: -1px; padding: 1em 0 .85em; border-bottom: 2px solid transparent; color: var(--wz-ink-mute); font-size: .98em; font-weight: 600; white-space: nowrap; transition: color .3s ease, border-color .3s ease; }
.wz-em__start-tab.is-active { border-color: var(--k); color: var(--k); }

.wz-em__start-ink { display: none; position: absolute; bottom: -1px; left: 0; width: var(--w, 0); height: 2px; background: var(--wz-em-start-ink); transform: translateX(var(--x, 0)); transition: transform .5s cubic-bezier(.4, 0, .2, 1), width .5s cubic-bezier(.4, 0, .2, 1), background-color .5s ease; }
.wz-em--start.is-js .wz-em__start-ink { display: block; }
.wz-em--start.is-js .wz-em__start-tab.is-active { border-color: transparent; }

.wz-em__start-panes { display: grid; }
.wz-em__start-pane {
  display: flex;
  flex-direction: column;
  gap: .8em;
  grid-area: 1 / 1;
  min-width: 0;
  padding: 1.55em 1.7em 1.7em;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.4em);
  transition: opacity .22s ease-in, transform .22s ease-in, visibility 0s .22s;
}

.wz-em__start-pane.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .4s ease .2s, transform .55s cubic-bezier(.2, .7, .2, 1) .2s, visibility 0s; }

.wz-em__start-pane--spread { justify-content: space-between; }

@media (prefers-reduced-motion: no-preference) {
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active :where([style*="--d"]) { animation: wz-em-start-rise .6s cubic-bezier(.2, .7, .2, 1) calc(var(--d) + .2s) backwards; }
}
@keyframes wz-em-start-rise { from { opacity: 0; transform: translateY(.7em); } }

.wz-em__start-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.wz-em__start-head > b { overflow: hidden; font: 700 1.15em/1.3 var(--wz-display-font); white-space: nowrap; text-overflow: ellipsis; }
.wz-em__start-pill { display: inline-flex; flex: none; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 999px; background: var(--m); color: var(--k); font-size: .85em; font-weight: 700; }
.wz-em__start-pill .wz-em__icon { width: 1.05em; height: 1.05em; }

.wz-em__start-rec { display: flex; align-items: center; gap: .9em; padding: .85em 1em; border: 1px solid var(--wz-line); border-radius: .9em; }
.wz-em__start-rec > b { flex: none; width: 4.6em; padding: .35em 0; border-radius: .55em; background: var(--wz-em-chip); font: 700 .92em/1.3 var(--wz-display-font); text-align: center; }
.wz-em__start-rec > span { flex: 1; min-width: 0; overflow: hidden; color: var(--wz-ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.wz-em__start-rec > em,
.wz-em__start-contact > em { flex: none; padding: .25em .75em; border-radius: 999px; font-size: .84em; font-weight: 700; }
.wz-em__start-rec > em { display: inline-grid; text-align: center; background: var(--wz-em-ok-wash); color: var(--wz-btn-teal); }

.wz-em__start-rec > em > span { grid-area: 1 / 1; }
.wz-em__start-rec > em > span:first-child { opacity: 0; }
.wz-em__start-caret { flex: none; width: 1.5px; height: 1.15em; margin-left: -.6em; background: var(--k); opacity: 0; }
.wz-em__start-ready { display: flex; align-items: center; gap: .7em; padding: .85em 1em; border-radius: .9em; background: var(--wz-em-ok-wash); color: var(--wz-btn-teal); font-weight: 700; }
.wz-em__start-ready .wz-em__icon { width: 1.35em; height: 1.35em; }

.wz-em__start-segs { display: flex; flex-wrap: wrap; gap: .45em; }
.wz-em__start-segs > span { padding: .32em .8em; border: 1px solid var(--wz-line); border-radius: 999px; color: var(--wz-ink-soft); font-size: .86em; font-weight: 600; }
.wz-em__start-segs b { color: var(--wz-ink); }
.wz-em__start-segs > .is-on { border-color: var(--m); background: var(--m); color: var(--k); }
.wz-em__start-segs > .is-on b { color: inherit; }
.wz-em__start-contact { display: flex; align-items: center; gap: .75em; padding: .6em .9em; border: 1px solid var(--wz-line); border-radius: .8em; }
.wz-em__start-contact > u { display: grid; flex: none; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--c); color: #fff; font-size: .85em; font-weight: 700; text-decoration: none; }
.wz-em__start-contact > i { flex: 1; min-width: 0; overflow: hidden; color: var(--wz-ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.wz-em__start-contact > em { background: var(--wz-em-chip); color: var(--wz-ink-soft); }

.wz-em__start-subject { display: flex; align-items: center; gap: .75em; padding: .85em 1.05em; border: 1px solid var(--wz-line); border-radius: .9em; }
.wz-em__start-subject > i { flex: none; color: var(--wz-ink-mute); font-size: .92em; }
.wz-em__start-subject > b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wz-em__start-subject > em { flex: none; padding: .2em .65em; border-radius: 999px; background: var(--m); color: var(--k); font-size: .84em; font-weight: 700; }
.wz-em__start-mail { display: flex; flex: 1; flex-direction: column; gap: .75em; padding: 1.05em; border: 1px solid var(--wz-line); border-radius: .9em; }

.wz-em__start-promo { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: .3em; min-height: 8.5em; padding: 1.2em 1.25em; border-radius: .75em; background: linear-gradient(120deg, var(--wz-tint) 0%, #fbeadd 100%); }
.wz-em__start-promo small { color: var(--wz-accent); font-size: .77em; font-weight: 700; letter-spacing: .12em; }
.wz-em__start-promo b { font: 700 1.55em/1.2 var(--wz-display-font); }
.wz-em__start-mail > u { display: block; height: .55em; border-radius: .3em; background: var(--wz-em-chip); }
.wz-em__start-mail > u + u { width: 72%; }
.wz-em__start-mailfoot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: .15em; }
.wz-em__start-shop { padding: .62em 1.25em; border-radius: .6em; background: var(--wz-accent); color: #fff; font-size: .92em; font-weight: 700; white-space: nowrap; }
.wz-em__start-tools { display: flex; gap: .45em; }
.wz-em__start-tools > i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .55em; background: var(--wz-em-chip); color: var(--wz-ink-soft); }

.wz-em__start-progress { display: flex; flex-direction: column; gap: .65em; padding: 1.05em; border: 1px solid var(--wz-line); border-radius: .9em; }
.wz-em__start-progress > span { display: flex; justify-content: space-between; gap: 1em; font-size: .92em; }
.wz-em__start-progress > span i { color: var(--wz-ink-soft); }
.wz-em__start-progress > u { display: block; height: .6em; overflow: hidden; border-radius: .3em; background: var(--wz-line-warm-soft); }
.wz-em__start-progress > u > u { display: block; width: 78%; height: 100%; border-radius: inherit; background: var(--wz-accent); transform-origin: left; }
.wz-em__start-stats b { transform-origin: left center; }

.wz-em__start-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75em; }
.wz-em__start-stats > span { display: flex; flex-direction: column; gap: .1em; padding: .75em 1.05em; border: 1px solid var(--wz-line-warm); border-radius: .9em; background: var(--wz-em-surface-soft); }
.wz-em__start-stats b { font: 700 1.7em/1.2 var(--wz-display-font); }
.wz-em__start-stats i { color: var(--wz-ink-mute); font-size: .92em; }
.wz-em__start-stats > .is-open b { color: var(--wz-btn-teal); }

.wz-em__start-log { display: flex; align-items: center; gap: .75em; padding: .1em .15em; font-size: .92em; }
.wz-em__start-log > u { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--wz-ink-soft); }
.wz-em__start-log > i { flex: 1; min-width: 0; overflow: hidden; color: var(--wz-ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.wz-em__start-log > em { flex: none; color: var(--wz-ink-soft); font-weight: 700; }
.wz-em__start-log > .is-open { background: var(--wz-btn-teal); color: var(--wz-btn-teal); }
.wz-em__start-log > .is-click { background: var(--wz-accent); color: var(--wz-accent); }
.wz-em__start-log > .is-off { background: #d6d6d6; color: #d6d6d6; }
.wz-em__start-log > em.is-open, .wz-em__start-log > em.is-click { background: none; }

@media (prefers-reduced-motion: no-preference) {

  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-rec > em { animation: wz-em-start-okbg .35s ease var(--t) backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-rec > em > span:first-child { animation: wz-em-start-gone .2s ease var(--t) backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-rec > em > span:last-child { animation: wz-em-start-pop .45s cubic-bezier(.3, 1.5, .5, 1) var(--t) backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-ready svg { animation: wz-em-start-pop .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) + .45s) backwards; }

  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-segs > [style*="--t"] { animation: wz-em-start-seg 1.4s ease var(--t); }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-segs > .is-on { animation: wz-em-start-segoff 4.2s linear 1.5s; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-contact { animation: wz-em-start-rise .6s cubic-bezier(.2, .7, .2, 1) calc(var(--d) + .2s) backwards, wz-em-start-row 1.4s ease var(--t); }

  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-subject > b { text-overflow: clip; animation: wz-em-start-type 1.15s linear .55s backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-caret { animation: wz-em-start-blink .5s steps(1) .3s 4 backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-subject > em { animation: wz-em-start-pop .45s cubic-bezier(.3, 1.5, .5, 1) 1.8s backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-promo > * { animation: wz-em-start-rise .6s cubic-bezier(.2, .7, .2, 1) 2.2s backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-promo > b { animation-delay: 2.35s; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-mail > u { transform-origin: left; animation: wz-em-start-grow .6s cubic-bezier(.4, 0, .2, 1) 2.7s backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-mail > u + u { animation-delay: 2.9s; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-shop { animation: wz-em-start-pop .5s cubic-bezier(.3, 1.5, .5, 1) 3.2s backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-tools > i { animation: wz-em-start-tool .7s ease var(--t); }

  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-progress > u > u { animation: wz-em-start-fill 4.8s cubic-bezier(.25, .55, .35, 1) .45s backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-log > u { animation: wz-em-start-ping .9s ease-out calc(var(--d) + .3s) backwards; }
  .wz-em--start.is-js.is-in .wz-em__start-pane.is-active .wz-em__start-stats b[style*="--t"] { animation: wz-em-start-bump .5s ease var(--t); }
}

@keyframes wz-em-start-okbg { from { background: var(--wz-em-chip); color: var(--wz-ink-mute); } }
@keyframes wz-em-start-gone { from { opacity: 1; } to { opacity: 0; } }
@keyframes wz-em-start-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes wz-em-start-seg { 0%, 100% { } 12%, 88% { border-color: var(--m); background: var(--m); color: var(--k); } }
@keyframes wz-em-start-segoff { 0%, 97% { border-color: var(--wz-line); background: #fff; color: var(--wz-ink-soft); } }
@keyframes wz-em-start-row { 0%, 100% { } 12%, 88% { border-color: var(--m); background: var(--m); } }

@keyframes wz-em-start-type { from { max-width: 0; } to { max-width: 15em; } }
@keyframes wz-em-start-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes wz-em-start-grow { from { transform: scaleX(0); } }
@keyframes wz-em-start-tool { 0%, 100% { } 20%, 70% { background: var(--m); color: var(--k); } }
@keyframes wz-em-start-fill { from { transform: scaleX(0); } }
@keyframes wz-em-start-ping { from { box-shadow: 0 0 0 0 currentColor; } to { box-shadow: 0 0 0 .55em transparent; } }
@keyframes wz-em-start-bump { 0%, 100% { transform: none; } 40% { transform: scale(1.18); } }

@container (max-width: 400px) {
  .wz-em__start-bar > em { display: none; }
  .wz-em__start-tabs { gap: 1.3em; }
}

@media (max-width: 767px) {
  .wz-em--start .wz-em__split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wz-em__start-list { margin-top: 22px; }
  .wz-em__start-btn { font-size: 16px; }
  .wz-em__start-desc > p { font-size: 14px; }
  .wz-em__start-body { padding-bottom: 12px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .wz-em--start .wz-em__split { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .wz-em--start :is(.wz-em__start-dot, .wz-em__start-btn, .wz-em__start-desc, .wz-em__start-desc > p, .wz-em__start-tab, .wz-em__start-pane) { transition: none; }

  .wz-em--start.is-js :is(.wz-em__start-btn, .wz-em__start-desc, .wz-em__start-desc > p, .is-active .wz-em__start-desc, .is-active .wz-em__start-desc > p, .wz-em__start-pane.is-active, .wz-em__start-line u, .wz-em__start-ink) { transition: none; }
}