/* Jasa desain (halaman /desain dan /admin/desain). Memakai alias warna --h-* dari style.css (terang dan gelap). */
.alur { list-style: none; counter-reset: langkah; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.alur li { counter-increment: langkah; background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r-besar); padding: 18px 20px; }
.alur li::before { content: "0" counter(langkah); display: block; font-family: var(--mono); font-size: 13px; color: var(--h-tautan); margin-bottom: 6px; }
.alur strong, .alur span { display: block; } .alur strong { font-size: 17px; } .alur span { color: var(--h-teks-2); font-size: 14.5px; margin-top: 2px; }

.desain-form h2 { margin-top: 28px; }
.desain-form > label:first-of-type { margin-bottom: 0; }
.daya-pilih label.radio { display: flex; align-items: center; gap: 10px; margin: 2px 0; min-height: 40px; font-weight: 400; cursor: pointer; }
.daya-pilih input, .blok-cek input { margin: 0; }

.blok-grup { border-top: 1px solid var(--h-garis); padding-top: 4px; margin-top: 8px; }
.blok-grup legend { color: var(--h-teks-2); text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; font-weight: 700; padding-top: 14px; }
.blok-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; }
.blok-item + .blok-item { border-top: 1px solid var(--h-garis); }
.blok-cek { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-weight: 400; cursor: pointer; min-width: 0; }
.blok-cek input { margin-top: 2px; }
.blok-cek strong { font-weight: 600; }
.blok-cek small { margin-top: 2px; }
.blok-jumlah { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; font-size: 14px; color: var(--h-teks-2); flex: none; }
.blok-jumlah input { width: 5em; margin: 0; text-align: center; }

.chip { display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r-kapsul); font-size: 12px; font-weight: 600; background: var(--h-lembut); color: var(--h-teks); vertical-align: 1px; white-space: nowrap; line-height: 1.7; }

.kebutuhan { margin: 16px 0; padding: 16px 20px; background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r-besar); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16.5px; }
.sumber-rencana { color: var(--h-teks-2); font-size: 14.5px; }

.ringkas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.ringkas-grid > div { background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r); padding: 14px 16px; }
.ringkas-grid small { display: block; font-size: 13px; }
.ringkas-grid strong { font-size: 19px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.blok-hasil { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.blok-hasil li { background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r); padding: 12px 14px; }
.blok-hasil small { display: block; margin-top: 4px; }

table.harga td small { display: block; margin-top: 2px; font-weight: 400; }
table.harga td:last-child { font-weight: 600; }
table.harga tr.total td { background: var(--h-lembut); border-top: 0; }
.catatan-harga { font-size: 14.5px; color: var(--h-teks-2); }
.tanya li, .asumsi li { margin: 6px 0; }

.bom-tabel td small { display: block; color: var(--h-teks-2); font-size: 12.5px; overflow-wrap: anywhere; }
.bom-tabel td:last-child { white-space: normal; text-align: left; min-width: 10em; }

.ajukan { margin-top: 28px; border-color: var(--tembaga-gelap); }
pre.json { font: 12px/1.5 var(--mono); background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r); padding: 14px; overflow: auto; max-height: 480px; }
table.admin-desain small { display: block; }
.chip.status-diajukan { background: var(--h-tinjau-bg); color: var(--h-tinjau); }
.chip.status-batal { background: var(--h-galat-bg); color: var(--h-galat); }

@media (max-width: 640px) {
  .alur { grid-template-columns: minmax(0, 1fr); }
  .ringkas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blok-hasil { grid-template-columns: minmax(0, 1fr); }
  .blok-item { flex-wrap: wrap; }
  .blok-jumlah { padding-left: 32px; }
  table.harga td:last-child { white-space: normal; min-width: 8.5em; }
}

/* percakapan /rancang di admin */
.percakapan{display:flex;flex-direction:column;gap:12px}
.percakapan .pc-saya{align-self:flex-end;max-width:80%;background:var(--h-lembut);border-radius:12px;padding:8px 12px}
.percakapan .pc-ai{max-width:90%}
.percakapan p{margin:2px 0 0}
.pc-dari{font-family:var(--mono);font-size:12px;color:var(--h-teks-2)}

