@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap);@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--blue-primary:#1a3fdc;--blue-hero:#2348e8;--orange:#f59e0b;--gray-light:#f1f5f9;--footer-dark:#0f1b2d}body{background:#f8fafc}.landing-wrapper{display:flex;flex-direction:column;min-height:100vh}.navbar{align-items:center;background:#fff;background:var(--white);box-shadow:0 1px 0 #e2e8f0;box-shadow:0 1px 0 var(--gray-border);display:flex;justify-content:space-between;padding:14px 48px;position:sticky;top:0;z-index:100}.logo-img{height:44px;object-fit:contain;width:auto}.btn-login{background:#1a3fdc;background:var(--blue-primary);border:none;border-radius:8px;border-radius:var(--radius-sm);color:#fff;color:var(--white);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:10px 26px;transition:background .2s ease,transform .15s ease}.btn-login:hover{background:#1430b0;background:var(--blue-dark);transform:translateY(-1px)}.hero{align-items:center;background:linear-gradient(135deg,#2348e8,#1a3fdc 60%,#1430b0);background:linear-gradient(135deg,var(--blue-hero) 0,#1a3fdc 60%,#1430b0 100%);border-radius:20px;display:flex;justify-content:space-between;margin:24px 48px;min-height:260px;overflow:hidden;padding:52px 56px;position:relative}.hero-circle{background:#ffffff0f;border-radius:50%;pointer-events:none;position:absolute}.hero-circle-1{height:280px;right:220px;top:-80px;width:280px}.hero-circle-2{bottom:-60px;height:180px;right:300px;width:180px}.hero-content{flex:1 1;z-index:1}.hero-badge{align-items:center;background:#ffffff2e;border-radius:100px;color:#fff;color:var(--white);display:inline-flex;font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;margin-bottom:20px;padding:6px 14px}.badge-dot{animation:pulse 1.5s infinite;background:#4ade80;border-radius:50%;display:inline-block;height:7px;width:7px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.hero-title{color:#fff;color:var(--white);font-size:36px;font-weight:800;line-height:1.2;margin-bottom:14px}.hero-subtitle{color:#fffc;font-size:15px;font-weight:400;margin-bottom:32px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px}.btn-primary{background:#fff;background:var(--white);border:none;border-radius:8px;border-radius:var(--radius-sm);box-shadow:0 4px 14px #0000001f;color:#1a3fdc;color:var(--blue-primary);cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;padding:13px 26px;transition:all .2s ease}.btn-primary:hover{box-shadow:0 8px 20px #0000002e;transform:translateY(-2px)}.btn-secondary{background:#0000;border:2px solid #fff9;border-radius:8px;border-radius:var(--radius-sm);color:#fff;color:var(--white);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:11px 26px;transition:all .2s ease}.btn-secondary:hover{background:#ffffff26;border-color:#fff;border-color:var(--white)}.hero-mascot{flex-shrink:0;z-index:1}.mascot-img{animation:float 3s ease-in-out infinite;filter:drop-shadow(0 8px 24px rgba(0,0,0,.25));height:220px;object-fit:contain;width:auto}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.stats-section{padding:8px 48px 24px}.stats-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.stat-card{background:#fff;background:var(--white);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:14px;border-radius:var(--radius);display:flex;flex-direction:column;gap:6px;padding:24px 28px;transition:box-shadow .2s ease}.stat-card:hover{box-shadow:0 2px 16px #00000012;box-shadow:var(--shadow)}.stat-number{color:#0f172a;color:var(--text-dark);font-size:40px;font-weight:800;line-height:1}.stat-number.stat-orange{color:#f59e0b;color:var(--orange)}.stat-number.stat-green{color:#10b981;color:var(--green)}.stat-label{color:#64748b;color:var(--text-muted);font-size:14px;font-weight:500}.stat-badge{align-items:center;border-radius:100px;display:inline-flex;font-size:12px;font-weight:600;margin-top:4px;padding:4px 10px;width:fit-content}.badge-active{background:#dbeafe;color:#1d4ed8}.badge-process{background:#fef3c7;color:#d97706}.badge-done{background:#d1fae5;color:#059669}.info-section{background:#fff;background:var(--white);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:14px;border-radius:var(--radius);margin:0 48px 20px;padding:32px 36px}.section-header{align-items:center;display:flex;gap:10px;margin-bottom:28px}.section-accent{background:#1a3fdc;background:var(--blue-primary);border-radius:4px;display:inline-block;height:22px;width:4px}.section-title{color:#0f172a;color:var(--text-dark);font-size:18px;font-weight:700}.steps-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.step-card{background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:14px;border-radius:var(--radius);padding:24px;transition:transform .2s ease,box-shadow .2s ease}.step-card:hover{box-shadow:0 4px 16px #1a3fdc14;transform:translateY(-2px)}.step-number{align-items:center;background:#1a3fdc;background:var(--blue-primary);border-radius:10px;color:#fff;color:var(--white);display:flex;font-size:16px;font-weight:800;height:38px;justify-content:center;margin-bottom:14px;width:38px}.step-title{color:#0f172a;color:var(--text-dark);font-size:15px;font-weight:700;margin-bottom:8px}.step-desc{color:#64748b;color:var(--text-muted);font-size:13px;line-height:1.6}.features-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.feature-card{background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:14px;border-radius:var(--radius);padding:24px;transition:transform .2s ease,box-shadow .2s ease}.feature-card:hover{box-shadow:0 4px 16px #1a3fdc14;transform:translateY(-2px)}.feature-icon{align-items:center;background:#eff6ff;border-radius:12px;display:flex;font-size:28px;height:48px;justify-content:center;margin-bottom:12px;width:48px}.feature-title{color:#0f172a;color:var(--text-dark);font-size:15px;font-weight:700;margin-bottom:8px}.feature-desc{color:#64748b;color:var(--text-muted);font-size:13px;line-height:1.6}.footer{background:#0f1b2d;background:var(--footer-dark);margin-top:auto;padding:40px 48px}.footer-inner{align-items:flex-start;display:flex;gap:40px;justify-content:space-between}.footer-left{display:flex;flex-direction:column;gap:8px}.footer-copy{color:#ffffffa6;font-size:13px;line-height:1.6}.footer-link{color:#ffffffe6;text-decoration:underline}.footer-rights{color:#ffffff73;font-size:13px}.footer-socials{display:flex;gap:12px;margin-top:12px}.social-icon{align-items:center;color:#fff9;display:flex;transition:color .2s ease,transform .2s ease}.social-icon:hover{color:#fff;color:var(--white);transform:translateY(-2px)}.footer-right{max-width:340px}.footer-brand{color:#fff;color:var(--white);font-size:18px;font-weight:700;margin-bottom:12px}.footer-desc{color:#ffffff8c;font-size:13px;line-height:1.7}@media (max-width:900px){.navbar{padding:14px 24px}.hero{margin:16px 24px;padding:40px 32px}.hero-title{font-size:26px}.mascot-img{height:160px}.stats-section{padding:8px 24px 16px}.info-section{margin:0 24px 16px;padding:24px 28px}.footer{padding:32px 24px}}@media (max-width:768px){.hero{flex-direction:column;gap:24px;margin:12px 20px;padding:36px 28px;text-align:center}.hero-actions,.hero-badge{justify-content:center}.hero-title{font-size:26px}.mascot-img{height:160px;margin-top:0}.hero-circle-2{display:none}.stats-section{padding:8px 20px 16px}.stats-grid{gap:10px;grid-template-columns:repeat(3,1fr)}.stat-number{font-size:32px}.stat-card{padding:18px 16px}.info-section{margin:0 20px 14px;padding:22px 20px}.features-grid,.steps-grid{gap:12px;grid-template-columns:1fr 1fr}.feature-card:last-child:nth-child(odd),.step-card:last-child:nth-child(odd){grid-column:1/-1}.footer{padding:28px 20px}.footer-inner{flex-direction:column;gap:24px}.footer-right{max-width:100%}}@media (max-width:480px){.navbar{padding:12px 16px}.logo-img{height:36px}.btn-login{font-size:13px;padding:8px 18px}.hero{border-radius:14px;margin:10px 12px;padding:28px 20px}.hero-title{font-size:22px}.hero-subtitle{font-size:13px}.mascot-img{height:130px}.hero-actions{flex-direction:column;gap:10px}.btn-primary,.btn-secondary{font-size:13px;padding:12px 20px;text-align:center;width:100%}.stats-section{padding:8px 12px 12px}.stats-grid{gap:10px;grid-template-columns:1fr}.stat-card{padding:16px 18px}.stat-number{font-size:36px}.info-section{border-radius:12px;margin:0 12px 12px;padding:20px 16px}.section-title{font-size:16px}.features-grid,.steps-grid{gap:10px;grid-template-columns:1fr}.feature-card:last-child:nth-child(odd),.step-card:last-child:nth-child(odd){grid-column:auto}.feature-card,.step-card{padding:18px}.footer{padding:24px 16px}.footer-brand{font-size:16px}.footer-copy,.footer-desc{font-size:12px}.footer-socials{gap:14px}}@media (max-width:360px){.hero{padding:24px 16px}.hero-title{font-size:20px}}:root{--blue:#1a3fdc;--blue-dark:#1430b0;--green:#10b981;--red:#ef4444;--gray-bg:#f1f5f9;--gray-border:#e2e8f0;--text-dark:#0f172a;--text-muted:#64748b;--text-hint:#94a3b8;--white:#fff;--radius-sm:8px;--shadow-card:0 2px 20px #00000012}body{color:#0f172a;color:var(--text-dark);font-family:Plus Jakarta Sans,sans-serif}.bp-wrapper,body{background:#f1f5f9;background:var(--gray-bg)}.bp-wrapper{display:flex;flex-direction:column;min-height:100vh}.bp-navbar{align-items:center;background:#fff;background:var(--white);border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--gray-border);display:flex;justify-content:space-between;padding:14px 48px;position:sticky;top:0;z-index:100}.bp-logo{height:44px;object-fit:contain;width:auto}.bp-btn-login{background:#1a3fdc;background:var(--blue);border:none;border-radius:8px;border-radius:var(--radius-sm);color:#fff;color:var(--white);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:10px 26px;transition:background .2s}.bp-btn-login:hover{background:#1430b0;background:var(--blue-dark)}.bp-btn-back-nav{background:#0000;border:1px solid #1a3fdc;border:1px solid var(--blue);border-radius:8px;border-radius:var(--radius-sm);color:#1a3fdc;color:var(--blue);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:10px 16px;transition:all .2s}.bp-btn-back-nav:hover{background:#1a3fdc;background:var(--blue);color:#fff;color:var(--white)}.bp-main{align-items:center;display:flex;flex:1 1;flex-direction:column;padding:48px 24px 64px;width:100%}.bp-header{margin-bottom:36px;text-align:center}.bp-title{color:#0f172a;color:var(--text-dark);font-size:28px;font-weight:800;margin-bottom:10px}.bp-subtitle{color:#64748b;color:var(--text-muted);font-size:15px;line-height:1.6}.bp-br{display:inline}.bp-stepper{gap:0;margin-bottom:36px}.bp-step-item,.bp-stepper{align-items:center;display:flex}.bp-step-item{flex-direction:column;gap:8px}.bp-step-circle{align-items:center;background:#fff;background:var(--white);border:2px solid #e2e8f0;border:2px solid var(--gray-border);border-radius:50%;color:#94a3b8;color:var(--text-hint);display:flex;font-size:15px;font-weight:700;height:40px;justify-content:center;transition:all .3s ease;width:40px}.bp-step-circle.active{background:#1a3fdc;background:var(--blue);border-color:#1a3fdc;border-color:var(--blue);box-shadow:0 4px 14px #1a3fdc4d;color:#fff;color:var(--white)}.bp-step-circle.done{background:#10b981;background:var(--green);border-color:#10b981;border-color:var(--green);color:#fff;color:var(--white)}.bp-step-label{color:#94a3b8;color:var(--text-hint);font-size:12px;font-weight:500;transition:color .3s ease}.bp-step-label.active{color:#1a3fdc;color:var(--blue);font-weight:700}.bp-step-label.done{color:#10b981;color:var(--green)}.bp-step-line{background:#e2e8f0;background:var(--gray-border);height:2px;margin-bottom:20px;transition:background .3s ease;width:80px}.bp-step-line.done{background:#10b981;background:var(--green)}.bp-card{background:#fff;background:var(--white);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:14px;border-radius:var(--radius);box-shadow:0 2px 20px #00000012;box-shadow:var(--shadow-card);max-width:480px;padding:32px;width:100%}.bp-card-header{align-items:center;display:flex;gap:10px;margin-bottom:28px}.bp-card-accent{background:#1a3fdc;background:var(--blue);border-radius:4px;display:inline-block;flex-shrink:0;height:22px;width:4px}.bp-card-title{color:#0f172a;color:var(--text-dark);font-size:17px;font-weight:700}.bp-field{margin-bottom:24px}.bp-field:last-child{margin-bottom:0}.bp-field-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.bp-label{color:#0f172a;color:var(--text-dark);font-size:14px;font-weight:600}.bp-optional{color:#94a3b8;color:var(--text-hint);font-size:12px}.bp-required{color:#ef4444;color:var(--red);font-size:14px;font-weight:700}.bp-input{background:#fff;background:var(--white);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:8px;border-radius:var(--radius-sm);color:#0f172a;color:var(--text-dark);font-family:inherit;font-size:14px;outline:none;padding:12px 14px;transition:border-color .2s,box-shadow .2s;width:100%}.bp-input::placeholder{color:#94a3b8;color:var(--text-hint)}.bp-input:focus{border-color:#1a3fdc;border-color:var(--blue);box-shadow:0 0 0 3px #1a3fdc14}.bp-textarea{background:#fff;background:var(--white);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:8px;border-radius:var(--radius-sm);color:#0f172a;color:var(--text-dark);font-family:inherit;font-size:14px;line-height:1.6;outline:none;padding:12px 14px;resize:vertical;transition:border-color .2s,box-shadow .2s;width:100%}.bp-textarea::placeholder{color:#94a3b8;color:var(--text-hint)}.bp-textarea:focus{border-color:#1a3fdc;border-color:var(--blue);box-shadow:0 0 0 3px #1a3fdc14}.bp-counter,.bp-hint{color:#94a3b8;color:var(--text-hint);font-size:12px;margin-top:6px}.bp-counter{text-align:right}.bp-error-banner{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;border-radius:var(--radius-sm);color:#b91c1c;font-size:13px;font-weight:500;margin-bottom:20px;padding:12px 14px}.bp-file-counter-badge{background:#f1f5f9;background:var(--gray-bg);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:20px;color:#64748b;color:var(--text-muted);font-size:12px;font-weight:600;padding:2px 10px;transition:all .2s}.bp-dropzone{align-items:center;background:#fafcff;border:2px dashed #e2e8f0;border:2px dashed var(--gray-border);border-radius:8px;border-radius:var(--radius-sm);cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:28px 20px;transition:border-color .2s,background .2s;-webkit-user-select:none;user-select:none}.bp-dropzone:hover:not(.disabled){background:#f0f4ff;border-color:#1a3fdc;border-color:var(--blue)}.bp-dropzone.dragover{background:#eef2ff;border-color:#1a3fdc;border-color:var(--blue);border-style:solid;transform:scale(1.01)}.bp-dropzone.disabled{background:#f1f5f9;background:var(--gray-bg);cursor:default;opacity:.7}.bp-dropzone-icon{color:#94a3b8;color:var(--text-hint);margin-bottom:4px;transition:transform .2s,color .2s}.bp-dropzone-icon.animate{animation:bounceUp .4s ease infinite alternate;color:#1a3fdc;color:var(--blue)}.bp-dropzone-icon.full{color:#10b981;color:var(--green)}@keyframes bounceUp{0%{transform:translateY(0)}to{transform:translateY(-5px)}}.bp-dropzone-text{color:#0f172a;color:var(--text-dark);font-size:14px;font-weight:600}.bp-dropzone-text.disabled-text{color:#64748b;color:var(--text-muted)}.bp-dropzone-hint{color:#94a3b8;color:var(--text-hint);font-size:12px;line-height:1.5}.bp-file-input-hidden{display:none}.bp-file-errors{display:flex;flex-direction:column;gap:5px;list-style:none;margin-top:10px}.bp-file-error-item{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;color:#b91c1c;display:flex;font-size:12px;font-weight:500;gap:6px;padding:7px 10px}.bp-file-list{display:flex;flex-direction:column;gap:8px;list-style:none;margin-top:12px}.bp-file-item{align-items:center;animation:slideIn .22s ease both;animation-delay:0ms;animation-delay:var(--entry-delay,0ms);background:#f1f5f9;background:var(--gray-bg);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:8px;border-radius:var(--radius-sm);display:flex;gap:10px;padding:10px 12px}@keyframes slideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.bp-file-thumb{align-items:center;background:#fff;background:var(--white);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:6px;display:flex;flex-shrink:0;height:38px;justify-content:center;overflow:hidden;width:38px}.bp-file-thumb-img{height:100%;object-fit:cover;width:100%}.bp-file-type-badge{background:#94a3b8;background:var(--text-hint);border-radius:4px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 5px}.bp-file-info{display:flex;flex:1 1;flex-direction:column;gap:2px;min-width:0}.bp-file-name{color:#0f172a;color:var(--text-dark);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bp-file-size{font-size:11px}.bp-file-remove,.bp-file-size{color:#94a3b8;color:var(--text-hint)}.bp-file-remove{align-items:center;background:#0000;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;transition:background .15s,color .15s;width:28px}.bp-file-remove:hover{background:#fee2e2;color:#ef4444;color:var(--red)}.bp-actions{margin-top:20px;max-width:480px;width:100%}.bp-actions.single{display:flex}.bp-actions.double{display:flex;gap:12px}.bp-btn-next{align-items:center;background:#1a3fdc;background:var(--blue);border:none;border-radius:8px;border-radius:var(--radius-sm);color:#fff;color:var(--white);cursor:pointer;display:flex;flex:1 1;font-family:inherit;font-size:15px;font-weight:700;gap:8px;justify-content:center;padding:16px 24px;transition:background .2s,transform .15s,opacity .2s}.bp-btn-next:hover:not(:disabled){background:#1430b0;background:var(--blue-dark);transform:translateY(-1px)}.bp-btn-next:disabled{cursor:not-allowed;opacity:.5}.bp-loading-spinner{align-items:center;display:flex;gap:8px}.bp-loading-spinner svg{animation:spin .8s linear infinite}.bp-btn-back{background:#fff;background:var(--white);border:1px solid #e2e8f0;border:1px solid var(--gray-border);border-radius:8px;border-radius:var(--radius-sm);color:#0f172a;color:var(--text-dark);cursor:pointer;flex:0 0 auto;font-family:inherit;font-size:15px;font-weight:600;padding:16px 24px;transition:background .2s,border-color .2s;white-space:nowrap}.bp-btn-back:hover{background:#f1f5f9;background:var(--gray-bg);border-color:#cbd5e1}.bp-success-card{align-items:center;display:flex;flex-direction:column;padding:40px 32px;text-align:center}.bp-success-icon{animation:popIn .4s ease;margin-bottom:20px}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.bp-success-title{color:#0f172a;color:var(--text-dark);font-size:20px;font-weight:800;margin-bottom:10px}.bp-success-desc{color:#64748b;color:var(--text-muted);font-size:14px;line-height:1.7;margin-bottom:24px}.bp-kode-box{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;border-radius:var(--radius-sm);padding:20px 24px;width:100%}.bp-kode-label{color:#059669;font-size:12px;font-weight:600;margin-bottom:8px}.bp-kode-value{color:#065f46;font-size:24px;font-weight:800;letter-spacing:.05em;margin-bottom:6px}.bp-kode-hint{color:#059669;font-size:12px}.bp-success-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;margin-top:20px;width:100%}.bp-btn-copy{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;border-radius:var(--radius-sm);color:#059669;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:12px 24px;text-align:center;transition:all .2s}.bp-btn-copy:hover{background:#dcfce7;border-color:#86efac}.bp-btn-copy.copied{background:#10b981;border-color:#10b981;color:#fff}.bp-btn-check-status{background:#1a3fdc;background:var(--blue);border:none;border-radius:8px;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:12px 24px;text-align:center;transition:all .2s}.bp-btn-check-status:hover{background:#1430b0;background:var(--blue-dark)}.bp-btn-create-new{background:#fff;border:1px solid #1a3fdc;border:1px solid var(--blue);border-radius:8px;border-radius:var(--radius-sm);color:#1a3fdc;color:var(--blue);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:12px 24px;text-align:center;transition:all .2s}.bp-btn-create-new:hover{background:#1a3fdc;background:var(--blue);color:#fff}.bp-btn-home{background:#e2e8f0;background:var(--gray-border);border:none;border-radius:8px;border-radius:var(--radius-sm);color:#0f172a;color:var(--text-dark);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:12px 24px;transition:all .2s;width:100%}.bp-btn-home:hover{background:#cbd5e1}@media (max-width:768px){.bp-navbar{padding:12px 24px}.bp-main{padding:36px 20px 48px}.bp-title{font-size:24px}.bp-step-line{width:56px}.bp-card{padding:24px 20px}.bp-actions{max-width:100%}}@media (max-width:480px){.bp-navbar{padding:12px 16px}.bp-logo{height:36px}.bp-btn-login{font-size:13px;padding:8px 16px}.bp-main{padding:28px 16px 40px}.bp-title{font-size:20px}.bp-subtitle{font-size:13px}.bp-br{display:none}.bp-stepper{gap:0}.bp-step-line{width:36px}.bp-step-circle{font-size:13px;height:34px;width:34px}.bp-step-label{font-size:11px}.bp-card{border-radius:12px;padding:20px 16px}.bp-card-title{font-size:15px}.bp-actions.double{flex-direction:column-reverse}.bp-btn-back{text-align:center;width:100%}.bp-btn-next{width:100%}.bp-kode-value{font-size:20px}}@media (max-width:360px){.bp-step-line{width:24px}.bp-title{font-size:18px}}.cs-wrapper{background-color:#f1f3f8;display:flex;flex-direction:column;font-family:Segoe UI,sans-serif;min-height:100vh}.cs-navbar{align-items:center;background:#fff;border-bottom:1px solid #e5e7f0;display:flex;height:72px;justify-content:space-between;padding:0 32px}.cs-logo{height:48px;object-fit:contain}.cs-btn-login{background:#2563eb;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:8px 24px;transition:background .2s}.cs-btn-login:hover{background:#1d4ed8}.cs-btn-back{background:#0000;border:1px solid #2563eb;border-radius:8px;color:#2563eb;cursor:pointer;font-size:14px;font-weight:600;padding:8px 16px;transition:all .2s}.cs-btn-back:hover{background:#2563eb;color:#fff}.cs-main{align-items:center;display:flex;flex:1 1;flex-direction:column;padding:48px 16px 64px}.cs-badge-wrap{margin-bottom:14px}.cs-top-badge{align-items:center;background:#e8edf8;border-radius:999px;color:#4f6aa0;display:inline-flex;font-size:12px;font-weight:700;gap:6px;letter-spacing:.08em;padding:6px 16px}.cs-title{color:#111827;font-size:28px;font-weight:700;margin:0 0 10px;text-align:center}.cs-subtitle{color:#6b7280;font-size:15px;line-height:1.6;margin:0 0 28px;text-align:center}.cs-search-row{display:flex;gap:10px;margin-bottom:20px;max-width:520px;width:100%}.cs-input{background:#fff;border:1.5px solid #d1d5db;border-radius:10px;color:#111827;flex:1 1;font-size:15px;font-weight:500;outline:none;padding:12px 18px;transition:border-color .2s,box-shadow .2s}.cs-input::placeholder{color:#9ca3af;font-weight:400}.cs-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.cs-input:disabled{cursor:not-allowed;opacity:.6}.cs-btn-cek{align-items:center;background:#2563eb;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:15px;font-weight:600;justify-content:center;min-width:110px;padding:12px 26px;transition:background .2s,opacity .2s;white-space:nowrap}.cs-btn-cek:hover:not(:disabled){background:#1d4ed8}.cs-btn-cek:disabled{cursor:not-allowed;opacity:.55}.cs-spinner{animation:cs-spin .7s linear infinite;border:2.5px solid #fff6;border-radius:50%;border-top-color:#fff;display:inline-block;height:18px;width:18px}@keyframes cs-spin{to{transform:rotate(1turn)}}.cs-error-banner{background:#fef2f2;border:1px solid #fecaca;border-radius:10px;color:#dc2626;font-size:13px;font-weight:500;margin-bottom:20px;max-width:520px;padding:12px 16px;width:100%}.cs-empty-state{align-items:center;display:flex;flex-direction:column;gap:10px;margin-top:8px}.cs-empty-icon{margin-bottom:4px}.cs-empty-text{color:#374151;font-size:15px;line-height:1.6;margin:0;text-align:center}.cs-empty-hint{color:#9ca3af;font-size:13px;margin:0}.cs-result-card{animation:cs-fade-up .35s ease;border-radius:16px;box-shadow:0 4px 24px #00000014;max-width:560px;overflow:hidden;width:100%}@keyframes cs-fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.cs-card-header{align-items:center;background:#3d6b2f;display:flex;justify-content:space-between;padding:18px 24px}.cs-kode-badge{color:#fff;font-family:Courier New,monospace;font-size:18px;font-weight:700;letter-spacing:.04em}.cs-status-badge{align-items:center;border-radius:999px;display:inline-flex;font-size:13px;font-weight:600;gap:5px;padding:5px 14px}.badge-selesai{background:#ffffffe6;color:#3d6b2f}.badge-diproses{background:#ffffffe6;color:#d97706}.badge-menunggu{color:#6b7280}.badge-ditolak,.badge-menunggu{background:#ffffffe6}.cs-card-body{background:#fff;padding:24px}.cs-laporan-judul{color:#111827;font-size:18px;font-weight:700;margin:0 0 8px}.cs-laporan-desc{color:#6b7280;font-size:14px;line-height:1.6;margin:0 0 20px}.cs-meta-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.cs-meta-item{display:flex;flex-direction:column;gap:3px}.cs-meta-label{color:#9ca3af;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.cs-meta-value{color:#111827;font-size:14px;font-weight:600}.cs-divider{border:none;border-top:1px solid #e5e7eb;margin:0 0 20px}.cs-timeline-title{color:#111827;font-size:15px;font-weight:700;margin:0 0 16px}.cs-timeline{display:flex;flex-direction:column;gap:0;margin-bottom:20px}.cs-timeline-item{align-items:flex-start;display:flex;gap:12px}.cs-timeline-left{flex-direction:column}.cs-timeline-circle,.cs-timeline-left{align-items:center;display:flex;flex-shrink:0;width:28px}.cs-timeline-circle{border-radius:50%;height:28px;justify-content:center}.cs-timeline-circle.done{background:#3d6b2f;border:2px solid #3d6b2f}.cs-timeline-circle.pending{background:#fff;border:2px solid #d1d5db}.cs-timeline-dot-inner{background:#d1d5db;border-radius:50%;height:8px;width:8px}.cs-timeline-line{flex:1 1;margin:2px 0;min-height:24px;width:2px}.cs-timeline-line.done{background:#3d6b2f}.cs-timeline-line.pending{background:#e5e7eb}.cs-timeline-content{padding-bottom:20px;padding-top:4px}.cs-timeline-label{font-size:14px;font-weight:600;margin:0 0 2px}.cs-timeline-label.done{color:#111827}.cs-timeline-label.pending{color:#9ca3af}.cs-timeline-time{color:#6b7280;font-size:13px;margin:0}.cs-balasan-box{background:#f0f7eb;border:1px solid #c6ddb8;border-radius:10px;margin-top:4px;padding:16px}.cs-balasan-header{align-items:center;color:#3d6b2f;display:flex;gap:6px;margin-bottom:8px}.cs-balasan-label{color:#3d6b2f;font-size:11px;font-weight:700;letter-spacing:.08em;margin:0}.cs-balasan-text{color:#374151;font-size:14px;line-height:1.6;margin:0 0 6px}.cs-balasan-by{color:#6b7280;font-size:12px;font-style:italic;margin:0;text-align:right}.cs-balasan-ditolak{background:#fff5f5;border-color:#fecaca}.cs-balasan-ditolak .cs-balasan-header,.cs-balasan-ditolak .cs-balasan-label{color:#dc2626}@media (max-width:600px){.cs-navbar{padding:0 16px}.cs-title{font-size:22px}.cs-search-row{flex-direction:column}.cs-btn-cek{text-align:center;width:100%}.cs-meta-row{flex-direction:column;gap:12px}}.cs-lampiran-box{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:16px;padding:14px 16px}.cs-lampiran-pelapor{background:#f0f9ff;border-color:#bae6fd}.cs-lampiran-admin{background:#f0fdf4;border-color:#bbf7d0}.cs-lampiran-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.cs-lampiran-title{color:#374151;font-size:12px;font-weight:700;letter-spacing:.04em}.cs-lampiran-count{background:#e5e7eb;border-radius:999px;color:#6b7280;font-size:12px;font-weight:600;padding:2px 10px}.cs-lampiran-list{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.cs-lampiran-item{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;display:flex;gap:10px;padding:8px 10px}.cs-lampiran-thumb{display:block!important;object-fit:cover}.cs-lampiran-emoji,.cs-lampiran-thumb{border:1px solid #e5e7eb;border-radius:6px;flex-shrink:0;height:40px;width:40px}.cs-lampiran-emoji{align-items:center;background:#f1f5f9;display:flex;font-size:20px;justify-content:center}.cs-lampiran-nama{color:#1e293b;flex:1 1;font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-lampiran-actions{display:flex;flex-shrink:0;gap:4px}.cs-lampiran-btn{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;display:flex;height:30px;justify-content:center;text-decoration:none;transition:background .15s,color .15s;width:30px}.cs-lampiran-btn:hover{background:#2563eb;border-color:#2563eb;color:#fff}*,:after,:before{box-sizing:border-box;margin:0;padding:0}.login-wrapper{align-items:center;display:flex;font-family:Segoe UI,Inter,sans-serif;justify-content:center;min-height:100vh;overflow:hidden;position:relative}.login-bg{inset:0;position:fixed;z-index:0}.login-bg-img{display:block;height:100%;object-fit:cover;object-position:center;width:100%}.login-bg-overlay{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#1e3ca09e;inset:0;position:absolute}.login-container{align-items:center;animation:fadeInUp .5s ease both;display:flex;flex-direction:column;padding:20px 16px;position:relative;width:100%;z-index:10}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.login-logo{margin-bottom:-28px;z-index:2}.login-logo-img{filter:drop-shadow(0 4px 16px rgba(0,0,0,.35));height:80px;object-fit:contain;width:80px}.login-card{background:#fff;border-radius:18px;box-shadow:0 24px 60px #00000040,0 4px 12px #00000014;max-width:420px;padding:52px 44px 36px;width:100%}.login-title{color:#1a1a2e;font-size:2rem;font-weight:700;letter-spacing:-.3px;margin-bottom:28px;text-align:center}.login-form{gap:18px}.login-field,.login-form{display:flex;flex-direction:column}.login-field{gap:6px}.login-label{color:#374151;font-size:.875rem;font-weight:500}.login-input{background:#fff;border:1.5px solid #d1d5db;border-radius:10px;color:#1a1a2e;font-size:.95rem;outline:none;padding:12px 14px;transition:border-color .2s,box-shadow .2s;width:100%}.login-input:focus{border-color:#3b5bdb;box-shadow:0 0 0 3px #3b5bdb1f}.login-input::placeholder{color:#9ca3af}.login-input-wrap{position:relative}.login-input-wrap .login-input{padding-right:44px}.toggle-password{align-items:center;background:none;border:none;color:#6b7280;cursor:pointer;display:flex;padding:4px;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:color .2s}.toggle-password:hover{color:#3b5bdb}.login-error{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:.85rem;gap:8px;padding:10px 14px}.login-btn,.login-error{align-items:center;display:flex}.login-btn{background:linear-gradient(135deg,#3b5bdb,#2563eb);border:none;border-radius:10px;box-shadow:0 4px 16px #3b5bdb59;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;justify-content:center;letter-spacing:.3px;margin-top:4px;min-height:50px;padding:14px;transition:transform .15s,box-shadow .2s,background .2s;width:100%}.login-btn:hover:not(:disabled){background:linear-gradient(135deg,#2f4ec4,#1d4ed8);box-shadow:0 6px 20px #3b5bdb73;transform:translateY(-1px)}.login-btn:active:not(:disabled){transform:translateY(0)}.login-btn:disabled{cursor:not-allowed;opacity:.7}.spinner{animation:spin .7s linear infinite;border:2.5px solid #fff6;border-radius:50%;border-top-color:#fff;height:22px;width:22px}.login-back{background:none;border:none;color:#6b7280;cursor:pointer;display:block;font-size:.875rem;margin-top:18px;padding:4px;text-align:center;transition:color .2s;width:100%}.login-back:hover{color:#3b5bdb}@media (max-width:480px){.login-card{border-radius:16px;padding:48px 24px 28px}.login-title{font-size:1.65rem}.login-logo-img{height:68px;width:68px}}@media (max-width:360px){.login-card{padding:44px 18px 24px}}:root{--sidebar-w:240px;--topbar-h:64px;--bg:#f0f2f7;--surface:#fff;--border:#e5e8ef;--primary:#2f54eb;--primary-light:#e8eeff;--text:#1a1d2e;--muted:#7a8099;--radius:14px;--shadow:0 2px 16px #00000012;--shadow-lg:0 8px 32px #0000001f}*{box-sizing:border-box;margin:0;padding:0}.db-root{background:#f0f2f7;background:var(--bg);color:#1a1d2e;color:var(--text);display:flex;font-family:Plus Jakarta Sans,sans-serif;min-height:100vh}.db-sidebar{background:#fff;background:var(--surface);border-right:1px solid #e5e8ef;border-right:1px solid var(--border);bottom:0;box-shadow:0 2px 16px #00000012;box-shadow:var(--shadow);display:flex;flex-direction:column;left:0;position:fixed;top:0;transition:transform .28s cubic-bezier(.4,0,.2,1);width:240px;width:var(--sidebar-w);z-index:100}.db-sidebar-logo{align-items:center;border-bottom:1px solid #e5e8ef;border-bottom:1px solid var(--border);display:flex;gap:12px;padding:20px 20px 16px}.db-logo-img{height:40px;object-fit:contain;width:40px}.db-logo-text{display:flex;flex-direction:column}.db-logo-title{color:#1a1d2e;color:var(--text);font-size:.85rem;font-weight:700;line-height:1.2}.db-logo-sub{color:#7a8099;color:var(--muted);font-size:.7rem}.db-nav{display:flex;flex:1 1;flex-direction:column;gap:4px;padding:16px 12px}.db-nav-item{align-items:center;background:none;border:none;border-radius:10px;color:#7a8099;color:var(--muted);cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:500;gap:12px;padding:10px 14px;text-align:left;transition:all .15s;width:100%}.db-nav-item:hover{background:#f0f2f7;background:var(--bg);color:#1a1d2e;color:var(--text)}.db-nav-item.active{background:#e8eeff;background:var(--primary-light);color:#2f54eb;color:var(--primary);font-weight:600}.db-nav-icon{font-size:1rem}.db-nav-label{flex:1 1}.db-logout-btn{align-items:center;background:#fff5f5;border:1px solid #fde8e8;border-radius:10px;color:#e53e3e;cursor:pointer;display:flex;font-family:inherit;font-size:.85rem;font-weight:600;gap:8px;margin:12px;padding:10px 14px;transition:all .15s}.db-logout-btn:hover{background:#fde8e8}.db-overlay{background:#0006;inset:0;position:fixed;z-index:99}.db-main{display:flex;flex:1 1;flex-direction:column;margin-left:240px;margin-left:var(--sidebar-w);min-height:100vh}.db-topbar{align-items:center;background:#fff;background:var(--surface);border-bottom:1px solid #e5e8ef;border-bottom:1px solid var(--border);box-shadow:0 1px 0 #e5e8ef;box-shadow:0 1px 0 var(--border);display:flex;gap:16px;height:64px;height:var(--topbar-h);padding:0 24px;position:sticky;top:0;z-index:50}.db-hamburger{background:none;border:none;cursor:pointer;display:none;flex-direction:column;gap:5px;padding:4px}.db-hamburger span{background:#1a1d2e;background:var(--text);border-radius:2px;display:block;height:2px;width:22px}.db-topbar-title{color:#1a1d2e;color:var(--text);flex:1 1;font-size:1rem;font-weight:700}.db-topbar-user{gap:10px}.db-avatar,.db-topbar-user{align-items:center;display:flex}.db-avatar{background:linear-gradient(135deg,#2f54eb,#5b8dee);background:linear-gradient(135deg,var(--primary),#5b8dee);border-radius:50%;color:#fff;font-size:.875rem;font-weight:700;height:36px;justify-content:center;text-transform:uppercase;width:36px}.db-user-info{display:flex;flex-direction:column}.db-user-name{color:#1a1d2e;color:var(--text);font-size:.8rem;font-weight:600;line-height:1.2}.db-user-role{color:#7a8099;color:var(--muted);font-size:.68rem;text-transform:capitalize}.db-content{flex:1 1;max-width:1200px;padding:28px;width:100%}.db-fade{animation:fadeUp .35s ease both}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.db-page-header{margin-bottom:24px}.db-page-title{color:#1a1d2e;color:var(--text);font-size:1.6rem;font-weight:800;letter-spacing:-.4px}.db-page-sub{color:#7a8099;color:var(--muted);font-size:.85rem;margin-top:4px}.db-stats-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(5,1fr);margin-bottom:24px}.db-stat-card{animation:fadeUp .4s ease both;background:#fff;background:var(--surface);border:1px solid #e5e8ef;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);box-shadow:0 2px 16px #00000012;box-shadow:var(--shadow);padding:20px;transition:transform .2s,box-shadow .2s}.db-stat-card:hover{box-shadow:0 8px 32px #0000001f;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.db-stat-top{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.db-stat-icon{font-size:1.4rem}.db-stat-tag{border-radius:20px;font-size:.68rem;font-weight:600;padding:3px 8px}.tag-blue{background:#e8eeff;color:#2f54eb;color:var(--primary)}.tag-orange{background:#fff3e0;color:#e65100}.tag-yellow{background:#fff8e1;color:#d97706}.tag-green{background:#e6f9f0;color:#16a34a}.tag-red{background:#fef2f2;color:#dc2626}.db-stat-value{color:#1a1d2e;color:var(--text);font-size:2.2rem;font-weight:800;line-height:1;margin-bottom:4px}.db-stat-label{color:#7a8099;color:var(--muted);font-size:.78rem;font-weight:500}.db-card{background:#fff;background:var(--surface);border:1px solid #e5e8ef;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);box-shadow:0 2px 16px #00000012;box-shadow:var(--shadow);overflow:hidden}.db-card-header{align-items:center;border-bottom:1px solid #e5e8ef;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:18px 20px}.db-card-title{color:#1a1d2e;color:var(--text);font-size:.95rem;font-weight:700}.db-link-btn{background:none;border:none;color:#2f54eb;color:var(--primary);cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;transition:opacity .15s}.db-link-btn:hover{opacity:.7}.db-table-wrap{overflow-x:auto}.db-table{border-collapse:collapse;font-size:.85rem;width:100%}.db-table th{background:#f8f9fc;color:#7a8099;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.6px;padding:11px 16px;text-align:left;text-transform:uppercase;white-space:nowrap}.db-table td,.db-table th{border-bottom:1px solid #e5e8ef;border-bottom:1px solid var(--border)}.db-table td{color:#1a1d2e;color:var(--text);padding:13px 16px;vertical-align:middle}.db-table tr:last-child td{border-bottom:none}.db-table tr:hover td{background:#fafbff}.db-kode{background:#e8eeff;background:var(--primary-light);border-radius:6px;color:#2f54eb;color:var(--primary);font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:600;padding:3px 8px;white-space:nowrap}.db-judul-cell{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-date-cell{color:#7a8099;color:var(--muted);font-size:.8rem;white-space:nowrap}.db-badge{border-radius:20px;font-size:.72rem;font-weight:600;padding:4px 10px;white-space:nowrap}.badge-baru{background:#fff3e0;color:#e65100}.badge-diproses{background:#e8eeff;color:#2f54eb;color:var(--primary)}.badge-selesai{background:#e6f9f0;color:#16a34a}.badge-ditolak{background:#fef2f2;color:#dc2626}.db-detail-btn{background:#fff;background:var(--surface);border:1.5px solid #e5e8ef;border:1.5px solid var(--border);border-radius:8px;color:#1a1d2e;color:var(--text);cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;padding:5px 14px;transition:all .15s;white-space:nowrap}.db-detail-btn:hover{border-color:#2f54eb;border-color:var(--primary)}.db-detail-btn:hover,.db-role-badge{background:#e8eeff;background:var(--primary-light);color:#2f54eb;color:var(--primary)}.db-role-badge{border-radius:6px;font-size:.72rem;font-weight:600;padding:3px 8px;text-transform:capitalize}.db-status-dot{font-size:.78rem;font-weight:600}.dot-green{color:#16a34a}.dot-red{color:#dc2626}.db-toggle-btn{border:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.75rem;font-weight:600;padding:5px 12px;transition:opacity .15s}.btn-red{background:#fef2f2;color:#dc2626}.btn-green{background:#e6f9f0;color:#16a34a}.db-toggle-btn:hover{opacity:.8}.db-empty{font-size:.9rem;padding:40px;text-align:center}.db-empty,.db-loading{color:#7a8099;color:var(--muted)}.db-loading{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:80px 0}.db-spinner{animation:spin .7s linear infinite;border:3px solid #e5e8ef;border-top-color:#2f54eb;border:3px solid var(--border);border-radius:50%;border-top-color:var(--primary);height:36px;width:36px}@keyframes spin{to{transform:rotate(1turn)}}.db-modal-backdrop{align-items:center;animation:fadeIn .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0f2880;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:200}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.db-modal{animation:slideUp .25s ease;background:#fff;background:var(--surface);border-radius:18px;box-shadow:0 8px 32px #0000001f;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:90vh;max-width:540px;overflow:hidden;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.db-modal-header{align-items:flex-start;border-bottom:1px solid #e5e8ef;border-bottom:1px solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:22px 24px 16px}.db-modal-kode{background:#e8eeff;background:var(--primary-light);border-radius:6px;color:#2f54eb;color:var(--primary);display:inline-block;font-family:JetBrains Mono,monospace;font-size:.72rem;font-weight:600;margin-bottom:6px;padding:3px 8px}.db-modal-title{color:#1a1d2e;color:var(--text);font-size:1rem;font-weight:700;line-height:1.3}.db-modal-close{background:none;border:none;color:#7a8099;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:4px;transition:color .15s}.db-modal-close:hover{color:#1a1d2e;color:var(--text)}.db-modal-body{display:flex;flex:1 1;flex-direction:column;gap:14px;overflow-y:auto;padding:20px 24px}.db-modal-row{display:flex;font-size:.875rem;gap:12px}.db-modal-lbl{color:#7a8099;color:var(--muted);display:block;font-size:.78rem;font-weight:600;margin-bottom:4px;min-width:80px}.db-modal-desc p{background:#f0f2f7;background:var(--bg);border-radius:8px;color:#1a1d2e;color:var(--text);font-size:.875rem;line-height:1.6;margin-top:4px;padding:12px}.db-modal-field{display:flex;flex-direction:column;gap:6px}.db-modal-lampiran-section{background:#f0f2f7;background:var(--bg);border:1px solid #e5e8ef;border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;gap:10px;padding:14px}.db-modal-lampiran-header{align-items:center;display:flex;justify-content:space-between}.db-lampiran-count{background:#e8eeff;background:var(--primary-light);border-radius:20px;color:#2f54eb;color:var(--primary);font-size:.7rem;padding:2px 8px}.db-lampiran-empty{align-items:center;color:#7a8099;color:var(--muted);display:flex;font-size:.8rem;gap:8px;padding:8px 0 4px}.db-lampiran-item{background:var(--surface);border:1px solid #e5e8ef;border:1px solid var(--border);transition:border-color .15s,box-shadow .15s}.db-lampiran-item:hover{border-color:#c7d2fe;box-shadow:0 1px 6px #2f54eb14}.db-lampiran-thumb{align-items:center;background:#f0f2f7;background:var(--bg);border:1.5px solid #e2e8f0;border-radius:7px;display:flex;height:40px;justify-content:center;overflow:hidden;width:40px}.db-lampiran-img{cursor:zoom-in;height:100%;object-fit:cover;transition:transform .2s;width:100%}.db-lampiran-img:hover{transform:scale(1.05)}.db-lampiran-badge{border-radius:5px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.04em;line-height:1;padding:4px 5px}.db-lampiran-name{color:#1a1d2e;color:var(--text);flex:1 1;font-size:.8rem;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-lampiran-btn{background:#fff;background:var(--surface);border:1px solid #e5e8ef;border:1px solid var(--border);border-radius:7px;color:#7a8099;color:var(--muted);transition:all .15s}.db-lampiran-btn.btn-preview:hover{background:#e8eeff;background:var(--primary-light);border-color:#c7d2fe;color:#2f54eb;color:var(--primary)}.db-lampiran-btn.btn-download:hover{background:#e6f9f0;border-color:#bbf7d0;color:#16a34a}.db-select,.db-textarea{background:#fff;background:var(--surface);border:1.5px solid #e5e8ef;border:1.5px solid var(--border);border-radius:10px;color:#1a1d2e;color:var(--text);font-family:inherit;font-size:.875rem;outline:none;padding:10px 12px;transition:border-color .2s;width:100%}.db-select:focus,.db-textarea:focus{border-color:#2f54eb;border-color:var(--primary);box-shadow:0 0 0 3px #2f54eb1a}.db-textarea{resize:vertical}.db-modal-footer{border-top:1px solid #e5e8ef;border-top:1px solid var(--border);display:flex;flex-shrink:0;gap:10px;justify-content:flex-end;padding:16px 24px}.db-btn-cancel{background:#fff;background:var(--surface);border:1.5px solid #e5e8ef;border:1.5px solid var(--border);border-radius:10px;color:#7a8099;color:var(--muted);cursor:pointer;font-family:inherit;font-size:.875rem;font-weight:600;padding:10px 20px;transition:all .15s}.db-btn-cancel:hover{border-color:#1a1d2e;border-color:var(--text);color:#1a1d2e;color:var(--text)}.db-btn-save{align-items:center;background:linear-gradient(135deg,#2f54eb,#5b8dee);background:linear-gradient(135deg,var(--primary),#5b8dee);border:none;border-radius:10px;box-shadow:0 4px 14px #2f54eb4d;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:700;justify-content:center;min-width:140px;padding:10px 22px;transition:all .15s}.db-btn-save:hover:not(:disabled){box-shadow:0 6px 18px #2f54eb66;transform:translateY(-1px)}.db-btn-save:disabled{cursor:not-allowed;opacity:.7}.db-mini-spin{animation:spin .6s linear infinite;border:2px solid #fff6;border-radius:50%;border-top-color:#fff;height:18px;width:18px}.db-lightbox-backdrop{align-items:center;animation:fadeIn .2s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#050816d9;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:300}.db-lightbox{animation:slideUp .25s ease;background:#fff;background:var(--surface);border-radius:16px;box-shadow:0 24px 64px #00000080;display:flex;flex-direction:column;max-height:90vh;max-width:90vw;overflow:hidden}.db-lightbox-header{align-items:center;border-bottom:1px solid #e5e8ef;border-bottom:1px solid var(--border);display:flex;flex-shrink:0;gap:12px;justify-content:space-between;padding:12px 16px}.db-lightbox-name{color:#1a1d2e;color:var(--text);flex:1 1;font-size:.82rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-lightbox-controls{display:flex;flex-shrink:0;gap:6px}.db-lightbox-btn{align-items:center;background:#f0f2f7;background:var(--bg);border:1px solid #e5e8ef;border:1px solid var(--border);border-radius:8px;color:#7a8099;color:var(--muted);cursor:pointer;display:flex;height:32px;justify-content:center;text-decoration:none;transition:all .15s;width:32px}.db-lightbox-btn:hover{background:#e8eeff;background:var(--primary-light);border-color:#c7d2fe;color:#2f54eb;color:var(--primary)}.db-lightbox-body{align-items:center;background:#f8f9fc;display:flex;flex:1 1;justify-content:center;overflow:auto;padding:16px}.db-lightbox-img{border-radius:8px;box-shadow:0 4px 24px #00000026;max-height:calc(90vh - 80px);max-width:100%;object-fit:contain}.db-toast{animation:toastIn .3s ease;background:#1a1d2e;border-radius:12px;bottom:28px;box-shadow:0 8px 32px #0000001f;box-shadow:var(--shadow-lg);color:#fff;font-size:.875rem;font-weight:600;left:50%;padding:12px 24px;position:fixed;transform:translateX(-50%);white-space:nowrap;z-index:999}@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}code{background:#f0f2f7;background:var(--bg);border-radius:4px;color:#2f54eb;color:var(--primary);font-family:JetBrains Mono,monospace;font-size:.78rem;padding:2px 6px}@media (max-width:1100px){.db-stats-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.db-sidebar{transform:translateX(-100%);width:260px}.db-sidebar.open{transform:translateX(0)}.db-main{margin-left:0}.db-hamburger{display:flex}.db-content{padding:20px 16px}.db-user-info{display:none}.db-stats-grid{gap:12px;grid-template-columns:repeat(2,1fr)}.db-judul-cell{max-width:160px}.db-modal{border-radius:14px;max-width:100%}}@media (max-width:480px){.db-stats-grid{gap:10px;grid-template-columns:1fr 1fr}.db-stat-value{font-size:1.8rem}.db-page-title{font-size:1.3rem}.db-modal{border-radius:14px;max-height:95vh}.db-lampiran-item{flex-wrap:wrap}.db-lightbox{max-height:95vh;max-width:98vw}}.db-lampiran-box{margin-bottom:18px}.db-lampiran-count{background:#e2e8f0;color:#64748b;font-size:12px;font-weight:600}.db-lampiran-list{gap:8px}.db-lampiran-emoji,.db-lampiran-thumb{height:44px;width:44px}.db-lampiran-emoji{font-size:22px}.db-lampiran-btn{display:flex;height:30px;width:30px}.db-lampiran-btn:hover{color:#fff}.db-lampiran-box{margin-bottom:0}.db-lampiran-admin-box{margin-top:12px}.db-admin-dropzone{color:#16a34a}.db-admin-dropzone svg{display:block;flex-shrink:0}.db-admin-dropzone-hint{line-height:1.4}.db-btn-add-user{align-items:center;background:linear-gradient(135deg,#2f54eb,#5b8dee);background:linear-gradient(135deg,var(--primary),#5b8dee);border:none;border-radius:10px;box-shadow:0 4px 14px #2f54eb40;color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;font-weight:700;gap:8px;padding:10px 20px;transition:all .15s;white-space:nowrap}.db-btn-add-user:hover{box-shadow:0 6px 18px #2f54eb59;transform:translateY(-1px)}.db-user-actions{gap:4px}.db-user-actions,.db-user-btn{align-items:center;display:flex}.db-user-btn{background:#f0f2f7;background:var(--bg);border:1px solid #e5e8ef;border:1px solid var(--border);border-radius:7px;color:#7a8099;color:var(--muted);cursor:pointer;flex-shrink:0;height:30px;justify-content:center;transition:all .15s;width:30px}.btn-view:hover{background:#e8eeff;border-color:#c7d2fe;color:#2f54eb;color:var(--primary)}.btn-edit:hover{background:#fff8e1;border-color:#fde68a;color:#d97706}.btn-toggle-off:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}.btn-toggle-on:hover{background:#e6f9f0;border-color:#bbf7d0;color:#16a34a}.btn-delete:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}.db-modal-sm{max-width:460px}.db-user-avatar-wrap{align-items:center;border-bottom:1px solid #e5e8ef;border-bottom:1px solid var(--border);display:flex;gap:14px;margin-bottom:4px;padding:4px 0 12px}.db-user-avatar-lg{align-items:center;background:linear-gradient(135deg,#2f54eb,#5b8dee);background:linear-gradient(135deg,var(--primary),#5b8dee);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1.4rem;font-weight:800;height:52px;justify-content:center;width:52px}.db-user-detail-name{color:#1a1d2e;color:var(--text);font-size:1rem;font-weight:700;margin-bottom:4px}.db-user-detail-grid{display:flex;flex-direction:column;gap:12px}.db-user-detail-item{display:flex;flex-direction:column;gap:3px}.db-password-row{align-items:center;display:flex;gap:8px}.db-password-val{border:1px solid #e5e8ef;border:1px solid var(--border);border-radius:6px;color:#1a1d2e;color:var(--text);flex:1 1;font-family:JetBrains Mono,monospace;font-size:.85rem;letter-spacing:.05em;padding:4px 10px;word-break:break-all}.db-password-toggle,.db-password-val{background:#f0f2f7;background:var(--bg)}.db-password-toggle{align-items:center;border:1px solid #e5e8ef;border:1px solid var(--border);border-radius:7px;color:#7a8099;color:var(--muted);cursor:pointer;display:flex;flex-shrink:0;height:30px;justify-content:center;transition:all .15s;width:30px}.db-password-toggle:hover{background:#e8eeff;background:var(--primary-light);border-color:#c7d2fe;color:#2f54eb;color:var(--primary)}.db-input{background:#fff;background:var(--surface);border:1.5px solid #e5e8ef;border:1.5px solid var(--border);border-radius:10px;color:#1a1d2e;color:var(--text);font-family:inherit;font-size:.875rem;outline:none;padding:10px 12px;transition:border-color .2s,box-shadow .2s;width:100%}.db-input:focus{border-color:#2f54eb;border-color:var(--primary);box-shadow:0 0 0 3px #2f54eb1a}.db-input-hint,.db-input::placeholder{color:#7a8099;color:var(--muted)}.db-input-hint{font-size:.72rem;margin-top:3px}.db-password-input-wrap{position:relative}.db-password-input-wrap .db-input{padding-right:44px}.db-password-eye{align-items:center;background:#0000;border:none;border-radius:6px;color:#7a8099;color:var(--muted);cursor:pointer;display:flex;height:28px;justify-content:center;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:color .15s;width:28px}.db-password-eye:hover{color:#2f54eb;color:var(--primary)}.db-form-row-2{grid-gap:12px;display:grid;gap:12px;grid-template-columns:1fr 1fr}.db-form-error{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.5;padding:10px 14px}.db-confirm-modal{animation:slideUp .25s ease;background:#fff;background:var(--surface);border-radius:18px;box-shadow:0 8px 32px #0000001f;box-shadow:var(--shadow-lg);max-width:380px;padding:32px 28px;text-align:center;width:100%}.db-confirm-icon{font-size:2.5rem;margin-bottom:12px}.db-confirm-title{color:#1a1d2e;color:var(--text);font-size:1.1rem;font-weight:800;margin-bottom:10px}.db-confirm-text{color:#7a8099;color:var(--muted);font-size:.875rem;line-height:1.6;margin-bottom:24px}.db-confirm-actions{display:flex;gap:10px;justify-content:center}.db-btn-danger{background:#dc2626;border:none;border-radius:10px;color:#fff;cursor:pointer;font-family:inherit;font-size:.875rem;font-weight:700;padding:10px 24px;transition:all .15s}.db-btn-danger:hover{background:#b91c1c;transform:translateY(-1px)}.db-lampiran-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px}.db-lampiran-admin-box{background:#f0fdf4;border-color:#86efac;margin-top:4px}.db-lampiran-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.db-lampiran-count{background:#dcfce7;border-radius:999px;color:#16a34a;font-size:11px;font-weight:700;padding:2px 10px}.db-lampiran-list{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.db-lampiran-item{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:10px;padding:8px 10px;transition:border-color .15s}.db-lampiran-item:hover{border-color:#86efac}.db-lampiran-staged{background:#fafafa;border-color:#d1fae5;border-style:dashed}.db-lampiran-thumb{display:block!important;height:40px!important;object-fit:cover;width:40px!important}.db-lampiran-emoji,.db-lampiran-thumb{border:1px solid #e2e8f0;border-radius:6px;flex-shrink:0}.db-lampiran-emoji{align-items:center;background:#f1f5f9;display:flex!important;font-size:20px;height:40px;justify-content:center;width:40px}.db-lampiran-info{display:flex;flex:1 1;flex-direction:column;gap:1px;min-width:0}.db-lampiran-nama{color:#1e293b;flex:1 1;font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-lampiran-size{color:#94a3b8;font-size:11px}.db-lampiran-empty{color:#9ca3af;font-size:13px;font-style:italic;margin:0 0 8px}.db-lampiran-actions{display:flex;flex-shrink:0;gap:4px}.db-lampiran-btn{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;cursor:pointer;display:flex!important;flex-shrink:0;font-size:12px;height:28px;justify-content:center;padding:0;text-decoration:none;transition:background .15s,color .15s,border-color .15s;width:28px}.db-lampiran-btn:hover{background:#2563eb;border-color:#2563eb;color:#fff!important}.db-lampiran-del{background:#fff5f5!important;border-color:#fecaca!important;color:#ef4444!important}.db-lampiran-del:hover{background:#fee2e2!important;border-color:#ef4444!important;color:#dc2626!important}.db-admin-dropzone{align-items:center;background:#f0fdf4;border:2px dashed #86efac;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;justify-content:center;margin-top:10px;padding:16px 12px;text-align:center;transition:background .2s,border-color .2s;-webkit-user-select:none;user-select:none}.db-admin-dropzone.dragover,.db-admin-dropzone:hover{background:#dcfce7;border-color:#4ade80}.db-admin-dropzone-label{color:#15803d;display:block;font-size:13px;font-weight:600}.db-admin-dropzone-hint{color:#6b7280;display:block;font-size:11px;font-weight:400;line-height:1.5}.db-btn-upload-admin{align-items:center;background:#16a34a;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:13px;font-weight:700;gap:6px;justify-content:center;margin-top:10px;padding:10px 16px;transition:background .2s,opacity .2s;width:100%}.db-btn-upload-admin:hover:not(:disabled){background:#15803d}.db-btn-upload-admin:disabled{cursor:not-allowed;opacity:.5}.db-admin-upload-error{background:#fef2f2;border:1px solid #fecaca;border-radius:6px;color:#dc2626;font-size:12px;margin-top:8px;padding:8px 10px}@media (max-width:480px){.db-form-row-2{grid-template-columns:1fr}.db-user-actions{gap:3px}.db-user-btn{height:28px;width:28px}.db-confirm-modal{padding:24px 20px}.db-confirm-actions{flex-direction:column-reverse}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.ef0ffef6.css.map*/