/* =====================================================
   Ubah JPG ke PDF — EditPad.ID
   Warna Brand: Merah #C8181A · Hitam #111111
   Mendukung tema: terang (light) & gelap (dark)
   ===================================================== */

/* ---- Variabel Brand EditPad ---- */
.ujkpdf-wrap {
  --ep-merah:       #C8181A;
  --ep-merah-gelap: #A01214;
  --ep-merah-muda:  rgba(200,24,26,0.1);
  --ep-merah-tipis: rgba(200,24,26,0.06);
  --ep-hitam:       #111111;
  --ep-abu-gelap:   #222222;
  --ep-hijau:       #16a34a;
  --ep-hijau-bg:    rgba(22,163,74,0.08);
  --ep-hijau-border:rgba(22,163,74,0.25);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 0 52px;
  box-sizing: border-box;
}
.ujkpdf-wrap *, .ujkpdf-wrap *::before, .ujkpdf-wrap *::after {
  box-sizing: border-box;
}

/* ============ TEMA TERANG (DEFAULT) ============ */
.ujkpdf-tema-terang {
  --bg:           #f9f9f9;
  --surface:      #ffffff;
  --surface2:     #f3f3f3;
  --border:       rgba(0,0,0,0.09);
  --border2:      rgba(0,0,0,0.16);
  --teks:         #111111;
  --teks2:        #555555;
  --teks3:        #999999;
  --shadow:       0 2px 12px rgba(0,0,0,0.07);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
}

/* ============ TEMA GELAP ============ */
.ujkpdf-tema-gelap {
  --bg:           #111111;
  --surface:      #1c1c1c;
  --surface2:     #252525;
  --border:       rgba(255,255,255,0.08);
  --border2:      rgba(255,255,255,0.15);
  --teks:         #f0f0f0;
  --teks2:        #aaaaaa;
  --teks3:        #666666;
  --shadow:       0 2px 12px rgba(0,0,0,0.3);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.4);
}

/* ============ BRAND HEADER ============ */
.ujkpdf-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ujkpdf-brand-logo {
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-shrink: 0;
}
.ujkpdf-logo-edit {
  font-size: 26px;
  font-weight: 900;
  color: var(--ep-hitam);
  letter-spacing: -1px;
  line-height: 1;
}
.ujkpdf-tema-gelap .ujkpdf-logo-edit { color: #f0f0f0; }
.ujkpdf-logo-pad {
  font-size: 26px;
  font-weight: 900;
  color: var(--ep-merah);
  letter-spacing: -1px;
  line-height: 1;
}
.ujkpdf-logo-domain {
  font-size: 11px;
  font-weight: 700;
  color: var(--ep-merah);
  letter-spacing: .04em;
  margin-left: 2px;
  margin-bottom: -2px;
  align-self: flex-end;
}
.ujkpdf-brand-divider {
  width: 1px;
  height: 32px;
  background: var(--border2);
  flex-shrink: 0;
}
.ujkpdf-brand-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.ujkpdf-tool-icon {
  width: 38px; height: 38px;
  background: var(--ep-merah-muda);
  border: 1px solid rgba(200,24,26,0.2);
  border-radius: 10px;
  padding: 8px;
  color: var(--ep-merah);
  flex-shrink: 0;
}
.ujkpdf-title {
  font-size: clamp(17px,2.5vw,22px);
  font-weight: 800;
  color: var(--teks);
  margin: 0 0 3px;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.ujkpdf-subtitle {
  font-size: 13px;
  color: var(--teks2);
  margin: 0;
  line-height: 1.4;
}

/* ============ PILLS ============ */
.ujkpdf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.ujkpdf-pill {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--teks2);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 11px;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ujkpdf-pill svg {
  width: 10px; height: 10px;
  color: var(--ep-merah);
  flex-shrink: 0;
}

/* ============ DROP ZONE ============ */
.ujkpdf-drop {
  background: var(--surface);
  border: 2px dashed var(--border2);
  border-radius: 16px;
  padding: clamp(30px,5vw,54px) 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .22s, background .22s, box-shadow .22s;
  position: relative;
  box-shadow: var(--shadow);
}
.ujkpdf-drop:hover,
.ujkpdf-drop.drag-over {
  border-color: var(--ep-merah);
  background: var(--ep-merah-tipis);
  box-shadow: 0 0 0 4px rgba(200,24,26,0.08);
}
.ujkpdf-drop-icon {
  width: 70px; height: 70px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: var(--ep-merah-muda);
  border: 1.5px solid rgba(200,24,26,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ep-merah);
  transition: transform .2s;
}
.ujkpdf-drop:hover .ujkpdf-drop-icon { transform: scale(1.06); }
.ujkpdf-drop-icon svg { width: 32px; height: 32px; }
.ujkpdf-drop-title {
  font-size: 18px; font-weight: 800; color: var(--teks);
  margin: 0 0 6px; letter-spacing: -.02em;
}
.ujkpdf-drop-sub {
  font-size: 13.5px; color: var(--teks2); margin: 0 0 20px;
}
.ujkpdf-drop-catatan {
  font-size: 11.5px; color: var(--teks3); margin-top: 14px;
}
.ujkpdf-input-file {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%; z-index: 2;
}

/* ---- TOMBOL PILIH ---- */
.ujkpdf-btn-pilih {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ep-merah);
  color: #fff;
  border: none; border-radius: 9px;
  padding: 12px 28px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  position: relative; z-index: 3;
  transition: background .2s, transform .2s, box-shadow .2s;
  font-family: inherit;
  letter-spacing: -.01em;
}
.ujkpdf-btn-pilih svg { width: 16px; height: 16px; }
.ujkpdf-btn-pilih:hover {
  background: var(--ep-merah-gelap);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200,24,26,0.28);
}

