: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.aktif-ok { background: var(--ok); color: #fff; border-color: var(--ok); font-weight: 600; }
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-dilewati { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }
.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; }
#batch-hapus[hidden], .progres-antrean[hidden] { display: none !important; }
.progres-antrean { position: sticky; top: var(--tinggi-atas, 56px); z-index: 6; background: #fff; border: 1px solid var(--garis); border-radius: 12px; padding: 10px 14px; margin: 10px 0; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pa-baris { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pa-angka { font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-bar { height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin: 7px 0; } .pa-bar span { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width .6s; }
.pa-bar span.jalan { background: var(--utama); }
.pilih-tampil { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: 10px 0 8px; flex-wrap: wrap; } .cek-semua-galeri { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; } .cek-semua-galeri input { width: 18px; height: 18px; margin: 0; }
.saklar { display: inline-flex; border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; background: #fff; } .saklar a { padding: 6px 12px; color: var(--teks); text-decoration: none; } .saklar a.aktif { background: var(--utama); color: var(--utama-teks); font-weight: 600; }
.galeri-produk { display: flex; flex-direction: column; gap: 14px; }
.kartu-galeri { background: #fff; border: 1px solid var(--garis); border-radius: 12px; padding: 12px; }
.kg-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kg-cek input { width: 18px; height: 18px; display: block; }
.kg-nama { flex: 1 1 260px; min-width: 0; } .kg-nama small { display: block; } .kg-antre:empty { display: none; } .kg-antre { margin-top: 6px; }
.kg-gambar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.kg-gambar figure { margin: 0; min-width: 0; } .kg-gambar img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; border-radius: 8px; background: #f3f4f6; cursor: zoom-in; }
.kg-gambar figcaption { font-size: .8rem; color: var(--redup); text-align: center; margin-top: 4px; }
.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; } .produk-status { display: flex; gap: 8px; align-items: center; flex-shrink: 0; white-space: nowrap; }
/* judul & keterangan panjang dipotong jadi maks 2 baris supaya tombol review tidak turun ke bawah */
.produk-info { flex: 1; min-width: 0; } .produk-info h1, .produk-info .redup { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 800px) { .produk-kepala { flex-wrap: wrap; } .produk-status { flex-wrap: wrap; white-space: normal; } }
.produk-bawah { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 16px 0 8px; padding: 12px 0; border-top: 1px solid var(--garis); } .produk-bawah-aksi { display: flex; gap: 8px; }
/* kepala produk (judul + tombol review) menempel di bawah menu saat halaman digulir */
.produk-kepala { position: sticky; top: var(--tinggi-atas, 46px); z-index: 15; background: var(--bg); padding: 6px 0 8px; margin: -6px 0 0; border-bottom: 1px solid var(--garis); }
.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: calc(var(--tinggi-atas, 46px) + var(--tinggi-kepala, 80px) + 8px); max-height: calc(100vh - var(--tinggi-atas, 46px) - var(--tinggi-kepala, 80px) - 20px); overflow: auto; }
@media (max-width: 1100px) { .kolom-asli, .kolom-rancangan { position: static; max-height: none; overflow: visible; } }
.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 .asli:first-child { grid-column: 1 / -1; } .asli { display: flex; flex-direction: column; gap: 3px; } .asli small { font-size: .72rem; color: var(--redup); }
.asli.dibaca small { color: var(--ok); font-weight: 600; } .asli.diabaikan img { opacity: .35; filter: grayscale(1); } .asli.diabaikan small { color: var(--bahaya); }
.asli form button { width: 100%; }
.catatan-ai textarea { width: 100%; } .catatan-ai { margin-bottom: 10px; }
.ref-tambahan { margin-top: 6px; } .ref-aksi { margin-top: 4px; gap: 4px; } .ref-aksi form { display: inline; } .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-kartu.tidak-dikirim { opacity: .55; border-style: dashed; } .hasil-kartu.tidak-dikirim .hasil-img { filter: grayscale(.6); }
.hasil-kosong { padding: 20px; text-align: center; background: #f9fafb; border-radius: 8px; }
.saklar button { border: 0; border-radius: 0; background: transparent; padding: 6px 12px; } .saklar button.aktif { background: var(--utama); color: var(--utama-teks); font-weight: 600; }
.hasil-saklar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.galeri-asli { display: none; }
@media (min-width: 801px) {
  .galeri-hasil .kolom-hasil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .galeri-hasil .kolom-hasil > :not(.hasil-kartu) { grid-column: 1 / -1; }
  .galeri-hasil .hasil-kartu { margin-bottom: 0; } .galeri-hasil .hasil-gambar { max-width: none; } .galeri-hasil .hasil-img { cursor: zoom-in; }
  .galeri-hasil .hasil-judul { min-height: 64px; align-content: flex-start; }   /* gambar ketiga kartu tetap sejajar */
}
@media (min-width: 1101px) {
  .galeri-hasil.produk-tata { grid-template-columns: minmax(0, 1fr); }
  .galeri-hasil > .kolom-asli, .galeri-hasil > .kolom-rancangan { display: none; }
  .galeri-hasil .galeri-asli { display: flex; gap: 12px; background: #fff; border: 1px solid var(--garis); border-radius: 12px; padding: 10px; }
  .ga-foto { display: flex; gap: 6px; flex: none; } .ga-foto img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: #eee; }
  .ga-desk { flex: 1; min-width: 0; max-height: 110px; overflow: auto; font-size: .88rem; white-space: pre-line; }
}
.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; }
.koreksi-label textarea { border-color: #fdba74; background: #fffaf3; }
.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; cursor: default; }
.zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 2.4rem; line-height: 1; width: 48px; height: 64px; border-radius: 10px; display: none; } .zoom.galeri .zoom-nav { display: block; } .zoom-nav.kiri { left: 12px; } .zoom-nav.kanan { right: 12px; } .zoom-nav:hover { background: rgba(255,255,255,.3); }
.zoom-ket { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; font-size: .9rem; } img.klik { cursor: zoom-in; }
/* 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; }
.rv-gbr { margin: 0; min-width: 0; } .rv-gbr figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin-top: 4px; font-size: .82rem; } .rv-no { color: var(--redup); }
.rv-gbr.pertama img { outline: 3px solid var(--utama); outline-offset: -3px; } .rv-gbr.pertama .rv-no { color: var(--utama); font-weight: 700; } .rv-gbr.pertama .rv-no::before { content: "\2605 "; } .rv-gbr.pertama button { display: none; }
.label { font-size: .8rem; color: var(--redup); margin-bottom: 4px; }
.tempel { border: 2px dashed #fdba74; border-radius: 8px; padding: 8px 10px; margin: 6px 0; background: #fff; font-size: .85rem; color: #6b7280; cursor: text; }
.tempel:focus { outline: none; border-color: var(--utama); background: #f0f9ff; } .tempel .tautan { color: var(--utama); text-decoration: underline; cursor: pointer; }
.tempel-pratinjau { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; } .tempel-pratinjau img { width: auto !important; height: auto !important; max-width: 220px !important; max-height: 140px !important; object-fit: contain; border-radius: 6px; border: 1px solid var(--garis); }
.ringkas-biaya { gap: 28px; } .ringkas-biaya b { font-size: 1.15rem; }
/* ================= layar kecil (HP / tablet) ================= */
.tab-hp, .kirim-hp, .hanya-hp { display: none; }
.tempel-pratinjau[hidden], .markup-panel[hidden], .banding[hidden] { display: none !important; }   /* atribut hidden kalah oleh display:flex */
@media (max-width: 1100px) {
  /* satu kolom: tampilkan satu bagian sesuai tab */
  .tab-hp { display: flex; gap: 4px; position: sticky; top: var(--tinggi-atas, 46px); z-index: 14; background: var(--bg); padding: 6px 0; margin-top: 6px; }
  .tab-hp button { flex: 1; padding: 9px 6px; font-weight: 600; border-radius: 10px; }
  .tab-hp button.aktif { background: var(--utama); color: #fff; border-color: var(--utama); }
  .produk-tata[data-tab="hasil"] > .kolom-asli, .produk-tata[data-tab="hasil"] > .kolom-rancangan,
  .produk-tata[data-tab="asli"] > .kolom-hasil, .produk-tata[data-tab="asli"] > .kolom-rancangan,
  .produk-tata[data-tab="rancangan"] > .kolom-asli, .produk-tata[data-tab="rancangan"] > .kolom-hasil { display: none; }
  .produk-kepala { position: static; }
}
@media (max-width: 800px) {
  body { font-size: 15px; }
  main { padding: 10px 12px; }
  /* menu atas satu baris, bisa digeser */
  .atas { flex-wrap: nowrap; gap: 10px; padding: 6px 10px; }
  .atas nav { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .atas nav::-webkit-scrollbar { display: none; }
  .atas nav a { margin-right: 12px; display: inline-block; padding: 8px 2px; }
  .akun-nama { display: none; } .akun { white-space: nowrap; }
  /* tombol & isian lebih besar untuk jari */
  button, .tombol { padding: 9px 13px; } button.kecil, .tombol.kecil { padding: 8px 11px; font-size: .9rem; }
  input, select, textarea { font-size: 16px; }   /* 16px: iPhone tidak zoom otomatis saat mengetik */
  /* kepala produk: judul penuh, tombol review pindah ke bar bawah */
  .produk-kepala { flex-direction: column; gap: 6px; border-bottom: 0; }
  .produk-info h1 { font-size: 1.1rem; }
  .produk-status { white-space: normal; flex-wrap: wrap; }
  .review-atas { display: none !important; }
  /* kartu hasil: gambar penuh, tombol aksi 2 kolom */
  .hasil-kartu { padding: 10px; border-radius: 10px; }
  .hasil-aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .hasil-aksi form { display: contents; }
  .hasil-aksi button, .hasil-aksi .tombol { width: 100%; text-align: center; }
  .versi-tombol img { width: 48px; height: 48px; }
  .hanya-lebar { display: none; } .hanya-hp { display: inline; }
  .tempel .tautan { display: inline-block; padding: 8px 12px; margin: 4px 0; border: 1px solid #bae6fd; border-radius: 8px; background: #f0f9ff; text-decoration: none; font-weight: 600; }
  /* bar bawah menempel di bawah layar */
  main:has(.produk-bawah) { padding-bottom: 84px; }
  .produk-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; background: #fff; border-top: 1px solid var(--garis);
                  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0,0,0,.06); gap: 6px; }
  .produk-bawah .teks-lebar { display: none; }
  .produk-bawah .tombol, .produk-bawah button { padding: 11px 14px; }
  .kirim-hp { display: block; flex: 1; font-size: .9rem; padding: 11px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .produk-bawah-aksi { gap: 6px; }
  .lengket { bottom: calc(64px + env(safe-area-inset-bottom)); }   /* tombol Simpan rancangan di atas bar bawah */
  /* daftar produk: tabel jadi kartu */
  .baris-atas { display: block; }
  .filter { flex-wrap: wrap; } .filter input { width: 100%; flex: 1 1 100%; } .filter select { flex: 1; min-width: 0; }
  .aksi-batch { margin-top: 8px; gap: 8px; } .aksi-batch form { flex-wrap: wrap; }
  .kg-gambar { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .kg-gambar figure { flex: 0 0 86%; scroll-snap-align: center; }
  #tabel-produk, #tabel-produk tbody { display: block; border: 0; background: transparent; }
  #tabel-produk thead { display: none; }
  #tabel-produk tr { display: grid; grid-template-columns: 28px 64px 1fr 1fr 1fr; grid-template-areas: "cek foto nama nama nama" "cek foto stok harga status" ". . antre antre antre";
                     column-gap: 8px; row-gap: 4px; background: #fff; border: 1px solid var(--garis); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
  #tabel-produk td { border: 0; padding: 0; text-align: left; }
  #tabel-produk .sel-cek { grid-area: cek; padding-top: 4px; } #tabel-produk .sel-cek input { width: 20px; height: 20px; }
  #tabel-produk .sel-foto { grid-area: foto; } #tabel-produk .sel-nama { grid-area: nama; font-size: .92rem; }
  #tabel-produk .sel-stok { grid-area: stok; font-size: .85rem; } #tabel-produk .sel-harga { grid-area: harga; font-size: .85rem; }
  #tabel-produk .sel-stok::before, #tabel-produk .sel-harga::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--redup); }
  #tabel-produk .sel-status { grid-area: status; align-self: center; } #tabel-produk .sel-status .status { font-size: .72rem; }
  #tabel-produk .antre { grid-area: antre; } #tabel-produk .antre:empty { display: none; }
  #tabel-produk .sel-aksi { display: none; }
  #tabel-produk .sel-nama small { display: block; }
  /* tabel lain: geser ke samping */
  .tabel:not(#tabel-produk) { display: block; overflow-x: auto; white-space: nowrap; }
  .kartu.baris, .ringkas-biaya { gap: 12px; }
  .review-kepala { flex-direction: column; }
}
.pemegang { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #e0f2fe; color: #075985; margin-left: 4px; } .pemegang.lain { background: #fee2e2; color: #991b1b; } .pemegang.saya { background: #dcfce7; color: #166534; }
/* halaman depan (jualan) */
.depan-hero { padding: 40px 0 20px; max-width: 820px; } .depan-hero h1 { font-size: 2.2rem; line-height: 1.15; margin: 0 0 12px; } .depan-hero h1 span { color: var(--utama); }
.depan-sub { font-size: 1.05rem; color: #334155; } .depan-bagian { padding: 24px 0; border-top: 1px solid var(--garis); max-width: 980px; }
.depan-contoh { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .depan-contoh img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--garis); }
.depan-contoh figure { margin: 0; } .depan-contoh figcaption { font-size: .85rem; color: #64748b; margin-top: 4px; }
.depan-kosong div { aspect-ratio: 1; border: 2px dashed var(--garis); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.depan-harga { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .depan-angka { font-size: 1.6rem; font-weight: 800; }
.depan-poin li, .depan-langkah li { margin: 6px 0; } .depan-video { aspect-ratio: 16/9; max-width: 720px; margin: 10px 0 16px; } .depan-video iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.atas nav.tamu a { margin-right: 10px; }
@media (max-width: 700px) { .atas:has(nav.tamu) { flex-wrap: wrap; } .atas nav.tamu { order: 3; flex: 0 0 100%; display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; padding-bottom: 2px; } .atas nav.tamu a { margin-right: 8px; } .depan-hero h1 { font-size: 1.7rem; } }