/* Tambahan kecil di luar Tailwind */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --nav-hover: rgba(148,163,184,.12); --nav-active: rgba(59,98,255,.14); }
.backdrop { backdrop-filter: blur(8px); }
.scrollbar-thin { scrollbar-width: thin; }
.scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 8px; }
.hover-lift { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.mask-screen { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-out); }
.mask-screen.show { opacity: 1; pointer-events: auto; }
.page.hidden { display: none; }

/* Drawer polish */
#left-drawer { background: #ffffff; } /* LIGHT mode default */
.dark #left-drawer { background-image: linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.96)); background-color: transparent; }

#left-drawer .nav-btn, #left-drawer .label-btn, #left-drawer [data-nav], #left-drawer #drawer-cart {
  position: relative; border-radius: 12px; transition: background-color .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out);
}
#left-drawer .nav-btn:hover, #left-drawer .label-btn:hover, #left-drawer [data-nav]:hover, #left-drawer #drawer-cart:hover {
  background: var(--nav-hover);
}
#left-drawer .is-active { background: var(--nav-active); outline: 1px solid rgba(99,102,241,.25); }
#left-drawer .is-active::after { content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:999px; background: currentColor; opacity:.85; }

/* Disclosure chevron */
.disclosure[aria-expanded="true"] .chev { transform: rotate(180deg); }
.chev { transition: transform .2s var(--ease-out); }

