/*
 * Web Hanzzy v5  -  CSS Variables untuk auto text color
 * Semua warna teks otomatis menyesuaikan dark/light mode
 * via CSS custom properties (variables).
 */

/* -- Root: Light mode (default) ----------------------------------------------- */
:root {
  /* Background */
  --bg-base:        #f4f4f5;
  --bg-glass:       rgba(255,255,255,0.75);
  --bg-glass-hover: rgba(255,255,255,0.85);
  --border-glass:   rgba(0,0,0,0.09);
  --grid-line:      rgba(0,0,0,0.06);

  /* Text  -  otomatis kontras dengan background terang */
  --text-primary:   #0f0f11;
  --text-secondary: #52525b;
  --text-muted:     #a1a1aa;
  --text-invert:    #ffffff;

  /* Gate / Overlay */
  --gate-bg:        rgba(244,244,245,0.97);
  --gate-border:    rgba(0,0,0,0.08);
  --gate-title:     #0f0f11;
  --gate-subtitle:  #71717a;
  --gate-label:     #52525b;
  --gate-input-bg:  rgba(255,255,255,0.9);
  --gate-input-bd:  rgba(0,0,0,0.12);
  --gate-input-txt: #0f0f11;
  --gate-icon:      #6366f1;
  --gate-icon-bg:   rgba(99,102,241,0.1);
  --gate-hint:      #a1a1aa;
  --gate-error-bg:  rgba(239,68,68,0.08);
  --gate-error-bd:  rgba(239,68,68,0.2);
  --gate-error-txt: #dc2626;

  /* Nav */
  --nav-title:      #0f0f11;
  --nav-sub:        #71717a;
  --nav-icon:       #52525b;
  --nav-icon-bg:    rgba(0,0,0,0.05);
  --nav-link:       #374151;
  --nav-link-bg:    rgba(0,0,0,0.05);
  --nav-link-hover: rgba(0,0,0,0.09);
  --nav-user-bg:    rgba(99,102,241,0.1);
  --nav-user-txt:   #4f46e5;
  --nav-ganti-bg:   rgba(0,0,0,0.05);
  --nav-ganti-txt:  #374151;
  --nav-ganti-hov:  rgba(0,0,0,0.09);
  --nav-theme-bg:   rgba(0,0,0,0.05);
  --nav-theme-hov:  rgba(0,0,0,0.09);
  --nav-theme-txt:  #52525b;

  /* Content */
  --heading-main:   #0f0f11;
  --body-text:      #52525b;
  --badge-online-bg: rgba(0,0,0,0.05);
  --badge-online-bd: rgba(0,0,0,0.08);
  --badge-online-txt: #374151;
  --intro-gradient: linear-gradient(to bottom, rgba(99,102,241,0.08), rgba(244,244,245,0.8), rgba(244,244,245,1));
  --btn-primary-bg:  #4f46e5;
  --btn-primary-txt: #ffffff;
  --btn-secondary-bg: rgba(0,0,0,0.05);
  --btn-secondary-bd: rgba(0,0,0,0.09);
  --btn-secondary-txt: #374151;
  --feature-bg:    rgba(0,0,0,0.04);
  --feature-bd:    rgba(0,0,0,0.07);
  --feature-label: #9ca3af;
  --feature-value: #0f0f11;
  --hero-overlay:  linear-gradient(to right, rgba(10,10,11,0.85), rgba(10,10,11,0.4), rgba(10,10,11,0.1));
  --hero-badge-bg: rgba(255,255,255,0.1);
  --hero-badge-bd: rgba(255,255,255,0.15);

  /* Category tabs */
  --cat-btn-bg:     rgba(0,0,0,0.04);
  --cat-btn-hov:    rgba(0,0,0,0.08);
  --cat-btn-txt:    #52525b;
  --cat-active-bg:  rgba(99,102,241,0.12);
  --cat-active-bd:  rgba(99,102,241,0.3);
  --cat-active-txt: #4f46e5;

  /* Payment section */
  --payment-bd:     rgba(0,0,0,0.09);
  --payment-icon-bg: rgba(0,0,0,0.04);
  --payment-icon:   #52525b;

  /* Footer */
  --footer-bg:      rgba(255,255,255,0.6);
  --footer-bd:      rgba(0,0,0,0.09);

  /* Modal */
  --modal-card-bg:   rgba(255,255,255,0.9);
  --modal-header-bg: rgba(255,255,255,0.85);
  --modal-bd:        rgba(0,0,0,0.09);
  --modal-subtitle:  #9ca3af;
  --modal-close-bg:  rgba(0,0,0,0.05);
  --modal-close-hov: rgba(0,0,0,0.09);
  --modal-close-txt: #52525b;
  --modal-summary-bg: rgba(99,102,241,0.04);
  --modal-pstring-bg: rgba(0,0,0,0.03);
  --drag-handle:     rgba(0,0,0,0.12);
  --qr-frame-bg:     #ffffff;
  --qr-frame-bd:     rgba(0,0,0,0.08);
  --skeleton-icon:   rgba(99,102,241,0.08);
  --modal-btn-sec-bg:  rgba(0,0,0,0.05);
  --modal-btn-sec-bd:  rgba(0,0,0,0.09);
  --modal-btn-sec-txt: #374151;
  --modal-btn-sec-hov: rgba(0,0,0,0.09);
  --modal-btn-cancel:  #9ca3af;
  --modal-btn-can-hov: #ef4444;
  --modal-btn-can-bd:  rgba(0,0,0,0.07);
  --modal-btn-can-bhov: rgba(239,68,68,0.15);
  --success-bg:     rgba(16,185,129,0.06);
  --success-bd:     rgba(16,185,129,0.2);
  --success-icon-bg: rgba(16,185,129,0.1);

  /* Shimmer */
  --shimmer-from:  rgba(0,0,0,0.04);
  --shimmer-mid:   rgba(0,0,0,0.09);
}

