/* Discover Pangalengan Offering Letter Generator */
:root {
  --teal:#0D3D4F;--tea:#4A7C59;--forest:#3C6C57;
  --mist:#8DB87A;--fog:#B8C9B0;--ember:#E8956D;
  --golden:#F2C46D;--cream:#F5EDD8;--charcoal:#2C2C2A;
  --stone:#8C8C7A;--off:#F7FAF7;--ltea:#EAF3EC;--lteal:#E8F2F5;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Georgia,'Times New Roman',serif;background:#ddd;color:var(--charcoal);font-size:10.5pt;line-height:1.65;}
.paper{width:210mm;min-height:297mm;background:#fff;margin:20px auto;box-shadow:0 4px 32px rgba(0,0,0,.15);overflow:hidden;}

/* KOP */
.kop{background:var(--teal);position:relative;overflow:hidden;}
.kop-acc{height:5px;background:linear-gradient(90deg,#4A7C59,#8DB87A,#B8C9B0);}
.kop-bg{position:absolute;top:-50px;right:-50px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(74,124,89,.18) 0%,transparent 70%);}
.kop-in{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 36px 16px;position:relative;z-index:1;}
.kop-um{font-family:'Courier New',monospace;font-size:7pt;letter-spacing:.18em;color:rgba(141,184,122,.6);text-transform:uppercase;margin-bottom:4px;}
.kop-br{font-size:24pt;font-weight:700;color:var(--cream);letter-spacing:-.5px;line-height:1;margin-bottom:4px;}
.kop-br em{color:var(--mist);font-style:italic;}
.kop-sb{font-family:'Courier New',monospace;font-size:7pt;letter-spacing:.14em;color:rgba(245,237,216,.3);text-transform:uppercase;margin-bottom:7px;}
.kop-tg{font-size:8.5pt;font-style:italic;color:rgba(141,184,122,.65);}
.kop-rt{text-align:right;font-size:8pt;color:rgba(245,237,216,.65);line-height:1.9;}
.kop-rl{font-family:'Courier New',monospace;font-size:6.5pt;letter-spacing:.15em;color:rgba(141,184,122,.5);text-transform:uppercase;margin-bottom:5px;}
.kop-dv{height:1px;background:rgba(74,124,89,.25);margin:0 36px;}
.kop-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 36px;}
.kop-bt{font-family:'Courier New',monospace;font-size:6.5pt;letter-spacing:.12em;color:rgba(245,237,216,.28);text-transform:uppercase;}
.kop-dots{display:flex;gap:5px;}
.kop-dot{width:5px;height:5px;border-radius:50%;}

/* BODY */
.bd{padding:26px 36px 34px;}
.meta-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.meta-tbl{font-size:9.5pt;}
.meta-tbl td:first-child{font-weight:700;padding-right:6px;white-space:nowrap;}
.meta-tbl td:nth-child(2){padding-right:8px;color:var(--stone);}
.meta-tbl td:last-child{padding-bottom:4px;}
.meta-dt{font-size:9pt;color:var(--stone);white-space:nowrap;}
.dv{height:1px;background:rgba(13,61,79,.08);margin:12px 0;}
.dvg{height:2px;margin:13px 0;border-radius:1px;background:linear-gradient(90deg,var(--tea) 0%,rgba(74,124,89,.1) 60%,transparent 100%);}
.kpd{font-size:9.5pt;line-height:1.9;margin-bottom:14px;}
.kpd-lb{font-weight:700;}
.pmb{font-size:9.5pt;line-height:1.75;text-align:justify;margin-bottom:12px;}

/* Section head */
.sh{display:flex;align-items:center;gap:10px;margin:16px 0 9px;}
.sn{width:22px;height:22px;border-radius:50%;background:var(--tea);color:#fff;font-size:9pt;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.st{font-size:11.5pt;font-weight:700;color:var(--teal);letter-spacing:-.3px;}

/* Profile */
.pbox{background:var(--off);border-left:3px solid var(--tea);border-radius:0 8px 8px 0;padding:12px 15px;font-size:9pt;line-height:1.75;margin-bottom:11px;}
.pbox p{margin-bottom:6px;}
.pbox p:last-child{margin-bottom:0;}

/* Info box */
.ibox{background:var(--teal);border-radius:10px;padding:11px 15px;margin:11px 0;display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.ib-l{font-family:'Courier New',monospace;font-size:6.5pt;letter-spacing:.12em;color:rgba(141,184,122,.5);text-transform:uppercase;margin-bottom:1px;}
.ib-v{font-size:9pt;color:var(--cream);font-weight:600;}

/* ── CLIENT LOGOS ── */
.ph-label{font-family:'Courier New',monospace;font-size:6.5pt;letter-spacing:.18em;color:var(--stone);text-transform:uppercase;margin-bottom:7px;margin-top:12px;}
.cl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:3px;}
.cl-ph{border:1.5px dashed rgba(13,61,79,.16);border-radius:8px;background:var(--off);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.cl-ph:hover{border-color:var(--tea);background:rgba(74,124,89,.05);}
.cl-ph img{width:100%;height:100%;object-fit:cover;padding:0;display:none;}
.cl-ph.on img{display:block;}
.cl-ph.on .pi,.cl-ph.on .pt{display:none;}
.pi{font-size:13px;color:rgba(13,61,79,.16);}
.pt{font-size:6pt;color:rgba(13,61,79,.22);text-align:center;font-family:'Courier New',monospace;line-height:1.3;}
.cl-in{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}

/* ── WISATA IMAGES ── */
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0;}
.ws-ph{border:1.5px dashed rgba(13,61,79,.14);border-radius:10px;background:var(--off);aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden;cursor:pointer;transition:all .2s;}
.ws-ph:hover{border-color:var(--tea);background:rgba(74,124,89,.04);}
.ws-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:9px;display:none;}
.ws-ph.on img{display:block;}
.ws-ph.on .wi,.ws-ph.on .wt{visibility:hidden;}
.wi{font-size:20px;color:rgba(13,61,79,.16);}
.wt{text-align:center;}
.wn{font-size:7.5pt;font-weight:700;color:rgba(13,61,79,.35);}
.wh{font-size:6pt;color:rgba(13,61,79,.2);font-family:'Courier New',monospace;}
.ws-in{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}
.ws-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(13,61,79,.72));padding:18px 8px 7px;display:none;}
.ws-ph.on .ws-cap{display:block;}
.wc{font-size:7pt;color:#fff;font-weight:700;text-align:center;}

/* ── SOCIAL MEDIA ── */
.sm-wrap{margin-top:12px;}
.sm-bar{display:flex;gap:7px;flex-wrap:wrap;}
.sm-item{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;border:1px solid;text-decoration:none;flex:1;min-width:130px;}
.sm-ico{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sm-pl{font-family:'Courier New',monospace;font-size:6.5pt;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1px;}
.sm-un{font-size:9pt;font-weight:700;}
.s-ig{background:rgba(225,48,108,.05);border-color:rgba(225,48,108,.18);}
.s-ig .sm-pl{color:rgba(214,40,110,.5);}
.s-ig .sm-un{color:#d62872;}
.s-ig .sm-ico{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.s-tt{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);}
.s-tt .sm-pl{color:rgba(0,0,0,.33);}
.s-tt .sm-un{color:var(--charcoal);}
.s-tt .sm-ico{background:var(--charcoal);}
.s-fb{background:rgba(24,119,242,.05);border-color:rgba(24,119,242,.17);}
.s-fb .sm-pl{color:rgba(24,119,242,.5);}
.s-fb .sm-un{color:#1877f2;}
.s-fb .sm-ico{background:#1877f2;}

/* TABLES */
.tbl{width:100%;border-collapse:collapse;margin-bottom:11px;font-size:9pt;}
.tbl thead tr{background:var(--teal);color:var(--cream);}
.tbl thead th{padding:7px 10px;text-align:left;font-family:'Courier New',monospace;font-size:7pt;letter-spacing:.07em;text-transform:uppercase;font-weight:500;}
.tbl tbody tr{border-bottom:1px solid rgba(13,61,79,.07);}
.tbl tbody tr:nth-child(even){background:var(--off);}
.tbl tbody tr.ft{background:var(--ltea);}
.tbl tbody td{padding:7px 10px;vertical-align:top;line-height:1.5;}
.tbl tbody td:first-child{font-weight:700;color:var(--teal);}
.bok{display:inline-block;background:rgba(74,124,89,.1);color:var(--tea);font-size:7pt;font-family:'Courier New',monospace;letter-spacing:.06em;padding:2px 8px;border-radius:100px;border:1px solid rgba(74,124,89,.2);}
.hp{font-family:Georgia,serif;font-weight:700;color:var(--tea);font-size:10pt;}
.hbg{display:inline-block;background:var(--ember);color:#fff;font-size:6.5pt;font-family:'Courier New',monospace;letter-spacing:.06em;padding:1px 6px;border-radius:100px;margin-left:4px;}

/* Ketentuan */
.kl{list-style:none;font-size:9pt;}
.kl li{display:flex;gap:8px;margin-bottom:4px;padding:7px 10px;border-radius:6px;}
.kl li:nth-child(odd){background:var(--off);}
.kl li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--tea);margin-top:5px;flex-shrink:0;}

/* ── KETENTUAN TABLE (rapi, compact) ── */
.ket-tbl{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:0;}
.ket-tbl tbody tr{border-bottom:1px solid rgba(13,61,79,.06);}
.ket-tbl tbody tr:nth-child(odd){background:var(--off);}
.ket-tbl tbody td{padding:6px 10px;vertical-align:top;line-height:1.55;}
.ket-num{width:26px;text-align:center;font-weight:700;color:var(--tea);font-size:9pt;vertical-align:top;padding-top:6px;white-space:nowrap;}

/* ── 5-COL WISATA GRID ── */
.ws-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0;}
.ws-grid5 .ws-ph{aspect-ratio:3/2;}

/* ── EDITABLE TABLE CELLS ── */
.editable,
.tbl td[contenteditable],
.ket-tbl td[contenteditable]{
  outline:none;cursor:text;
  transition:background .15s,box-shadow .15s;
}
.editable:hover,
.tbl td[contenteditable]:hover,
.ket-tbl td[contenteditable]:hover{background:rgba(74,124,89,.05)!important;}
.editable:focus,
.tbl td[contenteditable]:focus,
.ket-tbl td[contenteditable]:focus{
  background:rgba(74,124,89,.08)!important;
  box-shadow:inset 0 0 0 1.5px rgba(74,124,89,.35);
  border-radius:3px;
}
.editable{border-radius:3px;}
.edit-tools{display:flex;gap:7px;align-items:center;justify-content:flex-end;margin:-2px 0 8px;flex-wrap:wrap;}
.mini-btn{border:1px solid rgba(13,61,79,.16);background:#fff;color:var(--teal);border-radius:7px;padding:5px 10px;font-family:Georgia,serif;font-size:8pt;cursor:pointer;}
.mini-btn:hover{background:var(--off);border-color:rgba(74,124,89,.35);}
.row-del{border:0;background:rgba(232,149,109,.12);color:#9f4b2d;border-radius:5px;padding:3px 6px;font-size:8pt;cursor:pointer;}
.row-del:hover{background:rgba(232,149,109,.22);}
.tbl th.no-print,.tbl td.no-print{width:36px;text-align:center;padding-left:5px;padding-right:5px;}
.offer-summary{border:1px solid rgba(13,61,79,.1);background:linear-gradient(135deg,var(--lteal),#fff);border-radius:8px;padding:10px 12px;margin:12px 0 14px;}
.offer-summary .ph-label{margin-top:0;}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.summary-item{background:#fff;border:1px solid rgba(13,61,79,.08);border-radius:7px;padding:7px 9px;min-height:48px;}
.summary-label{font-family:'Courier New',monospace;font-size:6.2pt;letter-spacing:.1em;color:var(--stone);text-transform:uppercase;margin-bottom:2px;}
.summary-value{font-size:9pt;font-weight:700;color:var(--teal);line-height:1.35;}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px;}
.pkg-ph{border:1.5px dashed rgba(13,61,79,.14);border-radius:9px;background:var(--off);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden;cursor:pointer;transition:all .2s;}
.pkg-ph:hover{border-color:var(--tea);background:rgba(74,124,89,.04);}
.pkg-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.pkg-ph.on img{display:block;}
.pkg-ph.on .wi,.pkg-ph.on .wt{visibility:hidden;}
.pkg-in{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}
.pkg-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(13,61,79,.72));padding:18px 8px 7px;display:none;}
.pkg-ph.on .pkg-cap{display:block;}
.hp-cell{font-family:Georgia,serif;font-weight:700;color:var(--tea);font-size:10pt;}

/* Edit hint */
.edit-hint{font-size:7.5pt;color:var(--mist);font-style:italic;margin-bottom:6px;padding:4px 8px;background:rgba(74,124,89,.06);border-radius:4px;display:inline-block;}
@media print{.edit-hint{display:none;}}

/* Penutup */
.ptup{font-size:9.5pt;line-height:1.75;text-align:justify;margin-bottom:11px;}

/* TTD */
.ttd{display:flex;justify-content:space-between;align-items:flex-start;margin-top:20px;}
.ttd-cb{background:var(--off);border:1px solid rgba(13,61,79,.08);border-radius:10px;padding:11px 13px;font-size:8.5pt;line-height:1.85;max-width:230px;}
.ttd-ch{font-family:'Courier New',monospace;font-size:6.5pt;letter-spacing:.15em;color:var(--mist);text-transform:uppercase;margin-bottom:5px;}
.ttd-r{text-align:center;min-width:148px;}
.ttd-cd{font-size:9pt;margin-bottom:54px;}
.ttd-ln{width:128px;height:1px;background:var(--charcoal);margin:0 auto 5px;}
.ttd-jb{font-size:9.5pt;font-weight:700;color:var(--teal);}
.ttd-br{font-size:8pt;color:var(--stone);font-family:'Courier New',monospace;letter-spacing:.08em;}

/* Footer */
.pf{background:var(--off);border-top:1px solid rgba(13,61,79,.08);padding:8px 36px;display:flex;justify-content:space-between;align-items:center;}
.pf-b{font-size:9pt;font-weight:700;color:var(--teal);}
.pf-b em{color:var(--tea);font-style:italic;}
.pf-t{font-family:'Courier New',monospace;font-size:6.5pt;letter-spacing:.09em;color:var(--stone);text-transform:uppercase;}

/* Print bar */
.pbar{width:210mm;margin:0 auto 10px;display:flex;gap:8px;justify-content:flex-end;padding:0 4px;}
.pbtn{background:var(--teal);color:var(--cream);border:none;border-radius:8px;padding:8px 18px;font-size:13px;cursor:pointer;font-family:Georgia,serif;transition:background .2s;display:flex;align-items:center;gap:6px;}
.pbtn:hover{background:var(--tea);}
.pbtn.sec{background:#fff;color:var(--teal);border:1px solid rgba(13,61,79,.2);}
.pbtn.sec:hover{background:var(--off);}
.hl{color:var(--tea);font-weight:700;}

@page{size:A4;margin:0;}
@media print{
  body{background:#fff;}
  .paper{margin:0;box-shadow:none;width:100%;}
  .pbar{display:none;}
  .cl-in,.ws-in,.pkg-in,.edit-tools,.no-print{display:none!important;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}