/* ============================================================
   KINGDOM — /cek-harga · kartu unggah v2 (26 Okt 2026)
   Dimuat SETELAH cek-harga.css + cek-harga-motion.css. Hanya mengubah
   tampilan kartu unggah; ID & kelas yang dipakai js/kh-app.js tetap.
   ============================================================ */

/* ---------- kepala kartu: tiga langkah, bukan pita abu ---------- */
#khTool{border-color:var(--line-gold);box-shadow:0 1px 2px rgba(15,31,27,.04),0 22px 48px -26px rgba(15,31,27,.28)}
#khTool>h3{background:transparent;border-bottom:0;padding:20px 22px 0;font-size:21px;font-weight:500;letter-spacing:-.005em}
#khTool>h3::before{display:none}
.kh-flow{list-style:none;margin:10px 22px 0;padding:0 0 16px;display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9d968f;font-weight:700}
.kh-flow li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.kh-flow li b{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:0;color:#9d968f}
.kh-flow li.on{color:var(--emerald)}
.kh-flow li.on b{background:var(--emerald);border-color:var(--emerald);color:var(--gold-soft);box-shadow:0 0 0 3px rgba(184,154,94,.2)}
.kh-flow li+li::before{content:"";width:22px;height:1px;background:var(--line-gold);margin:0 10px}
#khTool .cb{padding:18px 22px 20px}

/* ---------- nampan unggah: bingkai jendela bidik penuh ---------- */
.drop{border-radius:16px;background:radial-gradient(120% 90% at 50% 38%,#fff 0%,#fff 38%,var(--ivory-warm) 100%)}
.drop .zb{position:relative;min-height:236px;padding:26px 18px}
.drop .zb::before,.drop .zb::after{content:"";position:absolute;bottom:12px;width:18px;height:18px;border:1px solid var(--gold);opacity:.45;pointer-events:none;transition:opacity .3s ease}
.drop .zb::before{left:12px;border-right:0;border-top:0;border-bottom-left-radius:5px}
.drop .zb::after{right:12px;border-left:0;border-top:0;border-bottom-right-radius:5px}
.drop.on .zb::before,.drop.on .zb::after{opacity:0}
.drop:hover::before,.drop:hover::after,.drop:hover .zb::before,.drop:hover .zb::after,.drop.drag .zb::before,.drop.drag .zb::after{opacity:.9}

.zp{padding:0;max-width:360px}
.zp b{width:78px;height:78px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0;color:var(--gold-deep);background:radial-gradient(circle at 50% 40%,#fff 0%,#FBF6EA 70%);border:1px solid var(--line-gold);box-shadow:0 0 0 7px rgba(184,154,94,.07),0 10px 24px -12px rgba(154,126,69,.55)}
.zp b svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.drop:hover .zp b,.drop.drag .zp b{transform:none}
.drop:hover .zp b svg,.drop.drag .zp b svg{transform:translateY(-3px) scale(1.04)}
.zp-t{display:block;font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--emerald);font-weight:500}
.zp i{font-size:12.5px;color:var(--charcoal);margin-top:6px}
.zp-k{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.zp-k span{font-size:11px;letter-spacing:.04em;color:var(--gold-deep);border:1px solid var(--line-gold);background:rgba(255,255,255,.7);border-radius:999px;padding:4px 10px;white-space:nowrap}

/* ---------- tombol pilih: kapsul ringan di tengah, bukan slab ---------- */
.drop .za{justify-content:center;padding:12px 14px;background:rgba(251,249,244,.7)}
.drop .za label{flex:0 1 auto;min-width:220px;padding:11px 22px;border-radius:999px;min-height:46px}
.drop .za.has-cam label{flex:1 1 0;min-width:0;padding:11px 8px}

/* ---------- tombol analisis ---------- */
.go{margin-top:16px;border-radius:999px;min-height:58px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15.5px;letter-spacing:.03em;box-shadow:inset 0 0 0 1px rgba(205,177,126,.35)}
.go::before{content:"";width:9px;height:9px;transform:rotate(45deg);background:currentColor;opacity:.85;flex:none}
.go:disabled{background:var(--beige-soft);color:rgba(15,31,27,.42);border:0!important;box-shadow:none;cursor:not-allowed}
.go:disabled::before{opacity:.35}
.go:not(:disabled){background:linear-gradient(180deg,#17352C 0%,var(--emerald) 100%);color:var(--gold-soft)}
.go:not(:disabled):hover{color:#F3E3BE}

/* ---------- kuota: kapsul kecil ---------- */
.quota{display:table;margin:12px auto 0;padding:5px 13px;border-radius:999px;background:var(--ivory-warm);border:1px solid var(--line);font-size:11.5px;color:var(--charcoal);letter-spacing:.02em}
.quota:empty{display:none}

/* ---------- tips foto + privasi ---------- */
.kh-tips{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kh-tips li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;font-size:12px;line-height:1.35;color:var(--charcoal)}
.kh-tips li b{font-family:var(--serif);font-weight:500;font-size:14px;color:var(--emerald)}
.kh-tips svg{width:22px;height:22px;fill:none;stroke:var(--gold-deep);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fine{display:flex;gap:9px;align-items:flex-start;border-top:0;margin-top:14px;padding:11px 13px;border-radius:10px;background:var(--ivory-warm);font-size:11.5px}
.fine svg{width:15px;height:15px;flex:none;margin-top:1px;fill:none;stroke:var(--gold-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:420px){
  #khTool>h3{padding:18px 18px 0;font-size:19px}
  .kh-flow{margin:9px 18px 0;font-size:10px;letter-spacing:.1em}
  .kh-flow li+li::before{width:12px;margin:0 6px}
  #khTool .cb{padding:16px 16px 18px}
  .drop .zb{min-height:214px}
  .zp-t{font-size:17.5px}
  .drop .za label{min-width:0;flex:1}
  .kh-tips li{font-size:11.5px}
  .zp-k{gap:5px}
  .zp-k span{font-size:10.5px;padding:3px 8px;letter-spacing:.02em}
}
@media (prefers-reduced-motion:reduce){.zp b svg{transition:none}}
.kh-flow li.done{color:var(--gold-deep)}
.kh-flow li.done b{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;font-size:0;position:relative}
.kh-flow li.done b::after{content:"";position:absolute;left:7px;top:4px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}

/* ============ gerak v2 ============ */
/* garis penghubung langkah terisi emas saat langkah berikutnya aktif */
.kh-flow li+li::before{background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft)) left/0% 100% no-repeat,var(--line-gold);transition:background-size .6s cubic-bezier(.4,0,.2,1)}
.kh-flow li.on+li::before{background-size:0% 100%,auto}
.kh-flow li.done+li::before{background-size:100% 100%,auto}
.kh-flow li b{transition:background .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease}

/* seret-lepas: bingkai bidik menyempit, ajakan lepas muncul */
.drop::before,.drop::after,.drop .zb::before,.drop .zb::after{transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.3,1)}
.drop.drag::before{transform:translate(10px,10px)}.drop.drag::after{transform:translate(-10px,10px)}
.drop.drag .zb::before{transform:translate(10px,-10px)}.drop.drag .zb::after{transform:translate(-10px,-10px)}
.kh-drophint{position:absolute;left:50%;bottom:22px;transform:translate(-50%,8px);opacity:0;pointer-events:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
.drop.drag .kh-drophint{opacity:1;transform:translate(-50%,0)}
.drop.drag .zp-k{opacity:0;transition:opacity .2s ease}

/* pindai emas di atas foto selama mesin membaca */
.kh-scan{position:absolute;inset:8px;border-radius:9px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:linear-gradient(rgba(184,154,94,.10) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(184,154,94,.10) 1px,transparent 1px) 0 0/22px 100%}
.kh-scan i{position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(180deg,transparent 0%,rgba(227,200,146,.0) 40%,rgba(227,200,146,.38) 92%,rgba(184,154,94,.95) 100%);transform:translateY(-100%);animation:khScan 2.2s cubic-bezier(.45,.05,.55,.95) infinite}
.drop.scan .kh-scan{opacity:1}
.drop.scan.on::before,.drop.scan.on::after,.drop.scan.on .zb::before,.drop.scan.on .zb::after{opacity:.95}
@keyframes khScan{to{transform:translateY(300%)}}

/* tombol analisis: satu denyut saat siap */
.go.ready{animation:khReady 1.4s cubic-bezier(.2,.7,.3,1) 1}
@keyframes khReady{0%{box-shadow:inset 0 0 0 1px rgba(205,177,126,.35),0 0 0 0 rgba(184,154,94,.55)}70%{box-shadow:inset 0 0 0 1px rgba(205,177,126,.35),0 0 0 14px rgba(184,154,94,0)}100%{box-shadow:inset 0 0 0 1px rgba(205,177,126,.35),0 0 0 0 rgba(184,154,94,0)}}

/* cek kualitas foto */
.kh-qc{margin-top:12px}
.kh-qc-row{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.kh-qc-row span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:4px 10px 4px 7px;white-space:nowrap}
.kh-qc-row span svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kh-qc-row .ok{color:var(--pos);background:rgba(62,122,94,.08);border:1px solid rgba(62,122,94,.22)}
.kh-qc-row .warn{color:#9A5B2E;background:rgba(176,96,74,.07);border:1px solid rgba(176,96,74,.25)}
.kh-qc-tip{text-align:center;font-size:12px;color:var(--charcoal);margin:8px 0 0}
.kh-qc.in .kh-qc-row span{animation:khUp .45s cubic-bezier(.2,.7,.3,1) both}
.kh-qc.in .kh-qc-row span:nth-child(2){animation-delay:.08s}
.kh-qc.in .kh-qc-row span:nth-child(3){animation-delay:.16s}
.kh-qc.in .kh-qc-tip{animation:khUp .45s .24s cubic-bezier(.2,.7,.3,1) both}

@media (prefers-reduced-motion:reduce){
  .kh-scan i{animation:none;top:auto;bottom:0;transform:none;height:2px;background:var(--gold)}
  .go.ready,.kh-qc.in .kh-qc-row span,.kh-qc.in .kh-qc-tip{animation:none}
  .drop.drag::before,.drop.drag::after,.drop.drag .zb::before,.drop.drag .zb::after{transform:none}
}