/* Prototype.Website.AI.ErsaProject */
:root {
  --hijau-tua: #1a2a1a;
  --hijau: #2d4a2d;
  --hijau-muda: #4a6a4a;
  --krem: #f5f5f0;
  --aksen: #7fb069;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #101510; color: #e8e8e0;
}
.banner {
  background: linear-gradient(135deg, var(--hijau-tua) 0%, var(--hijau) 50%, var(--hijau-tua) 100%);
  border-bottom: 2px solid var(--hijau-muda);
  text-align: center; padding: 26px 16px;
}
.banner h1 { margin: 0 0 8px 0; letter-spacing: 1px; font-size: 1.6em; color: var(--krem); }
.banner p { margin: 0; opacity: 0.85; font-size: 0.95em; }
main { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; }
.card {
  background: #1b211b; border: 1px solid #2e3a2e; border-radius: 12px;
  padding: 20px; margin-bottom: 18px;
}
.card h2 { margin-top: 0; color: var(--aksen); }
.muted { color: #9aa39a; font-size: 0.92em; }
.hidden { display: none; }
.status {
  background: #242e24; border-left: 4px solid var(--aksen);
  padding: 10px 12px; border-radius: 6px; margin: 12px 0;
}
.status.ok { border-color: #7fb069; }
.status.err { border-color: #c0392b; }
.dropzone {
  border: 2px dashed var(--hijau-muda); border-radius: 10px;
  text-align: center; padding: 28px 12px; margin: 12px 0; cursor: pointer;
  transition: background 0.2s;
}
.dropzone:hover, .dropzone.dragover { background: #232b23; }
.btn {
  display: inline-block; background: var(--hijau-muda); color: #fff;
  border: none; border-radius: 8px; padding: 10px 22px; font-size: 1em;
  cursor: pointer; margin-top: 8px;
}
.btn.primary { background: var(--aksen); color: #10210f; font-weight: bold; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.contoh { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.thumb:hover { border-color: var(--aksen); }
.controls { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.controls input[type="range"] { width: 100%; accent-color: var(--aksen); }
#canvas { max-width: 100%; border-radius: 8px; margin: 12px 0; border: 1px solid #2e3a2e; }
.ringkasan { font-size: 1.05em; margin: 8px 0; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.93em; }
th, td { border: 1px solid #2e3a2e; padding: 8px 10px; text-align: left; }
th { background: #242e24; color: var(--aksen); }
ul { line-height: 1.7; padding-left: 20px; }