/* =====================================================================
   DIGIMEMBER — Design System v1.2 (Neo-Bento Minimalist)
   Token & komponen dasar bersama: landing page + dashboard
   ===================================================================== */
:root {
  --bg-frame:#DFE3EB; --bg-canvas:#F3F5F9; --surface:#FFFFFF; --surface-muted:#F1F3F7; --border:#E3E7EE;
  --lime:#D8FF3E; --lime-soft:#F2FFC2; --ink:#0B0B0F; --ink-2:#1B1B22; --blue:#4E95F8; --bar:#66A3FB; --bar-active:#1B6EF3;
  --navy:#101B3B; --text:#1E2A4A; --muted:#8B93A7; --muted-2:#B4BACA;
  --success:#22A55B; --success-soft:#E9F9EE; --danger:#E5484D; --danger-soft:#FDECEC; --warning:#F59E0B; --warning-soft:#FFF5E0;
  --blue-soft:#E8F1FF;
  --radius-card:24px; --radius-inner:16px; --radius-pill:9999px;
  --shadow-float:0 8px 24px rgba(16,27,59,.08); --shadow-modal:0 20px 60px rgba(16,27,59,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); font-size:14px; line-height:1.5; color:var(--text); background:var(--bg-canvas);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input, select, textarea { font:inherit; color:inherit; }
h1,h2,h3,h4 { margin:0; color:var(--navy); line-height:1.2; letter-spacing:-.01em; }
p { margin:0; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
[hidden] { display:none !important; }
.sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--muted); }
.ic { width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle; stroke-width:1.75; }
.ic-sm { width:16px; height:16px; } .ic-xs { width:14px; height:14px; } .ic-lg { width:24px; height:24px; }
.num-dim { color:var(--muted); font-weight:500; }
.nowrap { white-space:nowrap; }

/* ---------- Logo ---------- */
.logo { display:inline-flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); letter-spacing:-.02em; font-size:18px; }
.logo-mark { width:36px; height:36px; border-radius:12px; background:var(--lime); color:var(--ink); display:grid; place-items:center;
  font-weight:800; font-size:16px; flex:none; overflow:hidden; }
.logo-mark img { width:100%; height:100%; object-fit:cover; }
.logo small { display:block; font-size:12px; font-weight:500; color:var(--muted); letter-spacing:0; }

/* ---------- Tombol ---------- */
.btn { --h:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--h); padding:0 22px;
  border-radius:var(--radius-pill); font-weight:600; font-size:14px; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .15s var(--ease), background-color .2s, box-shadow .25s, color .2s, opacity .2s; user-select:none; }