/* proyek berbayar: linimasa, kartu harga, pop-up QRIS, simulasi dev, pratinjau */
.linimasa { list-style: none; padding: 0; margin: 20px 0 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.linimasa li { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--h-teks-2); border-top: 3px solid var(--h-garis); padding-top: 8px; }
.linimasa li span { font-family: var(--mono); font-size: 12px; }
.linimasa li.sudah { border-top-color: var(--h-tautan); color: var(--h-teks); }
.linimasa li.aktif { border-top-color: var(--tembaga-gelap); color: var(--h-teks); font-weight: 700; }
.linimasa-form { margin: 0; }
.linimasa-tombol { all: unset; display: flex; flex-direction: column; gap: 4px; width: 100%; cursor: pointer; color: inherit; font: inherit; }
.linimasa-tombol:hover { color: var(--h-tautan); text-decoration: underline; }
.linimasa-tombol.dipilih { color: var(--h-teks); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.linimasa-tombol:focus-visible { outline: 2px solid var(--h-tautan); outline-offset: 2px; }
.catatan-hemat { color: var(--tembaga-gelap); font-style: normal; font-weight: 600; }
.kartu.terkunci { border-style: dashed; color: var(--h-teks-2); }
.kartu.terkunci p { margin: 0; }
.nav-tahap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; }
.nav-tahap form { margin: 0; }
.tombol-nav { background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r); padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--h-teks); cursor: pointer; }
.tombol-nav:hover { background: var(--h-lembut); border-color: var(--h-tautan); }
.info-revisi { background: var(--h-lembut); border-radius: var(--r); padding: 10px 12px; margin: 10px 0; }
.info-revisi p { margin: 4px 0; font-size: 13px; line-height: 1.45; }
.pilihan-revisi { border: 0; padding: 0; margin: 10px 0; }
.pilihan-revisi legend { padding: 0; margin-bottom: 4px; font-weight: 600; font-size: 13.5px; }
.pilihan-revisi label.radio { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; font-weight: 400; font-size: 14px; cursor: pointer; }
.pilihan-revisi label.radio input { margin-top: 3px; }
.harga-baris-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.harga-baris-atas h2 { margin: 0 0 4px; }
.harga-baris-atas p.halus { margin: 0; }
.kartu-harga .harga-besar { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--h-teks); }
.poin-ringkas { margin: 14px 0; padding-left: 18px; line-height: 1.55; }
.poin-ringkas li { margin: 6px 0; }
.aksi-bayar-utama { margin: 16px 0 12px; }
.aksi-bayar-utama button.utama { width: 100%; font-size: 16px; padding: 12px 20px; }
.rincian-harga { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--h-teks-2); }
.rincian-harga li { margin: 6px 0; }
.ringkas-lipat { margin-top: 28px; border-top: 1px solid var(--h-garis); padding-top: 16px; }
.ringkas-lipat > summary { font-weight: 600; cursor: pointer; color: var(--h-teks-2); padding: 6px 0; }

/* Pop-up Modal QRIS */
.modal-latar { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(15, 20, 25, 0.62); backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.modal-latar.terbuka { display: flex; }
.modal-kotak { width: 100%; max-width: 420px; margin: auto; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); position: relative; animation: modalMuncul 0.18s ease-out; }
@keyframes modalMuncul { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--h-garis); padding-bottom: 12px; margin-bottom: 14px; text-align: left; }
.modal-kepala h2 { margin: 0; font-size: 18px; }
.modal-tutup { background: transparent; border: 1px solid var(--h-garis); border-radius: var(--r); width: 34px; height: 34px; padding: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--h-teks-2); flex: none; }
.modal-tutup:hover { color: var(--h-teks); background: var(--h-lembut); }
.modal-sub { margin: 0 0 10px; font-size: 14.5px; }
.modal-kotak .qr { display: inline-flex; padding: 14px; background: #fff; border: 1px solid var(--h-garis); border-radius: var(--r-besar); margin: 6px auto 12px; }
.modal-kotak .qr svg, .modal-kotak .qr img { width: 210px; height: 210px; display: block; }
.modal-aksi { margin: 12px 0 8px; }
.modal-aksi button.utama { width: 100%; padding: 12px 16px; font-size: 15.5px; }
.modal-kaki { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--h-garis); }
.tombol-link { background: none; border: 0; color: var(--h-teks-2); font-size: 13.5px; text-decoration: underline; cursor: pointer; padding: 4px 8px; }
.tombol-link:hover { color: var(--h-teks); }

