/* =====================================================================
   KANAYA - Tema modern (v2)
   Font: Plus Jakarta Sans (judul & isi). Mendukung mode terang & gelap.
   ===================================================================== */

/* ---------- Token warna ---------- */
:root, [data-bs-theme=light] {
  --brand: #1d8fd8;
  --brand-2: #8fd3fb;
  --brand-dark: #1576b8;
  --brand-soft: #e6f5ff;
  --on-grad: #0b3d63;
  --grad: linear-gradient(135deg, #c3eaff 0%, #8fd3fb 100%);
  --app-bg: #f2faff;
  --surface: #ffffff;
  --surface-2: #f1f9ff;
  --line: #d9ebf7;
  --ink: #0f2a40;
  --muted: #5d7a90;
  --shadow-sm: 0 1px 2px rgba(21, 26, 48, .04), 0 4px 16px rgba(56, 170, 240, .06);
  --shadow-md: 0 10px 34px rgba(56, 170, 240, .14);

  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-bg: #f2faff;
  --bs-body-color: #0f2a40;
  --bs-body-color-rgb: 15, 42, 64;
  --bs-border-color: #d9ebf7;
  --bs-secondary-color: #5d7a90;
  --bs-secondary-rgb: 93, 122, 144;
  --bs-primary: #1d8fd8;
  --bs-primary-rgb: 29, 143, 216;
  --bs-primary-bg-subtle: #e6f5ff;
  --bs-primary-border-subtle: #b9e0f8;
  --bs-primary-text-emphasis: #0b3d63;
  --bs-link-color: #1d8fd8;
  --bs-link-color-rgb: 29, 143, 216;
  --bs-link-hover-color: #1576b8;
  --bs-link-hover-color-rgb: 21, 118, 184;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
}
[data-bs-theme=dark] {
  --brand: #7cc9fb;
  --brand-dark: #a6dcfd;
  --brand-soft: rgba(124, 201, 251, .14);
  --app-bg: #0a1522;
  --surface: #101f31;
  --surface-2: #152a40;
  --line: #223a52;
  --ink: #e6f3fc;
  --muted: #8fb0c8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, .45);

  --bs-body-bg: #0a1522;
  --bs-body-color: #e6f3fc;
  --bs-body-color-rgb: 230, 243, 252;
  --bs-border-color: #223a52;
  --bs-secondary-color: #8fb0c8;
  --bs-secondary-rgb: 143, 176, 200;
  --bs-primary-bg-subtle: rgba(124, 201, 251, .16);
  --bs-primary-border-subtle: rgba(124, 201, 251, .35);
  --bs-primary-text-emphasis: #bfe5fd;
  --bs-link-color: #7cc9fb;
  --bs-link-color-rgb: 124, 201, 251;
  --bs-link-hover-color: #bfe5fd;
  --bs-link-hover-color-rgb: 191, 229, 253;
}

/* ---------- Dasar ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--bs-body-font-family); background: var(--app-bg); color: var(--ink); -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 800; letter-spacing: -.02em; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
a { text-decoration: none; }
::selection { background: rgba(56, 170, 240, .22); }
.text-primary { color: var(--brand) !important; }
.text-secondary { color: var(--muted) !important; }
.bg-primary-subtle { background: var(--brand-soft) !important; }

/* ---------- Tombol ---------- */
.btn { border-radius: 12px; font-weight: 600; padding: .55rem 1.05rem; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.btn:active { transform: scale(.97); }
.btn-sm { border-radius: 10px; padding: .35rem .7rem; }
.btn-lg { border-radius: 14px; padding: .8rem 1.5rem; }
.btn-primary { --bs-btn-color: #0b3d63; --bs-btn-hover-color: #0b3d63; --bs-btn-active-color: #0b3d63; --bs-btn-bg: var(--brand); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: transparent; background-image: var(--grad); border: 0; box-shadow: 0 6px 18px rgba(56, 170, 240, .32); color: var(--on-grad); }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(56, 170, 240, .42); transform: translateY(-1px); filter: brightness(1.03); color: var(--on-grad); }
.btn-primary:disabled { box-shadow: none; filter: grayscale(.3); opacity: .55; }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: rgba(56, 170, 240, .45); --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: #0b3d63; --bs-btn-active-bg: #c3eaff; --bs-btn-active-border-color: var(--brand); --bs-btn-active-color: #0b3d63; }
.btn-outline-secondary { --bs-btn-color: var(--muted); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--line); }
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--line); --bs-btn-color: var(--ink); --bs-btn-hover-color: var(--ink); }
.btn-icon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }

