/* ============================================================
   KINGDOM — /cek-harga · lapisan gerak (produksi)
   Gabungan dua lapisan uji A (tenang) + B (atelier) yang dipilih
   sebagai versi resmi. Semua gerak mati sendiri kalau peramban
   melaporkan prefers-reduced-motion: reduce.
   ============================================================ */


/* ---------- hierarki tombol ----------
   Abu-abu adalah satu-satunya warna di luar palet, dan ia menempel
   pada elemen terbesar di layar. "Belum aktif" disampaikan dengan
   emerald pudar bergaris emas, bukan warna yang berarti rusak. */
.go:disabled{background:transparent;color:var(--gold-deep);border:1px solid var(--line-gold)!important;opacity:1}
/* Seluruh area unggah sudah bisa diketuk, jadi tombolnya tidak perlu
   seberat tombol utama — dua slab penuh membuat keduanya saling melemahkan. */
.drop .za label{background:#fff;border:1px solid var(--gold-deep);color:var(--gold-deep)}
.drop .za label:hover{background:var(--beige-soft);color:var(--emerald)}
.drop.on .za label{background:var(--ivory-warm)}
/* Varian kamera/galeri. Border ditulis penuh di tiap varian — bukan box-shadow
   di atas border yang diwarisi — supaya hanya satu garis yang terlihat.
   Dikunci ke kelas `.has-cam` di kontainer, bukan ke selektor sibling: peramban
   tidak menghitung ulang gaya `.za-pick` ketika atribut `hidden` berubah pada
   kakaknya, jadi versi sibling-nya tidak pernah aktif saat dijalankan. */
.drop .za .za-cam{background:var(--emerald);border-color:var(--emerald);color:var(--gold-soft)}
.drop .za .za-cam:hover{background:var(--emerald-deep);border-color:var(--emerald-deep);color:var(--gold-soft)}
.drop.on .za .za-cam{background:var(--emerald);border-color:var(--emerald)}
.drop .za.has-cam .za-pick{background:transparent;border:1px solid var(--line-gold);color:var(--gold-deep)}
.drop .za.has-cam .za-pick:hover{background:var(--beige-soft);border-color:var(--gold-deep);color:var(--emerald)}
.drop.on .za.has-cam .za-pick{background:var(--ivory-warm)}

/* ---------- tahapan analisa ---------- */
.kh-steps{display:grid;gap:12px}
.kh-step{display:grid;grid-template-columns:19px 1fr;gap:12px;align-items:center;font-size:13.5px;line-height:1.4;color:#9d968f;transition:color .4s ease}
.kh-step i{width:19px;height:19px;border-radius:50%;border:1px solid var(--line);position:relative;transition:border-color .4s ease,background .4s ease,box-shadow .4s ease}
.kh-step.on{color:var(--emerald);font-weight:700}
.kh-step.on i{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,154,94,.16)}
.kh-step.on i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold);animation:khPulse 1.5s ease-in-out infinite}
.kh-step.done{color:var(--charcoal)}
.kh-step.done i{border-color:var(--gold-deep);background:var(--gold-deep)}
.kh-step.done i::after{content:"";position:absolute;left:6px;top:3.5px;width:5px;height:9px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}
@keyframes khPulse{0%,100%{opacity:.3}50%{opacity:1}}
.kh-prog{height:2px;background:var(--line);border-radius:2px;margin-top:16px;overflow:hidden}
.kh-prog b{display:block;height:100%;width:2%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));animation:khBar 28s cubic-bezier(.15,.75,.25,1) forwards}
@keyframes khBar{to{width:96%}}
.kh-stage.kh-work{background:#fff;border-color:var(--line-gold)}

/* ---------- kartu hasil masuk bertahap ---------- */
.kh-anim>*{animation:khUp .5s cubic-bezier(.2,.7,.3,1) both}
.kh-anim>*:nth-child(2){animation-delay:.07s}
.kh-anim>*:nth-child(3){animation-delay:.14s}
.kh-anim>*:nth-child(4){animation-delay:.21s}
.kh-anim>*:nth-child(5){animation-delay:.28s}
.kh-anim>*:nth-child(6){animation-delay:.35s}
.kh-anim>*:nth-child(7){animation-delay:.42s}
@keyframes khUp{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}

/* ---------- pergantian jenis batu ----------
   Angka TIDAK ikut memudar: ia sudah bergerak sendiri (lihat countUp di
   kh-app.js). Dua gerakan sekaligus pada satu elemen membuatnya terasa gugup —
   yang memudar hanya kalimat di bawahnya. */
.kh-chip{transition:background .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1)}
.kh-swap .kh-warn{animation:khFade .5s .1s cubic-bezier(.2,.7,.3,1) both}
@keyframes khFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- tombol utama ---------- */
.go,.kh-wa,.kh-save,.drop .za label{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .12s ease}
.go:not(:disabled):active,.kh-wa:active,.kh-save:not(:disabled):active,.drop .za label:active{transform:translateY(1px)}

