.app-shell{min-height:100vh;display:flex;background:var(--ifp-page)}.sidebar{width:var(--ifp-sidebar-width);background:var(--ifp-surface);border-right:1px solid var(--ifp-border);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;transition:transform .25s ease}.sidebar-brand{padding:1.25rem 1.35rem;border-bottom:1px solid var(--ifp-border)}.sidebar-logo{height:42px;width:auto;object-fit:contain}.account-pill{margin-top:.65rem;display:inline-flex;padding:.25rem .55rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.03em}.account-isp{background:#4d0aa41a;color:var(--ifp-primary)}.account-umkm{background:#00a86b1f;color:var(--ifp-success)}.sidebar-nav{padding:1rem .75rem;overflow-y:auto;flex:1}.nav-group{margin-top:.75rem}.nav-group-label{padding:.4rem .85rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ifp-muted)}.nav-link{display:block;padding:.7rem .85rem;border-radius:var(--ifp-radius-md);color:var(--ifp-text);font-weight:500;font-size:.9rem;margin-bottom:.15rem;transition:background .15s ease,color .15s ease}.nav-link:hover{background:#4d0aa40f;color:var(--ifp-primary)}.nav-link.active{background:var(--ifp-primary);color:#fff;box-shadow:0 8px 18px #4d0aa440}.sidebar-foot{padding:1rem 1.25rem;border-top:1px solid var(--ifp-border)}.demo-hint{font-size:.72rem;color:var(--ifp-muted)}.app-main{flex:1;margin-left:var(--ifp-sidebar-width);min-width:0;display:flex;flex-direction:column}.topbar{height:64px;display:flex;align-items:center;gap:1rem;padding:0 1.5rem;background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--ifp-border);position:sticky;top:0;z-index:20}.topbar-left{display:flex;align-items:center;gap:.75rem;flex:1}.demo-badge{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:999px;background:var(--ifp-highlight);color:var(--ifp-heading);font-size:.68rem;font-weight:700;letter-spacing:.04em}.topbar-company{font-size:.875rem;color:var(--ifp-muted);font-weight:500}.topbar-right{display:flex;align-items:center;gap:.85rem}.user-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}.user-meta strong{font-size:.875rem;color:var(--ifp-heading)}.user-meta span{font-size:.72rem;color:var(--ifp-muted)}.logout-btn{padding:.55rem .9rem;font-size:.85rem}.menu-btn{display:none;border:1px solid var(--ifp-border);background:var(--ifp-surface);border-radius:var(--ifp-radius-sm);width:40px;height:40px;cursor:pointer;font-size:1.1rem}.content{padding:1.5rem;flex:1}.sidebar-overlay{display:none}@media(max-width:992px){.sidebar{transform:translate(-105%)}.app-shell.sidebar-open .sidebar{transform:translate(0)}.app-main{margin-left:0}.menu-btn{display:inline-flex;align-items:center;justify-content:center}.sidebar-overlay{display:none;position:fixed;inset:0;background:#0b0b1273;z-index:30}.app-shell.sidebar-open .sidebar-overlay{display:block}.user-meta{display:none}}.auth-main{min-height:100vh;background:#f4f7fb;color:var(--ifp-heading);position:relative;overflow-x:hidden}.auth-split{min-height:100vh;display:flex}.branding-side{flex:1.5;display:flex;flex-direction:column;justify-content:center;padding:4.5rem;position:relative;overflow:hidden;color:var(--ifp-heading);background:linear-gradient(125deg,#f7f5fbf0,#edf4ffe0 42%,#f5f0ffe6),linear-gradient(180deg,#4d0aa41f,#0050c814),url(../back.jpg) center / cover no-repeat}.branding-side:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(77,10,164,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(77,10,164,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 85%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 85%);pointer-events:none}.branding-glow{position:absolute;inset:-15% auto auto -10%;width:55%;height:55%;background:radial-gradient(circle,rgba(173,119,255,.28),transparent 70%);pointer-events:none}.branding-inner{position:relative;z-index:1;max-width:640px;display:flex;flex-direction:column;min-height:min(760px,calc(100vh - 9rem))}.brand-logo{height:auto;width:min(340px,72%);max-width:100%;margin-bottom:2rem;object-fit:contain;border-radius:14px;box-shadow:0 12px 32px #2010401f}.brand-logo-mobile{display:none;width:min(260px,80%);height:auto;margin-bottom:1.5rem;border-radius:12px;box-shadow:0 8px 24px #2010401a}.brand-kicker{display:inline-flex;align-self:flex-start;margin:0 0 1rem;padding:.4rem .75rem;border-radius:999px;border:1px solid rgba(77,10,164,.18);background:#ffffffd1;color:var(--ifp-primary);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 14px #2010400f}.brand-headline{font-size:clamp(2.05rem,3.4vw,2.9rem);font-weight:700;line-height:1.12;letter-spacing:-.03em;margin-bottom:1rem;color:var(--ifp-heading)}.brand-copy{max-width:540px;margin-bottom:1.75rem;font-size:1.05rem;line-height:1.65;color:var(--ifp-text)}.capability-list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.75rem;max-width:560px}.capability-list li{display:grid;gap:.15rem;padding:.95rem 1.05rem;border-radius:14px;border:1px solid rgba(232,228,242,.95);background:#ffffffc7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px #2010400d}.capability-list strong{font-size:.9rem;color:var(--ifp-heading)}.capability-list span{font-size:.82rem;color:var(--ifp-muted);line-height:1.45}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:560px;margin-bottom:2rem}.stat-box{background:#ffffffd1;border-radius:15px;padding:1.15rem 1.2rem;border:1px solid rgba(232,228,242,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px #2010400d}.stat-box h3{font-size:1.55rem;font-weight:700;margin-bottom:.2rem}.stat-primary{color:var(--ifp-primary)}.stat-accent{color:var(--ifp-success)}.stat-box p{margin:0;font-size:.82rem;color:var(--ifp-muted)}.trust-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:auto}.ojk-badge{background:#fff;padding:8px 12px;border-radius:8px;display:inline-flex;align-items:center;gap:10px;max-width:100%;border:1px solid var(--ifp-border);box-shadow:0 6px 18px #2010400f}.ojk-badge img{height:36px;width:auto;max-width:96px;object-fit:contain;flex-shrink:0}.ojk-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}.ojk-eyebrow{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}.ojk-text strong{font-size:11px;font-weight:800;color:#1f2937;line-height:1.25;letter-spacing:.01em}.lock-line{font-size:.85rem;color:var(--ifp-text);display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;border-radius:999px;background:#ffffffd1;border:1px solid var(--ifp-border)}.lock-line:before{content:"";width:12px;height:12px;border:1.5px solid var(--ifp-primary);border-radius:3px;box-shadow:inset 0 -4px #4d0aa440;flex-shrink:0}.form-side{width:550px;flex-shrink:0;background:#fff;display:flex;align-items:center;padding:3.5rem;border-left:1px solid var(--ifp-border);position:relative;box-shadow:-18px 0 40px #2010400a}.form-panel{width:100%;max-width:420px;margin:0 auto}.portal-title{color:var(--ifp-heading);font-weight:700;font-size:1.35rem;margin-bottom:.35rem}.portal-sub{color:var(--ifp-muted);font-size:.92rem;line-height:1.5;margin-bottom:1.15rem}.account-switch{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1.15rem}.account-switch button{text-align:left;border:1px solid var(--ifp-border);background:#f7f5fb;border-radius:12px;padding:.85rem .95rem;cursor:pointer;transition:.2s ease;display:grid;gap:.15rem}.account-switch button strong{color:var(--ifp-heading);font-size:.9rem}.account-switch button span{color:var(--ifp-muted);font-size:.75rem}.account-switch button.active{border-color:var(--ifp-primary);background:#4d0aa414;box-shadow:0 8px 20px #4d0aa41f}.account-switch button.active strong{color:var(--ifp-primary)}.nav-auth{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1.5rem}.nav-auth button{color:var(--ifp-muted);border:1px solid var(--ifp-border);background:#f7f5fb;font-weight:700;padding:15px;border-radius:12px;cursor:pointer;transition:.3s;letter-spacing:.04em}.nav-auth button.active{background:var(--ifp-primary);border-color:var(--ifp-primary);color:#fff;box-shadow:var(--ifp-shadow-primary)}.auth-form .field{margin-bottom:.85rem}.field-label{display:block;color:var(--ifp-muted);font-size:.72rem;font-weight:700;margin-bottom:.35rem;letter-spacing:.04em}.field-input{width:100%;background:#fbfafe;border:1px solid var(--ifp-border);color:var(--ifp-heading);padding:16px;border-radius:10px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.field-input::placeholder{color:#a39db3}.field-input:focus{border-color:var(--ifp-primary);box-shadow:var(--ifp-focus-ring);background:#fff}.field-input:disabled{opacity:.55;cursor:not-allowed}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.form-error{color:var(--ifp-danger);font-size:.8rem;font-weight:600;margin:0 0 .75rem}.btn-submit{width:100%;margin-top:.35rem;border:none;border-radius:10px;padding:1rem 1.25rem;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--ifp-gradient-cta);box-shadow:var(--ifp-shadow-primary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:filter .2s ease,transform .15s ease}.btn-submit:hover:not(:disabled){filter:brightness(1.05)}.btn-submit:active:not(:disabled){transform:translateY(1px)}.btn-submit:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}.demo-hint{margin-top:.9rem;font-size:.75rem;color:var(--ifp-muted);line-height:1.5}.demo-hint code{font-family:var(--ifp-font-mono);color:var(--ifp-primary);background:#4d0aa414;padding:.1rem .3rem;border-radius:4px}.trust-footer{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--ifp-border)}.methods-label{text-align:center;font-size:.72rem;font-weight:700;color:var(--ifp-muted);letter-spacing:.05em;margin-bottom:1rem}.payment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;align-items:center}.payment-grid-rich{grid-template-columns:repeat(3,1fr);gap:.55rem}.payment-chip{border:1px solid var(--ifp-border);border-radius:10px;padding:.65rem .55rem;background:#faf9fc;text-align:center;display:grid;gap:.15rem}.payment-chip strong{font-size:.78rem;color:var(--ifp-heading)}.payment-chip span{font-size:.62rem;color:var(--ifp-muted);line-height:1.3}.payment-grid img{width:100%;height:28px;object-fit:contain;filter:grayscale(100%);opacity:.55;transition:.4s;cursor:pointer}.payment-grid img:hover{filter:grayscale(0%);opacity:1;transform:scale(1.08)}.copyright{text-align:center;margin-top:1.5rem;font-size:11px;color:var(--ifp-muted);line-height:1.6}.copyright strong{color:var(--ifp-heading)}@media(max-width:1100px){.branding-side{display:none}.form-side{width:100%;justify-content:center;border-left:none;padding:2.5rem 1.5rem;box-shadow:none;background:linear-gradient(180deg,#f7f5fbeb,#fffffffa),url(../back.jpg) center / cover no-repeat}.form-panel{background:#fffffff0;border:1px solid var(--ifp-border);border-radius:18px;padding:1.5rem;box-shadow:0 16px 40px #20104014}.brand-logo-mobile{display:block}}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}.kpi{padding:1.15rem 1.25rem}.kpi-label{display:block;font-size:.75rem;font-weight:600;color:var(--ifp-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.45rem}.kpi-value{display:block;font-size:1.35rem;color:var(--ifp-heading);font-variant-numeric:tabular-nums}.kpi-meta{display:block;margin-top:.35rem;font-size:.78rem;color:var(--ifp-muted)}.kpi-accent{background:linear-gradient(160deg,#fff,#f3eaff);border-color:#4d0aa42e}.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem}.panel{padding:.5rem 0 0;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.15rem .75rem}.panel-head h2{font-size:1rem;color:var(--ifp-heading)}.panel-head a{color:var(--ifp-primary);font-size:.85rem;font-weight:600}.side-panel{padding:.5rem 1.15rem 1.15rem}.alert-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}.alert-list li{border:1px solid var(--ifp-border);border-radius:var(--ifp-radius-lg);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.25rem;background:#faf9fc}.alert-list strong{color:var(--ifp-heading);font-size:.9rem}.alert-list span{font-size:.8rem;color:var(--ifp-muted)}.alert-list a{margin-top:.35rem;color:var(--ifp-primary);font-size:.8rem;font-weight:600}@media(max-width:1100px){.kpi-grid{grid-template-columns:1fr 1fr}.dash-grid{grid-template-columns:1fr}}@media(max-width:640px){.kpi-grid{grid-template-columns:1fr}}.accept-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:start}.accept-form,.accept-preview{padding:1.25rem}.accept-form h2,.accept-preview h3{font-size:1rem;color:var(--ifp-heading);margin-bottom:1rem}.accept-preview h3{font-size:1.6rem;margin:.65rem 0 .25rem;font-variant-numeric:tabular-nums}.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.channel-card{text-align:left;border:1px solid var(--ifp-border);background:#faf9fc;border-radius:12px;padding:.75rem .85rem;cursor:pointer;display:grid;gap:.15rem;transition:.2s ease}.channel-card strong{font-size:.85rem;color:var(--ifp-heading)}.channel-card span{font-size:.72rem;color:var(--ifp-muted);line-height:1.3}.channel-card.active{border-color:var(--ifp-primary);background:#4d0aa414;box-shadow:0 8px 18px #4d0aa41f}.channel-card.active strong{color:var(--ifp-primary)}.preview-empty{min-height:280px;display:grid;place-items:center;text-align:center;color:var(--ifp-muted);padding:1.5rem}.preview-body{text-align:center}.preview-method{font-weight:600;color:var(--ifp-heading);margin:0}.preview-note,.preview-ref,.preview-help{color:var(--ifp-muted);font-size:.85rem;margin:.35rem 0 0}.preview-ref{margin-bottom:1rem}.qris-box{width:180px;height:180px;margin:.85rem auto 1rem;border-radius:12px;border:1px solid var(--ifp-border);background:repeating-linear-gradient(45deg,#111 0 8px,#fff 8px 16px),var(--ifp-logo-gradient);background-blend-mode:multiply}.instruction-box{margin-top:.85rem;padding:1rem;border-radius:12px;border:1px solid var(--ifp-border);background:#faf9fc;text-align:left}.va-number{display:block;font-size:1.15rem;color:var(--ifp-heading);margin:.35rem 0 .65rem;word-break:break-all}.pay-link{padding:.75rem;border-radius:10px;background:#fff;border:1px dashed var(--ifp-border);color:var(--ifp-primary);font-size:.78rem;word-break:break-all;margin-bottom:.65rem}@media(max-width:900px){.accept-grid,.channel-grid{grid-template-columns:1fr}}:root{--ifp-primary: #4d0aa4;--ifp-primary-rgb: 77, 10, 164;--ifp-secondary: #ad77ff;--ifp-secondary-rgb: 173, 119, 255;--ifp-accent-soft: #4d0aa480;--ifp-highlight: #ffe433;--ifp-highlight-alt: #ffc131;--ifp-logo-deep: #0050c8;--ifp-logo-mid: #1088e8;--ifp-logo-bright: #00b0f8;--ifp-logo-gradient: linear-gradient(135deg, #0050c8 0%, #00b0f8 100%);--ifp-page: #f7f5fb;--ifp-surface: #ffffff;--ifp-border: #e8e4f2;--ifp-text: #505050;--ifp-heading: #202020;--ifp-muted: #8b8698;--ifp-dark-bg: #0b0b12;--ifp-dark-surface: #14121c;--ifp-dark-border: #2a2438;--ifp-dark-text: #ffffff;--ifp-success: #00a86b;--ifp-danger: #e11d48;--ifp-warning: #d97706;--ifp-bi-blue: #003d79;--ifp-radius-sm: 6px;--ifp-radius-md: 10px;--ifp-radius-lg: 12px;--ifp-radius-xl: 16px;--ifp-font: "Poppins", system-ui, sans-serif;--ifp-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;--ifp-gradient-brand: linear-gradient(90deg, var(--ifp-secondary) 0%, var(--ifp-primary) 100%);--ifp-gradient-cta: linear-gradient(277deg, var(--ifp-secondary) 4%, var(--ifp-primary) 84%);--ifp-shadow-primary: 0 6px 35px #5311aa73;--ifp-shadow-card: 0 8px 24px rgba(32, 16, 64, .06);--ifp-focus-ring: 0 0 0 .25rem rgba(77, 10, 164, .25);--ifp-sidebar-width: 260px}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--ifp-font);color:var(--ifp-text);background:var(--ifp-page);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}h1,h2,h3,h4,p{margin:0}img{max-width:100%;display:block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;cursor:pointer;border-radius:var(--ifp-radius-md);padding:.85rem 1.25rem;font-weight:600;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}.btn:active{transform:translateY(1px)}.btn-primary{color:#fff;background:var(--ifp-gradient-cta);box-shadow:var(--ifp-shadow-primary)}.btn-primary:hover{filter:brightness(1.05)}.btn-ghost{background:transparent;color:var(--ifp-primary);border:1px solid var(--ifp-border)}.btn-block{width:100%}.input{width:100%;padding:.9rem 1rem;border-radius:var(--ifp-radius-md);border:1px solid var(--ifp-border);background:var(--ifp-surface);color:var(--ifp-heading);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input:focus{border-color:var(--ifp-primary);box-shadow:var(--ifp-focus-ring)}.input-label{display:block;margin-bottom:.35rem;font-size:.75rem;font-weight:600;color:var(--ifp-muted);text-transform:uppercase;letter-spacing:.04em}.field{margin-bottom:1rem}.chip{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;line-height:1.4}.chip-success{background:#00a86b1f;color:var(--ifp-success)}.chip-pending{background:#ffc13133;color:var(--ifp-warning)}.chip-failed{background:#e11d481f;color:var(--ifp-danger)}.chip-expired{background:#8b869826;color:var(--ifp-muted)}.card{background:var(--ifp-surface);border:1px solid var(--ifp-border);border-radius:var(--ifp-radius-xl);box-shadow:var(--ifp-shadow-card)}.page-title{font-size:1.5rem;font-weight:700;color:var(--ifp-heading)}.page-subtitle{margin-top:.25rem;color:var(--ifp-muted);font-size:.9rem}.table-wrap{overflow-x:auto}table.data{width:100%;border-collapse:collapse;font-size:.875rem}table.data th{text-align:left;padding:.85rem 1rem;color:var(--ifp-muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--ifp-border);white-space:nowrap}table.data td{padding:.95rem 1rem;border-bottom:1px solid var(--ifp-border);color:var(--ifp-heading);vertical-align:middle}table.data tr:last-child td{border-bottom:none}table.data tbody tr{transition:background .15s ease}table.data tbody tr:hover{background:#4d0aa408}.amount{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ifp-heading)}.mono{font-family:var(--ifp-font-mono);font-size:.8rem}