.letter-page{background:#f8fbff;padding:24px 0 70px;min-height:700px}.letter-page .wrap{width:min(1480px,calc(100% - 48px))}.letter-title{display:flex;align-items:center;gap:18px;margin-bottom:20px}.letter-title-icon{display:grid;place-items:center;background:#e7f2ff;color:#2770b5;border-radius:9px;width:54px;height:54px;font-size:32px}.letter-title h1{font:900 27px Nunito,sans-serif;margin:0}.letter-title p{color:#31568b;margin:0}.letter-notice{display:flex;align-items:center;gap:18px;background:#fff1e7;border:1px solid #ffe1cc;border-radius:11px;padding:13px 20px;margin-bottom:18px}.letter-notice>span{background:#ff4b0a;color:#fff;display:grid;place-items:center;border-radius:50%;font-weight:900;font-size:23px;width:38px;height:38px;flex:0 0 38px}.letter-notice>div{flex:1}.letter-notice strong{font-weight:900}.letter-notice p{margin:0;color:#31568b;font-size:14px}.letter-notice a{color:#f04b12;font-weight:800;padding:12px;border-left:1px solid #ffad82}.letter-tools{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:16px}.letter-filters{display:flex;gap:10px;flex-wrap:wrap}.letter-filters button{background:#f5f8fc;border:1px solid #e7edf5;border-radius:8px;padding:10px 20px;color:#15336b;font-weight:800;cursor:pointer}.letter-filters button.active,.letter-filters button:hover{background:#ff4b0a;color:#fff;border-color:#ff4b0a}.letter-search{background:#fff;border:1px solid #d4e0ee;border-radius:9px;padding:8px 12px;min-width:260px;color:#4168a0}.letter-search input{border:0;outline:0;font:inherit;width:210px}.letter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.letter-card{background:#fff;border:1px solid #e3eaf3;border-radius:12px;box-shadow:0 5px 15px #1f426609;padding:13px;display:flex;flex-direction:column;min-height:190px}.letter-card[hidden]{display:none}.letter-card-body{display:flex;gap:12px;flex:1}.letter-icon{display:grid;place-items:center;background:#eaf3ff;color:#0872de;border-radius:10px;width:68px;height:68px;flex:0 0 68px;font-size:40px;font-weight:900}.letter-category{display:inline-block;background:#fff0e8;color:#e95116;border-radius:30px;padding:3px 10px;font-size:11px;font-weight:800}.letter-category.keterangan{background:#f1eaff;color:#713ac0}.letter-category.kegiatan{background:#dcf7e8;color:#088b48}.letter-card h2{font:900 15px/1.25 Nunito,sans-serif;margin:6px 0}.letter-card p{color:#546f9a;font-size:13px;line-height:1.3;margin:0}.letter-card>a{display:flex;justify-content:center;gap:20px;border:1px solid #ff5a27;border-radius:8px;padding:8px;color:#f24b12;font-size:13px;font-weight:800;margin-top:12px}.letter-card>a:hover{background:#ff4b0a;color:#fff}.letter-steps{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #e2eaf4;border-radius:11px;padding:15px;margin-top:16px}.letter-steps strong{font-size:14px}.letter-steps span{font-size:13px;font-weight:700;color:#214478;white-space:nowrap}.letter-steps b{display:inline-grid;place-items:center;background:#ff4b0a;color:#fff;width:30px;height:30px;border-radius:50%;margin-right:7px}.letter-steps span:nth-of-type(2) b{background:#1680ef}.letter-steps span:nth-of-type(3) b{background:#08ad5b}.letter-steps span:nth-of-type(4) b{background:#923be7}.letter-history{margin-top:24px}.letter-form-page .portal-form{max-width:760px}.letter-form-page .portal-form small{display:block;color:#607999;font-weight:400;margin-top:4px}.letter-detail{max-width:800px}.letter-detail a:not(.portal-button){color:#ec4d16;font-weight:800}
@media(max-width:1300px){.letter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.letter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.letter-tools,.letter-steps{align-items:stretch;flex-direction:column}.letter-search{min-width:0}.letter-search input{width:calc(100% - 30px)}}
@media(max-width:520px){.letter-page .wrap{width:calc(100% - 28px)}.letter-grid{grid-template-columns:1fr}.letter-notice{flex-wrap:wrap}.letter-notice a{border-left:0;padding:0}.letter-filters button{padding:8px 10px}.letter-card{min-height:150px}}
.letter-card .letter-icon{display:block;width:76px;height:76px;flex:0 0 76px;border-radius:12px;background-image:url('mockup/letter-icons-source.png');background-repeat:no-repeat;background-size:1738px 905px;font-size:0}
.letter-icon-surat_pengantar,.letter-icon-lainnya{background-position:-299px -242px}
.letter-icon-domisili,.letter-icon-renovasi{background-position:-585px -242px}
.letter-icon-kematian{background-position:-870px -242px}
.letter-icon-kelahiran{background-position:-1157px -242px}
.letter-icon-pindah{background-position:-1444px -242px}
.letter-icon-warga_baru{background-position:-300px -439px}
.letter-icon-ktp_kk{background-position:-586px -439px}
.letter-icon-skck{background-position:-870px -439px}
.letter-icon-nikah{background-position:-1157px -439px}
.letter-icon-usaha{background-position:-1444px -439px}
.letter-icon-tidak_mampu{background-position:-300px -632px}
.letter-icon-ahli_waris{background-position:-587px -632px}
.letter-icon-kehilangan{background-position:-871px -632px}
.letter-icon-kegiatan{background-position:-1157px -632px}
.letter-icon-aduan{background-position:-870px -439px}
.letter-card .letter-icon-custom{background:none;object-fit:cover;border-radius:12px}
.letter-request-page{background:#f7faff;padding:18px 0 70px}.letter-request-page .wrap{width:min(1480px,calc(100% - 48px))}.request-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#fff;border:1px solid #e2eaf3;border-radius:12px;padding:14px 20px;margin:16px 0}.request-steps span{display:flex;align-items:center;gap:11px;color:#1a3970}.request-steps b{display:grid;place-items:center;width:43px;height:43px;flex:0 0 43px;border-radius:50%;background:#c5cfdb;color:#fff;font-size:20px}.request-steps .current b{background:#ff4b0a}.request-steps strong{font-size:13px}.request-steps small{display:block;font-size:12px;font-weight:400;color:#6c82a1}.request-layout{display:grid;grid-template-columns:1.15fr .9fr;gap:13px;align-items:start}.request-panel{background:#fff;border:1px solid #e5edf5;border-radius:13px;padding:17px;margin-bottom:12px;box-shadow:0 4px 15px #1a426b0a}.request-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.request-panel-head>span{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;border-radius:8px;background:#ff4b0a;color:#fff;font-size:24px}.request-panel-head.blue>span{background:#147aff}.request-panel-head h2{font:900 18px Nunito,sans-serif;margin:0}.request-panel-head p{font-size:13px;color:#58749c;margin:0}.request-alert{background:#fff0f0;color:#d62f37;border-radius:8px;padding:12px 15px;font-size:13px;font-weight:800;margin-bottom:12px}.request-subhead{background:#e9f2ff;color:#0d61ce;border-radius:7px;padding:8px 12px;font-weight:800;font-size:13px;margin:13px 0 10px}.request-subhead.green{background:#e8f8ef;color:#078545}.request-subhead.purple{background:#f1eafb;color:#7132cf}.request-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}.request-fields label,.request-full-label,.request-document-grid label{display:block;font-size:12px;font-weight:800;color:#17376d}.request-fields .wide{grid-column:1/-1}.request-fields input,.request-fields select,.request-fields textarea,.request-full-label input,.request-full-label textarea,.request-document-grid input{display:block;width:100%;border:1px solid #d4dfeb;border-radius:7px;background:#fff;color:#17376d;padding:9px 11px;font:14px 'DM Sans',Arial,sans-serif;margin-top:5px}.request-full-label{margin:10px 0}.request-document-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.request-document-grid label{background:#fafcff;border:1px solid #e4edf6;border-radius:8px;padding:10px}.request-document-grid input{font-size:11px;padding:6px}.request-side small{color:#60799b}.request-preview{border:1px solid #dce7f0;border-radius:8px;padding:20px;text-align:center;min-height:180px;color:#151d2b}.request-preview strong,.request-preview span,.request-preview b,.request-preview small{display:block}.request-preview strong{font-size:13px}.request-preview b{font-size:15px;text-decoration:underline;margin:10px}.request-preview small{font-size:11px}.request-hint{background:#fff7dc;color:#705918;border-radius:8px;padding:12px;font-size:12px}.request-actions{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e4ebf3;border-radius:9px;padding:11px;margin-top:10px}.request-actions a{border:1px solid #d7e1eb;border-radius:8px;padding:9px 20px;font-weight:800}.request-actions button{background:#ff4b0a;border:0;color:#fff;border-radius:8px;padding:11px 23px;font-weight:800;cursor:pointer}.request-actions button:hover{background:#dd3e06}[hidden]{display:none!important}@media(max-width:1050px){.request-layout{grid-template-columns:1fr}}@media(max-width:620px){.letter-request-page .wrap{width:calc(100% - 28px)}.request-steps{grid-template-columns:repeat(2,1fr)}.request-fields,.request-document-grid{grid-template-columns:1fr}.request-fields .wide{grid-column:auto}}
.request-preview{padding:14px 16px 18px;font-family:Arial,Helvetica,sans-serif}.request-preview-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;text-align:center;border-bottom:4px double #172331;padding:4px 0 10px}.request-preview-head img{width:96px;height:106px;flex:0 0 96px;object-fit:contain}.request-preview-head .letter-head-text{flex:0 1 auto;width:max-content;max-width:calc(100% - 104px);min-width:0;line-height:1.12}.request-preview-head .letter-head-region,.request-preview-head .letter-head-rt,.request-preview-head .letter-head-environment,.request-preview-head .letter-head-address{display:block;margin:0}.request-preview-head .letter-head-region{font-size:13px;font-weight:400}.request-preview-head .letter-head-rt,.request-preview-head .letter-head-environment{font-size:14px;font-weight:700}.request-preview-head .letter-head-address{font-size:11px;margin-top:4px}.request-preview-title{padding-top:8px}.request-preview .request-preview-title b{font-size:16px;margin:8px 0 6px;text-transform:uppercase}.request-preview .request-preview-title small{font-size:11px}
@media(max-width:550px){.request-preview{padding:10px}.request-preview-head img{width:62px;height:76px;flex-basis:62px}.request-preview-head .letter-head-text{max-width:calc(100% - 70px)}.request-preview-head .letter-head-region{font-size:10px}.request-preview-head .letter-head-rt,.request-preview-head .letter-head-environment{font-size:11px}.request-preview-head .letter-head-address{font-size:9px}}
.request-preview > .request-preview-head{display:flex;flex-direction:row;align-items:center}.request-preview > .request-preview-head > img{display:block;width:96px;max-width:96px;height:106px;max-height:106px;flex:0 0 96px;object-fit:contain}.request-preview-body{white-space:pre-wrap;text-align:left;font:12px/1.5 Arial,Helvetica,sans-serif;color:#23334d;max-height:260px;overflow:auto;margin-top:14px;padding:12px 4px 0;border-top:1px solid #e2e8f0}.request-preview-body:empty{display:none}
@media(max-width:550px){.request-preview > .request-preview-head > img{width:62px;max-width:62px;height:76px;max-height:76px;flex-basis:62px}}
.letter-request-detail-page{background:#f7faff;padding:30px 0 70px;min-height:70vh}.letter-request-detail-page .wrap{width:min(1040px,calc(100% - 36px))}.request-detail-top{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.request-detail-top h1{font:900 30px/1.15 Nunito,Arial,sans-serif;color:#0a2550;margin:4px 0}.request-detail-top p{margin:0;color:#5c7497}.request-detail-top>a{color:#1f4f8d;font-weight:700;white-space:nowrap}.request-detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid #e2eaf3;border-radius:10px;padding:12px 18px;margin-bottom:16px;color:#1b355a}.request-detail-toolbar .portal-button{white-space:nowrap}.request-document{background:#fff;border:1px solid #e1e7ee;box-shadow:0 12px 35px #17345d0d;border-radius:10px;padding:32px 42px 38px;color:#171717;font:14px/1.45 Arial,Helvetica,sans-serif}.request-document-head{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 0 11px;border-bottom:4px double #171717;text-align:center}.request-document-head img{display:block;width:104px;max-width:104px;height:112px;max-height:112px;flex:0 0 104px;object-fit:contain}.request-document-head .letter-head-text{flex:0 1 auto;width:max-content;max-width:calc(100% - 116px);min-width:0;line-height:1.15}.request-document-head .letter-head-region,.request-document-head .letter-head-rt,.request-document-head .letter-head-environment,.request-document-head .letter-head-address{display:block;margin:0}.request-document-head .letter-head-region{font-size:15px;font-weight:400}.request-document-head .letter-head-rt,.request-document-head .letter-head-environment{font-size:16px;font-weight:700}.request-document-head .letter-head-address{font-size:13px;margin-top:4px}.request-document-title{text-align:center;margin:18px 0 28px}.request-document-title h2{font:700 19px/1.25 Arial,Helvetica,sans-serif;text-decoration:underline;text-underline-offset:3px;margin:0 0 4px}.request-document-title p{font-size:13px;margin:0}.request-document-content p{margin:0 0 18px}.request-document-table{width:100%;border-collapse:collapse;margin:0 0 20px}.request-document-table th,.request-document-table td{font:400 14px/1.4 Arial,Helvetica,sans-serif;vertical-align:top;padding:3px 0;text-align:left}.request-document-table th{width:34%;padding-right:10px}.request-document-table .separator{width:18px}.request-document-attachments,.request-document-note{border-top:1px solid #dce4ec;padding-top:15px;margin-top:22px}.request-document-attachments h3,.request-document-note h3{font:700 14px Arial,Helvetica,sans-serif;margin:0 0 9px}.request-document-links{display:flex;flex-wrap:wrap;gap:8px}.request-document-links a{border:1px solid #d8e6f5;background:#f4f9ff;color:#154a88;border-radius:6px;padding:7px 10px;font-size:12px}.request-document-note p{margin:0;white-space:pre-wrap}
@media(max-width:650px){.request-detail-top,.request-detail-toolbar{align-items:flex-start;flex-direction:column}.request-document{padding:20px 15px}.request-document-head{gap:6px}.request-document-head img{width:60px;max-width:60px;height:72px;max-height:72px;flex-basis:60px}.request-document-head .letter-head-text{max-width:calc(100% - 66px)}.request-document-head .letter-head-region{font-size:10px}.request-document-head .letter-head-rt,.request-document-head .letter-head-environment{font-size:11px}.request-document-head .letter-head-address{font-size:9px}.request-document-title h2{font-size:16px}.request-document-table th{width:42%}}
.request-preview-body{white-space:normal;max-height:none;overflow:visible;margin-top:14px;padding:16px 4px 0;font:13px/1.45 Arial,Helvetica,sans-serif;color:#171717}.request-preview-body p{text-align:left;margin:0 0 13px}.request-preview-fields{width:100%;border-collapse:collapse;margin:0 0 15px;text-align:left}.request-preview-fields th,.request-preview-fields td{font:400 13px/1.4 Arial,Helvetica,sans-serif;padding:2px 0;vertical-align:top}.request-preview-fields th{width:35%;padding-right:8px}.request-preview-fields td:nth-child(2){width:16px}.request-preview-sign{width:275px;max-width:100%;margin:24px 4px 0 auto;text-align:center;font:13px/1.35 Arial,Helvetica,sans-serif;color:#171717}.request-preview-sign .letter-sign-heading{margin:0}.request-preview-sign-images{position:relative;height:104px}.request-preview-sign-images img{position:absolute;display:block;object-fit:contain;max-width:none}.request-preview-sign-images .stamp{width:132px;height:105px;left:0;top:0;z-index:1}.request-preview-sign-images .signature{width:205px;height:105px;right:-4px;top:0;z-index:2;clip-path:inset(0 0 22% 0)}.request-preview .request-preview-sign > strong{display:block;width:170px;margin:-7px 0 0 auto;border-bottom:1px solid #28384c;font-size:14px;font-weight:700;text-align:center}
.request-document-exact{padding:0;overflow:hidden}.request-letter-frame{display:block;width:100%;height:1050px;border:0;background:#fff}.request-detail-extra{background:#fff;border:1px solid #e1e7ee;border-radius:10px;padding:18px 22px;margin-top:14px}.request-detail-extra h2{font:800 16px Nunito,Arial,sans-serif;color:#112b53;margin:0 0 10px}.request-detail-extra p{margin:0;color:#263b5c}
.citizen-letter-body .site-header{display:none}.citizen-letter-body .letter-page,.citizen-letter-body .letter-request-page,.citizen-letter-body .portal-footer{margin-left:270px}.citizen-letter-sidebar{position:fixed;left:0;top:0;bottom:0;width:270px;background:#fff;border-right:1px solid #e3e9f2;z-index:40;display:flex;flex-direction:column;padding:15px;overflow-y:auto}.citizen-side-brand{display:flex;align-items:center;gap:9px;padding:0 8px 22px;border-bottom:1px solid #edf1f5}.citizen-side-brand img{width:67px;height:55px;object-fit:contain}.citizen-side-brand strong,.citizen-side-brand small{display:block}.citizen-side-brand strong{font:900 22px Nunito,sans-serif;color:#0a1d4b}.citizen-side-brand small{font-size:14px;color:#234b84}.citizen-letter-sidebar nav{display:flex;flex-direction:column;gap:4px;padding-top:16px}.citizen-letter-sidebar nav a{color:#183764;font-size:14px;padding:10px 14px;border-radius:8px}.citizen-letter-sidebar nav a.active{background:#ff4b0a;color:#fff;font-weight:800}.citizen-letter-sidebar nav a.sub{padding-left:48px;font-size:13px}.citizen-letter-sidebar nav a.sub:hover,.citizen-letter-sidebar nav a:hover:not(.active){background:#fff0e7;color:#ef4b13}.citizen-side-slogan{background:#f8f8df;border-radius:12px;margin-top:auto;padding:8px 12px 16px}.citizen-side-slogan img{display:block;width:100%;height:110px;object-fit:contain}.citizen-side-slogan strong{display:block;font:900 16px Nunito,sans-serif;color:#0a1d4b}.citizen-letter-body .letter-page .wrap,.citizen-letter-body .letter-request-page .wrap{width:calc(100% - 36px)}.citizen-letter-body .letter-title{background:#fff;border-bottom:1px solid #e6ecf3;margin:-18px -18px 16px;padding:13px 18px}@media(max-width:950px){.citizen-letter-sidebar{display:none}.citizen-letter-body .site-header{display:block}.citizen-letter-body .letter-page,.citizen-letter-body .letter-request-page,.citizen-letter-body .portal-footer{margin-left:0}}@media(max-width:540px){.citizen-letter-body .letter-title{margin:0 0 15px;padding:0 0 12px;background:transparent}.citizen-letter-body .letter-page .wrap,.citizen-letter-body .letter-request-page .wrap{width:calc(100% - 28px)}}
.request-submit-buttons{display:flex;gap:9px}.request-actions .draft-button{background:#fff;color:#1a4b8e;border:1px solid #cbd9e9}.request-actions .draft-button:hover{background:#edf5ff}.citizen-status.draft{background:#e9eff7;color:#415c81}
.letter-history .citizen-history-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:nowrap}.letter-history .citizen-history-actions>a,.letter-history .citizen-history-delete{display:inline-flex;align-items:center;justify-content:center;min-height:34px;box-sizing:border-box;border-radius:8px;padding:6px 12px;font:700 12px/1.2 'DM Sans',Arial,sans-serif;text-decoration:none;transition:background .15s ease,border-color .15s ease,transform .15s ease}.letter-history .citizen-history-actions>a{color:#ec4b13;background:#fff4ee;border:1px solid #ffd6c6}.letter-history .citizen-history-actions>a:hover{background:#ffe9dc;border-color:#ff9a70;transform:translateY(-1px)}.letter-history .citizen-history-actions form{display:inline-flex;margin:0}.letter-history .citizen-history-delete{color:#c92b35;background:#fff6f6;border:1px solid #ffcbd0;cursor:pointer}.letter-history .citizen-history-delete::before{content:'✕';font-size:11px;margin-right:6px}.letter-history .citizen-history-delete:hover{background:#ffe6e8;border-color:#eb8190;transform:translateY(-1px)}.letter-history .citizen-history-delete:focus-visible,.letter-history .citizen-history-actions>a:focus-visible{outline:3px solid #ffb894;outline-offset:2px}
.letter-history-page .letter-history{margin-top:0}.citizen-letter-sidebar nav a.sub.current{background:#fff0e7;color:#ed4a12;font-weight:800}