/*
  crop-pdf/crop-pdf.css
  ==================================
  Self-contained styles untuk tool Crop PDF. Basis (drop zone, field,
  tombol, status, FAQ) mengikuti pola duplikasi yang sama seperti tool
  lain (lihat header upscaler.css). Bagian khusus tool ini ada di paling
  bawah: navigasi halaman, kanvas crop dengan handle, grid margin.
*/

.mea-tool-header { margin-bottom: 32px; }

.mea-back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mea-text-muted);
  margin-bottom: 20px;
}
.mea-back-link:hover { color: var(--mea-accent-text); }

.mea-tool-header h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: 0.02em;
  margin: 8px 0 8px;
  color: var(--mea-text-primary);
}

.mea-tool-header p {
  font-size: 14.5px;
  color: var(--mea-text-secondary);
  margin: 0;
  max-width: 56ch;
}

.mea-tool-page {
  max-width: 720px;
  padding-top: 40px;
  padding-bottom: 64px;
}

[hidden] { display: none !important; }

/* ---------- Drop zone ---------- */

.mea-drop-zone {
  border: 1px dashed var(--mea-border-strong);
  border-radius: var(--mea-radius-lg);
  padding: 48px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mea-drop-zone:hover, .mea-drop-zone.drag-active {
  border-color: var(--mea-accent);
  background: var(--mea-accent-muted);
}
.mea-drop-zone p { margin: 0; color: var(--mea-text-secondary); font-size: 14px; }
.mea-drop-zone .dz-sub { font-size: 12px; color: var(--mea-text-muted); margin-top: 6px; }
.mea-drop-zone span { color: var(--mea-accent-text); font-weight: 600; }

.mea-drop-zone-small { padding: 24px 16px; }

/* ---------- Selected file bar ---------- */

.mea-selected-file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  background: var(--mea-surface);
}
.mea-selected-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mea-selected-name {
  font-size: 13.5px;
  color: var(--mea-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mea-selected-size { font-size: 12px; color: var(--mea-text-muted); }
.mea-selected-remove {
  background: transparent;
  border: none;
  color: var(--mea-text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--mea-radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.mea-selected-remove:hover { color: var(--mea-danger-text); background: var(--mea-danger-bg); }

/* ---------- Editor section / fields ---------- */

.mea-editor-section {
  margin-top: 32px;
  border-top: 1px solid var(--mea-border);
  padding-top: 24px;
}

.mea-field { margin-bottom: 24px; }
.mea-field > label {
  display: block;
  font-size: 13px;
  color: var(--mea-text-secondary);
  margin-bottom: 8px;
}
.mea-field-hint { margin: 8px 0 0; font-size: 12px; color: var(--mea-text-muted); }

.mea-text-input,
.mea-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: var(--mea-text-primary);
  font-size: 13.5px;
  box-sizing: border-box;
}
.mea-text-input:focus, .mea-select:focus { outline: none; border-color: var(--mea-accent); }

.mea-slider {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--mea-accent);
}

/* ---------- Preset groups (reused mea-quality-* classes) ---------- */

.mea-quality-group { display: flex; gap: 8px; }
.mea-quality-btn {
  flex: 1;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: var(--mea-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mea-quality-btn:hover { border-color: var(--mea-border-strong); }
.mea-quality-btn.active {
  border-color: var(--mea-accent);
  background: var(--mea-accent-muted);
  color: var(--mea-accent-text);
}

/* ---------- Buttons / status / progress ---------- */

.mea-btn-primary {
  width: 100%;
  padding: 13px;
  background: var(--mea-accent);
  color: #061121;
  border: none;
  border-radius: var(--mea-radius-md);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mea-btn-primary:hover { background: #ffffff; transform: translateY(-1px); }
.mea-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.mea-btn-secondary {
  width: 100%;
  padding: 11px;
  background: transparent;
  color: var(--mea-text-secondary);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mea-btn-secondary:hover { border-color: var(--mea-border-strong); color: var(--mea-text-primary); }

.mea-status { margin-top: 12px; font-size: 13px; min-height: 18px; }

.mea-progress-bar-wrap {
  margin-top: 12px;
  height: 6px;
  border-radius: var(--mea-radius-sm);
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  overflow: hidden;
}
.mea-progress-bar { height: 100%; width: 0%; background: var(--mea-accent); transition: width 0.2s ease; }

.mea-download-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px;
  background: var(--mea-success);
  color: #061121;
  border-radius: var(--mea-radius-md);
  font-size: 14.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 12px;
  transition: transform 0.15s ease;
}
.mea-download-btn:hover { transform: translateY(-1px); }

/* ---------- FAQ (SEO) ---------- */

.mea-faq { margin-top: 48px; border-top: 1px solid var(--mea-border); padding-top: 24px; }
.mea-faq h2 { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--mea-text-primary); }
.mea-faq-item { margin-bottom: 4px; border-bottom: 1px solid var(--mea-border); }
.mea-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mea-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mea-faq-item summary::-webkit-details-marker { display: none; }
.mea-faq-item p { margin: 0 4px 16px; font-size: 13.5px; color: var(--mea-text-secondary); }

/* =====================================================================
   Khusus Crop PDF
   ===================================================================== */

.mea-page-nav { display: flex; align-items: center; gap: 12px; }
.mea-page-nav .mea-btn-secondary { width: auto; min-width: 44px; padding: 8px 14px; font-size: 18px; line-height: 1; }
.mea-page-label { flex: 1; text-align: center; font-size: 13.5px; color: var(--mea-text-primary); }

.mea-crop-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px dashed var(--mea-border-strong);
  border-radius: var(--mea-radius-sm);
  font-size: 12.5px;
  color: var(--mea-text-secondary);
  line-height: 1.5;
}

/* ---------- Kanvas pratinjau + persegi crop ---------- */
.mea-crop-stage { max-width: 100%; }
.mea-crop-wrap {
  position: relative;
  overflow: hidden; /* bayangan gelap di luar persegi crop tidak boleh meluber */
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  background: #ffffff;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
}
.mea-crop-wrap canvas { display: block; width: 100%; height: 100%; }

.mea-crop-rect {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--mea-accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); /* menggelapkan area yang akan terpotong */
  cursor: move;
  touch-action: none; /* cegah scroll native saat jari di dalam persegi crop */
}
.mea-crop-h {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 3px;
  background: var(--mea-accent);
  border: 2px solid #ffffff;
  box-sizing: border-box;
  touch-action: none;
}
/* Hit-area lebih besar di sekeliling handle supaya mudah di-tap di HP */
.mea-crop-h::after { content: ''; position: absolute; inset: -12px; }
.mea-crop-h[data-h="nw"] { left: 0;    top: 0;    cursor: nwse-resize; }
.mea-crop-h[data-h="n"]  { left: 50%;  top: 0;    cursor: ns-resize; }
.mea-crop-h[data-h="ne"] { left: 100%; top: 0;    cursor: nesw-resize; }
.mea-crop-h[data-h="e"]  { left: 100%; top: 50%;  cursor: ew-resize; }
.mea-crop-h[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.mea-crop-h[data-h="s"]  { left: 50%;  top: 100%; cursor: ns-resize; }
.mea-crop-h[data-h="sw"] { left: 0;    top: 100%; cursor: nesw-resize; }
.mea-crop-h[data-h="w"]  { left: 0;    top: 50%;  cursor: ew-resize; }

/* ---------- Grid margin (mm) ---------- */
.mea-margin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
@media (min-width: 640px) { .mea-margin-grid { grid-template-columns: repeat(4, 1fr); } }
.mea-margin-grid .mea-field { margin-bottom: 0; }
.mea-result-size { margin: 12px 0 0; font-size: 12.5px; color: var(--mea-text-secondary); }

.mea-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.mea-btn-row .mea-btn-secondary { width: auto; flex: 0 1 auto; }

.mea-range-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mea-range-row .mea-text-input { width: 90px; flex: 0 0 auto; }
.mea-range-row span { font-size: 13px; color: var(--mea-text-secondary); }

.mea-field-note { margin: 16px 0 0; font-size: 12px; color: var(--mea-text-muted); line-height: 1.55; }