:root{--slp-green:#07984a;--slp-green-dark:#056d39;--slp-blue:#1199d3;--slp-yellow:#ffe600;--slp-red:#df2c24;--slp-ink:#14231d;--slp-muted:#6b7972;--slp-bg:#f4f8f6;--slp-card:#fff;--slp-border:#e1ebe6;--slp-sidebar:#0b2c21}
*{box-sizing:border-box}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--slp-bg);color:var(--slp-ink)}a{text-decoration:none}.text-muted{color:var(--slp-muted)!important}.btn-primary{background:var(--slp-green);border-color:var(--slp-green)}.btn-primary:hover,.btn-primary:focus{background:var(--slp-green-dark);border-color:var(--slp-green-dark)}.btn-outline-primary{color:var(--slp-green);border-color:var(--slp-green)}.btn-outline-primary:hover{background:var(--slp-green);border-color:var(--slp-green)}.form-control:focus,.form-select:focus{border-color:#72c89a;box-shadow:0 0 0 .2rem rgba(7,152,74,.13)}
.public-nav{background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--slp-border)}.public-brand-logo{width:48px;height:54px;object-fit:contain}.hero{position:relative;overflow:hidden;background:linear-gradient(130deg,#052d1d 0%,#087847 48%,#0a8fb6 100%);color:#fff;padding:88px 0 78px}.hero:before{content:"";position:absolute;inset:auto -100px -200px auto;width:520px;height:520px;border-radius:50%;background:rgba(255,230,0,.12)}.hero:after{content:"";position:absolute;left:-160px;top:-260px;width:460px;height:460px;border-radius:50%;border:85px solid rgba(255,255,255,.06)}.hero .container{position:relative;z-index:2}.hero-logo{width:126px;max-height:150px;object-fit:contain;filter:drop-shadow(0 12px 28px rgba(0,0,0,.16))}.eyebrow{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#ccefdc}.hero h1{font-weight:800;letter-spacing:-.035em;font-size:clamp(2.3rem,5vw,4.8rem);line-height:.98}.hero p{font-size:1.08rem;color:#dceee7;max-width:700px}.glass-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.19);border-radius:20px;padding:20px;backdrop-filter:blur(10px)}
.section-pad{padding:70px 0}.section-title{font-weight:800;letter-spacing:-.02em}.service-card{height:100%;border:1px solid var(--slp-border);border-radius:20px;background:#fff;padding:24px;box-shadow:0 10px 35px rgba(15,55,39,.06);transition:.2s ease}.service-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(15,55,39,.1);border-color:#b8dcca}.service-icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:#e8f7ef;color:var(--slp-green);font-size:1.3rem}.service-card.blue .service-icon{background:#e8f6fc;color:var(--slp-blue)}.service-card.yellow .service-icon{background:#fff9cc;color:#9b8700}.service-card.red .service-icon{background:#fff0ef;color:var(--slp-red)}.soft-card{background:#fff;border:1px solid var(--slp-border);border-radius:20px;box-shadow:0 10px 30px rgba(10,50,35,.05)}.step-dot{width:38px;height:38px;border-radius:50%;background:var(--slp-green);color:#fff;display:grid;place-items:center;font-weight:800}.public-footer{background:#08291e;color:#c9dfd6;padding:38px 0}.public-footer a{color:#fff}
.status-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 11px;font-size:.76rem;font-weight:800;white-space:nowrap}.status-kepala{background:#fff3cd;color:#725a00}.status-revisi-kepala{background:#ffedd5;color:#9a3412}.status-camat{background:#dbeafe;color:#1d4ed8}.status-revisi-camat{background:#f3e8ff;color:#7e22ce}.status-ditolak{background:#fee2e2;color:#b91c1c}.status-ttd{background:#cffafe;color:#0e7490}.status-selesai{background:#dcfce7;color:#166534}.status-neutral{background:#e5e7eb;color:#374151}.timeline{position:relative;padding-left:26px}.timeline:before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:#dbe8e2}.timeline-item{position:relative;padding:0 0 22px 13px}.timeline-item:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--slp-green);left:-23px;top:5px;box-shadow:0 0 0 4px #e3f5eb}.upload-zone{border:1.5px dashed #b6ccc2;border-radius:16px;padding:18px;background:#fbfdfc}.upload-zone:hover{border-color:var(--slp-green);background:#f5fbf8}
.admin-shell{min-height:100vh;display:flex}.sidebar{position:fixed;left:0;top:0;bottom:0;width:268px;background:linear-gradient(180deg,#0a3023,#071e18);color:#d7e7df;padding:18px 14px;z-index:1040;overflow:auto}.sidebar-brand{display:flex;align-items:center;gap:12px;padding:7px 10px 20px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:16px}.sidebar-brand img{width:46px;height:52px;object-fit:contain}.sidebar-brand strong{font-size:.94rem;line-height:1.2;color:#fff}.nav-section{font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:#799b8d;font-weight:800;padding:14px 11px 7px}.sidebar .nav-link{color:#c7d9d1;border-radius:12px;padding:10px 12px;margin:3px 0;display:flex;align-items:center;gap:10px;font-weight:650;font-size:.91rem}.sidebar .nav-link:hover,.sidebar .nav-link.active{background:rgba(255,255,255,.10);color:#fff}.sidebar .nav-link .badge{margin-left:auto}.admin-main{margin-left:268px;min-width:0;width:calc(100% - 268px)}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--slp-border);display:flex;align-items:center;padding:0 26px;position:sticky;top:0;z-index:1030}.topbar-title{font-weight:800}.content-wrap{padding:26px}.stat-card{border:1px solid var(--slp-border);border-radius:18px;background:#fff;padding:20px;height:100%;box-shadow:0 8px 25px rgba(10,50,35,.04)}.stat-number{font-size:1.8rem;font-weight:850;letter-spacing:-.04em}.stat-icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:#e8f7ef;color:var(--slp-green)}.data-card{border:1px solid var(--slp-border);border-radius:18px;background:#fff;overflow:hidden}.data-card .table{margin:0}.table>thead th{background:#f8fbf9;color:#587068;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;border-bottom-color:var(--slp-border);white-space:nowrap}.table td{vertical-align:middle;border-color:#edf2ef}.avatar{width:38px;height:38px;border-radius:12px;object-fit:cover;background:#eef4f1}.empty-state{text-align:center;padding:50px 20px;color:var(--slp-muted)}.empty-state .empty-icon{font-size:2.3rem;margin-bottom:12px}.filter-bar{background:#fff;border:1px solid var(--slp-border);border-radius:16px;padding:14px}.pdf-frame{width:100%;min-height:650px;border:1px solid var(--slp-border);border-radius:14px;background:#f3f3f3}.placeholder-chip{display:inline-block;padding:5px 8px;border:1px solid #cbdad3;border-radius:8px;background:#f7faf8;font-size:.78rem;margin:3px;cursor:pointer}.audit-json{max-width:380px;white-space:pre-wrap;word-break:break-word;font-size:.76rem}.loading-overlay{display:none;position:fixed;inset:0;background:rgba(4,25,18,.35);backdrop-filter:blur(2px);z-index:2000;align-items:center;justify-content:center}.loading-overlay.show{display:flex}.loading-box{background:#fff;padding:18px 22px;border-radius:15px;box-shadow:0 20px 50px rgba(0,0,0,.16)}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.admin-main{margin-left:0;width:100%}.content-wrap{padding:18px}.topbar{padding:0 16px}.hero{padding:66px 0}.pdf-frame{min-height:480px}}@media(max-width:575.98px){.hero h1{font-size:2.35rem}.hero-logo{width:96px}.section-pad{padding:52px 0}.content-wrap{padding:14px}.stat-card{padding:16px}.table-responsive{font-size:.88rem}}


/* Editor template surat visual A4 */
.letter-toolbar{background:#fff;position:sticky;top:0;z-index:4}.editor-select{width:auto;min-width:130px}.editor-size{min-width:72px}.letter-editor-workspace{overflow:auto;padding:22px;background:#dfe4e2;border-radius:16px}.letter-editor-page{width:794px;min-height:1123px;margin:0 auto;background:#fff;padding:68px;box-sizing:border-box;box-shadow:0 8px 30px rgba(20,40,30,.14);outline:none;font-family:"Times New Roman",serif;font-size:16px;line-height:1.45;color:#111}.letter-editor-page:focus{box-shadow:0 8px 34px rgba(20,100,65,.20),0 0 0 2px rgba(7,152,74,.14)}.letter-editor-page img{max-width:100%;height:auto;cursor:pointer}.letter-editor-page img.editor-selected{outline:2px solid #0d6efd;outline-offset:3px}.letter-editor-page table{border-collapse:collapse;max-width:100%}.letter-editor-page td,.letter-editor-page th{min-width:40px;padding:4px}.letter-editor-page p{margin:0 0 10px}.letter-editor-page hr{opacity:1}.placeholder-chip{cursor:pointer;user-select:none}
@media(max-width:900px){.letter-editor-workspace{padding:10px}.letter-editor-page{width:100%;min-height:900px;padding:34px 24px}.editor-select{min-width:110px}}

/* v3.2 - Editor template surat full width + panel simpan bawah */
.letter-editor-workspace{
  overflow-x:hidden;
  overflow-y:auto;
}
.letter-editor-page{
  width:min(794px,100%);
  max-width:100%;
}
.save-type-panel{
  overflow:visible;
  border-color:#cfe5d9;
  box-shadow:0 12px 34px rgba(10,70,45,.08);
}
.save-type-panel-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:20px 22px;
  background:linear-gradient(135deg,#ffffff 0%,#f5fbf8 100%);
}
.save-type-copy{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.save-type-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#e4f6ec;
  color:var(--slp-green);
  font-size:1.35rem;
}
.save-type-actions{
  display:grid;
  grid-template-columns:auto minmax(320px,520px);
  gap:10px;
  align-items:stretch;
}
.save-type-button{
  min-height:52px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(7,152,74,.18);
}
@media(max-width:1199.98px){
  .save-type-panel-inner{align-items:stretch;flex-direction:column}
  .save-type-actions{grid-template-columns:1fr}
  .save-type-button{width:100%}
}
@media(max-width:900px){
  .letter-editor-workspace{padding:10px}
  .letter-editor-page{width:100%;max-width:100%}
}

/* v3.3 - WYSIWYG Template Surat = renderer Surat Otomatis */
.letter-editor-workspace{
  overflow-x:auto;
  padding:22px;
  background:#dfe4e2;
}
.letter-editor-page{
  width:210mm;
  max-width:210mm;
  min-height:297mm;
  padding:18mm;
  margin:0 auto;
  box-sizing:border-box;
  background:#fff;
  color:#111;
  font-family:"Times New Roman",Times,serif;
  font-size:12pt;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.letter-editor-page table{border-collapse:collapse;max-width:100%}
.letter-editor-page td,.letter-editor-page th{vertical-align:top}
.letter-editor-page img{max-width:100%;height:auto}
.letter-editor-page p{margin:0 0 10px}
.letter-editor-page h1,.letter-editor-page h2,.letter-editor-page h3{margin-top:0}
.letter-editor-page hr{opacity:1}
.letter-preview-frame{min-height:980px;background:#e6ebe8}
@media(max-width:900px){
  .letter-editor-workspace{padding:10px;overflow-x:hidden}
  .letter-editor-page{width:100%;max-width:100%;min-height:900px;padding:34px 24px}
  .letter-preview-frame{min-height:720px}
}