/* Panel Simulasi Mode Uji Lokal & Header Ringkas */
.kepala-kode { margin: 4px 0 10px; font-size: 13.5px; }
.proyek-status { padding: 12px 16px; margin: 10px 0 14px; }
.proyek-status p { margin: 4px 0 0; font-size: 14.5px; }
.proyek-status-baris { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.proyek-status-baris .status { margin: 0; }
.dev-baris-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.dev-baris-mini select { margin: 0; padding: 5px 10px; font-size: 13px; min-height: 34px; max-width: 280px; }
.dev-baris-mini button { padding: 5px 12px; font-size: 13px; min-height: 34px; }

.pratinjau figure { margin: 12px 0; } .pratinjau img { max-width: 100%; height: auto; border: 1px solid var(--h-garis); border-radius: var(--r); background: #fff; }
.pratinjau iframe.pdf { width: 100%; height: 520px; border: 1px solid var(--h-garis); border-radius: var(--r); background: #fff; }
.baris-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .baris-form label { margin: 0; }
@media (max-width: 640px) {
  .linimasa { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .pratinjau iframe.pdf { height: 380px; }
}

/* grafik tren (admin/ai): warna seri dari palet referensi dataviz slot 1-3 (biru, oranye, aqua), mode gelap dipilih sendiri */
.grafik { --seri-1: #2a78d6; --seri-2: #eb6834; --seri-3: #1baf7a; --grid: color-mix(in srgb, currentColor 14%, transparent); margin: 12px 0 20px; }
:root[data-theme="dark"] .grafik { --seri-1: #3987e5; --seri-2: #d95926; --seri-3: #199e70; }
.grafik svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafik .grid { stroke: var(--grid); stroke-width: 1; }
.grafik .sumbu { fill: var(--h-teks-2); font: 11px var(--mono); }
.grafik .label-seri { fill: var(--h-teks); font: 600 12px var(--sans, inherit); }
.grafik .garis { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafik .l-templat { stroke: var(--seri-1); } .grafik .l-kustom_ringan { stroke: var(--seri-2); } .grafik .l-kustom_penuh { stroke: var(--seri-3); }
.grafik .m-templat { fill: var(--seri-1); } .grafik .m-kustom_ringan { fill: var(--seri-2); } .grafik .m-kustom_penuh { fill: var(--seri-3); }
.grafik .titik circle, .grafik .titik rect { stroke: var(--h-kartu, #fff); stroke-width: 2; }
.grafik .titik:hover circle, .grafik .titik:hover rect, .grafik .titik:focus circle, .grafik .titik:focus rect { stroke: var(--h-teks); }
.grafik .titik:focus { outline: none; }
.legenda { list-style: none; display: flex; gap: 16px; flex-wrap: wrap; padding: 0; margin: 6px 0; font-size: 14px; }
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.legenda .m-templat { fill: var(--seri-1); } .legenda .m-kustom_ringan { fill: var(--seri-2); } .legenda .m-kustom_penuh { fill: var(--seri-3); }
.legenda { --seri-1: #2a78d6; --seri-2: #eb6834; --seri-3: #1baf7a; }
:root[data-theme="dark"] .legenda { --seri-1: #3987e5; --seri-2: #d95926; --seri-3: #199e70; }
.upload-token textarea { font: 12px var(--mono); }
.butir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .butir label { flex: 1 1 360px; margin: 0; font-weight: 400; } .butir input[name^=alasan] { flex: 1 1 220px; margin: 0; }
.gulir-grafik { overflow-x: auto; } .gulir-grafik svg { min-width: 560px; max-width: 760px; }
.legenda svg { width: 14px; height: 14px; flex: none; min-width: 0; }