*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,sans-serif;background-color:#f3f4f6;color:#111827}.detailsurat-page{min-height:100vh;background:#f4f6f8}.detailsurat-content{max-width:1100px;margin:-40px auto 0;padding:0 24px 40px}.detailsurat-wrapper{display:flex;justify-content:center}.detailsurat-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 15px 35px #00000014}.detailsurat-header{background:linear-gradient(135deg,#1e293b,#334155);padding:22px 28px;color:#fff;border-radius:16px 16px 0 0}.detailsurat-header h2{margin:0;font-size:22px;font-weight:600}.detailsurat-header .subtitle{display:block;font-size:13px;opacity:.85;margin-top:4px}.detail-section{padding:28px}.detail-grid{display:grid;grid-template-columns:1fr;gap:6px}.detail-row{display:grid;grid-template-columns:240px 20px 1fr;padding:10px 0;border-bottom:1px dashed #e5e7eb}.detail-row:last-child{border-bottom:none}.detail-label{font-size:13px;font-weight:600;color:#475569;text-transform:uppercase}.detail-separator{text-align:center;font-weight:600;color:#94a3b8}.detail-value{font-size:14px;color:#0f172a;line-height:1.6;white-space:pre-wrap}.detail-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:32px;padding-top:16px;border-top:1px solid #e5e7eb}.action-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;border-radius:10px;border:none;cursor:pointer;transition:all .25s ease}.action-btn.primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 8px 20px #2563eb59}.action-btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px #2563eb73}@media(max-width:640px){.detail-actions{flex-direction:column-reverse}.action-btn{width:100%;justify-content:center}}` .select-box{border:1px solid #cbd5e1;padding:10px;border-radius:6px;cursor:pointer;background:#fff}.modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;justify-content:center;align-items:center;z-index:999}.modal-box{width:420px;max-height:80vh;background:#fff;border-radius:10px;padding:16px;display:flex;flex-direction:column}.modal-box h3{margin-bottom:10px}.search-input{padding:8px 10px;border:1px solid #9333ea;border-radius:6px;margin-bottom:10px}.option-list{overflow-y:auto;flex:1}.option-item{display:flex;align-items:center;gap:10px;padding:8px 4px;cursor:pointer}.option-item input{width:16px;height:16px}.done-btn{align-self:flex-end;margin-top:10px;background:transparent;border:none;color:#9333ea;font-weight:600;cursor:pointer}.btn-group{display:flex;gap:10px;margin-bottom:20px}.btn{flex:1;padding:12px;border-radius:6px;border:1px solid #ddd;background:#f9f9f9;font-weight:700;cursor:default}.btn.active{background:#1e293b;color:#fff;border-color:#8e24aa}.cetak-page{min-height:100vh;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);padding:40px 16px}.cetak-card{background:#fff;max-width:720px;margin:auto;padding:32px;border-radius:14px;box-shadow:0 10px 30px #00000014}.cetak-title{text-align:center;margin-bottom:30px}.cetak-title h2{margin:0;font-size:24px;color:#0f172a}.cetak-title p{margin-top:6px;font-size:14px;color:#64748b}.cetak-form{margin-bottom:25px}.loading{text-align:center;padding:20px;color:#475569;font-style:italic}.preview-card{margin-top:25px;background:#f8fafc;padding:24px;border-radius:12px;border:1px solid #e5e7eb}.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px dashed #e5e7eb}.row:last-child{border-bottom:none}.row span{font-size:14px;color:#64748b}.row strong{font-size:14px;font-weight:600;color:#0f172a}.btn-cetak{margin-top:30px;width:100%;padding:14px;background:linear-gradient(135deg,#1e293b,#334155);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:15px;cursor:pointer;transition:all .25s ease}.btn-cetak:hover{transform:translateY(-1px);box-shadow:0 8px 20px #1e293b59}.dataasn-wrapper{background:#f5f5f5;min-height:100vh}.dataasn-header{display:flex;justify-content:space-between;align-items:center;background:#1e293b;color:#fff;padding:16px 24px}.tambahAsn{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;background:#1e293b;color:#fff;font-size:28px;cursor:pointer}.datakapus-wrapper{background:#f5f5f5;min-height:100vh}.datakapus-header{display:flex;justify-content:space-between;align-items:center;background:#1e293b;color:#fff;padding:16px 24px}.tambahKapus{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;background:#1e293b;color:#fff;font-size:28px;cursor:pointer}.golongan-wrapper{background:#f5f5f5;min-height:100vh}.golongan-header{display:flex;justify-content:space-between;align-items:center;background:#1e293b;color:#fff;padding:16px 24px}.col-checkbox{width:40px;text-align:center;padding:8px 0}.col-checkbox input{transform:scale(1.1);cursor:pointer}.tambahGolongan{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;background:#1e293b;color:#fff;font-size:28px;cursor:pointer}.datapetugaslain-wrapper{background:#f5f5f5;min-height:100vh}.datapetugaslain-header{display:flex;justify-content:space-between;align-items:center;background:#1e293b;color:#fff;padding:16px 24px}.tambahDataPetugasLain{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;background:#1e293b;color:#fff;font-size:28px;cursor:pointer}.login-wrapper{display:flex;justify-content:center;align-items:center;height:100vh;background:#f0f2f5}.login-card{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 8px 20px #0000001a;width:350px}.login-card h2{text-align:center;margin-bottom:1.5rem}.login-card form{display:flex;flex-direction:column}.login-card label{margin-bottom:.3rem;font-weight:500}.login-card input{padding:.5rem;margin-bottom:1rem;border-radius:5px;border:1px solid #ccc;font-size:1rem}.login-card input:focus{outline:none;border-color:#007bff}.login-card button{padding:.6rem;border:none;border-radius:5px;background:#007bff;color:#fff;font-size:1rem;cursor:pointer}.login-card button:disabled{background:#6c757d;cursor:not-allowed}.error{color:red;font-size:.85rem;margin-top:-.5rem;margin-bottom:.5rem}.dataasn-header{background:#1e293b;color:#fff;padding:16px 24px;font-weight:700}.datasurat-header{background:#1e293b;color:#fff;padding:16px 24px;font-weight:700}.form-wrapper{max-width:520px;margin:0 auto;padding:20px 16px 80px;background:#f8fafc;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.form-wrapper h2{margin-bottom:24px;font-size:18px;font-weight:600;color:#111827}.error{color:#dc2626;font-size:12px;margin-top:4px;display:block}input:has(+.error),select:has(+.error){border-color:#dc2626}form label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;margin-top:18px;color:#374151}form input,form select,form textarea{width:100%;padding:12px 14px;font-size:14px;border-radius:8px;border:1.5px solid #d1d5db;outline:none;background:#fff}form input:focus,form select:focus,form textarea:focus{border-color:#1e293b}.input-plus{display:flex;align-items:center;gap:8px}.input-plus input{flex:1;border-color:#1e293b}.input-plus button{width:40px;height:40px;border-radius:8px;border:none;background:#e5e7eb;font-size:20px;cursor:pointer}.input-plus button:hover{background:#d1d5db}.lama-wrapper{display:flex;gap:10px;margin-top:6px}.lama-wrapper button{flex:1;padding:12px 0;border-radius:8px;border:1.5px solid #d1d5db;background:#fff;font-size:14px;cursor:pointer}.lama-wrapper button.active{background:#1e293b;border-color:#1e293b;color:#fff;font-weight:600}.input-disabled{background-color:#f1f1f1;color:#888;cursor:not-allowed}.input-disabled:focus{outline:none}.submit-btn{width:100%;margin-top:32px;padding:14px;background:#1e293b;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer}.submit-btn:hover{background:#1e293b}.lpd-wrapper{background:#f5f5f5;min-height:100vh}.lpd-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#1e293b;color:#fff}.header-actions input{padding:6px 10px;border:1px solid #ccc;border-radius:6px}.btn-refresh{background:#0ea5e9;color:#fff;padding:6px 12px;border-radius:6px}.btn-delete{background:#ef4444;color:#fff;padding:6px 12px;border-radius:6px}.col-checkbox{width:38px;text-align:center}.row-click{cursor:pointer}.empty{text-align:center;padding:16px;color:#888}table{width:100%;border-collapse:collapse;background:#fff;min-width:1400px}.status-sudah{color:green;font-weight:700}.status-belum{color:red;font-weight:700}.status-sudah{color:#2e7d32;font-weight:700;font-size:20px}.btn-warning{background:#f59e0b;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer}.btn-secondary{background:#6b7280;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer}.detail-list{max-width:900px;padding:24px;font-family:Segoe UI,Tahoma,sans-serif}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.detail-grid label{font-size:12px;color:#64748b}.detail-grid p{font-weight:600;margin-top:4px}.detail-row{display:grid;grid-template-columns:260px 20px 1fr;align-items:start;padding:6px 0}.detail-label{font-weight:600;font-size:14px;color:#111827;text-transform:uppercase}.detail-separator{text-align:center;font-weight:600;font-size:14px}.detail-value{font-size:14px;color:#111827;line-height:1.6;white-space:pre-wrap}.detail-lpd-header{background:#1e293b;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#fff;padding:16px 24px;font-weight:700}.detaillpd-wrapper{display:flex;justify-content:center;padding:30px 16px}.detail-lpd-card{width:100%;max-width:900px;background:#fff;border-radius:12px;padding:24px;box-shadow:0 8px 20px #00000014}.detail-header button{background:#1e293b;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer}.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:#2c7be5;color:#fff;font-size:22px;border:none;cursor:pointer;box-shadow:0 6px 16px #2c7be573}.detailsurat-wrapper{min-height:100vh;background:#1e293b;display:flex;justify-content:center;padding:40px 16px}.detailsurat-card{background:#0f172a;width:100%;max-width:700px;padding:32px;border-radius:10px;box-shadow:0 10px 30px #00000059;position:relative}.text-center{text-align:center;margin-bottom:28px}.text-center h2{margin:0;color:#f8fafc;font-size:22px}.detail-grid{display:grid;grid-template-columns:1fr;row-gap:12px;margin-bottom:28px}.detail-row{display:grid;grid-template-columns:160px 10px 1fr;font-size:14px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.08)}.detail-label{font-weight:600;color:#cbd5f5}.detail-separator{text-align:center;color:#94a3b8}.detail-value{color:#e5e7eb;font-weight:500}.btn-primary{background:#2563eb;border:none;padding:12px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;width:100%;color:#fff;transition:all .2s ease}.btn-primary:hover{background:#1d4ed8}.detailsurat-wrapper{min-height:100vh;background:#f4f6f8;display:flex;justify-content:center;padding:40px 16px}.detailsurat-card{background:#fff;width:100%;max-width:700px;padding:32px;border-radius:8px;box-shadow:0 4px 14px #00000014;position:relative}.text-center{text-align:center;margin-bottom:24px}.text-center h2{margin:0}.status-belum{color:#c62828;font-weight:700;font-size:20px}.detail-grid{display:grid;grid-template-columns:1fr;row-gap:10px;margin-bottom:28px}.detail-row{display:grid;grid-template-columns:160px 10px 1fr;font-size:14px}.detail-label{font-weight:600;color:#444}.detail-separator{text-align:center}.detail-value{color:#222}.lpd-form{border-top:1px solid #e0e0e0;padding-top:24px}.form-group{display:flex;flex-direction:column;margin-bottom:18px}.form-group label{font-size:14px;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{height:40px;padding:8px 10px;border-radius:6px;border:1px solid #ccc;font-size:14px;outline:none}.form-group input:focus,.form-group select:focus{border-color:#6a1b9a;box-shadow:0 0 0 2px #6a1b9a26}.form-group select[multiple]{height:120px}.btn-primary{background:#6a1b9a;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;width:100%}.btn-primary:hover{background:#4a148c}@media(max-width:600px){.detail-row{grid-template-columns:1fr;row-gap:4px}.detail-separator{display:none}}.detailkapus-page{background:#f8fafc;min-height:100vh;padding:40px 16px;display:flex;justify-content:center}.detailkapus-card{width:100%;max-width:720px;background:#fff;border-radius:14px;padding:28px;box-shadow:0 10px 25px #00000014}.detailkapus-header{border-bottom:1px solid #e5e7eb;padding-bottom:16px;margin-bottom:24px}.detailkapus-header h2{margin:0;font-size:22px;color:#1e293b}.detailkapus-header p{margin-top:4px;font-size:13px;color:#64748b}.detail-grid{display:flex;flex-direction:column;gap:12px}.detail-row{display:grid;grid-template-columns:200px 20px 1fr;align-items:start}.detail-label{font-size:14px;font-weight:600;color:#334155}.detail-separator{text-align:center;font-weight:600}.detail-value{font-size:14px;color:#111827;line-height:1.6}.detail-actions{display:flex;justify-content:flex-end;margin-top:32px;padding-top:16px;border-top:1px solid #e5e7eb}.action-btn{padding:10px 18px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer}.action-btn.secondary{background:#f1f5f9;color:#1e293b}.action-btn.secondary:hover{background:#e2e8f0}@media(max-width:640px){.detail-row{grid-template-columns:1fr;gap:4px}.detail-separator{display:none}}.datasurat-wrapper{background:#f5f5f5;min-height:100vh}.datasurat-header{display:flex;justify-content:space-between;align-items:center;background:#1e293b;color:#fff;padding:16px 24px}.header-left{display:flex;align-items:center;gap:12px}.btn-back{background:#1e293b;color:#fff;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}.btn-back:hover{background:#334155}.header-actions{display:flex;gap:8px;align-items:center}.header-actions input{padding:6px 10px;border-radius:6px;border:none;outline:none}.header-actions button{padding:6px 10px;border-radius:6px;border:none;cursor:pointer}.header-actions .danger{background:#dc2626;color:#fff}.header-actions button:disabled{opacity:.5;cursor:not-allowed}.table-container{padding:16px;overflow-x:auto}table{width:100%;border-collapse:collapse;background:#fff;min-width:800px}thead{background:#fafafa}th,td{padding:12px;border-bottom:1px solid #e0e0e0;text-align:left;white-space:nowrap}.tambahSurat{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;background:#1e293b;color:#fff;font-size:28px;cursor:pointer}.modal-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;padding:20px;border-radius:8px;width:360px;display:flex;flex-direction:column;gap:12px}.modal h3{margin:0 0 8px}.modal input[type=text],.modal input[type=file]{padding:8px;border-radius:6px;border:1px solid #ccc}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-actions button{padding:6px 12px;border-radius:6px;border:none;cursor:pointer}.modal-actions .primary{background:#1e293b;color:#fff}.btn-download{background-color:#2563eb;color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.btn-download:hover{background-color:#1e40af;transform:translateY(-1px)}.btn-download:active{transform:scale(.97)}