@media (prefers-reduced-motion: reduce){
  .kh-anim>*,.kh-swap .kh-warn,.kh-prog b,.kh-step.on i::after{animation:none!important}
  .kh-prog b{width:96%}
}



/* ---------- area unggah sebagai nampan ---------- */
.drop{border:1px solid var(--line-gold);border-radius:14px;background:linear-gradient(180deg,#fff 0%,var(--ivory-warm) 100%);position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(15,31,27,.05)}
.drop::before,.drop::after{content:"";position:absolute;top:12px;width:18px;height:18px;border:1px solid var(--gold);opacity:.45;pointer-events:none;transition:opacity .3s ease}
.drop::before{left:12px;border-right:0;border-bottom:0;border-top-left-radius:5px}
.drop::after{right:12px;border-left:0;border-bottom:0;border-top-right-radius:5px}
.drop.drag,.drop.on{border-color:var(--gold);background:#fff;box-shadow:inset 0 0 0 1px rgba(184,154,94,.14),0 6px 22px rgba(15,31,27,.07)}
.drop.on::before,.drop.on::after{opacity:0}
.drop .zb{min-height:186px}
.zp b{font-size:34px;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.drop:hover .zp b,.drop.drag .zp b{transform:translateY(-3px) rotate(45deg)}
.drop.on img{animation:khShot .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes khShot{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}

/* ---------- sapuan kilau ---------- */
.go,.kh-wa,.kh-save,.drop .za label{position:relative;overflow:hidden;isolation:isolate}
.go::after,.kh-wa::after,.kh-save::after,.drop .za label::after{content:"";position:absolute;top:-60%;left:0;width:26%;height:220%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-260%) rotate(14deg);pointer-events:none;z-index:-1}
.go:not(:disabled):hover::after,.kh-wa:hover::after,.kh-save:not(:disabled):hover::after,.drop .za label:hover::after{animation:khShine .9s cubic-bezier(.3,.6,.4,1)}
@keyframes khShine{to{transform:translateX(560%) rotate(14deg)}}
.go:not(:disabled):hover,.kh-wa:hover{box-shadow:0 8px 22px rgba(15,31,27,.18)}

/* ---------- angka harga ----------
   Garis emas di bawah eyebrow dicabut: pelat harga sekarang punya ornamennya
   sendiri, dan dua garis bertumpuk membuat kepala pelatnya ramai. */
.kh-anim .kh-big{animation:khUp .6s .18s cubic-bezier(.2,.7,.3,1) both}

/* ---------- kartu hasil sedikit lebih dalam ---------- */
.kh-card{box-shadow:0 2px 6px rgba(15,31,27,.06),0 18px 44px rgba(15,31,27,.07)}
.kh-shot img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.kh-head:hover .kh-shot img{transform:scale(1.03)}

@media (prefers-reduced-motion: reduce){
  .drop.on img,.kh-anim .kh-big{animation:none!important}
  .go::after,.kh-wa::after,.kh-save::after,.drop .za label::after{display:none}
}