/* ============================================================
   BioProfile — app.css (landing, auth, dashboard, admin, install)
   ============================================================ */
:root {
  --bp-primary: #4f46e5;
  --bp-primary-dark: #4338ca;
  --bp-gradient: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  --bp-bg: #f6f7fb;
  --bp-radius: 14px;
}

body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bp-bg); }

.bp-gradient-text { background: var(--bp-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bp-btn { background: var(--bp-primary); border-color: var(--bp-primary); border-radius: 12px; font-weight: 600; }
.bp-btn:hover:not(:disabled), .bp-btn:focus { background: var(--bp-primary-dark); border-color: var(--bp-primary-dark); }
.bp-badge-soft { background: rgba(79, 70, 229, .1); color: var(--bp-primary); font-weight: 600; }

/* ---------- Navbar ---------- */
.bp-navbar { background: rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,.05); }
.bp-navbar .nav-link { font-weight: 500; color: #475569; }
.bp-navbar .nav-link:hover { color: var(--bp-primary); }

/* ---------- Hero ---------- */
.bp-hero { background: radial-gradient(60% 90% at 80% 10%, rgba(6,182,212,.12), transparent 60%), radial-gradient(50% 80% at 10% 20%, rgba(79,70,229,.12), transparent 60%); }
.bp-phone-mock { width: 280px; border-radius: 36px; background: linear-gradient(160deg,#0f172a,#1e293b); padding: 12px; box-shadow: 0 30px 60px -15px rgba(15,23,42,.35); }
.bp-phone-inner { background: #f8fafc; border-radius: 26px; padding: 28px 18px; text-align: center; min-height: 480px; }
.bp-mock-avatar { width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 50%; background: var(--bp-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.bp-mock-name { font-weight: 700; color: #0f172a; }
.bp-mock-bio { font-size: 12px; color: #64748b; margin-top: 2px; }
.bp-mock-chip { background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 9px 14px; margin-top: 9px; font-size: 13px; font-weight: 600; color: #334155; }
.bp-mock-chip-primary { background: var(--bp-primary); border-color: var(--bp-primary); color: #fff; }

/* ---------- Fitur & harga ---------- */
.bp-feature-card { transition: transform .2s ease, box-shadow .2s ease; }
.bp-feature-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(15,23,42,.18) !important; }
.bp-feature-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(79,70,229,.1); color: var(--bp-primary); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.bp-pricing { transition: transform .2s ease; }
.bp-pricing:hover { transform: translateY(-4px); }
.bp-pricing-featured { border: 2px solid var(--bp-primary) !important; }
.bp-cta { background: var(--bp-gradient); }

/* ---------- Footer ---------- */
.bp-footer { background: #fff; border-top: 1px solid rgba(0,0,0,.05); }

/* ---------- Auth ---------- */
.bp-auth-body { background: #fff; }
.bp-auth-side { background: var(--bp-gradient); min-height: 100vh; }
.bp-auth-side h2 { font-size: 2rem; }

/* ---------- Dashboard ---------- */
.bp-dashboard-body { background: var(--bp-bg); }
.bp-sidebar { width: 250px; min-height: 100vh; background: #fff; border-right: 1px solid rgba(0,0,0,.06); position: sticky; top: 0; align-self: flex-start; height: 100vh; }
.bp-side-link { color: #475569; border-radius: 10px; padding: .55rem .75rem; font-weight: 500; font-size: .925rem; }
.bp-side-link:hover { background: rgba(79,70,229,.07); color: var(--bp-primary); }
.bp-side-link.active { background: var(--bp-primary); color: #fff; }
.bp-main { min-height: 100vh; }
.bp-topbar { background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); position: sticky; top: 0; z-index: 100; }
.bp-avatar-sm { width: 38px; height: 38px; border-radius: 50%; background: var(--bp-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.bp-avatar-lg { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--bp-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px; }
.bp-offcanvas { background: #fff; width: 280px; }

/* ---------- Editor ---------- */
.bp-preview-frame { background: #fff; border-radius: 28px; border: 8px solid #0f172a; overflow: hidden; box-shadow: 0 24px 48px -12px rgba(15,23,42,.3); }
.bp-preview-frame iframe { display: block; width: 100%; height: 600px; border: 0; background: #f8fafc; }
.bp-drag-item .bp-grip { cursor: grab; }
.bp-drag-item.dragging { opacity: .4; }
.bp-drag-item.drag-over { outline: 2px dashed var(--bp-primary); outline-offset: 2px; }
.bp-autosave .bi { color: #16a34a; }
.bp-autosave.saving .bi { color: #f59e0b; }

/* Tampilan: kartu tema */
.bp-theme-card { display: block; text-align: center; cursor: pointer; padding: 8px; border: 2px solid transparent; border-radius: 14px; transition: all .15s ease; }
.bp-theme-card:hover { background: rgba(79,70,229,.05); }
.bp-theme-card.selected { border-color: var(--bp-primary); background: rgba(79,70,229,.06); }
.bp-theme-card input { display: none; }
.bp-theme-swatch { height: 64px; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); }

/* ---------- Produk ---------- */
.bp-product-img { height: 150px; width: 100%; object-fit: cover; }
.bp-product-img:not(img) { border-radius: 0; }

/* ---------- QR ---------- */
#qrPreview img, #qrPreview svg { width: 200px; height: 200px; display: block; }

/* ---------- Installer ---------- */
.bp-step-dot { width: 40px; height: 40px; border-radius: 50%; background: #e2e8f0; color: #64748b; display: flex; align-items: center; justify-content: center; font-weight: 700; position: relative; z-index: 1; }
.bp-step-dot.current { background: var(--bp-primary); color: #fff; box-shadow: 0 0 0 5px rgba(79,70,229,.15); }
.bp-step-dot.done { background: #16a34a; color: #fff; }
.bp-success-icon { width: 76px; height: 76px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 40px; display: flex; align-items: center; justify-content: center; }

/* ---------- Util ---------- */
.min-vh-100 { min-height: 100vh; }
.text-bg-success-subtle { background-color: rgba(22,163,74,.12) !important; color: #16a34a !important; }

@media (max-width: 575.98px) {
  .bp-phone-mock { width: 240px; }
  .bp-phone-inner { min-height: 420px; }
  .bp-preview-frame iframe { height: 480px; }
}