:root {
  --bg: #f3f4f6;
  --paper: #fff;
  --ink: #111827;
  --muted: #6b7280;
  --line: #d1d5db;

  --paper-pad: 12mm;

  --logo-col: 35mm;
  --logo-box: 30mm;
  --logo-max: 46mm;
  --kop-gap: 2mm;

  --kop-to-line-gap-top: 2mm;
  --line-to-body-gap: 4mm;

  --sig-title-h: 18mm;
  --sig-canvas-h: 30mm;
  --sig-name-h: 9mm;

  --stamp-size: 46mm;
  --stamp-left: 4mm;
  --stamp-top: -10mm;
  --ttd-left: 26mm;
  --ttd-top: -2mm;
}
.emailLink {
  color: #1d4ed8; /* biru */
  font-style: italic; /* miring */
  text-decoration: underline;
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
.app {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 16px;
}
@media (max-width: 980px) {
  .panel {
    position: static;
  }
}

.panel h1 {
  font-size: 16px;
  margin: 0 0 10px;
}
.panel p,
.note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

label {
  display: block;
  font-size: 13px;
  margin: 10px 0 6px;
}

input,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  outline: none;
  font-size: 14px;
}
textarea {
  resize: vertical;
}

.btnrow {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

button {
  border: 1px solid var(--line);
  background: #111827;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
button.secondary {
  background: #fff;
  color: var(--ink);
}
button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}

.paperWrap {
  overflow: auto;
}
.paper {
  width: 210mm;
  min-height: 297mm;
  background: var(--paper);
  padding: var(--paper-pad);
}
@media screen {
  .paper {
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
  }
}

/* KOP */
.kop {
  display: grid;
  grid-template-columns: var(--logo-col) 1fr var(--logo-col);
  column-gap: var(--kop-gap);
  align-items: center;
  font-family: "Times New Roman", Times, serif;
  color: #000;
}
.logoWrap {
  height: var(--logo-box);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  max-width: var(--logo-max);
  max-height: var(--logo-max);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.logoLeft {
  transform: scale(1.18);
  transform-origin: center;
}
.logoRight {
  transform: none;
}

.kopText {
  text-align: center;
  line-height: 1.06;
}
.org {
  font-weight: 700;
  font-size: 14pt;
  margin: 0;
  letter-spacing: 0.2px;
}
.addr {
  margin-top: 2mm;
  font-style: italic;
  font-size: 11.3pt;
  line-height: 1.25;
  padding: 1px 0;
}
.meta {
  margin-top: 1mm;
  font-size: 11.3pt;
  line-height: 1.25;
  padding: 1px 0;
  white-space: nowrap;
}
.telpWord {
  text-underline-offset: 2px;
  font-style: italic;
}

/* Garis kop */
.hrDouble {
  margin-top: var(--kop-to-line-gap-top);
  margin-bottom: var(--line-to-body-gap);
}
.hrThick {
  border-top: 5px solid #000;
  height: 0;
}
.hrThin {
  border-top: 2px solid #000;
  height: 0;
  margin-top: 2px;
}

/* META SURAT */
.metaRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8mm;
  margin-bottom: 5mm;
  font-size: 13px;
}
.metaLeft table {
  width: 100%;
  border-collapse: collapse;
}
.metaLeft td {
  padding: 1.2mm 0;
  vertical-align: top;
}
.metaLeft td:nth-child(1) {
  width: 18mm;
}
.metaLeft td:nth-child(2) {
  width: 3mm;
}
.metaRight {
  text-align: right;
  padding-right: 1mm;
}

.underline {
  text-decoration: underline;
  font-weight: 700;
}
.toBlock {
  margin: 0 0 4mm;
  font-size: 14px;
}
.toBlock b {
  font-weight: 800;
}

/* ISI */
.body {
  font-size: 14px;
  line-height: 1.52;
  text-align: justify;
}
.sal {
  font-style: italic;
  font-weight: 700;
  margin-bottom: 3mm;
}
.salEnd {
  font-style: italic;
  font-weight: 700;
}

.p {
  margin: 0 0 2.2mm;
}
.pTight {
  margin-bottom: 1.2mm;
}

/* PERBAIKAN: paragraf menjorok ke dalam */
.pIndent {
  text-indent: 12mm;
}

.infoTable {
  margin: 3mm 0;
  width: 100%;
  border-collapse: collapse;
}
.infoTable td {
  padding: 0.9mm 0;
  vertical-align: top;
}
.infoTable td:nth-child(1) {
  width: 20mm;
}
.infoTable td:nth-child(2) {
  width: 4mm;
}

/* Anti pecah halaman */
.avoidBreak {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* BLOK TANDA TANGAN */
.signSection {
  margin-top: 3mm;
}
.signSection .role {
  text-align: center;
}

.signGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18mm;
  text-align: center;
  font-size: 13px;
}

.sigCol {
  text-align: center;
  display: grid;
  grid-template-rows: var(--sig-title-h) var(--sig-canvas-h) var(--sig-name-h);
  align-items: start;
}

.role {
  font-weight: 700;
  display: block;
}

/* Center judul paling stabil */
.sigTitle {
  height: var(--sig-title-h);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  width: 100%;
}
.titleInner {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}
.titleInner .role {
  width: auto;
}

/* Canvas */
.sigCanvas {
  height: var(--sig-canvas-h);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Nama */
.sigNameBlock {
  height: var(--sig-name-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  margin-top: -1mm;
}
.name {
  font-weight: 800;
  text-decoration: underline;
  display: inline-block;
  margin-top: 0.2mm;
}
.id {
  margin-top: 0.6mm;
}

/* TTD images */
.ttdImg {
  object-fit: contain;
  display: block;
  max-width: 92mm;
}
.ttdPembina {
  max-height: 18mm;
  max-width: 70mm;
}
.ttdPbsi {
  max-height: 18mm;
  max-width: 70mm;
}

/* Overlay Ketua */
.sigCanvasKetua {
  overflow: visible;
}
.stempelKetua {
  position: absolute;
  left: var(--stamp-left);
  top: var(--stamp-top);
  width: var(--stamp-size);
  height: var(--stamp-size);
  object-fit: contain;
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.ttdKetua {
  position: absolute;
  left: var(--ttd-left);
  top: var(--ttd-top);
  max-height: 30mm;
  max-width: 92mm;
  z-index: 3;
}

/* Mengetahui */
.footerSign {
  margin-top: 3mm;
  text-align: center;
  font-size: 13px;
}
.sigCanvasPbsi {
  height: 20mm;
}

/* MODE EXPORT */
body.is-exporting .panel {
  display: none !important;
}
body.is-exporting .paperWrap {
  overflow: visible !important;
}
body.is-exporting .paper {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* ====== FIX EXPORT: tanda tangan tidak pindah ke halaman 2 ====== */
body.is-exporting {
  --paper-pad: 10mm;
  --kop-to-line-gap-top: 1.5mm;
  --line-to-body-gap: 3mm;

  --sig-title-h: 16mm;
  --sig-canvas-h: 26mm;
  --sig-name-h: 8mm;
}
body.is-exporting .signSection {
  margin-top: 2mm !important;
}
body.is-exporting .pTight {
  margin-bottom: 0.6mm !important;
  break-after: avoid;
  page-break-after: avoid;
}
body.is-exporting .footerSign {
  margin-top: 2mm !important;
}
body.is-exporting .sigCanvasPbsi {
  height: 18mm !important;
}
body.is-exporting .signSection,
body.is-exporting .signGrid,
body.is-exporting .footerSign {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* PRINT */
@page {
  size: A4;
  margin: 12mm;
}
@media print {
  body {
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .panel {
    display: none !important;
  }
  .wrap {
    padding: 0;
  }
  .paperWrap {
    overflow: visible;
  }
  .paper {
    width: auto;
    min-height: auto;
    padding: 0;
    border: none;
    box-shadow: none;
  }
  .signSection,
  .signGrid,
  .footerSign {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}