/* style.css — Tema Dark Mode Profesional Baru */
:root{
  --bg: #1e293b; /* Biru gelap keabu-abuan */
  --card: #0f172a; /* Biru gelap, hampir hitam */
  --sidebar: #1a2434; /* Lebih terang sedikit dari card untuk kontras */
  --accent: #22c55e; /* Hijau neon/terang */
  --primary-btn: #22c55e;
  --secondary-btn: #334155;
  --text: #f8fafc; /* Putih terang */
  --muted: #94a3b8; /* Teks sekunder */
  --border: #334155; /* Garis pembatas halus */
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:1200px; /* Lebar lebih besar untuk layout 2 kolom */
  margin:40px auto;
  background:var(--card);
  padding:30px;
  border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
}

.header{
  margin-bottom:25px;
  border-bottom:1px solid var(--border);
  padding-bottom:15px;
}
h1{margin:0; font-size:24px; color:var(--text)}
h2{margin-top:0; margin-bottom:10px; font-size:18px; color:var(--text)}
.lead{    margin: 20px 0;
    color: var(--muted);
    font-size: 16px;}

/* Layout Utama: Flexbox 2 Kolom */
.main-content-area{
  display:flex;
  gap:25px;
}
.canvas-area{
  flex: 3; /* Canvas mengambil 3 bagian */
  min-width: 0; /* Penting untuk responsivitas flex */
}
.settings-sidebar{
  flex: 1; /* Sidebar mengambil 1 bagian */
  min-width: 280px;
  background:var(--sidebar);
  padding:20px;
  border-radius:12px;
  border:1px solid var(--border);
  height: fit-content; /* Agar tidak memanjang ke bawah */
}

/* Upload Area */
.upload-area{
  border:2px dashed var(--border);
  background:var(--sidebar);
  border-radius:12px;
  padding:40px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.2s;
}
.upload-area:hover{
    border-color:var(--accent);
}
.upload-area.dragover{border-color:var(--accent); background:rgba(34,197,94,0.1)}
.upload-area input[type="file"]{display:none}
#uploadLabel{color:var(--muted); font-weight:600;}

/* Canvas Wrapper */
.canvas-wrap{
  position: relative; 
  margin-top:20px; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  overflow: hidden; 
  border-radius:12px; 
  border:2px solid var(--border); 
  padding:5px; 
  background:#fff
}
canvas{
  max-width:100%; 
  height:auto; 
  border-radius:6px; 
  background:transparent; 
  display:block;
  touch-action: none; 
}
#previewCanvas {
  position: absolute;
  top: 0; 
  left: 0; 
  pointer-events: none; 
  display: none; 
}

/* Toolbar Controls */
.tool-group{
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:1px solid var(--border);
}
.tool-group:last-child{
    border-bottom:none;
}
.control-row{
    display:flex;
    flex-direction:column;
    margin-top:10px;
}
.label-control{
    font-size:14px;
    color:var(--muted);
    margin-bottom:5px;
    font-weight:600;
}
input[type="range"]{
    width:100%;
    height:5px;
    background:var(--secondary-btn);
    border-radius:3px;
    -webkit-appearance:none;
    margin-top:5px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.select-control{
    padding:8px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--card);
    color:var(--text);
}
.button-group{
    display:flex;
    gap:10px;
    margin-bottom:10px;
}
.tool-btn{
    flex-grow:1;
    text-align:center;
    padding:10px;
}

/* Tombol Aksi */
.btn{
  border:0;
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:background-color 0.2s, box-shadow 0.2s;
}
.btn:disabled{background:#334155 !important; cursor:not-allowed; color:#778899}
.btn.active{
    box-shadow:0 0 0 3px rgba(34,197,94,0.5); /* Highlight hijau */
    background: var(--accent);
}
.btn.primary{
    background:var(--primary-btn);
    box-shadow:0 4px 10px rgba(34,197,94,0.2);
}
.btn.secondary{
    background:var(--secondary-btn);
    color:var(--muted);
}
.btn.secondary:hover:not(:disabled){
    background:#475569;
    color:var(--text);
}
.btn.primary:hover:not(:disabled){
    background:#16a34a;
}
.btn.tool-btn{
    background:var(--secondary-btn);
}
.btn.tool-btn:hover:not(:disabled){
    background:#475569;
}

/* Footer dan Notes */
.footer-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid var(--border);
}

.notes small{color:var(--muted); font-size:12px}

/* Responsivitas Mobile */
@media (max-width: 900px) {
    .main-content-area {
        flex-direction: column; /* Ubah layout menjadi tumpukan vertikal */
    }
    .settings-sidebar {
        min-width: 100%;
        order: -1; /* Sidebar diletakkan di atas canvas di mobile */
    }
    .footer-actions {
        justify-content: space-between;
    }
    .footer-actions .btn {
        flex-grow: 1;
    }
}
@media (max-width: 600px) {
    .container {
        margin: 10px;
        padding: 15px;
    }
    .tool-group .button-group {
        flex-direction: column;
    }
}