:root{
  --ink:#16203a; --ink-soft:#5b6480; --line:#e2e2dc; --paper:#faf8f3; --card:#fff;
  --blue:#4361c9; --blue-dark:#354fa8; --img:#dbe1f0; --img-2:#cfd7ea; --cut:#c98d7e;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Plus Jakarta Sans",-apple-system,sans-serif;background:var(--paper);
  color:var(--ink);-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}

.steps{border-bottom:1px solid var(--line);background:var(--card)}
.steps ol{display:flex;gap:8px;list-style:none;padding:14px 0;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft)}
.steps li+li::before{content:"";width:18px;height:1px;background:var(--line);margin-right:8px}
.steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:600;background:#eceef5;color:var(--ink-soft)}
.steps li[aria-current]{color:var(--ink);font-weight:600}
.steps li[aria-current] b{background:var(--blue);color:#fff}
.steps li.done b{background:#d7dcea;color:var(--ink)}

header.intro{padding:42px 0 26px}
header.intro h1{font-size:30px;font-weight:700;letter-spacing:-.02em}
header.intro p{margin-top:8px;color:var(--ink-soft);font-size:15px;max-width:56ch;line-height:1.6}
h2.sec{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:12px}

/* Bar aksi bawah */
.bar{position:sticky;bottom:0;background:rgba(250,248,243,.94);backdrop-filter:blur(6px);
  border-top:1px solid var(--line);margin-top:40px}
.bar .wrap{display:flex;align-items:center;gap:16px;padding-top:16px;padding-bottom:16px}
.bar .ket{font-size:13.5px;color:var(--ink-soft);margin-right:auto}
.bar .ket b{color:var(--ink);font-weight:600}
.btn{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border-radius:8px;
  padding:12px 26px;border:1px solid transparent;transition:.15s}
.btn.utama{background:var(--blue);color:#fff}
.btn.utama:hover{background:var(--blue-dark)}
.btn.polos{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn.polos:hover{border-color:#c3c3ba}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Kartu jenis produk */
.jenis{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  padding-bottom:24px}
.kartu{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s}
.kartu:hover{border-color:#c3c3ba;transform:translateY(-2px)}
.kartu[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.kartu:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kartu .foto{width:100%;aspect-ratio:16/10;object-fit:cover;background:#eceef5;display:block}
.kartu .kosong{width:100%;aspect-ratio:16/10;background:#eceef5;display:grid;place-items:center;
  color:var(--ink-soft);font-size:12px}
.kartu .isi{padding:12px 14px 13px;border-top:1px solid var(--line)}
.kartu .nm{font-size:15px;font-weight:600;letter-spacing:-.01em}
.kartu .kt{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.kartu .jml{font-size:11.5px;color:var(--ink-soft);margin-top:7px}

/* Halaman ukuran */
.kolom{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start}
@media(max-width:860px){.kolom{grid-template-columns:1fr;gap:28px}}
.ukuran{display:flex;gap:9px;flex-wrap:wrap}
.chip{font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;padding:9px 15px;
  border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  transition:.15s;line-height:1.3}
.chip small{display:block;font-size:11.5px;font-weight:400;color:var(--ink-soft);margin-top:2px}
.chip:hover{border-color:#c3c3ba}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"] small{color:#c9cede}
.chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px}
.stage{background:#f2f0ea;border-radius:6px;padding:20px;display:grid;place-items:center;height:230px}
.patokan{position:relative;max-width:100%;max-height:100%;height:100%;
  display:flex;align-items:flex-end;justify-content:center;margin:0 auto}
.spread{position:relative;display:grid}
.pane{background:var(--img)}
.pane.spine{background:var(--img-2)}
.trim{position:absolute;border:1px dashed var(--cut);pointer-events:none}
.fold{position:absolute;top:0;bottom:0;border-left:1px dashed #b9b9b2;pointer-events:none}
.ukur{margin-top:18px;display:grid;gap:9px}
.baris{display:flex;justify-content:space-between;font-size:13.5px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.baris:last-child{border-bottom:0;padding-bottom:0}
.baris span{color:var(--ink-soft)}
.baris b{font-weight:600}
.total{font-size:14.5px}
.catatan{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);
  background:#fbf4ef;border:1px solid #eddcd2;border-radius:6px;padding:10px 12px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- Halaman pilih bahan ---- */
.grup{margin-bottom:34px}
.grup .kt{font-size:13.5px;color:var(--ink-soft);margin:-6px 0 12px}
.opsi-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.opsi-b{display:flex;gap:12px;align-items:flex-start;text-align:left;font:inherit;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 15px;
  cursor:pointer;transition:border-color .15s}
.opsi-b:hover{border-color:#c3c3ba}
.opsi-b[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.opsi-b:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tik{width:17px;height:17px;border-radius:50%;border:1.5px solid #c4c9d6;flex:none;margin-top:2px;
  display:grid;place-items:center}
.opsi-b[aria-pressed="true"] .tik{border-color:var(--blue);background:var(--blue)}
.tik::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:0}
.opsi-b[aria-pressed="true"] .tik::after{opacity:1}
.opsi-b .nm2{font-size:14.5px;font-weight:600;line-height:1.3}
.opsi-b .kt2{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.45}
.opsi-b .hg{font-size:12.5px;font-weight:600;color:var(--blue-dark);margin-top:5px}

.ringkas{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px 22px;
  position:sticky;top:22px}
.ringkas h3{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px}
.ringkas .baris{align-items:baseline}
.ringkas .baris span{max-width:52%}
.ringkas .baris b{text-align:right}
.jum{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.jum span{font-size:13.5px;color:var(--ink-soft)}
.jum b{font-size:19px;font-weight:700;letter-spacing:-.02em}

/* ---- Halaman desain ---- */
.editor{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;padding:26px 0 30px}
@media(max-width:900px){.editor{grid-template-columns:1fr}}
.kanvas-box{background:#f2f0ea;border:1px solid var(--line);border-radius:10px;padding:26px;
  display:grid;place-items:center;min-height:320px}
.kanvas{position:relative;width:100%;max-width:760px;display:grid;overflow:hidden;
  border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.09)}
.sisi{position:relative;overflow:hidden;background:#e4e7f0}
.sisi img{position:absolute;left:50%;top:50%;transform-origin:center;
  max-width:none;user-select:none;-webkit-user-drag:none}
.sisi.aktif{outline:2px solid var(--blue);outline-offset:-2px;z-index:3}
.kosong-sisi{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-size:12.5px;color:#7c85a0;padding:12px;pointer-events:none;line-height:1.5}
.garis-trim{position:absolute;border:1px dashed var(--cut);pointer-events:none;z-index:5}
.garis-aman{position:absolute;border:1px dashed rgba(67,97,201,.55);pointer-events:none;z-index:5}
.garis-lipat{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(0,0,0,.28);
  pointer-events:none;z-index:5}
.label-sisi{position:absolute;bottom:5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:#8b93a8;z-index:6;pointer-events:none}

.teks{position:absolute;z-index:4;cursor:move;padding:2px 4px;white-space:pre;line-height:1.25;
  border:1px dashed transparent}
.teks:hover{border-color:rgba(67,97,201,.6)}
.teks.aktif{border-color:var(--blue);background:rgba(67,97,201,.06)}

.sidebar{display:grid;gap:18px}
.blok{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 17px}
.blok h3{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:11px}
.tab{display:flex;gap:6px;margin-bottom:12px}
.tab button{flex:1;font:inherit;font-size:13px;font-weight:500;cursor:pointer;padding:8px 6px;
  border:1px solid var(--line);background:var(--card);border-radius:6px;color:var(--ink-soft)}
.tab button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.unggah{display:block;width:100%;text-align:center;font-size:13.5px;font-weight:600;cursor:pointer;
  border:1px dashed #b9c0d2;border-radius:7px;padding:14px;color:var(--blue-dark);background:#f6f8fd}
.unggah:hover{background:#eef2fb}
.unggah input{display:none}
.kendali{display:grid;gap:10px;margin-top:12px}
.kendali label{font-size:12.5px;color:var(--ink-soft);display:grid;gap:5px}
.kendali input[type=range]{width:100%}
.kecil{font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;padding:7px 11px;
  border:1px solid var(--line);background:var(--card);border-radius:6px;color:var(--ink)}
.kecil:hover{border-color:#c3c3ba}
.kecil.bahaya{color:#a8342a;border-color:#e8cdc9}
.deret{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.warna{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.warna button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer}
.warna button[aria-pressed="true"]{outline:2px solid var(--blue);outline-offset:2px}
.lapangan{width:100%;font:inherit;font-size:13.5px;padding:9px 10px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);color:var(--ink)}
.peringatan{font-size:12.5px;line-height:1.5;border-radius:6px;padding:9px 11px;margin-top:10px}
.peringatan.merah{background:#fdf0ee;border:1px solid #f0d2cc;color:#8f3226}
.peringatan.aman{background:#f0f6ef;border:1px solid #d3e4d0;color:#3d6b39}
.bantuan{font-size:12px;color:var(--ink-soft);line-height:1.55;margin-top:9px}

/* ---- Perbaikan tata letak (elemen span perlu jadi blok) ---- */
.opsi > span:first-of-type{flex:1}
.opsi .nm,.opsi .kt,.opsi .jml{display:block}
.kartu .isi{display:block}
.kartu .nm,.kartu .kt,.kartu .jml{display:block}
.opsi-b > span:last-child{display:block;flex:1}
.opsi-b .nm2,.opsi-b .kt2,.opsi-b .hg{display:block}

/* ---- Tiga sisi ---- */
.tab.tiga button{font-size:12.5px;padding:8px 4px}
.warna-baris{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;align-items:center}
.warna-baris input[type=color]{width:32px;height:28px;padding:0;border:1px solid var(--line);
  border-radius:6px;background:none;cursor:pointer}
.pisah{border:0;border-top:1px solid var(--line);margin:14px 0}

/* ---- Kotak isian sebelum simpan ---- */
.tirai{position:fixed;inset:0;background:rgba(22,32,58,.45);display:grid;place-items:center;
  padding:20px;z-index:50}
.tirai[hidden]{display:none}
.kotak{background:var(--card);border-radius:12px;max-width:430px;width:100%;
  padding:26px 28px;box-shadow:0 10px 40px rgba(0,0,0,.2);max-height:90vh;overflow:auto}
.kotak h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.kotak p.ket{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:18px}
.kotak label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:13px}
.kotak label span{display:block;margin-bottom:5px}
.kotak input,.kotak select,.kotak textarea{width:100%;font:inherit;font-size:14px;
  padding:10px 11px;border:1px solid var(--line);border-radius:7px;
  background:var(--card);color:var(--ink)}
.kotak textarea{resize:vertical;min-height:60px}
.kotak .aksi{display:flex;gap:9px;margin-top:20px}
.kotak .aksi .btn{flex:1;text-align:center}
.wajib{color:#a8342a}
.galat-kotak{background:#fdf0ee;border:1px solid #f0d2cc;color:#8f3226;font-size:13px;
  border-radius:6px;padding:9px 11px;margin-bottom:14px}
.galat-kotak[hidden]{display:none}

/* ---- Halaman selesai ---- */
.selesai{max-width:620px;padding-top:52px;padding-bottom:70px}
.selesai h1{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.selesai p.ket{font-size:15px;color:var(--ink-soft);line-height:1.6;margin-bottom:26px}
.tanda{width:52px;height:52px;border-radius:50%;background:#e8f2e6;color:#3d6b39;
  display:grid;place-items:center;margin-bottom:18px}
.kode-besar{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:20px 22px;margin-bottom:8px}
.kode-besar span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}
.kode-besar b{display:block;font-size:30px;font-weight:700;letter-spacing:.03em;margin:5px 0 7px}
.kode-besar small{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.pratinjau{display:flex;gap:12px;flex-wrap:wrap}
.pratinjau figure{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:9px;width:calc(33.333% - 8px);min-width:120px}
.pratinjau img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;background:#eceef5;
  display:block}
.pratinjau figcaption{font-size:12px;color:var(--ink-soft);margin-top:7px;text-align:center}
table.rinci-selesai{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
table.rinci-selesai td{padding:11px 15px;font-size:14px;border-bottom:1px solid var(--line)}
table.rinci-selesai td:first-child{color:var(--ink-soft);width:40%}
table.rinci-selesai tr:last-child td{border-bottom:0}
.langkah-lanjut ol{margin:0;padding-left:20px;color:var(--ink-soft);font-size:14px;line-height:1.9}
.aksi-selesai{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}

/* ---- Garis batas aman di pratinjau ukuran ---- */
.aman-pratinjau{position:absolute;border:1px dashed rgba(67,97,201,.6);pointer-events:none}
.legenda-kecil{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;font-size:12px;
  color:var(--ink-soft)}
.legenda-kecil span{display:flex;align-items:center;gap:6px}
.legenda-kecil i{width:14px;height:0;display:inline-block}
.tanda-trim{border-top:1px dashed var(--cut)}
.tanda-aman{border-top:1px dashed rgba(67,97,201,.6)}

/* Perbaikan: kotak warna pada deretan yang punya pemilih bebas */
.warna-baris button{width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;flex:none}
.warna-baris button[aria-pressed="true"]{outline:2px solid var(--blue);outline-offset:2px}
.warna-baris input[type=color]{margin-left:4px}



/* Kartu produk: klik langsung lanjut */
.kartu{position:relative}
.kartu::after{content:"Pilih →";position:absolute;right:13px;bottom:11px;
  font-size:11.5px;font-weight:600;color:var(--blue-dark);opacity:0;transition:opacity .15s;
  background:var(--card);padding-left:8px}
.kartu:hover::after,.kartu:focus-visible::after{opacity:1}
.kartu.memuat{opacity:.55;pointer-events:none}