/* ====== Tema Papua Look ====== */
:root{
  /* Palet Papua */
  --bg: #fdfcf9;       /* putih tulang */
  --bg-soft: #ffffff;
  --text: #2d1b0d;     /* coklat gelap */
  --muted: #5c4a3d;    /* coklat pudar */
  --border: #d6ccc2;   /* krem garis */
  --primaryA: #7b4a12; /* coklat tanah */
  --primaryB: #a5692d; /* gradasi coklat */
  --highlight: #facc15;/* emas */
  --accent: #1e90ff;   /* biru laut (opsional link/aksen) */
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --radius: 16px;
  --radius-sm: 12px;
  --card-blur: saturate(120%) blur(0px);
}

/* Dark mode otomatis */
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0d0c0a;
    --bg-soft: #12100e;
    --text: #f3efe8;
    --muted: #b8a999;
    --border: #2b2520;
    --shadow: 0 10px 30px rgba(0,0,0,.55);
    --accent: #38bdf8;
  }
}

* { box-sizing: border-box }
html, body { height: 100% }
body{
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color: var(--text);
  /* Background dengan motif samar seperti ukiran */
  background:
    radial-gradient(900px 420px at -10% -10%, rgba(123,74,18,.08), transparent 40%),
    radial-gradient(900px 420px at 110% 10%, rgba(250,204,21,.08), transparent 40%),
    var(--bg);
}

/* ====== Topbar / Navbar ====== */
.topbar{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px;
  backdrop-filter: var(--card-blur);
  background: color-mix(in oklab, var(--bg-soft) 85%, transparent);
  border-bottom: 1px solid var(--border);
}
.topbar h1{
  font-size: 18px; margin: 0; letter-spacing: .2px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text);
}
.topbar h1::before{ content: "🪵"; font-size: 18px; }
.actions{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.mask-toggle{ font-size: 12px; color: var(--muted) }

/* ====== Buttons ====== */
button{
  appearance: none; border: 0;
  padding: 10px 14px; border-radius: 12px;
  font-weight: 600; color: #fff;
  background-image: linear-gradient(90deg, var(--primaryA), var(--primaryB));
  box-shadow: 0 8px 18px rgba(165,105,45,.25);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease;
}
button:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(165,105,45,.35) }
button:active{ transform: translateY(0) scale(.98) }
button:disabled{ opacity: .6; cursor: not-allowed; transform:none; box-shadow:none }

/* Tombol sekunder (ghost) */
button.ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* ====== Layout ====== */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  padding: 18px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cards */
.card{
  position: relative;
  background: color-mix(in oklab, var(--bg-soft) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card::after{
  /* aksen motif samar (coklat/emas) */
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(250,204,21,.06), transparent 40%),
    radial-gradient(300px 120px at 20% -10%, rgba(123,74,18,.08), transparent 60%),
    radial-gradient(260px 100px at 110% 10%, rgba(250,204,21,.08), transparent 60%);
  pointer-events:none; opacity:.7;
}
.card h2{ margin: 0 0 12px; font-size: 16px; letter-spacing:.3px; color: var(--text); }

/* ====== Controls ====== */
.controls{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 12px;
}
.control{ display: flex; flex-direction: column; gap: 6px }
.control label{ font-size: 12px; color: var(--muted) }
.control small{ font-size: 11px; color: var(--muted) }

.control input[type='text'],
.control input[type='number'],
.control select,
.control input[type='color']{
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-soft) 96%, transparent);
  color: var(--text);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.control input[type='text']:focus,
.control input[type='number']:focus,
.control select:focus{
  border-color: color-mix(in oklab, var(--primaryA) 60%, var(--border));
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--primaryA) 18%, transparent);
}
.control input[type='file']{
  border: 1px dashed var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg-soft) 94%, transparent);
  transition: border-color .15s ease, background .15s ease;
}
.control input[type='file']:hover{ border-color: color-mix(in oklab, var(--primaryB) 40%, var(--border)) }

/* ====== Pattern Canvas ====== */
#patternCanvas{
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}

/* ====== Mockup Frame ====== */
.mockup-frame{
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 3/4;
  margin: 6px auto 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #faf7ef, #f5efe4);
  box-shadow: var(--shadow);
}
.mockup-frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease, opacity .25s ease;
}
.mockup-frame:hover img{ transform: scale(1.02) }
#mockupImg{ object-fit: contain; pointer-events: none }

/* Layer CSS-mask (opsional, disimpan untuk fallback) */
.mask-layer{
  display:none; position:absolute; inset:0;
  background-repeat:no-repeat; background-size:contain; background-position:center;
}

/* ====== Hints & Footer ====== */
.hint{ font-size: 12px; color: var(--muted); margin: 8px 0 0 }
.footer{ padding: 18px; text-align: center; color: var(--muted) }

/* ====== Multi Preview (kalau fitur ini diaktifkan) ====== */
.multi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:12px;
}
.multi-tile{
  border:1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  background: color-mix(in oklab, var(--bg-soft) 96%, transparent);
  box-shadow: var(--shadow);
}
.multi-tile header{
  font-size:12px; padding:8px 10px;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklab, var(--bg-soft) 96%, transparent);
  color:#67411a;
}
@media (prefers-color-scheme: dark){ .multi-tile header{ color:#e7ddcf } }
.multi-tile img{ display:block; width:100%; height:auto }

/* ====== Link ====== */
a{ color: var(--accent); text-decoration: none }
a:hover{ text-decoration: underline }

/* ====== Animasi halus ====== */
.card, .topbar { animation: fadeIn .3s ease both }
@keyframes fadeIn { from{opacity:0; transform: translateY(4px)} to{opacity:1; transform: none} }