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{--primary-color:#3b82f6;--primary-dark:#1d4ed8;--primary-light:#60a5fa;--success-color:#10b981;--warning-color:#f59e0b;--error-color:#ef4444;--info-color:#06b6d4;--text-primary:#1f2937;--text-secondary:#806b6b;--text-tertiary:#9ca3af;--border-color:#e5e7eb;--background-color:#f8fafc;--card-background:#fff;--shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease;--sidebar-width:280px;--sidebar-collapsed:80px;--header-height:140px}body{background-color:#f8fafc;background-color:var(--background-color);color:#1f2937;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}.app-container,.app-layout{background:linear-gradient(135deg,#f8fafc,#e2e8f0);display:flex;min-height:100vh;width:100%}.action-cells{align-items:center;display:flex;gap:8px;justify-content:center;white-space:nowrap}.action-btn{border:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px;transition:all .2s ease}.edit-btn{background-color:#60a5fa;background-color:var(--primary-light);color:#fff}.edit-btn:hover{background-color:#1d4ed8;background-color:var(--primary-dark);transform:translateY(-2px)}.delete-btn{background-color:#ef4444;background-color:var(--error-color);color:#fff}.delete-btn:hover{background-color:#b91c1c;transform:translateY(-2px)}.sidebar-container{background:linear-gradient(180deg,#1d4ed8,#3b82f6);background:linear-gradient(180deg,var(--primary-dark) 0,var(--primary-color) 100%);border-right:1px solid #e5e7eb;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;height:100vh;justify-content:space-between;left:0;overflow:hidden;position:fixed;top:0;transition:all .3s ease;transition:all var(--transition-normal);z-index:1000}.sidebar-container.open{width:280px;width:var(--sidebar-width)}.sidebar-container.collapsed{width:80px;width:var(--sidebar-collapsed)}.sidebar-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border-bottom:1px solid #ffffff1a;padding:24px 20px}.sidebar-title{align-items:center;color:#fff;display:flex;font-size:18px;font-weight:700;gap:12px;white-space:nowrap}.logo-icon{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:12px;font-size:24px;padding:8px}.sidebar-nav{display:flex;flex:1 1;flex-direction:column;overflow-y:auto;padding:16px 0}.sidebar-item{align-items:center;border-left:4px solid #0000;border-radius:12px;color:#fffc;display:flex;font-size:14px;font-weight:500;gap:16px;margin:4px 12px;padding:14px 20px;text-decoration:none;transition:all .15s ease;transition:all var(--transition-fast);white-space:nowrap}.sidebar-item:hover{background-color:#f3f4f6;color:#3b82f6;color:var(--primary-color);transform:translateX(4px)}.sidebar-item.active{background:#ffffff26;border-left-color:#fff;box-shadow:0 4px 12px #0000001a;color:#fff}.sidebar-item svg{flex-shrink:0;height:20px;width:20px}.sidebar-footer{border-top:1px solid rgba(19,0,0,.897);margin:auto;padding:16px 0}.logout-btn{background:none;border:none;border-radius:12px;color:#e0e6e1eb;cursor:pointer;margin:0 12px;padding:14px 20px;text-align:left;transition:all .15s ease;transition:all var(--transition-fast);width:calc(100% - 24px)}.logout-btn:hover{background:#ef44444d;color:#fff;transform:translateX(4px)}.main-wrapper{margin-left:60px!important}.main-content,.main-wrapper{background-color:#f8fafc;display:flex;flex:1 1;flex-direction:column;transition:margin-left .3s ease}.main-content{margin-left:280px;margin-left:var(--sidebar-width);min-height:100vh;transition:margin-left var(--transition-normal)}.sidebar-container.collapsed~.main-wrapper{margin-left:80px;margin-left:var(--sidebar-collapsed)}.content-area{flex:1 1;overflow-y:auto;padding:20px}.page-container{flex:1 1;overflow-y:auto;padding:24px}header{background:#fff;background:var(--card-background);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow);position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-top,header{border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border-color)}.header-top{justify-content:space-between;padding:16px 24px}.header-left,.header-top{align-items:center;display:flex}.header-left{gap:16px}.menu-toggle{align-items:center;background:#3b82f6;background:var(--primary-color);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:18px;justify-content:center;padding:10px;transition:all .15s ease;transition:all var(--transition-fast)}.menu-toggle:hover{background:#1d4ed8;background:var(--primary-dark);transform:scale(1.05)}.header-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3b82f6,#1d4ed8);background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));-webkit-background-clip:text;color:#1f2937;color:var(--text-primary);font-size:24px;font-weight:700}.header-right{align-items:center;display:flex;gap:16px}.notification-btn,.user-menu-btn{background:none;border:none;border-radius:10px;cursor:pointer;padding:8px;position:relative;transition:all .15s ease;transition:all var(--transition-fast)}.notification-btn:hover,.user-menu-btn:hover{background:#f8fafc;background:var(--background-color)}.notification-badge{background:#ef4444;background:var(--error-color);border:2px solid #fff;border-radius:50%;height:8px;position:absolute;right:6px;top:6px;width:8px}.user-avatar{align-items:center;background:linear-gradient(135deg,#3b82f6,#1d4ed8);background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-radius:50%;color:#fff;display:flex;font-size:16px;font-weight:700;height:40px;justify-content:center;width:40px}.user-info{text-align:left}.user-name{font-size:14px;font-weight:600}.user-role{color:#806b6b;color:var(--text-secondary);font-size:12px}.header-nav{display:flex;gap:8px;overflow-x:auto;padding:0 24px;scrollbar-width:none}.header-nav::-webkit-scrollbar{display:none}.nav-item{align-items:center;background:#0000;border:2px solid #0000;border-radius:12px;color:#806b6b;color:var(--text-secondary);display:flex;font-size:14px;font-weight:500;gap:8px;padding:12px 20px;text-decoration:none;transition:all .15s ease;transition:all var(--transition-fast);white-space:nowrap}.nav-item:hover{background:#f8fafc;background:var(--background-color)}.nav-item.active,.nav-item:hover{color:#3b82f6;color:var(--primary-color)}.nav-item.active{background:#3b82f61a;border-color:#3b82f6;border-color:var(--primary-color)}.card,.nav-item.active{box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow)}.card{background:#fff;background:var(--card-background);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:16px;padding:24px;transition:all .15s ease;transition:all var(--transition-fast)}.card:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-hover{cursor:pointer;transition:all .15s ease;transition:all var(--transition-fast)}.card-hover:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);transform:translateY(-4px)}.btn,.btn-export{align-items:center;border:none;border-radius:12px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:12px 20px;text-decoration:none;transition:all .15s ease;transition:all var(--transition-fast);white-space:nowrap}.btn-export.excel{alignitems:center;borderradius:12px;fontweight:600;fontsize:14px;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px #10b9814d;padding:14px 24px}.btn-export.excel,.btn-export.pdf{border:none;color:#fff;display:inline-flex;gap:8px;transition:all .3s ease}.btn-export.pdf{alignItems:center;borderRadius:12px;fontWeight:600;fontSize:14px;background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef44444d;margin-left:20px;padding:14px 24px 14px 100px}.btn-export:hover:not(:disabled){box-shadow:0 6px 20px #0003;transform:translateY(-2px)}.btn-export:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));box-shadow:0 4px 12px #3b82f64d;color:#fff;padding:20px}.btn-primary:hover{box-shadow:0 6px 20px #3b82f666;transform:translateY(-2px)}.btn-outline{background:#0000;border:2px solid #3b82f6;border:2px solid var(--primary-color);color:#3b82f6;color:var(--primary-color)}.btn-outline:hover{background:#3b82f6;background:var(--primary-color);color:#fff}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);background:linear-gradient(135deg,var(--error-color),#dc2626);color:#fff}.btn-danger:hover{box-shadow:0 6px 20px #ef44444d;transform:translateY(-2px)}.btn-sm{font-size:12px;padding:8px 16px}.export-icon{font-size:16px}.export-date-range{border-top:1px solid #fff3;margin-top:24px;padding-top:16px}.date-input-group{align-items:end;display:flex;flex-wrap:wrap;gap:20px;margin-bottom:"24px"}.date-input{flex:0 0 auto}.date-input label{color:#ffffffe6;display:block;font-size:12px;font-weight:600;margin-bottom:6px}.date-picker{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #ffffff4d;border-radius:8px;color:#fff;font-size:14px;min-height:44px;padding:10px 12px;width:100%}.date-picker:focus{border-color:#fff9;box-shadow:0 0 0 3px #ffffff1a;outline:none}.date-picker::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}.header-background-pattern{background:radial-gradient(circle at 20% 80%,#ffffff1a 0,#0000 50%),radial-gradient(circle at 80% 20%,#ffffff1a 0,#0000 50%);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.btn-light{background:#ffffffe6;border:1px solid #ffffff80;color:#3b82f6;color:var(--primary-color)}.btn-light:hover:not(:disabled){background:#fff;box-shadow:0 6px 20px #00000026;transform:translateY(-2px)}.form-group{margin-bottom:16px}.form-label{color:#1f2937;display:block;font-size:14px;margin-bottom:6px}.form-input,.form-select,.form-textarea{background:#fff;border:2px solid #e5e7eb;border:2px solid var(--border-color);border-radius:12px;font-size:14px;padding:12px 16px;transition:all .15s ease;transition:all var(--transition-fast);width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#3b82f6;border-color:var(--primary-color);box-shadow:0 0 0 3px #93aa891a;outline:none}.data-table{background:#fff;border-collapse:collapse;border-radius:12px;box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow);overflow:hidden;width:100%}.data-table th{background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:#1f2937;color:var(--text-primary);font-weight:600;letter-spacing:.5px;text-align:left;text-transform:uppercase}.data-table td,.data-table th{border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border-color);font-size:14px;padding:16px}.data-table td{overflow:visible!important;transition:background-color .15s ease;transition:background-color var(--transition-fast)}.data-table td button{align-items:center;border:none;cursor:pointer;display:inline-flex;gap:4px}.data-table td .btn-danger,.data-table td .btn-outline{border-radius:6px;font-size:12px;padding:6px 10px}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover{background:linear-gradient(90deg,#3b82f60d,#0000)}.data-table tr:nth-child(2n){background-color:#fafafa}.data-table tr:nth-child(2n):hover{background:linear-gradient(90deg,#3b82f614,#0000)}.grid{grid-gap:24px;display:grid;gap:24px}.grid-cols-1{grid-template-columns:1fr}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.flex{display:flex}.flex-between{justify-content:space-between}.flex-between,.flex-center{align-items:center;display:flex}.flex-center{justify-content:center}.flex-col{flex-direction:column}.gap-2{gap:8px}.gap-4{gap:16px}.gap-6{gap:24px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.p-4{padding:16px}.p-6{padding:24px}.text-center{text-align:center}.text-right{text-align:right}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease}@keyframes slideIn{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.slide-in{animation:slideIn .3s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f8fafc;background:var(--background-color)}::-webkit-scrollbar-thumb{background:#e5e7eb;background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#9ca3af;background:var(--text-tertiary)}.stats-card{align-items:center;background:#fff;background:var(--card-background);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:20px;box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow);display:flex;gap:16px;min-height:120px;overflow:hidden;padding:24px;position:relative;transition:all .3s ease;transition:all var(--transition-normal)}.stats-card:before{background:linear-gradient(90deg,#3b82f6,#60a5fa);background:linear-gradient(90deg,var(--primary-color),var(--primary-light));border-radius:16px 16px 0 0;content:"";height:3px;left:0;position:absolute;right:0;top:0}.stats-card:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);transform:translateY(-8px)}.stats-icon{align-items:center;border-radius:12px;box-shadow:0 4px 12px #0000001a;display:flex;flex-shrink:0;font-size:20px;height:50px;justify-content:center;width:50px}.stats-content{flex:1 1}.stats-label{color:#806b6b;color:var(--text-secondary);font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.stats-value{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#1f2937,#806b6b);background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;font-size:20px;font-weight:700;margin-bottom:4px}.stats-trend{font-size:11px;font-weight:600}.trend-up{background:#10b9811a;color:#10b981;color:var(--success-color)}.trend-down,.trend-up{border-radius:8px;padding:2px 6px}.trend-down{background:#ef44441a;color:#ef4444;color:var(--error-color)}.trend-neutral{background:#f59e0b1a;border-radius:8px;color:#f59e0b;color:var(--warning-color);padding:2px 6px}.stats-card.total-saldo .stats-icon{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.stats-card.cash .stats-icon{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.stats-card.main-bca .stats-icon{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.stats-card.bca-dir .stats-icon{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff}.stats-card.pcu .stats-icon{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}.stats-card.transactions .stats-icon{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#1f2937;color:var(--text-primary)}.stats-card.total-saldo:hover{border-color:#667eea;box-shadow:0 20px 40px #667eea26,0 8px 24px #667eea1a}.stats-card.cash:hover{border-color:#f5576c;box-shadow:0 20px 40px #f5576c26,0 8px 24px #f5576c1a}.stats-card.main-bca:hover{border-color:#4facfe;box-shadow:0 20px 40px #4facfe26,0 8px 24px #4facfe1a}.stats-card.bca-dir:hover{border-color:#43e97b;box-shadow:0 20px 40px #43e97b26,0 8px 24px #43e97b1a}.stats-card.pcu:hover{border-color:#fa709a;box-shadow:0 20px 40px #fa709a26,0 8px 24px #fa709a1a}.stats-card.transactions:hover{border-color:#f73f82;box-shadow:0 20px 40px #a8edea26,0 8px 24px #a8edea1a}.stats-horizontal-container{overflow-x:auto;padding-bottom:8px;width:100%}.stats-row{display:flex;gap:12px;min-width:-webkit-max-content;min-width:max-content}.stats-card-horizontal{align-items:center;background:#fff;background:var(--card-background);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:16px;box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow);display:flex;flex-shrink:0;gap:16px;min-width:220px;padding:20px;transition:all .3s ease;transition:all var(--transition-normal)}.stats-card-horizontal:before{background:linear-gradient(90deg,#3b82f6,#60a5fa);background:linear-gradient(90deg,var(--primary-color),var(--primary-light));border-radius:16px 16px 0 0;content:"";height:3px;left:0;position:absolute;right:0;top:0}.stats-card-horizontal:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.stats-icon-horizontal{align-items:center;border-radius:12px;box-shadow:0 4px 12px #0000001a;display:flex;flex-shrink:0;font-size:20px;height:50px;justify-content:center;width:50px}.stats-content-horizontal{flex:1 1;text-align:center}.stats-value-horizontal{color:#1f2937;color:var(--text-primary);font-size:24px;font-weight:700;margin-bottom:4px}.stats-label-horizontal{color:#806b6b;color:var(--text-secondary);font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.stats-trend-horizontal{font-size:11px;font-weight:600}.stats-horizontal-container::-webkit-scrollbar{height:6px}.stats-horizontal-container::-webkit-scrollbar-track{background:#f8fafc;background:var(--background-color);border-radius:3px}.stats-horizontal-container::-webkit-scrollbar-thumb{background:#e5e7eb;background:var(--border-color);border-radius:3px}.stats-horizontal-container::-webkit-scrollbar-thumb:hover{background:#9ca3af;background:var(--text-tertiary)}.quick-actions-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:24px}.quick-action-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 3px 0 #0000001a;color:inherit;display:flex;flex-direction:column;height:100%;min-height:140px;padding:24px;text-decoration:none;transition:all .3s ease}.quick-action-card:hover{box-shadow:0 10px 25px #00000026;transform:translateY(-4px)}.quick-action-header{align-items:flex-start;display:flex;gap:16px;margin-bottom:12px}.quick-action-icon{align-items:center;border-radius:12px;display:flex;flex-shrink:0;font-size:20px;height:50px;justify-content:center;width:50px}.quick-action-content{flex:1 1;min-width:0}.quick-action-title{color:#1f2937;font-size:16px;font-weight:700;line-height:1.3;margin-bottom:6px}.quick-action-description{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#6b7280;display:-webkit-box;font-size:13px;line-height:1.4;max-height:2.8em;overflow:hidden;text-overflow:ellipsis}.quick-action-count{align-self:flex-start;background:#3b82f61a;border-radius:8px;color:#3b82f6;font-size:12px;font-weight:600;margin-top:12px;padding:4px 8px}@media (max-width:1024px){.stats-card{padding:20px}.stats-icon{height:50px;width:50px}.stats-icon,.stats-value{font-size:20px}}@media (max-width:768px){.grid.grid-cols-3{grid-template-columns:1fr}.stats-card{padding:16px}.stat-row{gap:8px}.stats-card-horizontal{min-width:180px;padding:16px}.stats-value-horizontal{font-size:20px}.date-input-group,.export-date-range .flex{flex-direction:column;gap:12px}}@media (max-width:1024px){.grid-cols-4{grid-template-columns:repeat(2,1fr)}.sidebar-container{transform:translateX(-100%)}.sidebar-container.open{transform:translateX(0)}.main-content{margin-left:0!important}.grid.grid-cols-5{grid-template-columns:repeat(3,1fr)}.quick-action-grid{gap:16px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.quick-action-card{min-height:130px;padding:20px}.quick-action-icon{font-size:18px;height:45px;width:45px}.quick-action-title{font-size:15px}.quick-action-description{-webkit-line-clamp:2;font-size:12px;max-height:2.6em}}@media (max-width:768px){.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}.header-nav{padding:0 16px}.page-container{padding:16px}.card{padding:20px}.gri.grid-cols-5{grid-template-columns:repeat(2,1fr)}.quick-actions-grid{gap:12px;grid-template-columns:1fr}.quick-action-card{min-height:120px;padding:16px}.quick-action-header{gap:12px}.quick-action-icon{font-size:16px;height:40px;width:40px}.quick-action-title{font-size:14px}.quick-action-description{-webkit-line-clamp:2;font-size:12px;max-height:2.4em}}@media (max-width:640px){.header-top{padding:12px 16px}.user-info{display:none}}@media (max-width:480px){.header-title{font-size:20px}.menu-toggle{font-size:16px;padding:8px}.grid.grid-cols-5{grid-template-columns:1fr}.quick-action-description{-webkit-line-clamp:3;max-height:4.2em}}.kartu{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;padding:24px;transition:box-shadow .3s ease,transform .2s ease;width:95%}.kartu:hover{box-shadow:0 10px 24px #0000001a;transform:translateY(-2px)}.kartu h2{color:#2d3748;font-size:1.6rem;font-weight:600;margin-bottom:20px;text-align:center}.kartu-table{background-color:#fafafa;border-collapse:collapse;border-radius:12px;overflow:hidden;width:100%}.kartu-table thead{background:linear-gradient(90deg,#4f46e5,#6366f1);color:#fff}.kartu-table th{font-weight:500;letter-spacing:.5px;text-align:left;text-transform:uppercase}.kartu-table td,.kartu-table th{font-size:.95rem;padding:14px 16px}.kartu-table td{border-bottom:1px solid #e2e8f0;color:#090a0b}.kartu-table tbody tr:nth-child(2n){background-color:#f9fafb}.kartu-table tbody tr:hover{background-color:#eef2ff;transition:background-color .2s ease}.kartu-table td:last-child{color:#565b13;font-weight:600}@media (max-width:1024px){.card{margin:24px auto;padding:20px;width:95%}}@media (max-width:600px){.card{padding:16px}.kartu-table,.kartu-table tbody,.kartu-table td,.kartu-table th,.kartu-table thead,.kartu-table tr{display:block}.kartu-table thead{display:none}.kartu-table tr{background:#fff;border-radius:12px;box-shadow:0 2px 6px #0000000d;margin-bottom:16px}.kartu-table td{border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;padding:12px 16px}.kartu-table td:before{color:#4a5568;content:attr(data-label);font-weight:600}}:root{--primary-gradient:linear-gradient(135deg,#667eea,#764ba2);--secondary-gradient:linear-gradient(135deg,#f093fb,#f5576c);--success-gradient:linear-gradient(135deg,#4facfe,#00f2fe);--warning-gradient:linear-gradient(135deg,#43e97b,#38f9d7);--dark-color:#1a202c;--light-color:#f7fafc;--text-primary:#2d3748;--text-secondary:#718096;--border-color:#e2e8f0;--shadow:0 4px 6px #0000001a;--shadow-lg:0 10px 25px #00000026;--border-radius:12px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}*{box-sizing:border-box;margin:0;padding:0}.login-container{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;min-height:100vh;min-height:100dvh;overflow-x:hidden;position:relative}.login-background{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:1}.floating-shapes{height:100%;position:relative;width:100%}.shape{animation:float 8s ease-in-out infinite;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea14,#764ba214);border-radius:50%;position:absolute}.shape-1{animation-delay:0s;height:60px;left:5%;top:15%;width:60px}.shape-2{animation-delay:1.5s;height:100px;right:5%;top:65%;width:100px}.shape-3{animation-delay:3s;bottom:15%;height:40px;left:15%;width:40px}.shape-4{animation-delay:4.5s;height:80px;right:15%;top:25%;width:80px}@keyframes float{0%,to{transform:translateY(0) rotate(0deg) scale(1)}33%{transform:translateY(-20px) rotate(120deg) scale(1.1)}66%{transform:translateY(10px) rotate(240deg) scale(.9)}}.login-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #fff3;border-radius:12px;border-radius:var(--border-radius);box-shadow:0 10px 25px #00000026;box-shadow:var(--shadow-lg);display:flex;flex:1 1;flex-direction:column;justify-content:center;margin:auto;max-width:min(440px,90vw);overflow:hidden;padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);position:relative;z-index:2}.login-card:before{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);content:"";height:4px;left:0;position:absolute;right:0;top:0}.login-header{margin-bottom:clamp(24px,4vw,32px);text-align:center}.logo-container{align-items:center;display:flex;flex-wrap:wrap;gap:clamp(8px,2vw,12px);justify-content:center;margin-bottom:clamp(16px,3vw,24px)}.logo-icon{border-radius:10px;box-shadow:0 4px 12px #667eea4d;font-size:clamp(24px,4vw,32px);line-height:1;padding:clamp(8px,2vw,12px)}.logo-icon,.logo-text{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient)}.logo-text{-webkit-text-fill-color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(20px,4vw,28px);font-weight:700;line-height:1.2}.login-title{color:#2d3748;color:var(--text-primary);font-size:clamp(18px,3vw,24px);font-weight:600;line-height:1.3;margin-bottom:clamp(4px,1vw,8px)}.login-subtitle{color:#718096;color:var(--text-secondary);font-size:clamp(12px,2vw,14px);line-height:1.4;margin:0 auto;max-width:280px}.error-message{align-items:center;animation:slideDown .3s ease-out;background:linear-gradient(135deg,#fed7d7,#feb2b2);border:1px solid #fc8181;border-radius:8px;color:#c53030;display:flex;font-size:clamp(12px,2vw,14px);gap:8px;margin-bottom:clamp(16px,3vw,20px);padding:clamp(10px,2vw,12px) clamp(12px,2vw,16px)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-icon{flex-shrink:0;font-size:clamp(14px,2vw,16px)}.login-form{gap:clamp(16px,3vw,20px)}.form-group,.login-form{display:flex;flex-direction:column}.form-group{gap:6px}.form-label{align-items:center;color:#2d3748;color:var(--text-primary);display:flex;font-size:clamp(12px,2vw,14px);font-weight:600;gap:6px;line-height:1.4}.label-icon{flex-shrink:0}.form-input,.label-icon{font-size:clamp(14px,2vw,16px)}.form-input{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid #e2e8f0;border:2px solid var(--border-color);border-radius:8px;padding:clamp(12px,3vw,14px) clamp(14px,3vw,16px);transition:all .3s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:100%}.form-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none;transform:translateY(-1px)}.form-input:disabled{background-color:#f7fafc;cursor:not-allowed;opacity:.7}.password-input-container{align-items:center;display:flex;position:relative}.password-input{flex:1 1;padding-right:clamp(44px,4vw,50px)}.password-toggle{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;font-size:clamp(14px,2vw,16px);justify-content:center;min-height:32px;min-width:32px;padding:6px;position:absolute;right:8px;top:50%;transform:translateY(-50%);transition:all .3s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.password-toggle:hover:not(:disabled){background-color:#f7fafc;transform:translateY(-50%) scale(1.1)}.password-toggle:active:not(:disabled){transform:translateY(-50%) scale(.95)}.password-toggle:disabled{cursor:not-allowed;opacity:.5}.form-options{flex-wrap:wrap;font-size:clamp(12px,2vw,14px);gap:12px;justify-content:space-between}.form-options,.remember-me{align-items:center;display:flex}.remember-me{color:#718096;color:var(--text-secondary);cursor:pointer;gap:8px;transition:all .3s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.remember-me:hover{color:#2d3748;color:var(--text-primary)}.remember-me input{display:none}.checkmark{align-items:center;border:2px solid #e2e8f0;border:2px solid var(--border-color);border-radius:4px;display:flex;flex-shrink:0;height:18px;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:18px}.remember-me input:checked+.checkmark{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);border-color:#667eea}.remember-me input:checked+.checkmark:after{color:#fff;content:"✓";font-size:12px;font-weight:700}.forgot-password{border-radius:4px;color:#667eea;font-weight:500;padding:4px 8px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.forgot-password:hover{background-color:#667eea1a;color:#5a67d8;text-decoration:none}.forgot-password:active{transform:scale(.95)}.login-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);border:none;border-radius:8px;box-shadow:0 4px 12px #667eea4d;color:#fff;cursor:pointer;display:flex;font-size:clamp(14px,2vw,16px);font-weight:600;gap:8px;justify-content:center;margin-top:8px;min-height:52px;overflow:hidden;padding:clamp(14px,3vw,16px) clamp(20px,3vw,24px);position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.login-button:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.login-button:hover:not(:disabled):before{left:100%}.login-button:hover:not(:disabled){box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{box-shadow:none;cursor:not-allowed;opacity:.7;transform:none}.button-icon{font-size:clamp(16px,2vw,18px)}.loading-spinner{animation:spin 1s linear infinite;border:2px solid #0000;border-radius:50%;border-top-color:#fff;flex-shrink:0;height:18px;width:18px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-footer{border-top:1px solid #e2e8f0;border-top:1px solid var(--border-color);margin-top:clamp(24px,4vw,32px);padding-top:clamp(16px,3vw,20px);text-align:center}.footer-text{color:#718096;color:var(--text-secondary);line-height:1.4;margin-bottom:8px}.footer-text,.security-badge{font-size:clamp(10px,2vw,12px)}.security-badge{align-items:center;background:#f0fff4;border:1px solid #c6f6d5;border-radius:20px;color:#276749;display:inline-flex;font-weight:500;gap:6px;line-height:1;padding:6px 12px}.security-icon{font-size:clamp(12px,2vw,14px)}.features-sidebar{background:linear-gradient(135deg,#384cc0d9,#261934cc),url(https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80) 50%/cover no-repeat;color:#fff;display:flex;flex:1 1;flex-direction:column;justify-content:center;min-height:100vh;overflow:hidden;padding:clamp(40px,6vw,60px) clamp(24px,4vw,40px);position:relative;z-index:2}.features-sidebar:before{background:radial-gradient(circle at 20% 80%,#ffffff26 0,#0000 40%),radial-gradient(circle at 80% 20%,#ffffff1a 0,#0000 40%);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}.features-title{font-size:clamp(22px,4.5vw,32px);font-weight:800;letter-spacing:-.5px;line-height:1.3;margin-bottom:clamp(28px,5vw,48px);position:relative;text-align:center;text-shadow:0 4px 8px #0006}.features-title:after{background:linear-gradient(90deg,#0000,#fffc,#0000);border-radius:2px;bottom:-12px;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);width:80px}.feature-list{flex-direction:column;gap:clamp(16px,3.5vw,28px)}.feature-item,.feature-list{display:flex;position:relative}.feature-item{align-items:flex-start;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:#ffffff1f;border:1px solid #ffffff40;border-radius:16px;box-shadow:0 8px 32px #0000001a,inset 0 1px 0 #fff3;cursor:default;gap:clamp(14px,3vw,18px);overflow:hidden;padding:clamp(16px,3vw,20px);transition:all .4s cubic-bezier(.25,.46,.45,.94)}.feature-item:hover{background:#ffffff26;border-color:#fff6;box-shadow:0 12px 40px #0003,inset 0 1px 0 #ffffff4d;transform:translateX(8px)}.feature-icon{align-items:center;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#fff3;border:1px solid #ffffff40;border-radius:12px;display:flex;flex-shrink:0;font-size:clamp(20px,3.5vw,26px);justify-content:center;line-height:1;min-height:50px;min-width:50px;padding:clamp(8px,2vw,10px);transition:all .3s ease}.feature-item:hover .feature-icon{background:#ffffff4d;border-color:#fff6;transform:scale(1.15) rotate(5deg)}.feature-content{flex:1 1}.feature-content h4{font-size:clamp(14px,2vw,16px);font-weight:700;letter-spacing:-.3px;line-height:1.3;margin-bottom:6px;text-shadow:0 2px 4px #0006}.feature-content p{font-size:clamp(12px,2vw,14px);line-height:1.5;margin:0;opacity:.95;text-shadow:0 1px 3px #0000004d}@media (max-width:1024px){.features-sidebar{display:none}.login-card{margin:clamp(20px,4vw,40px) auto;max-width:min(400px,85vw)}}@media (min-width:1025px){.features-sidebar{display:flex}}@media (max-width:768px){.login-container{align-items:flex-start;padding:clamp(16px,3vw,20px)}.login-card{margin:clamp(10px,2vw,20px) auto;padding:clamp(24px,4vw,32px) clamp(20px,3vw,24px)}.logo-container{flex-direction:row;text-align:center}.form-options{flex-direction:row;justify-content:space-between}.feature-item{flex-direction:row;text-align:left}}@media (max-width:480px){.login-card{border-radius:16px;padding:clamp(20px,3vw,24px) clamp(16px,3vw,20px)}.login-title{font-size:clamp(16px,3vw,20px)}.logo-text{font-size:clamp(18px,3vw,24px)}.form-options{align-items:flex-start;flex-direction:column;gap:12px}.forgot-password{align-self:flex-end}.feature-item{flex-direction:column;gap:12px}.feature-content h4,.feature-content p,.feature-item{text-align:center}}@media (max-width:360px){.login-card{margin:10px;max-width:calc(100vw - 20px);padding:20px 16px}.logo-container{flex-direction:column}.login-button{min-height:48px}.form-input{padding:14px 12px}}@media (hover:none) and (pointer:coarse){.feature-item:hover,.forgot-password:hover,.login-button:hover:not(:disabled),.password-toggle:hover{transform:none}.login-button:active:not(:disabled){transform:scale(.98)}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){.login-card{border:2px solid #000}.form-input{border-width:2px}}@media (prefers-color-scheme:dark){.login-card{background:#1a202c;background:var(--dark-color);border-color:#2d3748}.form-input,.login-card{color:#f7fafc;color:var(--light-color)}.form-input{background:#2d3748;border-color:#4a5568}.form-input:focus{border-color:#667eea}.footer-text,.login-subtitle{color:#a0aec0}.password-toggle:hover:not(:disabled){background-color:#2d3748}}@media print{.features-sidebar,.login-background{display:none}.login-card{border:1px solid #000;box-shadow:none}.login-button{background:#000!important;color:#fff!important}}
/*# sourceMappingURL=main.9efcc16f.css.map*/