* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100vh; }
body {
  font-family: 'Inter', sans-serif;
  background: #020208;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -webkit-font-smoothing: antialiased;
}
#app {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #020208 0%, #0A0A20 60%, #0D0A25 100%);
}
@media (min-width: 481px) {
  body { padding: 20px 0; background: #000; }
  #app { border-radius: 40px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.8); min-height: 90vh; }
}

/* STARFIELD */
.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  max-width: 480px;
  margin: 0 auto;
}
@keyframes twinkle1 { 0%,100%{opacity:0.2} 50%{opacity:1} }
@keyframes twinkle2 { 0%,100%{opacity:0.4} 50%{opacity:0.9} }
@keyframes twinkle3 { 0%,100%{opacity:0.1} 50%{opacity:0.7} }
@keyframes shootingStar {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  10% { opacity: 0; }
  20% { opacity: 0.6; }
  75% { opacity: 0.5; }
  100% { transform: translateX(-220px) translateY(110px); opacity: 0; }
}


/* CONTENT PADDING */
.content { padding-top: 62px; }

/* TALENT SECTION */
.greeting {
  padding: 22px 20px 4px;
  position: relative;
}
.greet-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.greet-row::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  box-shadow: 0 0 10px rgba(252,211,77,0.5);
  margin-right: 2px;
  flex-shrink: 0;
}
.greet-emoji { font-size: 11px; }
.greet-headline {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.18;
  color: #fff;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.greet-headline em {
  font-style: italic;
  background: linear-gradient(135deg, #FFF1B8 0%, #FCD34D 55%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.greet-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: 320px;
  text-wrap: pretty;
}
.type-display .greet-headline { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.035em; }
.type-display .greet-headline em { font-style: normal; }
.type-mono .greet-headline { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 18px; letter-spacing: -0.05em; }
.type-mono .greet-headline em { font-style: normal; }
.type-mono .greet-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: -0.02em; }

.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 20px 12px;}
.section-title { font-size: 16px; font-weight: 800; color: #fff; }
.online-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: #34D399;
}
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; }

.talent-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 40px; }

.talent-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 18px; overflow: hidden;
  display: flex;
  cursor: pointer;
  transition: transform 0.15s;
}
.talent-card:active { transform: scale(0.98); }

.card-avatar {
  width: 90px; flex-shrink: 0;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-size: 38px;
  color: rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.card-avatar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.card-info { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.card-name { font-size: 15px; font-weight: 800; color: #fff; }
.card-status { font-size: 10px; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.gender-badge {
  display: inline-flex; align-items: center; gap: 2px;
  border-radius: 999px; padding: 0px 6px;
  font-size: 8.5px; font-weight: 700; margin-top: 3px;
}
.gender-badge.w { background: rgba(236,72,153,0.2); color: #F472B6; }
.gender-badge.p { background: rgba(96,165,250,0.2); color: #60A5FA; }

/* TALENT TAGS — top, baru, repeat */
.t-tag {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 999px; padding: 0px 6px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 0.5px solid transparent;
}

/* TALENT TAGS — top, baru, repeat */
.tag-row { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; margin-left: 3px; vertical-align: middle; }
.t-tag.top {
  background: linear-gradient(135deg, rgba(252,211,77,0.22), rgba(245,158,11,0.18));
  color: #FCD34D;
  border-color: rgba(252,211,77,0.35);
}
.t-tag.baru {
  background: rgba(94,234,212,0.18);
  color: #5EEAD4;
  border-color: rgba(94,234,212,0.35);
}
.t-tag.repeat {
  background: rgba(167,139,250,0.2);
  color: #C4B5FD;
  border-color: rgba(167,139,250,0.35);
}
.t-tag.verified {
  background: rgba(96,165,250,0.18);
  color: #60A5FA;
  border-color: rgba(96,165,250,0.35);
}
.t-tag svg { width: 8px; height: 8px; }
.card-services { font-size: 10.5px; color: rgba(255,255,255,0.45); margin-top: 4px; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.btn-pesan {
  border: none; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 700; height: 26px; padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF6B9D, #FF8C42);
  color: #fff; box-shadow: 0 4px 10px rgba(255,107,157,0.3);
}
.btn-pesan.off { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); box-shadow: none; cursor: not-allowed; }


/* SHOOTING STARS AT NAVBAR BOTTOM */
.navbar-stars {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  overflow: hidden;
  pointer-events: none;
}
@keyframes starMove {
  0% { transform: translateX(110%); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateX(-110%); opacity: 0; }
}
.moving-star {
  position: absolute;
  top: 0;
  width: 60px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff, rgba(255,255,255,0.8), transparent);
  border-radius: 999px;
  animation: starMove linear infinite;
}
.moving-star::after {
  content: none;
}
.s1 { animation-duration: 5s; animation-delay: 0s; top: 1px; width: 70px; }

.logo-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #0F0D14;
  box-shadow: 0 4px 12px rgba(252,211,77,0.3);
}
.logo-text {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-size: 16px; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
}
/* NAVBAR */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: #000000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none; overflow: visible;
}
.logo { display: flex; align-items: center; gap: 8px; }

.hamburger {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.12);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; cursor: pointer;
}
.hamburger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }

/* CONTENT */
.content { position: relative; z-index: 1; padding-bottom: 40px; }







/* PULSE ON CLICK */
@keyframes cardPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.talent-card.pulsing {
  animation: cardPulse 0.35s ease-out;
}

@keyframes softPulse { 0%,100%{box-shadow:0 0 8px rgba(96,217,250,0.2),0 0 16px rgba(167,139,250,0.1)} 50%{box-shadow:0 0 16px rgba(96,217,250,0.5),0 0 30px rgba(167,139,250,0.2)} }

/* ANTI COPY */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Tapi input & textarea tetap bisa paste/select (penting untuk paste nomor WA dll) */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}





/* BIO DI CARD */
.card-bio {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}


.bio-input {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05);
  font-family: inherit; font-size: 13px; color: #fff; outline: none;
  resize: none; line-height: 1.5;
  max-height: 80px;
}
.bio-input:focus { border-color: rgba(96,217,250,0.4); }
.bio-input::placeholder { color: rgba(255,255,255,0.2); }
.bio-count { font-size: 10px; color: rgba(255,255,255,0.25); text-align: right; margin-top: 3px; }


/* GENDER FILTER */
.gender-filter { display: flex; gap: 6px; }
.gender-btn {
  border: none; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 700;
  height: 28px; padding: 0 12px; border-radius: 999px;
  transition: all 0.2s;
}
.gender-btn.active-all { background: rgba(255,255,255,0.15); color: #fff; }
.gender-btn.active-w { background: rgba(244,114,182,0.2); color: #F472B6; border: 0.5px solid rgba(244,114,182,0.4); }
.gender-btn.active-p { background: rgba(96,217,250,0.2); color: #60D9FA; border: 0.5px solid rgba(96,217,250,0.4); }
.gender-btn.inactive { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); border: 0.5px solid rgba(255,255,255,0.1); }

@keyframes hexGlow {
  0%,100%{filter:drop-shadow(0 0 4px rgba(252,211,77,0.5)) drop-shadow(0 0 10px rgba(252,211,77,0.2));}
  50%{filter:drop-shadow(0 0 8px rgba(252,211,77,0.9)) drop-shadow(0 0 20px rgba(252,211,77,0.4));}
}
@keyframes logoGlow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(252,211,77,0.45)) drop-shadow(0 0 14px rgba(245,158,11,0.2)); }
  50%     { filter: drop-shadow(0 0 10px rgba(252,211,77,0.75)) drop-shadow(0 0 22px rgba(245,158,11,0.4)); }
}
@keyframes twinkleSpark { 0%,100%{opacity:0.4;transform:scale(0.85)} 50%{opacity:1;transform:scale(1.1)} }