/* -- Dark mode  -  semua variable di-override ------------------------------------ */
.dark {
  --bg-base:        #09090b;
  --bg-glass:       rgba(255,255,255,0.055);
  --bg-glass-hover: rgba(255,255,255,0.08);
  --border-glass:   rgba(255,255,255,0.09);
  --grid-line:      rgba(255,255,255,0.055);

  /* Text  -  otomatis kontras dengan background gelap */
  --text-primary:   #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted:     #52525b;
  --text-invert:    #0f0f11;

  --gate-bg:        rgba(24,24,27,0.98);
  --gate-border:    rgba(255,255,255,0.08);
  --gate-title:     #f4f4f5;
  --gate-subtitle:  #71717a;
  --gate-label:     #a1a1aa;
  --gate-input-bg:  rgba(255,255,255,0.06);
  --gate-input-bd:  rgba(255,255,255,0.1);
  --gate-input-txt: #f4f4f5;
  --gate-icon:      #818cf8;
  --gate-icon-bg:   rgba(99,102,241,0.15);
  --gate-hint:      #52525b;
  --gate-error-bg:  rgba(239,68,68,0.08);
  --gate-error-bd:  rgba(239,68,68,0.25);
  --gate-error-txt: #f87171;

  --nav-title:      #f4f4f5;
  --nav-sub:        #71717a;
  --nav-icon:       #a1a1aa;
  --nav-icon-bg:    rgba(255,255,255,0.07);
  --nav-link:       #a1a1aa;
  --nav-link-bg:    rgba(255,255,255,0.05);
  --nav-link-hover: rgba(255,255,255,0.09);
  --nav-user-bg:    rgba(99,102,241,0.15);
  --nav-user-txt:   #a5b4fc;
  --nav-ganti-bg:   rgba(255,255,255,0.05);
  --nav-ganti-txt:  #a1a1aa;
  --nav-ganti-hov:  rgba(255,255,255,0.09);
  --nav-theme-bg:   rgba(255,255,255,0.05);
  --nav-theme-hov:  rgba(255,255,255,0.09);
  --nav-theme-txt:  #a1a1aa;

  --heading-main:   #f4f4f5;
  --body-text:      #a1a1aa;
  --badge-online-bg: rgba(255,255,255,0.05);
  --badge-online-bd: rgba(255,255,255,0.09);
  --badge-online-txt: #d4d4d8;
  --intro-gradient: linear-gradient(to bottom, rgba(99,102,241,0.08), rgba(9,9,11,0.5), rgba(9,9,11,1));
  --btn-primary-bg:  #4f46e5;
  --btn-primary-txt: #ffffff;
  --btn-secondary-bg: rgba(255,255,255,0.05);
  --btn-secondary-bd: rgba(255,255,255,0.09);
  --btn-secondary-txt: #a1a1aa;
  --feature-bg:    rgba(255,255,255,0.04);
  --feature-bd:    rgba(255,255,255,0.07);
  --feature-label: #52525b;
  --feature-value: #d4d4d8;
  --hero-overlay:  linear-gradient(to right, rgba(9,9,11,0.88), rgba(9,9,11,0.45), rgba(9,9,11,0.1));
  --hero-badge-bg: rgba(255,255,255,0.07);
  --hero-badge-bd: rgba(255,255,255,0.12);

  --cat-btn-bg:     rgba(255,255,255,0.04);
  --cat-btn-hov:    rgba(255,255,255,0.08);
  --cat-btn-txt:    #a1a1aa;
  --cat-active-bg:  rgba(99,102,241,0.18);
  --cat-active-bd:  rgba(99,102,241,0.35);
  --cat-active-txt: #a5b4fc;

  --payment-bd:     rgba(255,255,255,0.09);
  --payment-icon-bg: rgba(255,255,255,0.05);
  --payment-icon:   #a1a1aa;

  --footer-bg:      rgba(9,9,11,0.6);
  --footer-bd:      rgba(255,255,255,0.07);

  --modal-card-bg:   rgba(24,24,27,0.97);
  --modal-header-bg: rgba(24,24,27,0.92);
  --modal-bd:        rgba(255,255,255,0.08);
  --modal-subtitle:  #71717a;
  --modal-close-bg:  rgba(255,255,255,0.07);
  --modal-close-hov: rgba(255,255,255,0.12);
  --modal-close-txt: #a1a1aa;
  --modal-summary-bg: rgba(99,102,241,0.06);
  --modal-pstring-bg: rgba(255,255,255,0.03);
  --drag-handle:     rgba(255,255,255,0.15);
  --qr-frame-bg:     #ffffff;
  --qr-frame-bd:     rgba(255,255,255,0.1);
  --skeleton-icon:   rgba(99,102,241,0.12);
  --modal-btn-sec-bg:  rgba(255,255,255,0.06);
  --modal-btn-sec-bd:  rgba(255,255,255,0.09);
  --modal-btn-sec-txt: #a1a1aa;
  --modal-btn-sec-hov: rgba(255,255,255,0.1);
  --modal-btn-cancel:  #71717a;
  --modal-btn-can-hov: #f87171;
  --modal-btn-can-bd:  rgba(255,255,255,0.07);
  --modal-btn-can-bhov: rgba(248,113,113,0.1);
  --success-bg:     rgba(16,185,129,0.07);
  --success-bd:     rgba(16,185,129,0.2);
  --success-icon-bg: rgba(16,185,129,0.12);

  --shimmer-from:  rgba(255,255,255,0.04);
  --shimmer-mid:   rgba(255,255,255,0.10);
}