/* ============ PENGATURAN ============ */
.ujkpdf-setting-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ep-merah);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 14px;
  box-shadow: var(--shadow);
}
.ujkpdf-setting-panel.tampil { display: block; }
.ujkpdf-setting-label-bar {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ep-merah);
  margin-bottom: 14px;
}
.ujkpdf-setting-label-bar svg { width: 13px; height: 13px; }
.ujkpdf-setting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ujkpdf-setting-item {
  display: flex; flex-direction: column; gap: 5px;
}
.ujkpdf-slabel {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--teks3);
}
.ujkpdf-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--teks);
  border-radius: 7px;
  padding: 8px 28px 8px 10px;
  font-size: 13px;
  outline: none; cursor: pointer;
  transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: inherit;
  width: 100%;
}
.ujkpdf-select:focus { border-color: var(--ep-merah); }

/* ============ GALERI THUMBNAIL ============ */
.ujkpdf-galeri {
  display: none;
  margin-top: 16px;
}
.ujkpdf-galeri.tampil { display: block; }
.ujkpdf-galeri-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ujkpdf-galeri-count {
  font-size: 13px; font-weight: 500; color: var(--teks2);
}
.ujkpdf-galeri-count strong { color: var(--teks); }
.ujkpdf-btn-hapus-semua {
  background: none;
  border: 1px solid var(--border);
  color: var(--teks2);
  font-size: 12px; padding: 5px 13px;
  border-radius: 6px; cursor: pointer;
  font-family: inherit;
  transition: border-color .2s, color .2s;
}
.ujkpdf-btn-hapus-semua:hover {
  border-color: var(--ep-merah); color: var(--ep-merah);
}
.ujkpdf-grid-thumb {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 10px;
}

/* ---- Thumb card ---- */
.ujkpdf-thumb {
  position: relative; aspect-ratio: 1;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
  animation: ujkpdf-masuk .3s ease forwards;
  opacity: 0; transform: scale(.88);
}
@keyframes ujkpdf-masuk { to { opacity:1; transform:scale(1); } }
.ujkpdf-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.ujkpdf-thumb-nomor {
  position: absolute; top:6px; left:7px;
  background: rgba(0,0,0,0.65);
  color:#fff; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:20px;
}
.ujkpdf-thumb-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
  opacity:0; transition:opacity .2s;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:7px 8px;
}
.ujkpdf-thumb:hover .ujkpdf-thumb-overlay { opacity:1; }
.ujkpdf-thumb-nama {
  font-size:9.5px; color:rgba(255,255,255,.85);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:74px;
}
.ujkpdf-thumb-hapus {
  width:22px; height:22px; border-radius:50%;
  background: var(--ep-merah); border:none; color:#fff;
  cursor:pointer; font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background .2s, transform .15s;
}
.ujkpdf-thumb-hapus:hover { background: var(--ep-merah-gelap); transform:scale(1.1); }

/* ---- Tile tambah ---- */
.ujkpdf-thumb-tambah {
  aspect-ratio:1;
  border:2px dashed var(--border2);
  border-radius:10px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:5px; cursor:pointer;
  background: var(--surface);
  color: var(--teks3);
  font-size:11px;
  transition: border-color .2s, color .2s, background .2s;
}
.ujkpdf-thumb-tambah:hover {
  border-color: var(--ep-merah);
  color: var(--ep-merah);
  background: var(--ep-merah-tipis);
}
.ujkpdf-thumb-tambah svg { width:22px; height:22px; }