/* Wordmark — single string SleepcallPay, gold-tinted to match the mark */
.logo { gap: 9px; }
.logo-text {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #FFF1B8 0%, #FCD34D 55%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 18px rgba(252,211,77,0.18);
}
.type-display .logo-text { font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 900; font-size: 17px; letter-spacing: -0.035em; text-transform: none; }
.type-mono .logo-text { font-family: 'JetBrains Mono', monospace; font-style: normal; font-weight: 800; font-size: 14px; letter-spacing: -0.06em; }

html, body {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
}

/* ============================================================
   TWEAKABLE OVERRIDES
   Three expressive macros: vibe / card-form / type-voice.
   Defaults match the original cosmic look; classes toggle a full
   coordinated change across multiple properties.
   ============================================================ */

/* ---------- VIBE: SUNSET MAUVE ---------- */
.vibe-sunset #app {
  background: linear-gradient(160deg, #150509 0%, #2A0F1A 55%, #3A1A22 100%);
}
.vibe-sunset .btn-pesan:not(.off) {
  background: linear-gradient(135deg, #FFB17A, #FF5C8A);
  box-shadow: 0 4px 14px rgba(255,92,138,0.35);
}
.vibe-sunset .logo-icon { background: linear-gradient(135deg, #FFB17A, #FF5C8A); box-shadow: 0 4px 12px rgba(255,92,138,0.35); }
.vibe-sunset .online-badge, .vibe-sunset .card-status[style*="34D399"] { color: #FFD2A0 !important; }
.vibe-sunset .online-dot, .vibe-sunset .card-status span[style*="34D399"] { background: #FFD2A0 !important; }
.vibe-sunset .gender-btn.active-w { background: rgba(255,92,138,0.22); color: #FFB1C8; border-color: rgba(255,92,138,0.45); }
.vibe-sunset .gender-btn.active-p { background: rgba(255,177,122,0.22); color: #FFD0A8; border-color: rgba(255,177,122,0.45); }
.vibe-sunset .starfield circle[fill="#60D9FA"] { fill: #FFB17A; }
.vibe-sunset .starfield circle[fill="#A78BFA"] { fill: #FF8FB1; }
.vibe-sunset .starfield circle[fill="#34D399"] { fill: #FFD2A0; }
.vibe-sunset .starfield circle[fill="#FCD34D"] { fill: #FFE0B0; }

/* ---------- VIBE: AURORA MINT ---------- */
.vibe-aurora #app {
  background: linear-gradient(160deg, #02100E 0%, #042820 50%, #07142E 100%);
}
.vibe-aurora .btn-pesan:not(.off) {
  background: linear-gradient(135deg, #5EEAD4, #818CF8);
  box-shadow: 0 4px 14px rgba(94,234,212,0.3);
  color: #062018;
}
.vibe-aurora .logo-icon { background: linear-gradient(135deg, #5EEAD4, #818CF8); box-shadow: 0 4px 12px rgba(94,234,212,0.35); }
.vibe-aurora .gender-btn.active-w { background: rgba(244,114,182,0.18); color: #F0ABCC; border-color: rgba(244,114,182,0.4); }
.vibe-aurora .gender-btn.active-p { background: rgba(94,234,212,0.18); color: #5EEAD4; border-color: rgba(94,234,212,0.45); }
.vibe-aurora .starfield circle[fill="#FCD34D"] { fill: #5EEAD4; }
.vibe-aurora .starfield circle[fill="#F472B6"] { fill: #818CF8; }

/* ---------- CARD FORM: SOLID TINTED ---------- */
.card-solid .talent-card {
  background: rgba(255,255,255,0.025);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}
.card-solid .talent-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,107,157,0.08), rgba(96,217,250,0.04) 60%, transparent);
  pointer-events: none;
}
.card-solid .talent-card:nth-child(3n)::before { background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(94,234,212,0.04) 60%, transparent); }
.card-solid .talent-card:nth-child(3n+1)::before { background: linear-gradient(135deg, rgba(252,211,77,0.08), rgba(244,114,182,0.04) 60%, transparent); }
.card-solid .talent-card > * { position: relative; z-index: 1; }

/* ---------- CARD FORM: HAIRLINE OUTLINE ---------- */
.card-outline .talent-list { gap: 0; padding: 0 16px 40px; }
.card-outline .talent-card {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: 4px 0;
}
.card-outline .talent-card:last-child { border-bottom: 0.5px solid rgba(255,255,255,0.08); }
.card-outline .card-avatar { width: 78px; font-size: 34px; background: transparent !important; border: 0.5px solid rgba(255,255,255,0.18); border-radius: 50%; height: 56px; width: 56px; margin: 18px 0 0 12px; flex-shrink: 0; }
.card-outline .card-info { padding: 14px 14px 14px 12px; }
.card-outline .btn-pesan:not(.off) {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
  box-shadow: none;
}

/* ---------- TYPE VOICE: DISPLAY POP ---------- */
.type-display .card-name,
.type-display .section-title,
.type-display .logo-text {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.type-display .logo-text { font-size: 17px; text-transform: lowercase; }
.type-display .card-avatar {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.04em;
}
.type-display .btn-pesan { font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; font-size: 10px; }

/* ---------- TYPE VOICE: MONO TECH ---------- */
.type-mono body, .type-mono .card-services, .type-mono .card-bio {
  font-family: 'JetBrains Mono', monospace;
}
.type-mono .card-name,
.type-mono .section-title,
.type-mono .logo-text {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.type-mono .logo-text { font-size: 14px; }
.type-mono .card-avatar {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
}
.type-mono .card-name { font-size: 14px; }
.type-mono .card-services { font-size: 9.5px; letter-spacing: -0.02em; }
.type-mono .card-bio { font-style: normal; font-size: 9.5px; letter-spacing: -0.02em; }
.type-mono .btn-pesan { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: -0.02em; }
.type-mono .gender-btn { font-family: 'JetBrains Mono', monospace; }
.type-mono .gender-badge { font-family: 'JetBrains Mono', monospace; }

/* ============================================================
   TWEAKS PANEL UI
   ============================================================ */
#tweaks-panel {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 9999;
  width: 264px;
  background: rgba(14,12,28,0.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 14px 14px 12px;
  font-family: 'Inter', sans-serif;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  display: none;
  user-select: none;
}
#tweaks-panel.open { display: block; }
.tw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tw-title { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.tw-close {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none;
  color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.tw-close:hover { background: rgba(255,255,255,0.16); }
.tw-section { margin-bottom: 10px; }
.tw-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
.tw-seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  border: 0.5px solid rgba(255,255,255,0.06);
}
.tw-opt {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  padding: 7px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
}
.tw-opt:hover { color: rgba(255,255,255,0.8); }
.tw-opt.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.3);
}
.tw-swatch {
  display: block;
  width: 100%; height: 18px;
  border-radius: 5px;
  margin-bottom: 4px;
}
.tw-opt[data-vibe="cosmic"] .tw-swatch { background: linear-gradient(135deg,#0D0A25 0%,#FF6B9D 100%); }
.tw-opt[data-vibe="sunset"] .tw-swatch { background: linear-gradient(135deg,#2A0F1A 0%,#FF5C8A 60%,#FFB17A 100%); }
.tw-opt[data-vibe="aurora"] .tw-swatch { background: linear-gradient(135deg,#042820 0%,#5EEAD4 60%,#818CF8 100%); }

#tweaks-fab {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 9998;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(14,12,28,0.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 0.5px solid rgba(255,255,255,0.18);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  display: none;
  align-items: center; justify-content: center;
}
#tweaks-fab.open { display: flex; }

/* VOUCHER SECTION */
.voucher-section { padding: 0 16px 12px; }
.voucher-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px; cursor: pointer; border: none;
  background: rgba(252,211,77,0.07);
  border: 0.5px solid rgba(252,211,77,0.2);
  transition: all 0.2s;
}
.voucher-btn:active { transform: scale(0.98); }
.voucher-left { display: flex; align-items: center; gap: 10px; }
.voucher-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(252,211,77,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.voucher-text { text-align: left; }
.voucher-title { font-size: 12px; font-weight: 700; color: #FCD34D; }
.voucher-sub { font-size: 10px; color: rgba(255,255,255,0.3); margin-top:1px; }
.voucher-arrow { font-size: 13px; color: rgba(252,211,77,0.4); }

/* VOUCHER PACKAGES */
.voucher-packages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.voucher-pkg {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px; cursor: pointer; transition: all 0.2s;
  position: relative;
}
.voucher-pkg.selected { border-color: #FCD34D; background: rgba(252,211,77,0.08); }
.voucher-pkg.popular::after {
  content: 'POPULER';
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: #FCD34D; color: #0A0700; font-size: 8px; font-weight: 900;
  padding: 2px 8px; border-radius: 999px; letter-spacing: 0.08em;
}
.pkg-amount { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.pkg-price { font-size: 18px; font-weight: 900; color: #FCD34D; }
.pkg-bonus { font-size: 10px; color: #34D399; margin-top: 4px; font-weight: 600; }

/* PAYMENT METHOD */
.payment-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; margin-bottom: 10px; }
.payment-methods { display: flex; gap: 8px; margin-bottom: 20px; }
.payment-method {
  flex: 1; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5);
  transition: all 0.2s;
}
.payment-method.selected { border-color: #FCD34D; color: #FCD34D; background: rgba(252,211,77,0.08); }

.btn-beli {
  width: 100%; height: 52px; border: none; border-radius: 16px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 800;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #0A0700; box-shadow: 0 6px 20px rgba(252,211,77,0.3);
}
.btn-beli:disabled { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); box-shadow: none; cursor: not-allowed; }



/* TOTAL ORDER & REPEAT */
.card-stats-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4);
  position: relative; cursor: pointer;
}
.stat-order { color: rgba(255,255,255,0.6); }
.stat-repeat { color: rgba(96,217,250,0.7); }
.stat-divider { color: rgba(255,255,255,0.15); }

/* TOOLTIP */
.stat-tooltip {
  display: none;
  position: absolute;
  bottom: 130%; right: 0;
  background: rgba(15,15,30,0.97);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 12px;
  white-space: nowrap;
  z-index: 99;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  pointer-events: none;
}
.stat-tooltip.show { display: block; }
.tooltip-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.tooltip-row:last-child { margin-bottom: 0; }
.tooltip-row span { color: #fff; font-weight: 800; }


/* VOUCHER MODAL */
.voucher-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.75); z-index: 500;
  backdrop-filter: blur(8px);
}
.voucher-overlay.open { display: block; }

.voucher-modal {
  display: none; position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 48px); max-width: 380px;
  max-height: 88vh; overflow-y: auto;
  z-index: 600;
  background: #1A2030;
  border-radius: 26px;
  border: 1px solid rgba(138,168,200,0.22);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  padding: 22px 20px 26px;
  overscroll-behavior: contain;
}
.voucher-modal.open { display: block; animation: vmFadeIn 0.28s cubic-bezier(0.22,1,0.36,1); }

.modal-handle {
  width: 32px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.15); margin: 0 auto 18px;
}
.modal-title {
  font-size: 16px; font-weight: 800; color: #fff;
  margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.modal-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 18px; }

.step-indicator { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.step-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.15); transition: all 0.3s;
}
.step-dot.active {
  background: linear-gradient(135deg,#FCD34D,#F59E0B);
  width: 22px; border-radius: 4px;
  box-shadow: 0 0 8px rgba(252,211,77,0.5);
}
.step-dot.done { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,0.4); }

.step { display: none; }
.step.show { display: block; }

/* NOMINAL */
.nominal-title {
  font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,0.4);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px;
}
.nominal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.nominal-item {
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 16px; padding: 14px 8px; text-align: center;
  cursor: pointer; transition: all 0.18s; position: relative; overflow: hidden;
}
.nominal-item::before {
  content: '';
  position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.nominal-item:active { transform: scale(0.95); }
.nominal-item.selected {
  background: rgba(252,211,77,0.15);
  border-color: rgba(252,211,77,0.55);
  box-shadow: 0 0 22px rgba(252,211,77,0.15), 0 0 0 0.5px rgba(252,211,77,0.3);
}
.nominal-item.selected::before {
  background: linear-gradient(180deg, rgba(252,211,77,0.15) 0%, transparent 60%);
}
.nominal-amount {
  font-size: 14px; font-weight: 900; color: #fff;
}
.nominal-item.selected .nominal-amount {
  background: linear-gradient(135deg,#FFF5A0,#FCD34D);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(252,211,77,0.4));
}

/* LAYANAN INFO */
.layanan-info {
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 18px; padding: 14px; margin-bottom: 14px; display: none;
  position: relative; overflow: hidden;
}
.layanan-info::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(252,211,77,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.layanan-info.show { display: block; }
.layanan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.layanan-item {
  background: rgba(255,255,255,0.09);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 14px; padding: 12px; cursor: pointer; transition: all 0.15s;
  position: relative; overflow: hidden;
}
.layanan-item::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.layanan-item:active { transform: scale(0.97); }
.layanan-item.selected {
  background: rgba(252,211,77,0.12);
  border-color: rgba(252,211,77,0.35);
  box-shadow: 0 0 14px rgba(252,211,77,0.1);
}
.layanan-item.selected .layanan-name { color: rgba(252,211,77,0.7); }
.layanan-item.selected .layanan-dur { color: #FCD34D; }
.layanan-name {
  font-size: 10px; color: rgba(255,255,255,0.5);
  margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
}
.layanan-dur { font-size: 14px; font-weight: 900; color: #fff; }

/* WA INPUT */
.wa-label {
  font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,0.25);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px;
}
.wa-input-wrap { display: flex; align-items: center; margin-bottom: 8px; }
.wa-prefix {
  height: 48px; padding: 0 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); border-right: none;
  border-radius: 14px 0 0 14px;
  display: flex; align-items: center;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.4); white-space: nowrap;
}
.wa-input {
  flex: 1; height: 48px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  padding: 0 14px; font-family: inherit; font-size: 14px; color: #fff; outline: none;
  transition: all 0.2s;
}
.wa-input:focus {
  border-color: rgba(252,211,77,0.35);
  background: rgba(252,211,77,0.03);
  box-shadow: 0 0 0 3px rgba(252,211,77,0.06);
}
.wa-input::placeholder { color: rgba(255,255,255,0.18); }
.wa-hint { font-size: 10.5px; color: rgba(255,255,255,0.2); margin-bottom: 14px; line-height: 1.4; }

/* SUMMARY */
.summary-card {
  background: rgba(252,211,77,0.04);
  border: 0.5px solid rgba(252,211,77,0.15);
  border-radius: 16px; padding: 14px; margin-bottom: 14px;
}
.summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.summary-row:last-child {
  margin-bottom: 0; padding-top: 10px;
  border-top: 0.5px solid rgba(252,211,77,0.12);
}
.summary-label { font-size: 12px; color: rgba(255,255,255,0.35); }
.summary-val { font-size: 12px; font-weight: 700; color: #fff; }
.summary-total { font-size: 17px; font-weight: 900; color: #FCD34D; filter: drop-shadow(0 0 6px rgba(252,211,77,0.4)); }

/* BUY OPTIONS */
.buy-opt {
  display: flex; align-items: center; gap: 14px;
  border-radius: 16px; padding: 14px 16px; margin-bottom: 8px;
  cursor: pointer; border: none; width: 100%; text-align: left;
  font-family: inherit; transition: transform 0.15s, opacity 0.15s;
}
.buy-opt:last-child { margin-bottom: 0; }
.buy-opt:active { transform: scale(0.97); opacity: 0.9; }
.buy-opt-icon {
  width: 42px; height: 42px; border-radius: 13px;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.buy-opt-text { flex: 1; }
.buy-opt-title { font-size: 14px; font-weight: 800; color: #fff; }
.buy-opt-sub { font-size: 10.5px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.buy-opt-arrow { font-size: 18px; color: rgba(255,255,255,0.3); }
.buy-opt-wa {
  background: linear-gradient(135deg, rgba(18,140,126,0.9), rgba(37,211,102,0.85));
  box-shadow: 0 4px 20px rgba(37,211,102,0.15);
}
.buy-opt-web {
  background: linear-gradient(135deg, rgba(30,58,95,0.9), rgba(37,99,235,0.85));
  box-shadow: 0 4px 20px rgba(37,99,235,0.15);
}

/* NAV BTN */
.modal-nav { display: flex; gap: 8px; margin-top: 6px; }
.btn-back {
  height: 48px; padding: 0 18px; border-radius: 14px;
  border: 0.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn-next {
  flex: 1; height: 48px; border-radius: 14px; border: none; cursor: pointer;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 17px; font-weight: 400;
  background: linear-gradient(135deg,#FFF8CC,#FCD34D,#F59E0B);
  color: #1a0f00;
  box-shadow: 0 4px 20px rgba(252,211,77,0.3), 0 1px 0 rgba(255,255,255,0.2) inset;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-next:not(:disabled):active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(252,211,77,0.2); }
.btn-next:disabled {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.2);
  box-shadow: none; cursor: not-allowed;
  font-family: inherit; font-style: normal; font-size: 14px;
}


/* =============================================
   MODAL ORDER — premium galaxy
   ============================================= */
.order-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.75); z-index: 700;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.order-overlay.open { display: block; }

.order-modal {
  display: none; position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 48px); max-width: 380px;
  max-height: 90vh; overflow-y: auto;
  z-index: 800;
  background: #1A2030;
  border-radius: 26px;
  border: 1px solid rgba(138,168,200,0.22);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  padding: 24px 22px 28px;
  overscroll-behavior: contain;
}
.order-modal.open {
  display: block;
  animation: omFadeIn 0.28s cubic-bezier(0.22,1,0.36,1);
}
@keyframes omFadeIn {
  from { transform: translate(-50%, -47%); opacity: 0; }
  to   { transform: translate(-50%, -50%); opacity: 1; }
}

/* Top row */
.order-top-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.order-modal-title {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-size: 23px; font-weight: 400;
  background: linear-gradient(135deg,#FFF5A0 0%,#FCD34D 55%,#F59E0B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(252,211,77,0.35));
}
.order-close-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.6); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: all 0.15s;
}
.order-close-btn:active { background: rgba(255,255,255,0.18); color: #fff; }

/* Card talent — glass premium */
.order-talent-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.09);
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: 18px; padding: 13px 15px;
  margin-bottom: 22px;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(252,211,77,0.4), 0 0 16px rgba(252,211,77,0.08);
}
.order-talent-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, #FFF5A0, #FCD34D 40%, rgba(245,158,11,0.4) 70%, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.order-talent-card::after {
  content: '';
  position: absolute; top: -30px; right: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(252,211,77,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.order-talent-avatar {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.order-talent-name { font-size: 15px; font-weight: 800; color: #fff; }
.order-talent-sub { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 3px; line-height: 1.4; }

/* Steps */
.order-step { display: none; }
.order-step.show { display: block; }

/* Label */
.om-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.om-sublabel {
  font-size: 12px; color: rgba(255,255,255,0.5);
  margin-bottom: 14px; line-height: 1.5;
}

/* Input voucher */
.om-voucher-row { display: flex; gap: 8px; margin-bottom: 16px; }
.voucher-code-input {
  flex: 1; height: 52px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 15px; padding: 0 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; color: #fff;
  letter-spacing: 0.06em; text-transform: uppercase;
  outline: none; transition: all 0.2s;
}
.voucher-code-input:focus {
  border-color: rgba(252,211,77,0.35);
  background: rgba(252,211,77,0.03);
  box-shadow: 0 0 0 3px rgba(252,211,77,0.06);
}
.voucher-code-input::placeholder {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: rgba(255,255,255,0.3); font-size: 13px;
}

/* Tombol Pesan Sekarang */
.om-btn-pesan {
  width: 100%; height: 52px; border-radius: 15px; border: none;
  background: linear-gradient(135deg,#FFF8CC 0%,#FCD34D 45%,#F59E0B 100%);
  color: #1a0f00; font-family: 'Instrument Serif', serif;
  font-style: italic; font-size: 18px; font-weight: 400;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 24px rgba(252,211,77,0.3), 0 1px 0 rgba(255,255,255,0.2) inset;
  letter-spacing: 0.01em;
}
.om-btn-pesan:disabled {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.2);
  box-shadow: none; cursor: not-allowed; font-style: normal; font-family: inherit; font-size: 14px;
}
.om-btn-pesan:not(:disabled):active { transform: scale(0.97); box-shadow: 0 2px 12px rgba(252,211,77,0.2); }

.om-lock-note {
  text-align: center; font-size: 11px; color: rgba(255,255,255,0.2);
  margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.om-beli-link {
  text-align: center; font-size: 12.5px; color: rgba(255,255,255,0.45);
  margin-top: 14px;
}
.om-beli-link a {
  color: #FCD34D; font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(252,211,77,0.4); cursor: pointer;
}

/* Layanan list */
.om-layanan-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.om-layanan-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03); transition: all 0.15s;
}
.om-layanan-item:active { transform: scale(0.98); }
.om-layanan-item.selected {
  border-color: rgba(252,211,77,0.4);
  background: rgba(252,211,77,0.06);
}
.om-layanan-left { display: flex; align-items: center; gap: 12px; }
.om-layanan-emoji { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.om-layanan-name { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.85); }
.om-layanan-item.selected .om-layanan-name { color: #fff; }
.om-layanan-right { display: flex; align-items: center; gap: 10px; }
.om-layanan-dur {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08); border-radius: 20px;
  padding: 4px 10px;
}
.om-layanan-item.selected .om-layanan-dur {
  background: rgba(252,211,77,0.15); color: #FCD34D;
}
.om-layanan-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.om-layanan-item.selected .om-layanan-check {
  background: #FCD34D; border-color: #FCD34D;
  box-shadow: 0 0 8px rgba(252,211,77,0.4);
}
.om-layanan-check-icon {
  display: none; font-size: 12px; color: #1a1000; font-weight: 900;
}
.om-layanan-item.selected .om-layanan-check-icon { display: block; }

/* Voucher Berhasil card */
.om-voucher-success-card {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 18px; overflow: hidden; margin-bottom: 4px;
}
.om-vs-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(52,211,153,0.08);
  border-bottom: 0.5px solid rgba(52,211,153,0.12);
}
.om-vs-check {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: #34D399; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900;
}
.om-vs-title { font-size: 14px; font-weight: 800; color: #34D399; }
.om-vs-sub { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.om-vs-body { padding: 0 16px; }
.om-vs-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
}
.om-vs-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.om-vs-label { flex: 1; font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 500; }
.om-vs-val { font-size: 14px; font-weight: 800; color: #FCD34D; }
.om-vs-val-white { font-size: 14px; font-weight: 800; color: #fff; }
.om-vs-divider { height: 0.5px; background: rgba(255,255,255,0.06); }

/* Nav layanan & konfirmasi */
.om-nav { display: flex; gap: 8px; margin-top: 18px; }
.om-btn-back {
  height: 48px; padding: 0 18px; border-radius: 14px; border: none;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.om-btn-next {
  flex: 1; height: 48px; border-radius: 14px; border: none;
  background: linear-gradient(135deg,#FFF1B8,#FCD34D,#F59E0B);
  color: #1a1000; font-family: inherit; font-size: 14px; font-weight: 900;
  cursor: pointer; transition: opacity 0.15s, transform 0.15s;
}
.om-btn-next:disabled {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.2); cursor: not-allowed;
}
.om-btn-next:not(:disabled):active { transform: scale(0.97); }

/* Konfirmasi */
.om-confirm-list { display: flex; flex-direction: column; }
.om-confirm-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); font-size: 13px;
}
.om-confirm-row:last-child { border-bottom: none; }
.om-confirm-label { color: rgba(255,255,255,0.35); font-weight: 500; }
.om-confirm-val { color: #fff; font-weight: 700; }
.om-confirm-val.pink { color: #FCD34D; }

/* Sukses */
.om-success { text-align: center; padding: 12px 0 8px; }
.om-success-icon { font-size: 48px; margin-bottom: 14px; }
.om-success-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.om-success-sub { font-size: 12.5px; color: rgba(255,255,255,0.35); line-height: 1.6; }
.om-success-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 8px 18px; border-radius: 20px;
  background: rgba(52,211,153,0.08); border: 0.5px solid rgba(52,211,153,0.2);
  font-size: 11px; font-weight: 700; color: #34D399;
}

/* Countdown */
.om-countdown-card {
  background: rgba(252,211,77,0.05);
  border: 0.5px solid rgba(252,211,77,0.15);
  border-radius: 16px; padding: 16px; margin-top: 16px; text-align: center;
}
.om-countdown-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(252,211,77,0.6); margin-bottom: 8px; }
.om-countdown-timer { font-size: 36px; font-weight: 900; color: #FCD34D; font-family: 'JetBrains Mono', monospace; margin-bottom: 10px; }
.om-countdown-bar-wrap { height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.om-countdown-bar { height: 100%; width: 100%; background: #FCD34D; border-radius: 4px; transition: width 1s linear; }
.om-countdown-note { font-size: 10.5px; color: rgba(255,255,255,0.25); line-height: 1.5; }


/* =============================================
   DRAWER MENU — premium galaxy
   ============================================= */
.drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); z-index: 900;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.drawer-overlay.open { display: block; }

.drawer {
  position: fixed; top: 0; right: -100%; bottom: 0;
  width: 82%; max-width: 300px;
  background: linear-gradient(160deg, #06060F 0%, #0A0A1E 50%, #0C0A20 100%);
  border-left: 0.5px solid rgba(252,211,77,0.08);
  box-shadow: -20px 0 60px rgba(0,0,0,0.6);
  z-index: 1000; display: flex; flex-direction: column;
  transition: right 0.35s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
}
.drawer.open { right: 0; }

/* Bintang dekoratif di dalam drawer */
.drawer-stars {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.drawer-star {
  position: absolute; border-radius: 50%;
  background: #fff; animation: twinkle1 3s ease-in-out infinite;
}

/* Header */
.drawer-header {
  position: relative; z-index: 1;
  padding: 60px 22px 24px;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
}
/* Glow efek di belakang logo */
.drawer-header::before {
  content: '';
  position: absolute; top: 30px; left: 10px;
  width: 120px; height: 60px;
  background: radial-gradient(ellipse, rgba(252,211,77,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.drawer-logo {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-size: 26px; font-weight: 400;
  background: linear-gradient(135deg,#FFF5A0 0%,#FCD34D 55%,#F59E0B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(252,211,77,0.3));
  display: block; margin-bottom: 6px;
}
.drawer-tagline {
  font-size: 11px; color: rgba(255,255,255,0.3);
  font-style: italic; line-height: 1.5; letter-spacing: 0.01em;
}

/* Menu */
.drawer-menu { flex: 1; padding: 10px 0 16px; position: relative; z-index: 1; overflow-y: auto; }

.drawer-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; cursor: pointer; position: relative;
  transition: all 0.2s;
}
.drawer-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(252,211,77,0.04) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.2s;
}
.drawer-item:active::after { opacity: 1; }
.drawer-item.active-item::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 4px 4px 0;
  background: linear-gradient(135deg,#FFF5A0,#F59E0B);
  box-shadow: 0 0 8px rgba(252,211,77,0.4);
}

/* Icon dengan glow efek per item */
.drawer-item-icon {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  position: relative;
}
.drawer-item:nth-child(1) .drawer-item-icon { background: rgba(252,211,77,0.1); box-shadow: 0 0 16px rgba(252,211,77,0.08); }
.drawer-item:nth-child(2) .drawer-item-icon { background: rgba(139,92,246,0.12); box-shadow: 0 0 16px rgba(139,92,246,0.08); }
.drawer-item:nth-child(4) .drawer-item-icon { background: rgba(52,211,153,0.1); box-shadow: 0 0 16px rgba(52,211,153,0.08); }
.drawer-item:nth-child(5) .drawer-item-icon { background: rgba(99,179,237,0.1); box-shadow: 0 0 16px rgba(99,179,237,0.08); }
.drawer-item:nth-child(6) .drawer-item-icon { background: rgba(167,139,250,0.1); box-shadow: 0 0 16px rgba(167,139,250,0.08); }
.drawer-item:nth-child(7) .drawer-item-icon { background: rgba(248,180,112,0.1); box-shadow: 0 0 16px rgba(248,180,112,0.08); }

.drawer-item-text { flex: 1; }
.drawer-item-label {
  font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.82);
  letter-spacing: 0.01em;
}
.drawer-item.active-item .drawer-item-label { color: #FCD34D; }
.drawer-item-desc { font-size: 10.5px; color: rgba(255,255,255,0.22); margin-top: 1px; }
.drawer-item-arrow { font-size: 14px; color: rgba(255,255,255,0.12); }

.drawer-divider {
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  margin: 6px 20px;
}

/* Danger */
.drawer-item.danger .drawer-item-icon { background: rgba(255,80,80,0.1); box-shadow: 0 0 16px rgba(255,80,80,0.06); }
.drawer-item.danger .drawer-item-label { color: rgba(255,110,110,0.85); }
.drawer-item.danger .drawer-item-arrow { color: rgba(255,80,80,0.2); }

/* Footer */
.drawer-footer {
  position: relative; z-index: 1;
  padding: 16px 22px 48px; text-align: center;
  border-top: 0.5px solid rgba(255,255,255,0.04);
}
.drawer-footer-moon {
  font-size: 22px; opacity: 0.35; display: block; margin-bottom: 8px;
  animation: logoGlow 4s ease-in-out infinite;
}
.drawer-footer-text { font-size: 10px; color: rgba(255,255,255,0.12); line-height: 1.6; }

/* === INNER PAGES (Terms, Privacy, Refund, dll) === */
.cl-inner-page {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 480px; max-width: 100vw; height: 100vh;
  background: #020208; z-index: 200;
  transform: translateX(-50%) translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cl-inner-page.open {
  transform: translateX(-50%) translateY(0);
}
@media(min-width: 481px) {
  .cl-inner-page { border-radius: 40px; max-height: calc(100vh - 48px); height: calc(100vh - 48px); top: 24px; }
}
.cl-inner-nav {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(2,2,8,0.95), rgba(2,2,8,0.7));
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
.cl-inner-back {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.cl-inner-back svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cl-inner-title {
  font-size: 14px; font-weight: 700; color: #fff;
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px;
  background: linear-gradient(135deg, #FFF5A0, #FCD34D);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cl-inner-content {
  flex: 1; overflow-y: auto;
  padding: 16px 16px 40px;
}
.cl-doc-header {
  border-radius: 14px; padding: 16px; margin-bottom: 14px; text-align: center;
}
.cl-doc-header-icon { font-size: 30px; margin-bottom: 6px; display: block; }
.cl-doc-header-title {
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px;
  margin-bottom: 3px;
}
.cl-doc-header-sub { font-size: 10.5px; color: rgba(255,255,255,0.5); line-height: 1.5; }
.cl-doc-header-date { font-size: 9.5px; color: rgba(255,255,255,0.3); margin-top: 6px; }
.cl-doc-section {
  background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
.cl-doc-section-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.cl-doc-section-icon { font-size: 16px; }
.cl-doc-section-title { font-size: 13px; font-weight: 800; color: #fff; }
.cl-doc-section-body {
  font-size: 11.5px; color: rgba(255,255,255,0.65); line-height: 1.7;
}



/* ============ BLOCK SEPARATOR ============ */


/* ===========================================================
   PREMIUM LIGHT MODE WIZARD (R7)
   Inspired by Stripe, Notion, Airbnb, Apple
   =========================================================== */

/* === HOUR PICKER (Jam available 24 chip) === */
.wz-hour-grid {
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
}
.wz-hour {
  height:38px;border-radius:10px;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:#4B5563;
  cursor:pointer;transition:all 0.15s ease;
  font-variant-numeric:tabular-nums;letter-spacing:0.02em;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-hour:hover {
  background:#F9FAFB;
  color:#0F172A;
  border-color:#D1D5DB;
}
.wz-hour.wz-hour-sel {
  background:linear-gradient(135deg,#EEF2FF,#F5F3FF);
  border-color:#6366F1;
  color:#4F46E5;
  font-weight:700;
  box-shadow:0 2px 6px rgba(79,70,229,0.12),inset 0 0 0 1px rgba(99,102,241,0.15);
}

/* === BACKSOUND CARDS (Audio profil) === */
.wz-backsound-card {
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:12px;padding:12px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:all 0.18s ease;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-backsound-card:hover {
  border-color:#D1D5DB;
  background:#FAFBFC;
}
.wz-backsound-card.wz-bs-sel {
  background:linear-gradient(135deg,#EEF2FF,#F5F3FF);
  border-color:#6366F1;
  box-shadow:0 4px 12px rgba(79,70,229,0.12),0 0 0 1px rgba(99,102,241,0.2);
}
.wz-bs-icon {
  width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.wz-bs-name {
  font-size:13.5px;font-weight:600;color:#0F172A;letter-spacing:-0.005em;
}
.wz-bs-desc {
  font-size:11.5px;color:#6B7280;margin-top:2px;line-height:1.4;
}
.wz-bs-play {
  width:32px;height:32px;border-radius:50%;
  background:#F3F4F6;border:1px solid #E5E7EB;
  display:flex;align-items:center;justify-content:center;
  color:#4B5563;font-size:11px;font-weight:700;
  cursor:pointer;flex-shrink:0;transition:all 0.2s;
}
.wz-bs-play:hover {
  background:#4F46E5;color:#FFFFFF;border-color:#4F46E5;
}
.wz-backsound-card.wz-bs-sel .wz-bs-play {
  background:#4F46E5;color:#FFFFFF;border-color:#4F46E5;
}

/* === WELCOME INFO CARDS === */
.wz-info-card {
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:14px;padding:14px;
  display:flex;align-items:flex-start;gap:13px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  transition:all 0.18s ease;
}
.wz-info-card:hover {
  border-color:#D1D5DB;
  box-shadow:0 4px 12px rgba(15,23,42,0.06);
}
.wz-info-icon {
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.wz-info-title {
  font-size:13.5px;font-weight:700;color:#0F172A;margin-bottom:3px;letter-spacing:-0.005em;
}
.wz-info-text {
  font-size:12px;color:#6B7280;line-height:1.55;
}

/* === STEP DOTS (Light Premium Header Progress) === */
.wz-step-dot {
  display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;z-index:1;flex:1;
}
.wz-dot {
  width:28px;height:28px;border-radius:50%;
  background:#FFFFFF;
  border:2px solid #E5E7EB;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:#9CA3AF;
  transition:all 0.3s cubic-bezier(0.22,0.61,0.36,1);
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-step-dot.active .wz-dot {
  background:linear-gradient(135deg,#6366F1,#4F46E5);
  border-color:#4F46E5;color:#FFFFFF;
  box-shadow:0 0 0 4px rgba(99,102,241,0.15),0 4px 12px rgba(79,70,229,0.25);
  transform:scale(1.08);
}
.wz-step-dot.completed .wz-dot {
  background:#EEF2FF;
  border-color:#A5B4FC;color:#4F46E5;
}
.wz-step-dot.completed .wz-dot::after {
  content:'✓';position:absolute;font-size:12px;font-weight:800;
}
.wz-step-dot.completed .wz-dot { font-size:0; }
.wz-dot-label {
  font-size:10px;font-weight:500;color:#9CA3AF;
  letter-spacing:0.02em;transition:color 0.3s;
  white-space:nowrap;
}
.wz-step-dot.active .wz-dot-label {
  color:#4F46E5;font-weight:700;
}
.wz-step-dot.completed .wz-dot-label {
  color:#6366F1;font-weight:600;
}

/* === LABELS === */
.wz-label {
  font-size:13px;font-weight:600;color:#1F2937;
  margin-bottom:8px;display:block;letter-spacing:-0.005em;text-transform:none;
}
.wz-label-hint {
  color:#9CA3AF;font-weight:500;font-size:12px;margin-left:4px;
}

/* === INPUTS === */
.wz-input-wrap { display:block; }
.wz-input {
  width:100%;height:46px;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:10px;
  padding:0 14px;
  font-family:inherit;font-size:14px;color:#0F172A;
  outline:none;transition:all 0.18s ease;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-input:hover {
  border-color:#D1D5DB;
}
.wz-input:focus {
  border-color:#4F46E5;
  box-shadow:0 0 0 4px rgba(79,70,229,0.1),0 1px 2px rgba(15,23,42,0.04);
}
.wz-input::placeholder { color:#9CA3AF; }
.wz-select {
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;
}
.wz-textarea {
  height:92px;padding:13px 14px;resize:none;line-height:1.6;
}

/* === HELPER & COUNTER === */
.wz-helper {
  font-size:12.5px;color:#6B7280;
  margin:0 0 10px;line-height:1.55;
}
.wz-tip {
  font-size:12px;color:#4F46E5;
  margin-top:10px;line-height:1.5;font-weight:500;
}
.wz-counter {
  font-size:11.5px;color:#9CA3AF;
  text-align:right;margin-top:6px;font-variant-numeric:tabular-nums;
  font-weight:500;
}

/* === STEP HEADER === */
.wz-step-header {
  margin:14px 0 28px;
  padding-bottom:0;
}
.wz-step-counter {
  font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:#4F46E5;margin-bottom:10px;
  display:inline-block;
  background:#EEF2FF;
  padding:4px 10px;border-radius:99px;
}
.wz-step-title {
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:32px;font-weight:400;line-height:1.1;
  color:#0F172A;margin-bottom:8px;letter-spacing:-0.015em;
}
.wz-step-subtitle {
  font-size:14px;color:#6B7280;
  line-height:1.55;font-weight:400;
}

/* === SUB-GROUP (flat sections dengan label) === */
.wz-group {
  margin-bottom:28px;
  padding:0;
  background:transparent;
  border:none;
}
.wz-group-label {
  font-size:11.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:#6B7280;margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.wz-group-label::after {
  content:'';flex:1;height:1px;
  background:#E5E7EB;
}
.wz-group-hint {
  text-transform:none;letter-spacing:0;color:#9CA3AF;
  font-weight:500;font-size:11.5px;
}

/* === PICKCARD (layanan) — Light & Premium === */
.wz-pickcard {
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:14px;padding:14px;cursor:pointer;
  transition:all 0.18s ease;
  display:flex;align-items:center;gap:12px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-pickcard:hover {
  border-color:#D1D5DB;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(15,23,42,0.06),0 2px 4px rgba(15,23,42,0.04);
}
.wz-pickcard.selected {
  background:linear-gradient(135deg,#EEF2FF,#F5F3FF);
  border-color:#6366F1;
  box-shadow:0 4px 14px rgba(79,70,229,0.12),0 0 0 1px rgba(99,102,241,0.2);
}
.wz-pickcard.selected::before {
  content:'✓';position:absolute;top:10px;right:12px;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#6366F1,#4F46E5);
  color:#FFFFFF;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(79,70,229,0.3);
}
.wz-pickcard > div:first-child {
  width:44px;height:44px;border-radius:12px;
  background:#F9FAFB;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all 0.18s;
  border:1px solid #F3F4F6;
}
.wz-pickcard.selected > div:first-child {
  background:rgba(99,102,241,0.1);
  border-color:rgba(99,102,241,0.2);
}
.wz-pickcard-label {
  font-size:14px;font-weight:600;color:#0F172A;
  margin-bottom:2px;
}
.wz-pickcard.selected .wz-pickcard-label { color:#4338CA; }
.wz-pickcard-desc {
  font-size:12px;color:#6B7280;line-height:1.4;
}

/* === CHIPS === */
.wz-chip {
  font-size:12.5px;font-weight:500;padding:8px 14px;
  border-radius:999px;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  color:#4B5563;
  cursor:pointer;transition:all 0.16s ease;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,0.03);
}
.wz-chip:hover {
  background:#F9FAFB;
  color:#0F172A;
  border-color:#D1D5DB;
}
.wz-chip-sel,.wz-chip.wz-chip-sel {
  background:linear-gradient(135deg,#EEF2FF,#F5F3FF);
  border-color:#6366F1;
  color:#4F46E5;
  font-weight:600;
  box-shadow:0 2px 6px rgba(79,70,229,0.1);
}

/* === TOGGLE BUTTON GROUP (Gender) === */
.wz-toggle {
  display:flex;gap:8px;
  background:#F9FAFB;border:1px solid #E5E7EB;border-radius:12px;padding:4px;
}
.wz-toggle-opt {
  flex:1;height:42px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:600;color:#6B7280;
  cursor:pointer;transition:all 0.18s ease;
}
.wz-toggle-opt:hover { color:#0F172A; }
.wz-toggle-opt.wz-toggle-sel {
  background:#FFFFFF;
  color:#4F46E5;
  box-shadow:0 2px 8px rgba(15,23,42,0.08),0 0 0 1px rgba(99,102,241,0.2);
}

/* === MINI CARDS (Kesibukan grid) === */
.wz-mini-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.wz-mini-card {
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:12px;padding:14px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;transition:all 0.18s ease;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-mini-card:hover {
  border-color:#D1D5DB;
  background:#FAFBFC;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(15,23,42,0.06);
}
.wz-mini-card.wz-mini-sel {
  background:linear-gradient(135deg,#EEF2FF,#F5F3FF);
  border-color:#6366F1;
  box-shadow:0 4px 12px rgba(79,70,229,0.12),0 0 0 1px rgba(99,102,241,0.2);
}
.wz-mini-icon {
  font-size:20px;line-height:1;
}
.wz-mini-label {
  font-size:11.5px;font-weight:600;color:#0F172A;
  text-align:center;letter-spacing:-0.005em;
}
.wz-mini-card.wz-mini-sel .wz-mini-label {
  color:#4338CA;
}

/* === YES/NO BUTTONS === */
.wz-yn {
  flex:1;height:46px;border-radius:10px;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:500;color:#4B5563;
  cursor:pointer;transition:all 0.16s ease;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-yn:hover {
  background:#F9FAFB;color:#0F172A;border-color:#D1D5DB;
}
.wz-yn.wz-yn-sel-yes {
  background:#F0FDF4;
  border-color:#22C55E;
  color:#15803D;font-weight:700;
  box-shadow:0 2px 6px rgba(34,197,94,0.1);
}
.wz-yn.wz-yn-sel-tidak {
  background:#FEF2F2;
  border-color:#EF4444;
  color:#B91C1C;font-weight:700;
  box-shadow:0 2px 6px rgba(239,68,68,0.1);
}

/* === SLIDER CARD === */
.wz-slider-card {
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:14px;
  padding:18px;
  box-shadow:0 1px 3px rgba(15,23,42,0.04);
}
.wz-slider-row { padding:6px 0; }
.wz-slider-divider {
  height:1px;background:#F3F4F6;margin:14px -18px;
}
.wz-slider-meta {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
}
.wz-slider-name {
  font-size:13.5px;font-weight:600;color:#0F172A;
}
.wz-slider-val {
  font-size:12px;font-weight:700;color:#4F46E5;
  background:#EEF2FF;
  padding:4px 11px;border-radius:99px;
  font-variant-numeric:tabular-nums;letter-spacing:0.02em;
  border:1px solid #C7D2FE;
}
.wz-slider-ends {
  display:flex;justify-content:space-between;
  font-size:11px;color:#9CA3AF;
  margin-top:10px;font-weight:500;
}

/* === RANGE SLIDER (Light Premium) === */
.wz-range {
  width:100%;height:6px;border-radius:99px;
  background:#E5E7EB;
  appearance:none;outline:none;cursor:pointer;
}
.wz-range::-webkit-slider-thumb {
  appearance:none;width:20px;height:20px;border-radius:50%;
  background:#FFFFFF;cursor:pointer;
  border:2px solid #4F46E5;
  box-shadow:0 0 0 6px rgba(99,102,241,0.08),0 2px 6px rgba(15,23,42,0.15);
  transition:all 0.15s;
}
.wz-range::-webkit-slider-thumb:hover {
  box-shadow:0 0 0 8px rgba(99,102,241,0.12),0 2px 8px rgba(15,23,42,0.2);
}
.wz-range::-moz-range-thumb {
  width:20px;height:20px;border-radius:50%;border:2px solid #4F46E5;
  background:#FFFFFF;cursor:pointer;
  box-shadow:0 0 0 6px rgba(99,102,241,0.08);
}

/* === UPLOAD AREAS === */
.wz-upload {
  background:#FAFBFC;
  border:1px dashed #D1D5DB;
  border-radius:12px;padding:16px;
  display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:all 0.2s ease;
}
.wz-upload:hover {
  background:#F5F7FF;
  border-color:#A5B4FC;
}
.wz-upload-icon {
  width:44px;height:44px;border-radius:12px;
  background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  border:1px solid #E5E7EB;
  transition:all 0.2s;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-upload:hover .wz-upload-icon {
  background:#EEF2FF;border-color:#A5B4FC;
}
.wz-upload-title { font-size:14px;font-weight:600;color:#0F172A; }
.wz-upload-sub { font-size:12px;color:#6B7280;margin-top:3px; }

/* === PHOTO UPLOAD HERO === */
.wz-photo-upload {
  background:#FAFBFC;
  border:1.5px dashed #A5B4FC;
  border-radius:18px;
  padding:32px 16px 24px;
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;transition:all 0.25s ease;
  position:relative;overflow:hidden;
}
.wz-photo-upload:hover {
  background:#F5F7FF;
  border-color:#6366F1;
}
.wz-photo-circle {
  width:120px;height:120px;border-radius:24px;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  transition:all 0.25s;
  box-shadow:0 4px 12px rgba(15,23,42,0.06);
}
.wz-photo-upload:hover .wz-photo-circle {
  border-color:#A5B4FC;
  box-shadow:0 6px 16px rgba(99,102,241,0.12);
}
.wz-photo-circle img { border-radius:24px !important; }
.wz-photo-placeholder { text-align:center;color:#6B7280; }

/* === BANNERS === */
.wz-banner-info {
  background:linear-gradient(135deg,#EEF2FF,#F5F3FF);
  border:1px solid #C7D2FE;
  border-radius:12px;padding:14px 16px;margin-bottom:24px;
  display:flex;gap:12px;align-items:start;
  font-size:13px;color:#3730A3;line-height:1.55;
}
.wz-banner-info b { color:#4F46E5; }
.wz-banner-tip {
  background:#F9FAFB;
  border:1px solid #E5E7EB;
  border-radius:10px;padding:11px 13px;margin-bottom:12px;
  display:flex;gap:10px;align-items:start;
  font-size:12.5px;color:#4B5563;line-height:1.55;
}
.wz-banner-tip b { color:#4F46E5; }

/* === SECTION DIVIDER (Verifikasi Internal) === */
.wz-section-divider {
  margin:32px 0 18px;
  padding:14px 16px;
  background:#F9FAFB;
  border:1px solid #E5E7EB;
  border-radius:12px;
  display:flex;align-items:center;gap:13px;
}
.wz-divider-icon {
  width:38px;height:38px;border-radius:11px;
  background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
  border:1px solid #E5E7EB;
}
.wz-divider-title {
  font-size:13.5px;font-weight:600;color:#0F172A;
}
.wz-divider-sub {
  font-size:11.5px;color:#6B7280;margin-top:2px;
}

/* === REVIEW CARD === */
.wz-review-card {
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:14px;
  padding:8px 18px;
  margin-bottom:18px;
  box-shadow:0 1px 3px rgba(15,23,42,0.04);
}

/* === NAVIGATION BUTTONS === */
.wz-btn-back {
  flex:1;height:50px;border-radius:12px;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  color:#374151;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  display:none;transition:all 0.18s;
  letter-spacing:0;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
.wz-btn-back:hover {
  background:#F9FAFB;
  border-color:#D1D5DB;
  color:#0F172A;
}
.wz-btn-next {
  flex:2;height:50px;border:none;border-radius:12px;
  cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;
  background:#0F172A;
  color:#FFFFFF;
  transition:all 0.2s ease;
  letter-spacing:0;
  box-shadow:0 2px 8px rgba(15,23,42,0.15);
}
.wz-btn-next:hover {
  background:#1E293B;
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(15,23,42,0.2);
}
.wz-btn-next.wz-btn-submit {
  height:56px;font-size:15px;font-weight:700;
  background:linear-gradient(135deg,#6366F1 0%,#4F46E5 100%);
  color:#FFFFFF;
  box-shadow:0 6px 20px rgba(79,70,229,0.3),0 2px 8px rgba(79,70,229,0.2);
}
.wz-btn-next.wz-btn-submit:hover {
  background:linear-gradient(135deg,#4F46E5 0%,#4338CA 100%);
  box-shadow:0 8px 28px rgba(79,70,229,0.4),0 4px 12px rgba(79,70,229,0.25);
}

/* === STEP ANIMATION === */
.wz-step {
  animation: wzFadeIn 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes wzFadeIn {
  from { opacity:0;transform:translateY(12px); }
  to { opacity:1;transform:translateY(0); }
}

/* === SUCCESS STATE OVERRIDE === */
#daftarTalentSuccess { color:#0F172A; }

/* === AUDIO PLAYING - PLAY BUTTON + EQUALIZER + RIPPLE === */
.card-avatar { overflow: hidden; position: relative; cursor: pointer; }

.av-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0);
  transition: background 0.2s;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.card-avatar:hover .av-overlay { background: rgba(0,0,0,0.28); }

.av-play {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.18s, transform 0.18s;
  color: #fff;
}
.card-avatar:hover .av-play { opacity: 1; transform: scale(1); }
.av-play svg { width: 14px; height: 14px; margin-left: 1.5px; }

.av-eq {
  display: none;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
}
.av-eq span {
  width: 2.5px; height: 100%;
  background: #1a1000;
  border-radius: 1.5px;
  transform-origin: bottom center;
  animation: avEq 0.9s ease-in-out infinite;
}
.av-eq span:nth-child(1) { animation-delay: 0s; }
.av-eq span:nth-child(2) { animation-delay: 0.15s; }
.av-eq span:nth-child(3) { animation-delay: 0.3s; }
.av-eq span:nth-child(4) { animation-delay: 0.45s; }
@keyframes avEq {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

.card-avatar.playing .av-overlay { background: rgba(0,0,0,0.45); }
.card-avatar.playing .av-play {
  opacity: 1;
  transform: scale(1);
  background: rgba(252,211,77,0.95);
  border-color: #FCD34D;
}
.card-avatar.playing .av-play svg { display: none; }
.card-avatar.playing .av-eq { display: inline-flex; }

.av-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(252,211,77,0.7);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
@keyframes avRing {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.card-avatar.playing .av-ring { animation: avRing 1.8s ease-out infinite; opacity: 1; }
.card-avatar.playing .av-ring.r2 { animation-delay: 0.6s; }
.card-avatar.playing .av-ring.r3 { animation-delay: 1.2s; }

/* Shake animation untuk talent tanpa audio */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* === DURATION BADGE === */
.av-duration {
  position: absolute;
  left: 8px; bottom: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
  letter-spacing: -0.01em;
  z-index: 3;
  font-variant-numeric: tabular-nums;
}
.av-duration::before {
  content: "";
  width: 11px; height: 11px;
  background: #FCD34D;
  border-radius: 50%;
  display: inline-block;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><polygon points='3,2 10,6 3,10' fill='black'/></svg>") center/8px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><polygon points='3,2 10,6 3,10' fill='black'/></svg>") center/8px no-repeat;
}
.card-avatar.playing .av-duration::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><rect x='3' y='2.5' width='2' height='7' fill='black'/><rect x='7' y='2.5' width='2' height='7' fill='black'/></svg>") center/8px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><rect x='3' y='2.5' width='2' height='7' fill='black'/><rect x='7' y='2.5' width='2' height='7' fill='black'/></svg>") center/8px no-repeat;
}

/* ============================================
   SKELETON LOADER (kartu kosong shimmer - horizontal)
   ============================================ */
.skel-row {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  overflow: hidden;
  min-height: 100px;
}
.skel-avatar {
  width: 90px;
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-info {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.skel-name {
  width: 50%;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite 0.2s;
}
.skel-line {
  width: 70%;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite 0.4s;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}