/* Label list dots + active state */
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; background: currentColor; opacity:.7 }
.label-btn.is-active { background: var(--nav-active); color: #fff; }

/* Subtle separators spacing */
#left-drawer .divider { margin: .5rem 0; border-color: rgba(148,163,184,.18); }

/* Back to top */
#btn-top { transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); opacity:.9 }
#btn-top.hidden { opacity:0; pointer-events:none; transform: translateY(8px); }

/* Payments marquee */
.marquee { overflow: hidden; position: relative; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 18s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; }
.pay-card { flex:0 0 auto; min-width: 170px; height: 74px; border-radius: 14px;
  display:grid; place-items:center; padding:0 16px;
  background: rgba(148,163,184,.12); border: 1px solid rgba(148,163,184,.22); }
.pay-card img { max-height: 42px; max-width: 100%; object-fit: contain; filter: none; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Auth look */
.auth-card { box-shadow: 0 8px 32px rgba(2,6,23,.28); }
.inp { width:100%; padding:.65rem .9rem; border-radius: .8rem;
  border:1px solid rgba(148,163,184,.28); background: transparent; }
.inp:focus { outline: none; border-color: rgba(59,98,255,.6); box-shadow: 0 0 0 3px rgba(59,98,255,.15); }
.btn-primary { padding:.65rem .9rem; border-radius:.8rem; background:#3b62ff; color:#fff; }
.btn-primary:hover { filter: brightness(0.95); }
.btn-google { padding:.65rem .9rem; border-radius:.8rem; background:#fff; color:#0f172a;
  border:1px solid rgba(148,163,184,.35); }
.btn-google:hover { background:#f8fafc; }
.divider { position:relative; text-align:center; color:#94a3b8; font-size:.75rem; }
.divider::before,.divider::after{ content:\"\"; position:absolute; top:50%; width:40%; height:1px;
  background: rgba(148,163,184,.25); }
.divider::before{ left:0 } .divider::after{ right:0 }
.divider span{ background:transparent; padding:0 .5rem }

/* auth polish */
.auth-card { box-shadow: 0 10px 36px rgba(2,6,23,.18); }
.inp { width:100%; padding:.7rem .95rem; border-radius: .9rem;
  border:1px solid rgba(148,163,184,.32); background: transparent; }
.inp:focus { outline: none; border-color: rgba(59,98,255,.6);
  box-shadow: 0 0 0 4px rgba(59,98,255,.15); }
.btn-primary { padding:.7rem .95rem; border-radius:.9rem; background:#3b62ff; color:#fff; }
.btn-primary:hover { filter: brightness(0.96); }
.btn-google { padding:.7rem .95rem; border-radius:.9rem; background:#fff; color:#0f172a;
  border:1px solid rgba(148,163,184,.35); display:flex; align-items:center; gap:.5rem; justify-content:center; }
.btn-google:hover { background:#f8fafc; }

/* progress scroll button */
.progress-btn{
  --p: 0; /* 0..100 diisi dari JS */
  width: 48px; height: 48px; border-radius: 999px;
  display:grid; place-items:center; background: transparent;
  position: fixed; box-shadow: 0 10px 30px rgba(2,6,23,.18);
}
.progress-btn::before{ /* ring dasar abu */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: conic-gradient(#e2e8f0 0%, #e2e8f0 100%);
  -webkit-mask: radial-gradient(circle 18px, transparent 18px, #000 19px);
          mask: radial-gradient(circle 18px, transparent 18px, #000 19px);
}
.progress-btn::after{ /* ring progress */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: conic-gradient(#3b62ff calc(var(--p)*1%), transparent 0);
  -webkit-mask: radial-gradient(circle 18px, transparent 18px, #000 19px);
          mask: radial-gradient(circle 18px, transparent 18px, #000 19px);
}
.progress-btn .arrow{
  width: 28px; height: 28px; border-radius: 999px;
  background: #fff; color:#0f172a; display:grid; place-items:center;
  font-size: 14px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(148,163,184,.35);
}
.dark .progress-btn .arrow{ background:#0b1220; color:#e5e7eb; box-shadow: inset 0 0 0 1px rgba(148,163,184,.3); }
.progress-btn.hidden{ opacity:0; pointer-events:none; transform: translateY(8px); transition: .2s ease-out; }
.progress-btn{ opacity:1; transform: translateY(0); transition:.2s ease-out; }

/* Avatar button + dropdown */
.avatar-btn{ display:grid; place-items:center; width:38px; height:38px; border-radius:999px; font-weight:600; }
.avatar-photo{ width:38px; height:38px; border-radius:999px; object-fit:cover; display:block; }
.menu-card{
  position:absolute; top:100%; right:0; margin-top:.5rem; width:220px;
  background: #fff; color:#0f172a; border:1px solid rgba(148,163,184,.25);
  border-radius:14px; box-shadow: 0 12px 36px rgba(2,6,23,.18); padding:.5rem;
}
.dark .menu-card{ background:#0b1220; color:#e5e7eb; border-color: rgba(148,163,184,.22); }
.menu-item{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:.65rem; }
.menu-item:hover{ background: rgba(148,163,184,.12); }
.menu-header{ padding:.6rem .7rem .45rem; border-bottom:1px solid rgba(148,163,184,.2); margin-bottom:.35rem; }

#toast-root{position:fixed;right:18px;bottom:18px;display:grid;gap:.5rem;z-index:9999}
.toast{
  min-width:260px; max-width:360px; padding:.75rem .9rem; border-radius:14px;
  background:#0b1220; color:#e5e7eb; box-shadow:0 10px 30px rgba(2,6,23,.2);
  border:1px solid rgba(148,163,184,.22); font-size:.95rem
}
.toast.success{background:#0b2012}
.toast.error{background:#200b0b}
.toast.info{background:#0b1320}
.toast .title{font-weight:600; margin-bottom:.15rem}

/* Pengaturan Akun – form sizing */
#page-pengaturan .inp{
  width:100%;
  height:44px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:12px;
  padding:10px 12px;
}
#page-pengaturan .inp:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
  border-color: rgba(59,130,246,.55);
}
#page-pengaturan #avatar-preview{
  width:56px; height:56px; border-radius:999px;
  display:grid; place-items:center;
  background: #e5e7eb; color:#0f172a;
  overflow:hidden;
}
#page-pengaturan #avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
#page-pengaturan #avatar-file{ display:block; font-size:12px; }
#page-pengaturan .btn-primary{ height:40px; }

.verify-badge {
  width: 18px;
  height: 18px;
  margin-left: 6px;
  vertical-align: -3px; /* biar sejajar dengan teks */
}

/* ===== Locked vs editable fields ===== */
.inp[disabled], .inp:disabled {
  background-color: #f1f5f9;      /* slate-100 */
  color: #64748b;                  /* slate-500 */
  cursor: not-allowed;
  opacity: 1;                      /* jangan pudar */
  border-color: #e2e8f0;           /* slate-200 */
}
html.dark .inp[disabled], html.dark .inp:disabled {
  background-color: #0f172a;       /* slate-900 */
  color: #94a3b8;                  /* slate-400 */
  border-color: #1f2937;           /* slate-800-ish */
}

/* biar semua .inp konsisten ukuran dan fokus */
.inp {
  width: 100%;
  padding: .625rem .875rem;
  border-radius: .75rem;
  border: 1px solid rgba(100,116,139,.35);
  background: white;
}
html.dark .inp { background: rgba(2,6,23,.6); }
.inp:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,98,255,.15);
  border-color: #3b62ff;
}

/* ===== Avatar presets ===== */
#avatar-presets button {
  position: relative;
  border-radius: .75rem;
  overflow: hidden;
}
#avatar-presets button[data-selected="1"] {
  border-color: #3b62ff !important;
  box-shadow: 0 0 0 3px rgba(59,98,255,.2);
}
#avatar-presets button[data-selected="1"]::after {
  content: "✓";
  position: absolute; top: 6px; right: 6px;
  width: 18px; height: 18px; border-radius: 999px;
  font-size: 12px; line-height: 18px; text-align: center;
  background: #3b62ff; color: #fff;
}

/* === Loading state & spinner untuk button === */
.btn.is-loading,
button.is-loading {
  pointer-events: none;
  opacity: 0.85;
  position: relative;
}
.btn.is-loading::after,
button.is-loading::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* === Wiggle animasi sesekali untuk tombol Masuk === */
@keyframes wiggle {
  0%,100% { transform: translateX(0) }
  15% { transform: translateX(-2px) }
  30% { transform: translateX(2px) }
  45% { transform: translateX(-2px) }
  60% { transform: translateX(2px) }
}
.wiggle {
  animation: wiggle 0.6s ease;
}

/* === Overlay logout animasi === */
#logout-overlay {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.6);
  color: #fff; font-weight: 600;
  z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#logout-overlay.show {
  opacity: 1; pointer-events: auto;
}

@keyframes pulse-add {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 98, 255, 0.4); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(59, 98, 255, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 98, 255, 0); }
}

/* Terapkan pada tombol 'Beli' (data-add) */
button.pulse-add {
  animation: pulse-add 0.6s ease-out;
  /* Agar animasi box-shadow terlihat */
  box-shadow: 0 0 0 0 rgba(59, 98, 255, 0); 
}