/* ============ PROGRESS ============ */
.ujkpdf-progress {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ep-merah);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}
.ujkpdf-progress.tampil { display: block; }
.ujkpdf-progress-info {
  display:flex; justify-content:space-between;
  font-size:13px; color:var(--teks2); margin-bottom:10px;
}
.ujkpdf-progress-persen { font-weight:700; color:var(--ep-merah); }
.ujkpdf-progress-trek {
  height:7px; background:var(--surface2);
  border-radius:10px; overflow:hidden;
}
.ujkpdf-progress-isi {
  height:100%;
  background: linear-gradient(90deg, var(--ep-merah), #e84040);
  border-radius:10px; width:0%;
  transition: width .35s ease;
}
.ujkpdf-progress-langkah {
  display:flex; gap:18px; margin-top:10px;
}
.ujkpdf-langkah {
  font-size:11.5px; color:var(--teks3);
  display:flex; align-items:center; gap:5px;
}
.ujkpdf-langkah-dot {
  width:6px; height:6px; border-radius:50%;
  background: currentColor; flex-shrink:0;
}
.ujkpdf-langkah.aktif { color: var(--ep-merah); font-weight:600; }
.ujkpdf-langkah.selesai { color: var(--ep-hijau); }

/* ============ TOMBOL UBAH ============ */
.ujkpdf-aksi { display:none; margin-top:16px; text-align:center; }
.ujkpdf-aksi.tampil { display:block; }

.ujkpdf-btn-ubah {
  width:100%; padding:16px;
  background: var(--ep-merah);
  color:#fff; border:none;
  border-radius:12px;
  font-size:17px; font-weight:800;
  font-family:inherit; cursor:pointer;
  letter-spacing:-.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition: background .2s, transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.ujkpdf-btn-ubah::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.08), transparent);
  pointer-events:none;
}
.ujkpdf-btn-ubah:hover {
  background: var(--ep-merah-gelap);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(200,24,26,0.3);
}
.ujkpdf-btn-ubah:disabled {
  opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;
}
.ujkpdf-btn-ubah svg { width:20px; height:20px; }
.ujkpdf-aksi-catatan {
  font-size:12px; color:var(--teks3); margin-top:10px;
}

/* ============ SUKSES ============ */
.ujkpdf-sukses {
  display:none;
  background: var(--ep-hijau-bg);
  border:1px solid var(--ep-hijau-border);
  border-radius:14px; padding:30px 22px;
  text-align:center; margin-top:16px;
}
.ujkpdf-sukses.tampil {
  display:block;
  animation: ujkpdf-fadeUp .4s ease;
}
@keyframes ujkpdf-fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.ujkpdf-sukses-ikon {
  width:60px; height:60px; border-radius:50%;
  background:rgba(22,163,74,.15); color:var(--ep-hijau);
  margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
}
.ujkpdf-sukses-ikon svg { width:28px; height:28px; }
.ujkpdf-sukses-judul {
  font-size:20px; font-weight:800; color:var(--teks); margin:0 0 6px;
}
.ujkpdf-sukses-info {
  font-size:13px; color:var(--teks2); margin:0 0 20px;
}
.ujkpdf-sukses-tombol {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.ujkpdf-btn-unduh {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ep-hijau); color:#fff; border:none;
  border-radius:9px; padding:11px 26px;
  font-size:14px; font-weight:700;
  font-family:inherit; cursor:pointer;
  transition:opacity .2s, transform .2s;
}
.ujkpdf-btn-unduh svg { width:16px; height:16px; }
.ujkpdf-btn-unduh:hover { opacity:.87; transform:translateY(-1px); }
.ujkpdf-btn-lagi {
  background:var(--surface2); border:1px solid var(--border);
  color:var(--teks2); border-radius:9px;
  padding:11px 20px; font-size:14px;
  font-family:inherit; cursor:pointer;
  transition: border-color .2s, color .2s;
}
.ujkpdf-btn-lagi:hover { border-color:var(--ep-merah); color:var(--ep-merah); }

/* ============ ERROR ============ */
.ujkpdf-error {
  display:none;
  background:rgba(200,24,26,0.07);
  border:1px solid rgba(200,24,26,0.22);
  border-radius:9px; padding:12px 16px;
  margin-top:12px; color:var(--ep-merah);
  font-size:13.5px; align-items:center; gap:8px;
}
.ujkpdf-error.tampil { display:flex; }
.ujkpdf-error svg { width:16px; height:16px; flex-shrink:0; }

/* ============ FOOTER NOTE ============ */
.ujkpdf-footer-note {
  text-align:center; font-size:12px;
  color:var(--teks3); margin-top:28px;
  padding-top:18px; border-top:1px solid var(--border);
}
.ujkpdf-footer-note strong { color:var(--ep-merah); }

/* ============ RESPONSIVE ============ */
@media (max-width:540px) {
  .ujkpdf-grid-thumb { grid-template-columns: repeat(3,1fr); }
  .ujkpdf-setting-grid { grid-template-columns:1fr 1fr; }
  .ujkpdf-brand { gap:10px; }
  .ujkpdf-brand-divider { display:none; }
}