/* ---------- Form ---------- */
.form-label { font-weight: 600; font-size: .82rem; color: var(--ink); margin-bottom: .35rem; }
.form-control, .form-select, .input-group-text { border-radius: 12px; border-color: var(--line); background-color: var(--surface); color: var(--ink); padding: .6rem .85rem; font-size: .92rem; }
.form-control-sm, .form-select-sm { padding: .4rem .65rem; border-radius: 10px; font-size: .85rem; }
.input-group > .form-control, .input-group > .form-select { border-radius: 0 12px 12px 0; }
.input-group > .input-group-text:first-child { border-radius: 12px 0 0 12px; background: var(--surface-2); color: var(--muted); }
.input-group > .form-control:not(:last-child) { border-radius: 0; }
.input-group > .btn:last-child { border-radius: 0 12px 12px 0; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .22rem rgba(56, 170, 240, .16); background-color: var(--surface); color: var(--ink); }
.form-control::placeholder { color: #a3a9c3; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-text { color: var(--muted); }

/* ---------- Kartu ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); color: var(--ink); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--ink); }
.table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--surface-2); font-weight: 700; border-bottom: 0; white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem; }
.table thead th:first-child { border-radius: 10px 0 0 10px; }
.table thead th:last-child { border-radius: 0 10px 10px 0; }
.table > :not(caption) > * > * { padding: .8rem .75rem; }
.table-responsive { border-radius: 12px; }
.alert { border: 0; border-radius: 14px; font-weight: 500; box-shadow: var(--shadow-sm); }
.badge { font-weight: 700; border-radius: 999px; padding: .4em .75em; }
.dropdown-menu { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: .4rem; background: var(--surface); }
.dropdown-item { border-radius: 9px; padding: .5rem .7rem; font-weight: 500; font-size: .9rem; color: var(--ink); }
.dropdown-item:hover { background: var(--brand-soft); color: var(--brand); }
.dropdown-header { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.page-link { border-radius: 10px !important; margin: 0 2px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.page-item.active .page-link { background: var(--grad); border-color: transparent; color: var(--on-grad); }
.offcanvas { background: var(--surface); color: var(--ink); }

/* ---------- Pill status ---------- */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .72rem; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pill i { font-size: .8rem; }
.pill-lunas { background: #dcfce7; color: #15803d; }
.pill-dp { background: #fef3c7; color: #b45309; }
.pill-belum { background: #fee2e2; color: #b91c1c; }
.pill-batal { background: #e5e7eb; color: #4b5563; }
.pill-p-menunggu { background: #ffedd5; color: #c2410c; }
.pill-p-proses { background: #dbeafe; color: #1d4ed8; }
.pill-p-selesai { background: #ccfbf1; color: #0f766e; }
.pill-p-diambil { background: #ede9fe; color: #6d28d9; }
[data-bs-theme=dark] .pill-lunas { background: rgba(34, 197, 94, .16); color: #86efac; }
[data-bs-theme=dark] .pill-dp { background: rgba(245, 158, 11, .16); color: #fcd34d; }
[data-bs-theme=dark] .pill-belum { background: rgba(239, 68, 68, .16); color: #fca5a5; }
[data-bs-theme=dark] .pill-batal { background: rgba(156, 163, 175, .16); color: #d1d5db; }
[data-bs-theme=dark] .pill-p-menunggu { background: rgba(249, 115, 22, .16); color: #fdba74; }
[data-bs-theme=dark] .pill-p-proses { background: rgba(59, 130, 246, .16); color: #93c5fd; }
[data-bs-theme=dark] .pill-p-selesai { background: rgba(20, 184, 166, .16); color: #5eead4; }
[data-bs-theme=dark] .pill-p-diambil { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
.invoice-sheet .pill-lunas { background: #dcfce7; color: #15803d; }
.invoice-sheet .pill-dp { background: #fef3c7; color: #b45309; }
.invoice-sheet .pill-belum { background: #fee2e2; color: #b91c1c; }
.invoice-sheet .pill-batal { background: #e5e7eb; color: #4b5563; }
.invoice-sheet .pill-p-menunggu { background: #ffedd5; color: #c2410c; }
.invoice-sheet .pill-p-proses { background: #dbeafe; color: #1d4ed8; }
.invoice-sheet .pill-p-selesai { background: #ccfbf1; color: #0f766e; }
.invoice-sheet .pill-p-diambil { background: #ede9fe; color: #6d28d9; }
.pill-toggle { border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); cursor: pointer; }
.pill-toggle > i { font-size: .7rem; }
.pill-toggle:hover .pill { filter: brightness(.96); box-shadow: 0 0 0 2px rgba(56, 170, 240, .18); }

/* ---------- Tombol pilihan status (satu ketukan) ---------- */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 15px; }
.seg-btn { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: .78rem; padding: .5rem .85rem; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: all .18s; white-space: nowrap; cursor: pointer; font-family: inherit; }
.seg-btn i { font-size: .95rem; }
.seg-btn:hover:not(.active):not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.seg-btn:disabled { opacity: .5; cursor: not-allowed; }
.seg-btn.busy { opacity: .6; pointer-events: none; }
.seg-btn.active, .btn-check:checked + .seg-btn { color: #fff; transform: translateY(-1px); }
.seg-btn.active.s-menunggu, .btn-check:checked + .seg-btn.s-menunggu { background: #f97316; box-shadow: 0 5px 14px rgba(249, 115, 22, .4); }
.seg-btn.active.s-proses, .btn-check:checked + .seg-btn.s-proses { background: #3b82f6; box-shadow: 0 5px 14px rgba(59, 130, 246, .4); }
.seg-btn.active.s-selesai, .btn-check:checked + .seg-btn.s-selesai { background: #14b8a6; box-shadow: 0 5px 14px rgba(20, 184, 166, .4); }
.seg-btn.active.s-diambil, .btn-check:checked + .seg-btn.s-diambil { background: #8b5cf6; box-shadow: 0 5px 14px rgba(139, 92, 246, .4); }
.seg-btn.active.b-lunas, .btn-check:checked + .seg-btn.b-lunas { background: #16a34a; box-shadow: 0 5px 14px rgba(22, 163, 74, .4); }
.seg-btn.active.b-dp, .btn-check:checked + .seg-btn.b-dp { background: #f59e0b; box-shadow: 0 5px 14px rgba(245, 158, 11, .4); }
.seg-btn.active.b-belum, .btn-check:checked + .seg-btn.b-belum { background: #ef4444; box-shadow: 0 5px 14px rgba(239, 68, 68, .4); }
.seg-3 { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.seg-4 { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
@media (max-width: 575.98px) {
  .seg { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .seg.seg-3 { grid-template-columns: repeat(3, 1fr); }
  .seg-btn { flex-direction: column; gap: .15rem; padding: .5rem .2rem; font-size: .66rem; }
}

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; z-index: 2000; right: 16px; top: 76px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast-app { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-md); font-weight: 600; font-size: .88rem; transform: translateX(30px); opacity: 0; transition: all .3s; max-width: 340px; }
.toast-app.show { transform: none; opacity: 1; }
.toast-app.t-ok i { color: #16a34a; }
.toast-app.t-danger i { color: #ef4444; }
@media (max-width: 991.98px) { .toast-wrap { left: 12px; right: 12px; top: auto; bottom: 84px; align-items: center; } }
.row-hilang { opacity: 0; transform: scale(.97); transition: all .3s; }

/* ---------- Logo / merek ---------- */
.brand-logo { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; background: #fff; border: 1px solid var(--line); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.brand-logo.brand-fallback { background: var(--grad); color: var(--on-grad); border: 0; font-size: 1.15rem; box-shadow: 0 6px 16px rgba(56, 170, 240, .35); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: var(--on-grad); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; flex: none; }

/* =====================================================================
   HALAMAN PUBLIK
   ===================================================================== */
body.public { background: var(--app-bg); }
.navbar-app { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
.navbar-app .navbar-brand { display: flex; align-items: center; gap: .65rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.navbar-app .navbar-brand small { display: block; font-weight: 500; font-size: .62rem; color: var(--muted); letter-spacing: 0; line-height: 1; margin-top: 2px; }
.navbar-app .nav-link { font-weight: 600; color: var(--muted); border-radius: 10px; padding: .5rem .85rem !important; }
.navbar-app .nav-link:hover { color: var(--brand); background: var(--brand-soft); }
.navbar-app .nav-link.active { color: var(--brand); background: var(--brand-soft); }
.navbar-toggler { border: 1px solid var(--line); border-radius: 12px; }

.hero-pub { position: relative; overflow: hidden; padding: 72px 0 64px; background: radial-gradient(900px 420px at 85% -10%, rgba(143, 211, 251, .45), transparent 60%), radial-gradient(700px 380px at -5% 10%, rgba(195, 234, 255, .7), transparent 60%), radial-gradient(500px 300px at 60% 110%, rgba(167, 243, 208, .3), transparent 60%), var(--app-bg); }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--brand); box-shadow: var(--shadow-sm); }
.hero-title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-pub .lead { font-size: 1.08rem; max-width: 560px; }
.feature-card { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: var(--shadow-md); }
.feature-card li { display: flex; gap: .7rem; align-items: flex-start; padding: .45rem 0; font-weight: 500; font-size: .92rem; }
.feature-card li i { color: var(--on-grad); background: var(--grad); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; flex: none; margin-top: 1px; }
.stats-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.stat-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: .7rem 1.1rem; min-width: 112px; }
.stat-chip b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.stat-chip span { font-size: .74rem; color: var(--muted); font-weight: 600; }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 1.1rem; }
.section-head h2 { margin: 0; font-size: 1.35rem; }
.section-head p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }

.cat-card { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px 18px; height: 100%; transition: all .25s; }
.cat-card .ci { width: 48px; height: 48px; border-radius: 15px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: .8rem; transition: all .25s; }
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(56, 170, 240, .4); color: var(--ink); }
.cat-card:hover .ci { background: var(--grad); color: var(--on-grad); }
.produk-card { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); height: 100%; display: flex; flex-direction: column; transition: all .25s; text-decoration: none; color: var(--ink); }
.produk-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); border-color: rgba(56, 170, 240, .35); color: var(--ink); }
.produk-img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 2.8rem; overflow: hidden; }
.produk-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.produk-card:hover .produk-img img { transform: scale(1.06); }
.lock-price { font-size: .82rem; color: var(--muted); font-weight: 600; }
.spec-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; white-space: pre-line; font-size: .92rem; line-height: 1.7; }

.step-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; height: 100%; position: relative; }
.step-num { width: 38px; height: 38px; border-radius: 12px; background: var(--grad); color: var(--on-grad); font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: .8rem; box-shadow: 0 6px 16px rgba(56, 170, 240, .3); }
.cta-band { background: var(--grad); color: var(--on-grad); border-radius: 28px; padding: 40px 28px; position: relative; overflow: hidden; border: 0; }
.cta-band::before { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .45); right: -70px; top: -90px; }
.cta-band::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .35); left: -50px; bottom: -80px; }
.cta-band > * { position: relative; z-index: 1; }

.site-footer { background: #0e2236; color: #e8eafa; position: relative; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #8fd3fb, #5cc3fa, #a7f3d0); }
.site-footer a { color: #b9bfe6; }
.site-footer a:hover { color: #fff; }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 1030; width: 54px; height: 54px; border-radius: 50%; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 10px 28px rgba(34, 197, 94, .5); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); color: #fff; }

/* ---------- Halaman masuk / daftar ---------- */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--app-bg); }
.auth-side { background: radial-gradient(600px 400px at 90% 0%, rgba(255, 255, 255, .8), transparent 60%), linear-gradient(150deg, #dff3ff 0%, #b5e3fd 50%, #8fd3fb 100%); color: #0b3d63; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-side::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .5); right: -140px; bottom: -140px; }
.auth-side .brand-logo { width: 56px; height: 56px; border-radius: 16px; }
.auth-side h2 { font-size: 2rem; line-height: 1.15; letter-spacing: -.03em; }
.auth-side li { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; font-weight: 500; opacity: .95; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.auth-card { width: 100%; max-width: 430px; }
.auth-card .brand-logo { width: 56px; height: 56px; border-radius: 16px; }
@media (max-width: 991.98px) { .auth-shell { grid-template-columns: 1fr; } .auth-side { display: none; } }
.pw-toggle { border: 1px solid var(--line); border-left: 0; background: var(--surface); color: var(--muted); border-radius: 0 12px 12px 0 !important; padding: 0 .9rem; }

/* =====================================================================
   ADMIN
   ===================================================================== */
.sidebar { width: 272px; background: linear-gradient(180deg, #eaf7ff 0%, #ddf1fd 100%); border-right: 1px solid var(--line); color: #3f647c; min-height: 100vh; position: sticky; top: 0; height: 100vh; padding: 18px 14px; overflow-y: auto; flex: none; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(11, 61, 99, .15); border-radius: 4px; }
.side-brand { display: flex; align-items: center; gap: .75rem; padding: 6px 8px 18px; color: #0b3d63; }
.side-brand .brand-logo { width: 44px; height: 44px; border-radius: 14px; }
.side-brand b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.side-brand small { color: #6b8aa0; font-size: .68rem; font-weight: 500; }
.side-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #7a98ad; padding: 16px 12px 6px; }
.side-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; border-radius: 13px; color: #3f647c; font-weight: 600; font-size: .9rem; margin-bottom: 2px; transition: all .15s; }
.side-link i { font-size: 1.1rem; opacity: .9; width: 20px; text-align: center; }
.side-link:hover { background: rgba(56, 170, 240, .16); color: #0b3d63; }
.side-link.active { background: var(--grad); color: var(--on-grad); box-shadow: 0 8px 20px rgba(56, 170, 240, .35); }
.side-link .count { margin-left: auto; background: #f97316; color: #fff; font-size: .68rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; }
.side-user { margin-top: 16px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .75); display: flex; align-items: center; gap: .65rem; color: #0b3d63; }
.side-user small { color: #6b8aa0; display: block; font-size: .68rem; }
.side-user a { color: #6b8aa0; margin-left: auto; font-size: 1.15rem; }
.side-user a:hover { color: #0b3d63; }
.offcanvas.offcanvas-dark-side { background: linear-gradient(180deg, #eaf7ff 0%, #ddf1fd 100%); width: 285px; }
[data-bs-theme=dark] .sidebar, [data-bs-theme=dark] .offcanvas.offcanvas-dark-side { background: linear-gradient(180deg, #0c1a2a 0%, #102236 100%); color: #aac4d8; border-color: #223a52; }
[data-bs-theme=dark] .side-brand, [data-bs-theme=dark] .side-user { color: #e6f3fc; }
[data-bs-theme=dark] .side-link { color: #aac4d8; }
[data-bs-theme=dark] .side-link:hover { color: #fff; background: rgba(124, 201, 251, .12); }
[data-bs-theme=dark] .side-link.active { color: var(--on-grad); }
[data-bs-theme=dark] .side-user { background: rgba(255, 255, 255, .06); }
[data-bs-theme=dark] .offcanvas-dark-side .btn-close { filter: invert(1); }

.main-area { min-width: 0; }
.topbar { height: 66px; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1020; }
.topbar h1 { font-size: 1.1rem; margin: 0; }
.topbar .sub { font-size: .72rem; color: var(--muted); font-weight: 500; }
.content { max-width: 1480px; }
@media (max-width: 991.98px) { .content { padding-bottom: 96px !important; } }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: var(--muted); font-size: .64rem; font-weight: 700; border-radius: 12px; border: 0; background: transparent; position: relative; font-family: inherit; }
.bn-item i { font-size: 1.3rem; }
.bn-item.active { color: var(--brand); }
.bn-item.active::before { content: ''; position: absolute; top: -7px; width: 22px; height: 3px; border-radius: 3px; background: var(--grad); }
.bn-fab { transform: translateY(-16px); }
.bn-fab .fab { width: 52px; height: 52px; border-radius: 18px; background: var(--grad); color: var(--on-grad); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 10px 24px rgba(56, 170, 240, .5); }
.bn-fab .lbl { margin-top: 2px; color: var(--muted); }
.bn-badge { position: absolute; top: 0; right: 24%; background: #f97316; color: #fff; font-size: .6rem; font-weight: 800; border-radius: 999px; padding: 0 .38rem; min-width: 16px; text-align: center; }

/* Dasbor */
.hero-card { background: radial-gradient(500px 260px at 100% 0%, rgba(255, 255, 255, .7), transparent 60%), var(--grad); color: var(--on-grad); border-radius: 26px; padding: 28px; position: relative; overflow: hidden; box-shadow: 0 18px 44px rgba(56, 170, 240, .28); }
.hero-card::before { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 44px solid rgba(255, 255, 255, .45); right: -70px; bottom: -110px; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card .btn-light { --bs-btn-bg: #fff; --bs-btn-color: #0b3d63; --bs-btn-hover-bg: #f2faff; --bs-btn-hover-color: #0b3d63; border: 0; }
.hero-card .btn-glass { background: rgba(255, 255, 255, .5); color: #0b3d63; border: 1px solid rgba(11, 61, 99, .15); }
.hero-card .btn-glass:hover { background: rgba(255, 255, 255, .85); color: #0b3d63; }
.stat { padding: 18px; display: flex; gap: 14px; align-items: center; height: 100%; }
.stat-ic { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; flex: none; }
.ic-indigo { background: linear-gradient(135deg, #7dd3fc, #0ea5e9); box-shadow: 0 8px 18px rgba(14, 165, 233, .3); }
.ic-green { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 8px 18px rgba(5, 150, 105, .32); }
.ic-amber { background: linear-gradient(135deg, #fbbf24, #f97316); box-shadow: 0 8px 18px rgba(249, 115, 22, .32); }
.ic-rose { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 8px 18px rgba(225, 29, 72, .3); }
.ic-sky { background: linear-gradient(135deg, #67e8f9, #06b6d4); box-shadow: 0 8px 18px rgba(6, 182, 212, .3); }
.stat .lbl { font-size: .76rem; color: var(--muted); font-weight: 600; }
.stat .val { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tile-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: all .2s; height: 100%; }
.tile-status:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); }
.tile-status .ti { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.tile-status b { font-size: 1.4rem; font-weight: 800; line-height: 1; display: block; }
.tile-status span { font-size: .74rem; font-weight: 600; color: var(--muted); }
.ti-menunggu { background: #ffedd5; color: #ea580c; }
.ti-proses { background: #dbeafe; color: #2563eb; }
.ti-selesai { background: #ccfbf1; color: #0d9488; }
.ti-diambil { background: #ede9fe; color: #7c3aed; }
[data-bs-theme=dark] .ti-menunggu { background: rgba(249, 115, 22, .18); }
[data-bs-theme=dark] .ti-proses { background: rgba(59, 130, 246, .18); }
[data-bs-theme=dark] .ti-selesai { background: rgba(20, 184, 166, .18); }
[data-bs-theme=dark] .ti-diambil { background: rgba(139, 92, 246, .2); }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.quick-item { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 14px 6px; border-radius: 16px; background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: .76rem; text-align: center; transition: all .2s; border: 1px solid transparent; }
.quick-item i { font-size: 1.45rem; color: var(--brand); }
.quick-item:hover { background: var(--brand-soft); border-color: rgba(56, 170, 240, .3); color: var(--brand); transform: translateY(-2px); }
.section-title { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.section-title .more { margin-left: auto; font-size: .78rem; font-weight: 700; }
.empty-state { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty-state i { font-size: 2.4rem; opacity: .35; display: block; margin-bottom: .5rem; }
.empty-state b { color: var(--ink); display: block; font-weight: 700; margin-bottom: .15rem; }
.check-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 12px; background: var(--surface-2); margin-bottom: .45rem; font-weight: 600; font-size: .88rem; color: var(--ink); }
.check-item i { font-size: 1.15rem; }
.check-item.done { opacity: .6; }
.check-item.done i { color: #16a34a; }
.check-item:not(.done) i { color: #f59e0b; }
a.check-item:hover { background: var(--brand-soft); color: var(--brand); }

/* Daftar invoice (kartu) */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: .8rem; white-space: nowrap; transition: all .15s; }
.chip b { background: var(--surface-2); border-radius: 999px; padding: 0 .5rem; font-size: .72rem; color: var(--ink); }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 6px 16px rgba(56, 170, 240, .32); }
.chip.active b { background: rgba(255, 255, 255, .6); color: var(--on-grad); }
.inv-row { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(130px, .8fr) auto auto auto; gap: 14px; align-items: center; padding: 14px 18px; margin-bottom: 10px; border-radius: 18px; transition: box-shadow .2s, opacity .3s; }
.inv-row:hover { box-shadow: var(--shadow-md); }
.inv-row .no { font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.inv-row .no:hover { color: var(--brand); }
.inv-row .nm { font-size: .84rem; color: var(--muted); font-weight: 500; }
.inv-row .amt { font-weight: 800; }
.inv-row .sisa { font-size: .76rem; font-weight: 600; }
@media (max-width: 1199.98px) { .inv-row { grid-template-columns: 1fr 1fr; } .inv-row .ctl-seg { grid-column: 1 / -1; order: 5; } }
@media (max-width: 575.98px) { .inv-row { padding: 14px; gap: 10px; } }

/* Kasir */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; max-height: 68vh; overflow-y: auto; padding: 4px; }
.pos-item { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 9px; text-align: left; cursor: pointer; transition: all .18s; color: var(--ink); font-family: inherit; }
.pos-item:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pos-item:active { transform: scale(.97); }
.pos-item .pi { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); border-radius: 13px; display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 1.7rem; margin-bottom: 8px; overflow: hidden; }
.pos-item .pi img { width: 100%; height: 100%; object-fit: cover; }
.pos-item .nm { font-size: .8rem; font-weight: 700; line-height: 1.25; height: 2.5em; overflow: hidden; }
.cart-box { position: sticky; top: 82px; }
@media (max-width: 991.98px) { .cart-box { position: static; } .pos-grid { max-height: 52vh; } }
.cart-line { display: flex; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.total-box { background: var(--surface-2); border-radius: 16px; padding: 14px; }
.total-box .grand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }

/* Pengaturan */
.logo-uploader { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.logo-preview { width: 104px; height: 104px; border-radius: 24px; border: 2px dashed var(--line); background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: 2.2rem; flex: none; }
.logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }
.set-section { display: flex; gap: .6rem; align-items: center; font-weight: 800; margin-bottom: 1rem; }
.set-section i { width: 34px; height: 34px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }

/* =====================================================================
   INVOICE (kertas) - ringkas, modern, baby blue, muat 1 halaman A4
   ===================================================================== */
.invoice-sheet { --iv-ink: #0f2a40; --iv-muted: #5d7a90; --iv-line: #dcedf8; --iv-soft: #f1f9ff; --iv-deep: #0b3d63; position: relative; background: #fff; color: var(--iv-ink); max-width: 820px; margin: auto; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(56, 170, 240, .16); font-size: .82rem; line-height: 1.4; border: 1px solid var(--iv-line); }
.invoice-sheet .text-secondary, .invoice-sheet .text-muted { color: var(--iv-muted) !important; }
.inv-hero { padding: 16px 26px 12px; background: linear-gradient(135deg, #dcf2ff 0%, #bfe6fd 100%); color: var(--iv-deep); }
.inv-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.inv-brand { display: flex; gap: 11px; align-items: center; min-width: 0; }
.inv-logo { width: 50px; height: 50px; border-radius: 13px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.inv-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.inv-logo.fallback { color: var(--iv-deep); font-size: 1.4rem; }
.inv-company-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.inv-tagline { font-size: .7rem; color: #2c6286; margin-top: 1px; }
.inv-title { text-align: right; }
.inv-title h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: .22em; margin: 0; color: var(--iv-deep); line-height: 1.1; }
.inv-no { font-weight: 700; font-size: .8rem; margin-top: 2px; }
.inv-badges { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; margin-top: 5px; }
.inv-badges .pill { font-size: .64rem; padding: .16rem .5rem; }
.inv-contact { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr; gap: 6px 22px; margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(11, 61, 99, .14); font-size: .7rem; color: #1f5578; line-height: 1.45; }
.inv-contact .inv-label { color: #4f8fb8; margin-bottom: 2px; }
.inv-contact > div > div:not(.inv-label) { display: flex; gap: .4rem; align-items: flex-start; }
.inv-contact i { color: #1d8fd8; font-size: .7rem; margin-top: 2px; flex: none; }
.inv-contact span { min-width: 0; word-break: break-word; }
.inv-body { padding: 14px 26px 14px; }
.inv-cards { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; }
.inv-label { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #6aa3c6; font-weight: 800; margin-bottom: 3px; }
.inv-kv { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; }
.inv-kv span:first-child { color: var(--iv-muted); }
.inv-kv span:last-child { font-weight: 700; text-align: right; }
.inv-scroll { overflow-x: auto; margin-top: 12px; }
.inv-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.inv-table thead { display: table-header-group; }
.inv-table thead th { background: var(--iv-soft); color: #3d7396; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; font-weight: 800; border-top: 1px solid var(--iv-line); border-bottom: 1px solid var(--iv-line); }
.inv-table td { padding: 4px 8px; border-bottom: 1px solid #eef6fb; vertical-align: top; }
.inv-table tr { break-inside: avoid; page-break-inside: avoid; }
.inv-table .no { color: #8db3cc; font-weight: 700; width: 30px; }
.inv-lower { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 10px; align-items: start; }
.inv-pay { background: var(--iv-soft); border-radius: 10px; padding: 7px 11px; font-size: .72rem; line-height: 1.45; margin-bottom: 6px; }
.inv-totals .rt { display: flex; justify-content: space-between; padding: 1px 0; font-size: .8rem; }
.inv-grand { background: linear-gradient(135deg, #c3eaff, #8fd3fb); color: var(--iv-deep); border-radius: 10px; padding: 7px 12px; display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .98rem; margin: 5px 0; }
.inv-hist { margin-top: 6px; }
.inv-hist table { width: 100%; font-size: .7rem; }
.inv-hist th { color: #6aa3c6; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 0; font-weight: 800; border-bottom: 1px solid var(--iv-line); }
.inv-hist td { padding: 2px 0; border-bottom: 1px dashed #e4f0f8; }
.inv-foot { margin-top: 12px; padding-top: 8px; border-top: 1px dashed #c9e2f2; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; break-inside: avoid; }
.inv-thanks { font-weight: 800; font-size: .85rem; color: var(--iv-deep); }
.inv-signs { display: flex; gap: 18px; margin-left: auto; }
.inv-sign { text-align: center; min-width: 140px; font-size: .7rem; color: var(--iv-muted); }
.inv-sign .line { height: 30px; border-bottom: 1px solid #a9cde4; margin-bottom: 3px; }
.inv-bottombar { height: 6px; background: linear-gradient(90deg, #cfeeff, #8fd3fb 50%, #a7f3d0); }
.inv-stamp { position: absolute; right: 40px; top: 210px; transform: rotate(-14deg); border: 4px solid; border-radius: 10px; padding: 0 18px; font-weight: 800; font-size: 1.9rem; letter-spacing: .14em; opacity: .1; pointer-events: none; z-index: 2; }
.stamp-lunas { color: #16a34a; border-color: #16a34a; }
.stamp-batal { color: #dc2626; border-color: #dc2626; }
@media (max-width: 575.98px) {
  .inv-hero, .inv-body { padding-left: 14px; padding-right: 14px; }
  .inv-title { text-align: left; }
  .inv-badges { justify-content: flex-start; }
  .inv-cards, .inv-lower { grid-template-columns: 1fr; }
  .inv-contact { grid-template-columns: 1fr; }
  .inv-signs { margin-left: 0; width: 100%; }
  .inv-sign { flex: 1; min-width: 0; }
}

/* ---------- Cetak ---------- */
@page { size: A4; margin: 8mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body, body.admin, body.public { background: #fff !important; }
  .sidebar, .topbar, .no-print, .offcanvas, .alert, .bottom-nav, .toast-wrap, .navbar, .site-footer, .wa-float { display: none !important; }
  .content, .main-area { padding: 0 !important; margin: 0 !important; }
  .invoice-sheet { box-shadow: none; max-width: 100%; border-radius: 0; border: 0; font-size: 9pt; }
  .inv-scroll { overflow: visible; }
  .card { box-shadow: none; }
  .inv-row { break-inside: avoid; }
}

/* ---------- Utilitas tambahan ---------- */
.min-w-0 { min-width: 0; }