:root { --bg:#f5f6f8; --kartu:#fff; --teks:#1b1f24; --redup:#6b7280; --garis:#e3e6ea; --utama:#0e7490; --utama-teks:#fff; --ok:#15803d; --bahaya:#b91c1c; --sorot:#fff3bf; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--teks); font-size:14px; }
a { color: var(--utama); }
main { padding: 16px; max-width: 1600px; margin: 0 auto; }
h1 { font-size: 1.35rem; margin: .2em 0; } h2 { font-size: 1.1rem; margin: 1.2em 0 .5em; } h3 { font-size: .95rem; margin: 1em 0 .4em; color: var(--redup); text-transform: uppercase; letter-spacing: .04em; }
.redup { color: var(--redup); }
.atas { display:flex; align-items:center; gap:20px; padding: 8px 16px; background:#fff; border-bottom:1px solid var(--garis); position: sticky; top:0; z-index: 20; flex-wrap: wrap; }
.merek { font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--teks); } .merek span, .kotak-login h1 span { color: var(--utama); }
.atas nav a { margin-right: 14px; text-decoration: none; color: var(--teks); padding: 6px 2px; border-bottom: 2px solid transparent; } .atas nav a.aktif { border-color: var(--utama); color: var(--utama); }
.akun { margin-left: auto; color: var(--redup); }
button, .tombol { font: inherit; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--garis); background: #fff; cursor: pointer; text-decoration: none; color: var(--teks); display: inline-block; }
button.utama, .tombol.utama { background: var(--utama); color: var(--utama-teks); border-color: var(--utama); font-weight: 600; }
button.bahaya { color: var(--bahaya); border-color: #f3c6c6; } button.ok { color: var(--ok); border-color: #bfe3c9; }
button.kecil, .tombol.kecil { padding: 4px 9px; font-size: .85rem; } button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--garis); border-radius: 8px; background: #fff; width: 100%; }
label { display: block; margin: 6px 0; font-size: .85rem; color: #374151; } label input, label textarea, label select { margin-top: 3px; }
label.baris { display: flex; align-items: center; gap: 8px; } label.baris input[type=checkbox] { width: auto; }
.baris { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .baris input, .baris select { width: auto; flex: 1; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; padding: 14px 16px; margin: 12px 0; } .kartu.tengah { text-align: center; }
.pesan { background: #e0f2fe; border: 1px solid #bae6fd; padding: 10px 14px; border-radius: 10px; margin: 10px 0; } .pesan.sibuk { background: #fef9c3; border-color: #fde68a; }
.galat { background: #fee2e2; border: 1px solid #fecaca; padding: 10px 14px; border-radius: 10px; margin: 10px 0; } .galat-kecil { color: var(--bahaya); font-size: .85rem; }
.catatan { background: var(--sorot); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: .9rem; }
.tabel { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--garis); border-radius: 12px; overflow: hidden; }
.tabel th, .tabel td { padding: 8px 10px; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: middle; } .tabel th { background: #f9fafb; font-weight: 600; font-size: .8rem; text-transform: uppercase; color: var(--redup); }
.tabel tr.terkunci td { opacity: .7; } .tabel td.angka { text-align: right; white-space: nowrap; } .tabel tr.sorot td { background: #ecfdf5; }
img.mini { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #eee; }
.status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #e5e7eb; }
.s-baru { background: #e5e7eb; } .s-dirancang { background: #e0e7ff; } .s-digenerate { background: #fef3c7; } .s-menunggu_koh { background: #fde68a; } .s-dikembalikan { background: #fecaca; } .s-disetujui { background: #bbf7d0; } .s-diekspor { background: #a7f3d0; } .s-selesai { background: #d1fae5; color: #065f46; }
.s-g-ok { background: #bbf7d0; } .s-g-ulang { background: #fecaca; } .s-g-belum { background: #e5e7eb; }
.putar { display: inline-block; width: 12px; height: 12px; border: 2px solid #999; border-top-color: transparent; border-radius: 50%; animation: putar .8s linear infinite; vertical-align: middle; } @keyframes putar { to { transform: rotate(360deg); } }
.baris-atas { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.filter { display: flex; gap: 6px; } .filter input { width: 240px; } .filter select { width: auto; }
.aksi-batch { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .aksi-batch form { display: flex; gap: 6px; align-items: center; }
.halaman { display: flex; gap: 16px; justify-content: center; padding: 12px; }
.kotak-login { max-width: 360px; margin: 10vh auto; background: #fff; padding: 28px; border-radius: 14px; border: 1px solid var(--garis); } .kotak-login h1 { font-size: 2rem; margin: 0; } .kotak-login button { width: 100%; margin-top: 10px; }
/* produk */
.produk-kepala { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .produk-status { display: flex; gap: 8px; align-items: center; }
.produk-tata { display: grid; grid-template-columns: 290px minmax(0, 1fr) 340px; gap: 14px; align-items: start; margin-top: 10px; }
@media (max-width: 1100px) { .produk-tata { grid-template-columns: 1fr; } }
.kolom-asli, .kolom-rancangan { background: #fff; border: 1px solid var(--garis); border-radius: 12px; padding: 12px; position: sticky; top: 58px; max-height: calc(100vh - 70px); overflow: auto; }
@media (max-width: 1100px) { .kolom-asli, .kolom-rancangan { position: static; max-height: none; } }
.asli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .asli-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: #eee; }
.asli-grid img:first-child { grid-column: 1 / -1; }
.ref-tambahan { margin-top: 6px; } .ref-tambahan img { width: 100%; border-radius: 8px; cursor: zoom-in; } .ref-tambahan small { display: block; color: var(--redup); }
.deskripsi { white-space: pre-wrap; font-size: .85rem; line-height: 1.45; background: #f9fafb; padding: 10px; border-radius: 8px; max-height: 40vh; overflow: auto; } mark { background: var(--sorot); padding: 0 2px; }
pre.deskripsi { font-family: inherit; }
.klaim { padding-left: 18px; font-size: .85rem; }
.kecil-detail summary { cursor: pointer; color: var(--utama); font-size: .85rem; margin: 8px 0; }
.hasil-kartu { background: #fff; border: 1px solid var(--garis); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.hasil-judul { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.hasil-gambar { position: relative; max-width: 640px; } .hasil-img { width: 100%; display: block; border-radius: 8px; background: #eee; }
.markup-kanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; border-radius: 8px; }
.banding { position: absolute; inset: 0; } .banding-asli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; clip-path: inset(0 50% 0 0); border-radius: 8px; }
.banding-geser { position: absolute; left: 0; right: 0; bottom: 8px; width: 100%; accent-color: var(--utama); }
.hasil-aksi { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.hasil-kosong { padding: 20px; text-align: center; background: #f9fafb; border-radius: 8px; }
.markup-panel { margin-top: 8px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 10px; } .markup-panel textarea { margin: 6px 0; }
.versi { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .versi-tombol { padding: 3px; display: flex; flex-direction: column; align-items: center; font-size: .75rem; gap: 2px; } .versi-tombol img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; } .versi-tombol.dipilih { border-color: var(--utama); box-shadow: 0 0 0 2px #bae6fd; }
fieldset { border: 1px solid var(--garis); border-radius: 10px; margin: 8px 0; padding: 6px 10px 10px; } legend { font-weight: 600; font-size: .85rem; padding: 0 4px; }
.lengket { position: sticky; bottom: 0; background: #fff; padding: 8px 0; border-top: 1px solid var(--garis); }
.zoom { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; } .zoom.tampil { display: flex; } .zoom img { max-width: 96vw; max-height: 96vh; object-fit: contain; }
/* review */
.review-kepala { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .review-galeri { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin: 10px 0; } @media (max-width: 900px) { .review-galeri { grid-template-columns: 1fr; } }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .grid3 img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: #eee; }
.label { font-size: .8rem; color: var(--redup); margin-bottom: 4px; }