.btn:active:not(:disabled) { transform:scale(.97); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-ink { background:var(--ink); color:#fff; }
.btn-ink:hover:not(:disabled) { background:#25252d; }
.btn-lime { background:var(--lime); color:var(--ink); }
.btn-lime:hover:not(:disabled) { background:#cdf52f; }
.btn-outline { background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--border); }
.btn-outline:hover:not(:disabled) { box-shadow:inset 0 0 0 1px #c9cfdb; background:#fafbfd; }
.btn-soft { background:var(--surface-muted); color:var(--ink); }
.btn-soft:hover:not(:disabled) { background:#e8ebf1; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger-soft { background:var(--danger-soft); color:var(--danger); }
.btn-ghost { background:transparent; color:var(--text); padding:0 12px; }
.btn-sm { --h:36px; padding:0 14px; font-size:13px; }
.btn-xs { --h:30px; padding:0 12px; font-size:12px; }
.btn-lg { --h:52px; padding:0 28px; font-size:15px; }
.btn-block { width:100%; }
.btn-icon { width:40px; height:40px; padding:0; border-radius:50%; display:inline-grid; place-items:center; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border); color:var(--navy); transition:transform .15s var(--ease), background .2s; flex:none; position:relative; }
.btn-icon:hover { background:var(--surface-muted); }
.btn-icon:active { transform:scale(.94); }
.btn-icon.dark { background:var(--ink); color:#fff; box-shadow:none; }
.btn-icon.muted-bg { background:var(--surface-muted); box-shadow:none; }
.btn-icon.sm { width:32px; height:32px; }
.btn-sq { width:48px; height:44px; border-radius:var(--radius-inner); background:var(--surface-muted); display:grid; place-items:center; color:var(--navy);
  transition:background .2s, transform .15s; }
.btn-sq:hover { background:#e6e9f0; } .btn-sq:active { transform:scale(.95); }
.dot-badge::after { content:''; position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px #fff; }

.spinner { width:18px; height:18px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; flex:none; opacity:.9; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Kartu ---------- */
.card { background:var(--surface); border-radius:var(--radius-card); padding:24px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.card-title { font-size:18px; font-weight:600; color:var(--navy); }
.card-sub { font-size:13px; color:var(--muted); margin-top:2px; }
.inner { background:var(--surface-muted); border-radius:var(--radius-inner); padding:16px; }

/* ---------- Badge / chip ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:600; white-space:nowrap; line-height:1; }
.badge-lime { background:var(--lime); color:var(--ink); }
.badge-ink { background:var(--ink); color:#fff; }
.badge-muted { background:var(--surface-muted); color:var(--text); }
.badge-outline { background:#fff; color:var(--text); box-shadow:inset 0 0 0 1px var(--border); }
.badge-success { background:var(--success-soft); color:var(--success); }
.badge-danger { background:var(--danger-soft); color:var(--danger); }
.badge-warning { background:var(--warning-soft); color:#B45309; }
.badge-blue { background:var(--blue-soft); color:#1B6EF3; }
.badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.dot-live { width:8px; height:8px; border-radius:50%; background:var(--lime); display:inline-block; flex:none; }
.dot-live.green { background:var(--success); } .dot-live.red { background:var(--danger); } .dot-live.amber { background:var(--warning); } .dot-live.ink { background:var(--ink); }

/* ---------- Form ---------- */
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.field-label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:14px; font-weight:600; color:var(--navy); }
.field-label .hint { font-size:12px; font-weight:500; color:var(--muted); }
.field-label .hint.ok { color:var(--success); } .field-label .hint.err { color:var(--danger); }
.field-help { font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:flex-start; }
.field-err { font-size:12px; color:var(--danger); display:flex; gap:6px; align-items:flex-start; }
.input, .select, .textarea { width:100%; height:48px; border-radius:var(--radius-inner); background:var(--surface-muted); border:1px solid transparent;
  padding:0 16px; font-size:14px; font-weight:500; color:var(--text); transition:box-shadow .15s, background .15s, border-color .15s; outline:none; }
.textarea { height:auto; min-height:96px; padding:12px 16px; resize:vertical; line-height:1.55; }
.input::placeholder, .textarea::placeholder { color:var(--muted); font-weight:500; }
.input:focus, .select:focus, .textarea:focus { background:#fff; box-shadow:0 0 0 2px var(--ink); }
.input.is-err, .textarea.is-err { background:#FFF5F5; border-color:var(--danger); box-shadow:0 0 0 1px var(--danger); }
.select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B93A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap > .ic { position:absolute; left:16px; color:var(--muted); pointer-events:none; }
.input-wrap > .input { padding-left:46px; }
.input-wrap .suffix { position:absolute; right:14px; color:var(--danger); display:flex; }
.input-prefix { position:absolute; left:46px; font-weight:600; color:var(--navy); font-size:14px; padding-right:12px; border-right:1px solid var(--border); line-height:20px; }
.input-wrap.has-prefix > .input { padding-left:108px; }
.check { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; }
.check input { width:18px; height:18px; accent-color:var(--ink); cursor:pointer; }

/* ---------- Segmented & switch ---------- */
.seg { display:inline-flex; background:var(--surface-muted); border-radius:var(--radius-pill); padding:4px; gap:2px; }
.seg button { height:32px; padding:0 14px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; color:var(--muted); transition:background .2s, color .2s; }
.seg button.on { background:var(--blue); color:#fff; }
.seg.ink button.on { background:var(--ink); color:#fff; }
.switch { position:relative; width:52px; height:30px; flex:none; display:inline-block; }
.switch input { opacity:0; width:0; height:0; position:absolute; }
.switch .track { position:absolute; inset:0; border-radius:99px; background:#DDE1E9; transition:background .2s; cursor:pointer; }
.switch .track::after { content:''; position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .22s var(--ease), background .2s; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.switch input:checked + .track { background:var(--ink); }
.switch input:checked + .track::after { transform:translateX(22px); background:var(--lime); }
.switch input:disabled + .track { opacity:.45; cursor:not-allowed; }
.switch input:focus-visible + .track { outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- Avatar ---------- */
.avatar { width:32px; height:32px; border-radius:50%; background:var(--surface-muted); color:var(--navy); display:inline-grid; place-items:center;
  font-size:12px; font-weight:700; flex:none; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar.lime { background:var(--lime); color:var(--ink); }
.avatar.ink { background:var(--ink); color:#fff; }
.avatar.lg { width:44px; height:44px; font-size:15px; }
.avatar-group { display:inline-flex; align-items:center; }
.avatar-group .avatar { box-shadow:0 0 0 2px #fff; margin-left:-10px; }
.avatar-group .avatar:first-child { margin-left:0; }

/* ---------- Overlay: modal, sheet, drawer ---------- */
.overlay { position:fixed; inset:0; z-index:900; background:rgba(16,27,59,.38); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .22s var(--ease); }
.overlay.show { opacity:1; }
.modal { background:var(--surface); border-radius:var(--radius-card); width:100%; max-width:440px; max-height:calc(100vh - 40px); overflow:auto;
  box-shadow:var(--shadow-modal); padding:28px; position:relative; transform:translateY(14px) scale(.98); transition:transform .28s var(--ease); overscroll-behavior:contain; }
.overlay.show .modal { transform:none; }
.modal-close { position:absolute; top:20px; right:20px; z-index:2; }
.modal-lg { max-width:720px; } .modal-md { max-width:560px; }
.drawer-overlay { justify-content:flex-end; padding:12px; }
.drawer { background:var(--surface); border-radius:var(--radius-card); width:100%; max-width:480px; height:100%; overflow:auto; padding:28px;
  box-shadow:var(--shadow-modal); transform:translateX(30px); transition:transform .28s var(--ease); }
.overlay.show .drawer { transform:none; }
body.no-scroll { overflow:hidden; }
@media (max-width:640px) {
  .overlay.sheet-mobile { align-items:flex-end; padding:0; }
  .overlay.sheet-mobile .modal { max-width:100%; border-radius:28px 28px 0 0; max-height:92vh; padding:24px 20px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform .32s var(--ease); }
  .overlay.sheet-mobile.show .modal { transform:none; }
  .overlay.sheet-mobile .modal::before { content:''; display:block; width:44px; height:5px; border-radius:99px; background:#D9DDE5; margin:-8px auto 14px; }
  .drawer-overlay { padding:0; }
  .drawer { max-width:100%; border-radius:0; }
}

/* ---------- Toast ---------- */
.toast-wrap { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - 32px); }
.toast { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--radius-pill); background:var(--lime); color:var(--ink); font-weight:600; font-size:14px;
  box-shadow:0 10px 30px rgba(16,27,59,.15); animation:toastIn .3s var(--ease); pointer-events:auto; }
.toast.err { background:#FDECEC; color:#9F1D21; }
.toast.info { background:var(--ink); color:#fff; }
.toast.hide { animation:toastOut .25s var(--ease) forwards; }
@keyframes toastIn { from { opacity:0; transform:translateY(-12px) scale(.96); } }
@keyframes toastOut { to { opacity:0; transform:translateY(-10px); } }

/* ---------- Skeleton ---------- */
.skel { background:linear-gradient(90deg, #EEF0F5 0%, #F7F8FB 50%, #EEF0F5 100%); background-size:200% 100%; animation:skel 1.4s ease-in-out infinite; border-radius:var(--radius-inner); }
@keyframes skel { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---------- Tabel ---------- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.table th { text-align:left; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:12px 12px; white-space:nowrap; }
.table td { padding:12px; vertical-align:middle; height:56px; }
.table tbody tr { transition:background .15s; }
.table tbody tr:hover td, .table tbody tr.sel td { background:var(--surface-muted); }
.table tbody tr td:first-child { border-radius:14px 0 0 14px; } .table tbody tr td:last-child { border-radius:0 14px 14px 0; }

.empty { text-align:center; padding:40px 20px; color:var(--muted); }
.empty .empty-ic { width:72px; height:72px; border-radius:50%; background:#fff; display:grid; place-items:center; margin:0 auto 14px; color:var(--navy); box-shadow:inset 0 0 0 1px var(--border); }
.empty h4 { font-size:18px; margin-bottom:6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
.ic.fill { fill:currentColor; }