/* -- Base ---------------------------------------------------------------------- */
*, *::before, *::after {
  transition: background-color .28s ease, border-color .28s ease, color .22s ease, box-shadow .22s ease;
}
img, svg, canvas, [class*="animate-"], #timerFill { transition: none !important; }

html, body { background-color: var(--bg-base); color: var(--text-primary); }

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.font-display, h1, h2, h3 {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

/* -- Grid background ----------------------------------------------------------- */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* -- Glass --------------------------------------------------------------------- */
.glass {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* -- CSS Variable classes ------------------------------------------------------ */
/* Gate */
.gate-bg      { background: var(--gate-bg); }
.gate-card    { background: var(--gate-bg); border: 1px solid var(--gate-border); }
.gate-title   { color: var(--gate-title); }
.gate-subtitle{ color: var(--gate-subtitle); }
.gate-label   { color: var(--gate-label); }
.gate-input   { background: var(--gate-input-bg); border: 1px solid var(--gate-input-bd); color: var(--gate-input-txt); }
.gate-input::placeholder { color: var(--gate-hint); opacity: 1; }
.gate-input:focus { border-color: var(--gate-icon); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.gate-input-icon { color: var(--gate-hint); }
.gate-icon    { color: var(--gate-icon); }
.gate-icon-wrap { background: var(--gate-icon-bg); border: 1px solid rgba(99,102,241,0.15); }
.gate-hint    { color: var(--gate-hint); }
.gate-btn     { background: var(--btn-primary-bg); color: var(--btn-primary-txt); }
.gate-btn:hover { filter: brightness(1.08); }
.gate-error   { background: var(--gate-error-bg); border: 1px solid var(--gate-error-bd); color: var(--gate-error-txt); }

/* Nav */
.nav-title    { color: var(--nav-title); }
.nav-sub      { color: var(--nav-sub); }
.nav-icon     { color: var(--nav-icon); }
.nav-icon-bg  { background: var(--nav-icon-bg); border: 1px solid var(--border-glass); }
.nav-link     { color: var(--nav-link); background: var(--nav-link-bg); border: 1px solid var(--border-glass); }
.nav-link:hover { background: var(--nav-link-hover); }
.nav-user-badge { background: var(--nav-user-bg); color: var(--nav-user-txt); }
.nav-btn-ganti  { background: var(--nav-ganti-bg); color: var(--nav-ganti-txt); border: 1px solid var(--border-glass); }
.nav-btn-ganti:hover { background: var(--nav-ganti-hov); }
.nav-theme-btn  { background: var(--nav-theme-bg); color: var(--nav-theme-txt); border: 1px solid var(--border-glass); }
.nav-theme-btn:hover { background: var(--nav-theme-hov); }

/* Content */
.heading-main  { color: var(--heading-main); }
.body-text     { color: var(--body-text); }
.intro-gradient { background: var(--intro-gradient); }
.badge-online  { background: var(--badge-online-bg); border: 1px solid var(--badge-online-bd); color: var(--badge-online-txt); }
.btn-primary   { background: var(--btn-primary-bg); color: var(--btn-primary-txt); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--btn-secondary-bg); border: 1px solid var(--btn-secondary-bd); color: var(--btn-secondary-txt); }
.btn-secondary:hover { background: var(--btn-secondary-bg); filter: brightness(0.9); }
.feature-card  { background: var(--feature-bg); border: 1px solid var(--feature-bd); }
.feature-label { color: var(--feature-label); }
.feature-value { color: var(--feature-value); }
.hero-overlay  { background: var(--hero-overlay); }
.hero-badge    { background: var(--hero-badge-bg); border: 1px solid var(--hero-badge-bd); color: #d4d4d8; }

/* Category tabs */
.cat-btn-default { background: var(--cat-btn-bg); color: var(--cat-btn-txt); }
.cat-btn-default:hover { background: var(--cat-btn-hov); }
.catBtn.active { background: var(--cat-active-bg) !important; border-color: var(--cat-active-bd) !important; color: var(--cat-active-txt) !important; }

/* Payment section */
.payment-section-border { border: 1px solid var(--payment-bd); }
.payment-icon-bg { background: var(--payment-icon-bg); border: 1px solid var(--payment-bd); }
.payment-icon { color: var(--payment-icon); }

/* Footer */
.footer-bg  { background: var(--footer-bg); }
.footer-border { border-top: 1px solid var(--footer-bd); }

/* Modal */
.modal-card       { background: var(--modal-card-bg); }
.modal-header-bg  { background: var(--modal-header-bg); }
.modal-border     { border-color: var(--modal-bd); }
.modal-subtitle   { color: var(--modal-subtitle); }
.modal-close-btn  { background: var(--modal-close-bg); color: var(--modal-close-txt); }
.modal-close-btn:hover { background: var(--modal-close-hov); }
.modal-summary-bg { background: var(--modal-summary-bg); }
.payment-string-bg { background: var(--modal-pstring-bg); }
.drag-handle  { background: var(--drag-handle); }
.qr-frame     { background: var(--qr-frame-bg); border: 1px solid var(--qr-frame-bd); }
.skeleton-icon { background: var(--skeleton-icon); }
.modal-btn-secondary { background: var(--modal-btn-sec-bg); border: 1px solid var(--modal-btn-sec-bd); color: var(--modal-btn-sec-txt); }
.modal-btn-secondary:hover { background: var(--modal-btn-sec-hov); }
.modal-btn-cancel { color: var(--modal-btn-cancel); border: 1px solid var(--modal-btn-can-bd); }
.modal-btn-cancel:hover { color: var(--modal-btn-can-hov); background: var(--modal-btn-can-bhov); border-color: rgba(239,68,68,0.2); }
.success-bg   { background: var(--success-bg); }
.success-border { border: 1px solid var(--success-bd); }
.success-icon-bg { background: var(--success-icon-bg); }

/* -- Shimmer ------------------------------------------------------------------- */
.shimmer {
  background: linear-gradient(90deg,
    var(--shimmer-from) 25%,
    var(--shimmer-mid)  50%,
    var(--shimmer-from) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* -- QR Pulse ------------------------------------------------------------------ */
.qr-pulse-wrap { position: relative; display: inline-block; isolation: isolate; }
.qr-pulse-wrap::before, .qr-pulse-wrap::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1.5px solid rgba(99,102,241,0.3);
  animation: qrRing 2.6s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
.qr-pulse-wrap::after { animation-delay: 1.3s; border-color: rgba(99,102,241,0.15); }
@keyframes qrRing {
  0%   { transform: scale(0.96); opacity: 0.8; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* -- Payment Modal animation --------------------------------------------------- */
#payModal { opacity: 0; pointer-events: none; transition: opacity .22s ease !important; }
#payModal.open { opacity: 1; pointer-events: auto; }
#payModalCard {
  transform: translateY(32px);
  transition: transform .32s cubic-bezier(0.16,1,0.3,1) !important;
  will-change: transform;
}
#payModal.open #payModalCard { transform: translateY(0); }

/* -- Gate animation ------------------------------------------------------------ */
#gateOverlay { transition: opacity .3s ease !important; }
#gateOverlay.hiding { opacity: 0; pointer-events: none; }

/* -- Toast --------------------------------------------------------------------- */
.toast-enter { animation: toastIn .28s cubic-bezier(0.16,1,0.3,1); }
@keyframes toastIn {
  from { transform: translateX(24px) scale(0.95); opacity: 0; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}

/* -- Success ------------------------------------------------------------------- */
.success-pop { animation: successPop .42s cubic-bezier(0.16,1,0.3,1); }
@keyframes successPop {
  0%  { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.06); }
  100%{ transform: scale(1);   opacity: 1; }
}

/* -- Cancel confirm overlay --------------------------------------------------- */
#cancelConfirmBox { animation: slideUpBox .22s cubic-bezier(0.16,1,0.3,1); }
@keyframes slideUpBox {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* -- Misc ---------------------------------------------------------------------- */
:focus-visible { outline: 2px solid rgba(99,102,241,0.75); outline-offset: 2px; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Nav user pill -- klik untuk edit username/email */
.nav-user-pill {
  background: var(--nav-user-bg);
  color: var(--nav-user-txt);
  border: 1px solid rgba(99,102,241,0.2);
}
.nav-user-pill:hover {
  background: var(--cat-active-bg);
  border-color: rgba(99,102,241,0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}

/* Category sticky bar -- solid background agar tidak tembus */
.cat-sticky-wrap {
  background: var(--bg-base);
  padding-top: 8px;
}
.dark .cat-sticky-wrap {
  background: var(--bg-base);
}

/* Intro button edit -- update label setelah user login */
#introBtnLabel { }