/* ============================================================
   DataVault — Animasi tombol Jasa Akademik (halaman pelanggan & admin). Setiap jenis tombol punya animasi sendiri:
   shine (Lanjut) · nudge-l (Kembali) · pulse (Bayar) · bounce (Pilih berkas) · spin (hapus ✕) · wiggle (kartu layanan) · fly (kirim pesan)
   drop (Unduh) · rise (Unggah) · flip (Salin / Email) · ring (WhatsApp) · pop (Simpan, chip) · blink (Tampilkan) · slide (Buka detail) · shake (Hapus)
   ============================================================ */
.fx { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.fx .ic { display: inline-block; transform-origin: center; will-change: transform; }
.fx-rp { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); animation: fx-ripple .65s ease-out forwards; pointer-events: none; z-index: 0; }
.fx-dark .fx-rp, .fx.alt .fx-rp, .ed-ib.fx .fx-rp { background: rgba(230, 168, 23, .35); }
.fx:focus-visible { outline: 3px solid #E6A817; outline-offset: 2px; }

/* shine: kilau melintas (Lanjut, Simpan utama) */
.fx-shine::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); pointer-events: none; z-index: 1; }
.fx-shine:hover::after { animation: fx-shine .85s ease; }
.fx-shine:hover .ic { animation: fx-nudge-r .55s ease-in-out infinite alternate; }
/* nudge-l: panah bergeser ke kiri (Kembali) */
.fx-nudge-l:hover .ic { animation: fx-nudge-l .55s ease-in-out infinite alternate; }
.fx-nudge-l::before { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #E6A817; transition: width .3s ease; z-index: 1; }
.fx-nudge-l:hover::before { width: 100%; }
/* pulse: napas bercahaya (Bayar) */
.fx-pulse { animation: fx-glow 2.2s ease-in-out infinite; }
.fx-pulse:hover .ic { animation: fx-spin-y .9s linear infinite; }
.fx-pulse::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); animation: fx-sweep 3.2s ease-in-out infinite; pointer-events: none; z-index: 1; }
/* bounce: ikon melompat (Pilih berkas, Unggah) */
.fx-bounce:hover .ic { animation: fx-bounce .7s ease infinite; }
.fx-bounce { transition: transform .2s, box-shadow .2s, background .2s; } .fx-bounce:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(230, 168, 23, .3); background: #FFF8E6; }
/* spin: berputar & merah (hapus ✕) */
.fx-spin { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; } .fx-spin:hover { transform: rotate(180deg) scale(1.2); background: #FEE2E2; color: #B91C1C; } .fx-spin:active { animation: fx-shake .35s ease; }
/* wiggle: kartu layanan miring & emoji menari */
.fx-wiggle { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), border-color .2s, box-shadow .2s; } .fx-wiggle:hover { transform: translateY(-4px) rotate(-1deg); } .fx-wiggle:hover .ic { animation: fx-wiggle .8s ease infinite; } .fx-wiggle:active { transform: scale(.97); }
/* fly: pesawat kertas terbang (Kirim pesan) */
.fx-fly:hover .ic { animation: fx-fly .7s ease infinite; }
/* drop: panah jatuh (Unduh) */
.fx-drop:hover .ic { animation: fx-drop .8s ease infinite; }
/* rise: panah naik (Unggah hasil) */
.fx-rise:hover .ic { animation: fx-rise .8s ease infinite; }
/* flip: ikon berbalik (Salin, Email) */
.fx-flip:hover .ic { animation: fx-flip .7s ease; }
/* ring: cincin berdenyut (WhatsApp) */
.fx-ring::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); animation: fx-ring 2s ease-out infinite; z-index: -1; }
.fx-ring:hover .ic { animation: fx-wiggle .6s ease infinite; }
/* pop: membal (Simpan, chip, tab) */
.fx-pop { transition: transform .2s cubic-bezier(.3, 1.7, .5, 1), background .2s, box-shadow .2s; } .fx-pop:hover { transform: scale(1.08); } .fx-pop:active { transform: scale(.92); } .fx-pop:hover .ic { animation: fx-pop .5s ease; }
/* blink: mata berkedip (Tampilkan/Sembunyikan) */
.fx-blink:hover .ic { animation: fx-blink .6s ease; }
/* slide: panah menggeser (Buka detail) */
.fx-slide .arr { display: inline-block; transition: transform .25s ease; } .fx-slide:hover .arr { transform: translateX(6px); } .fx-slide:hover { letter-spacing: .01em; }
/* shake: bergetar peringatan (Hapus) */
.fx-shake { transition: background .2s, color .2s; } .fx-shake:hover { animation: fx-shake .5s ease; background: #FEE2E2; color: #B91C1C; }
/* switch: sakelar buka/tutup dengan pegas */
.fx-switch { position: relative; width: 52px; height: 30px; border-radius: 999px; border: 0; background: #CBD5E1; cursor: pointer; transition: background .3s; padding: 0; flex: 0 0 auto; }
.fx-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.fx-switch[aria-checked="true"] { background: #15803D; } .fx-switch[aria-checked="true"]::after { transform: translateX(22px); } .fx-switch:active::after { width: 30px; }

@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }
@keyframes fx-shine { from { left: -70%; } to { left: 130%; } }
@keyframes fx-sweep { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes fx-nudge-r { from { transform: translateX(0); } to { transform: translateX(6px); } }
@keyframes fx-nudge-l { from { transform: translateX(0); } to { transform: translateX(-6px); } }
@keyframes fx-glow { 0%, 100% { box-shadow: 0 5px 0 #0F3D22, 0 0 0 0 rgba(21, 128, 61, .5); } 50% { box-shadow: 0 5px 0 #0F3D22, 0 0 0 10px rgba(21, 128, 61, 0); } }
@keyframes fx-spin-y { to { transform: rotateY(360deg); } }
@keyframes fx-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(1px); } }
@keyframes fx-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } }
@keyframes fx-fly { 0% { transform: translate(0, 0); opacity: 1; } 49% { transform: translate(14px, -8px); opacity: 0; } 50% { transform: translate(-14px, 8px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes fx-drop { 0% { transform: translateY(-6px); opacity: .3; } 60% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(0); } }
@keyframes fx-rise { 0% { transform: translateY(6px); opacity: .3; } 60% { transform: translateY(-3px); opacity: 1; } 100% { transform: translateY(0); } }
@keyframes fx-flip { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes fx-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); } }
@keyframes fx-pop { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes fx-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
@keyframes fx-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px) rotate(-3deg); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .fx, .fx *, .fx::before, .fx::after, .fx-switch, .fx-switch::after { animation: none !important; transition: none !important; } }

/* ===== Tombol "Buka" layanan (admin) — modern ===== */
.jx-openbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #1B1F2A, #2F3650); color: #FDE047; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 16px rgba(27, 31, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s, background .25s, color .25s; }
.jx-openbtn .jx-oi { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(253, 224, 71, .16); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .25s; }
.jx-openbtn svg { display: block; }
.jx-openbtn:hover, .jx-openbtn:focus-visible { background: linear-gradient(135deg, #FACC15, #E6A817); color: #1F1300; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(230, 168, 23, .42); outline: none; }
.jx-openbtn:hover .jx-oi { background: rgba(31, 19, 0, .14); transform: translate(2px, -2px) rotate(8deg); }
.jx-openbtn:active { transform: translateY(0) scale(.97); }
.jx-swwrap { display: inline-flex; align-items: center; gap: 8px; }
.jx-st { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #EEF0F4; color: #475569; transition: background .25s, color .25s; }
.jx-st.on { background: #DCFCE7; color: #14532D; }
.fx-switch[aria-busy="true"] { opacity: .6; pointer-events: none; }
@media (max-width: 860px) { .jx-openbtn { flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .jx-openbtn, .jx-openbtn .jx-oi { transition: none !important; } }

/* ============================================================
   Tampilan tabel & filter admin Jasa (v4) — lebih modern & rapi
   ============================================================ */
.jx-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-section); }
.jx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 11px; font-size: 12.5px; border-radius: 999px; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.jx-chip:hover { border-color: var(--gold-medium, #E6A817); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); }
.jx-chip-n { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(27, 31, 42, .09); color: inherit; transition: background .2s, color .2s; }
.jx-chip.zero:not([aria-pressed="true"]) { opacity: .72; }
.jx-chip[aria-pressed="true"] { box-shadow: 0 8px 18px -8px rgba(27, 31, 42, .6); }
.jx-chip[aria-pressed="true"] .jx-chip-n { background: #FDE047; color: #1B1F2A; }
.jx-c-aktif:not([aria-pressed="true"]) .jx-chip-n { background: #FEF3C7; color: #7A4B00; }
.jx-c-baru:not([aria-pressed="true"]) .jx-chip-n { background: #DBEAFE; color: #1E3A8A; }
.jx-c-diproses:not([aria-pressed="true"]) .jx-chip-n { background: #FDE68A; color: #7A4B00; }
.jx-c-revisi:not([aria-pressed="true"]) .jx-chip-n { background: #FCE7F3; color: #9D174D; }
.jx-c-selesai:not([aria-pressed="true"]) .jx-chip-n { background: #DCFCE7; color: #14532D; }
.jx-c-belum_bayar:not([aria-pressed="true"]) .jx-chip-n, .jx-c-dibatalkan:not([aria-pressed="true"]) .jx-chip-n { background: #FEE2E2; color: #7F1D1D; }
[data-theme="dark"] .jx-chip-n { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .jx-c-aktif:not([aria-pressed="true"]) .jx-chip-n { background: rgba(250, 204, 21, .22); color: #FDE68A; }
[data-theme="dark"] .jx-c-baru:not([aria-pressed="true"]) .jx-chip-n { background: rgba(96, 165, 250, .22); color: #BFDBFE; }
[data-theme="dark"] .jx-c-diproses:not([aria-pressed="true"]) .jx-chip-n { background: rgba(250, 204, 21, .22); color: #FDE68A; }
[data-theme="dark"] .jx-c-revisi:not([aria-pressed="true"]) .jx-chip-n { background: rgba(244, 114, 182, .22); color: #FBCFE8; }
[data-theme="dark"] .jx-c-selesai:not([aria-pressed="true"]) .jx-chip-n { background: rgba(74, 222, 128, .2); color: #BBF7D0; }
[data-theme="dark"] .jx-c-belum_bayar:not([aria-pressed="true"]) .jx-chip-n, [data-theme="dark"] .jx-c-dibatalkan:not([aria-pressed="true"]) .jx-chip-n { background: rgba(248, 113, 113, .22); color: #FECACA; }

/* tabel */
.jx-tablewrap { border-radius: 20px; }
.jx-table thead th { padding: 14px 14px; font-size: 11.5px; letter-spacing: .08em; }
.jx-table thead th:first-child { padding-left: 18px; } .jx-table tbody td:first-child { padding-left: 18px; } .jx-table tbody td:last-child { padding-right: 18px; }
.jx-table tbody td { padding: 14px 14px; }
.jx-table tbody tr:nth-child(even) { background: transparent; }
.jx-table tbody tr:hover { background: rgba(230, 168, 23, .1); }
.jx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; }
.jx-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.jx-amt { color: var(--text-dark); }

/* tabel Layanan & Harga */
#jx-svctable thead th { white-space: nowrap; }
#jx-svctable tbody td { vertical-align: top; }
#jx-svctable .jx-svc-t { align-items: flex-start; }
#jx-svctable .jx-svc-t .ic { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; font-size: 22px; border-radius: 14px; background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
#jx-svctable .jx-tbl-in { border-width: 1.5px; border-radius: 12px; width: 100%; min-width: 0; box-sizing: border-box; }
#jx-svctable td:nth-child(2) .jx-tbl-in { width: 150px; }
#jx-svctable td:nth-child(3) b { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--bg-section); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
#jx-svctable .jx-act { flex-wrap: wrap; }

@media (max-width: 860px) {
  .jx-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .jx-filters::-webkit-scrollbar { display: none; }
  .jx-chip { flex: 0 0 auto; }
  .jx-table tbody tr { margin: 10px; width: auto; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .3); }
  .jx-table tbody td:first-child, .jx-table tbody td:last-child { padding-left: 0; padding-right: 0; }
  #jx-svctable td:nth-child(2) .jx-tbl-in { width: 100%; }
  .jx-tablewrap { background: transparent; border-color: transparent; box-shadow: none; }
}

.jx-cust b { white-space: nowrap; } .jx-cust > div { min-width: 0; } .jx-cust small { display: block; }
.jx-table .jx-pill { white-space: nowrap; }
.jx-filters .jx-chip { padding: 4px 5px 4px 10px; font-size: 12.5px; gap: 6px; }
.jx-filters .jx-chip-n { min-width: 22px; height: 20px; padding: 0 6px; font-size: 11.5px; }
#jx-svc .ed-note b:not(:first-child) { display: inline; }
#jx-svctable .jx-act { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 6px; justify-content: start; }
#jx-svctable .jx-act .jx-openbtn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
#jx-svctable .jx-act { display: flex; flex-wrap: wrap; }
#jx-svctable td:last-child { min-width: 240px; }
#jx-svctable .jx-act .jx-openbtn { flex: 1 0 100%; }
@media (max-width: 860px) { #jx-svctable td:last-child { min-width: 0; } #jx-svctable .jx-act { justify-content: flex-end; } }

/* ============================================================
   Detail pesanan admin (modal) — modern & rapi
   ============================================================ */
#m-order .modal-body { padding: 18px; background: var(--bg-section); }
#m-order .modal-title { font-weight: 800; letter-spacing: -.01em; }
.jx-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1B1F2A 0%, #2B3142 60%, #3A3320 100%); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55); position: relative; overflow: hidden; }
.jx-hero::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 224, 71, .28), transparent 70%); pointer-events: none; }
.jx-hero-l { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; position: relative; z-index: 1; }
.jx-hero .jx-pill { font-size: 12.5px; padding: 5px 13px; }
.jx-hero-m { display: flex; flex-direction: column; line-height: 1.15; }
.jx-hero-k { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.jx-hero-v { font-size: 1.55rem; font-weight: 800; color: #FDE047; font-variant-numeric: tabular-nums; }
.jx-hero-r { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.jx-pay { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.jx-pay.ok { background: #DCFCE7; color: #14532D; } .jx-pay.no { background: #FEE2E2; color: #7F1D1D; }

#m-order .jx-sec { border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .4); }
#m-order .jx-sec h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 15px; }
.jx-sic { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; font-size: 16px; border-radius: 10px; background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
[data-theme="dark"] .jx-sic { background: rgba(250, 204, 21, .18); }
.jx-stt { min-width: 0; overflow-wrap: anywhere; }

#m-order .jx-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.jx-kvi { padding: 10px 13px; border-radius: 12px; background: var(--bg-section); border: 1px solid var(--border); min-width: 0; }
.jx-kvi.wide { grid-column: 1 / -1; }
.jx-kvi dt { margin: 0 0 3px !important; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.jx-kvi dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-dark); overflow-wrap: anywhere; white-space: pre-wrap; }

#m-order .jx-od-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#m-order .jx-od-actions .ed-ib { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; width: 100%; box-sizing: border-box; padding: 0 12px; border-radius: 12px; font-weight: 700; font-size: 13.5px; text-align: center; white-space: nowrap; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
#m-order .jx-od-actions .ed-ib .ic { display: inline-flex; line-height: 1; }

#m-order .jx-file { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-section); min-width: 0; }
#m-order .jx-file small { color: var(--text-muted); white-space: nowrap; }
#m-order .jx-file b { white-space: nowrap; font-variant-numeric: tabular-nums; }
#m-order .jx-msg { box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .4); }
#m-order .jx-sec .ed-ta, #m-order .jx-sec .ed-sel { width: 100%; box-sizing: border-box; border-radius: 12px; }
#m-order .jx-sec .ed-sel { max-width: 320px; }

@media (max-width: 640px) {
  #m-order .modal-body { padding: 12px; }
  .jx-hero { padding: 14px; } .jx-hero-v { font-size: 1.35rem; }
  #m-order .jx-kv { grid-template-columns: 1fr; }
  #m-order .jx-od-actions { grid-template-columns: 1fr; }
  #m-order .jx-sec { padding: 14px; }
}

/* LPJ KIP Kuliah — kartu pembuat dokumen di rincian pesanan */
#m-order .jx-lpj { border-color: #E6A817; background: linear-gradient(180deg, rgba(253, 224, 71, .12), transparent 70%), var(--bg-white); }
#m-order .jx-lpj-info { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
#m-order .jx-lpj-act { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { #m-order .jx-lpj-act { grid-template-columns: 1fr; } }

/* Template LPJ KIP Kuliah (unggahan admin) — tab Layanan & Harga */
#jx-tpl { margin-top: 18px; }
.jx-tpl { border: 1.5px solid #E6A817; border-radius: 20px; padding: 18px; background: linear-gradient(180deg, rgba(253, 224, 71, .13), transparent 60%), var(--bg-white); box-shadow: 0 6px 22px rgba(15, 23, 42, .06); }
.jx-tpl-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jx-tpl-ic { font-size: 28px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #FEF3C7; flex: 0 0 auto; }
.jx-tpl-ht { flex: 1; min-width: 160px; } .jx-tpl-ht b { display: block; font-size: 1.05rem; } .jx-tpl-ht small { color: var(--text-muted); }
.jx-tpl-bd { font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.jx-tpl-bd.on { background: #DCFCE7; color: #166534; } .jx-tpl-bd.off { background: #E2E8F0; color: #475569; }
.jx-tpl-p { margin: 12px 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.jx-tpl-file { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-white); border: 1px solid var(--border, #E2E8F0); margin-bottom: 10px; overflow-wrap: anywhere; }
.jx-tpl-file small { color: var(--text-muted); }
.jx-tpl-warn { padding: 10px 12px; border-radius: 12px; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; font-size: 13px; margin-bottom: 10px; }
.jx-tpl-note { margin: 0 0 10px; font-size: 13px; padding: 10px 12px; border-radius: 12px; background: #EFF6FF; color: #1E3A8A; line-height: 1.5; }
.jx-tpl-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; position: relative; }
.jx-tpl-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 0 6px; }
.jx-tpl-ref { margin-top: 14px; border-top: 1px dashed var(--border, #CBD5E1); padding-top: 12px; }
.jx-tpl-ref > summary { cursor: pointer; font-weight: 700; font-size: 14px; line-height: 1.5; }
.jx-tpl-how { font-size: 13px; line-height: 1.6; color: var(--text-muted); } .jx-tpl-how p { margin: 8px 0; }
.jx-tpl code, .jx-tpl-how code { background: #F1F5F9; padding: 1px 6px; border-radius: 6px; font-size: 12.5px; color: #0F172A; overflow-wrap: anywhere; }
.jx-tpl-g { margin-top: 12px; } .jx-tpl-g > b { font-size: 13px; display: block; margin-bottom: 6px; }
.jx-tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jx-tpl-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border, #E2E8F0); background: var(--bg-white); cursor: pointer; font: inherit; max-width: 100%; transition: transform .15s, border-color .15s, box-shadow .15s; }
.jx-tpl-chip:hover { border-color: #E6A817; box-shadow: 0 3px 10px rgba(230, 168, 23, .25); transform: translateY(-1px); }
.jx-tpl-chip small { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 640px) { .jx-tpl { padding: 14px; border-radius: 16px; } .jx-tpl-act { flex-direction: column; align-items: stretch; } .jx-tpl-act .ed-ib { justify-content: center; } .jx-tpl-sw { justify-content: space-between; padding: 4px 2px; } .jx-tpl-chip { width: 100%; } }
#m-order .jx-lpj-tpl { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #92400E; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .jx-tpl-chip { transition: none; } }

/* ---------- Template & Contoh LPJ KIP (dua tempat unggah) ---------- */
.jx-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.jx-slot { border: 1.5px solid var(--border, #E2E8F0); border-radius: 16px; padding: 14px; background: var(--bg-white); display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: border-color .2s, box-shadow .2s; }
.jx-slot.on { border-color: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
.jx-slot.empty { border-style: dashed; background: transparent; }
.jx-slot-h { display: flex; align-items: center; gap: 10px; }
.jx-slot-ic { font-size: 22px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #F1F5F9; flex: 0 0 auto; }
.jx-slot-ht { min-width: 0; } .jx-slot-ht b { display: block; font-size: .98rem; overflow-wrap: anywhere; } .jx-slot-ht small { color: var(--text-muted); font-size: 12.5px; }
.jx-slot.on .jx-slot-ht small { color: #166534; font-weight: 700; }
.jx-slot-p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.jx-slot .jx-tpl-file { margin-bottom: 0; }
.jx-slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jx-chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #E2E8F0; color: #334155; }
.jx-chip.ok { background: #DCFCE7; color: #166534; } .jx-chip.warn { background: #FEF3C7; color: #92400E; } .jx-chip.bad { background: #FEE2E2; color: #991B1B; }
.jx-slot-det { border: 1px solid var(--border, #E2E8F0); border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.jx-slot-det > summary { cursor: pointer; font-weight: 700; line-height: 1.5; }
.jx-slot-det.warn { background: #FFFBEB; border-color: #FDE68A; color: #78350F; }
.jx-slot-det ul { margin: 8px 0 4px; padding-left: 18px; line-height: 1.6; } .jx-slot-det p { margin: 6px 0 2px; font-size: 12.5px; }
.jx-slot-hits { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 260px; overflow: auto; }
.jx-hit { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border-bottom: 1px dashed var(--border, #E2E8F0); font-size: 12px; } .jx-hit code { align-self: flex-start; } .jx-hit span { color: var(--text-muted); overflow-wrap: anywhere; }
.jx-slot .jx-tpl-act { margin-top: auto; padding-top: 4px; }
.jx-tpl-ctl { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 12px; border-radius: 14px; background: rgba(148, 163, 184, .1); margin-bottom: 10px; }
.jx-tpl-sel { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .jx-tpl-sel > b { font-size: 13px; }
.jx-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-white); border: 1px solid var(--border, #E2E8F0); }
.jx-seg-b { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 9px; cursor: pointer; color: var(--text-muted); min-height: 38px; transition: background .15s, color .15s; }
.jx-seg-b.on { background: #E6A817; color: #1F2937; } .jx-seg-b:not(.on):hover { background: rgba(230, 168, 23, .18); }
@media (max-width: 760px) { .jx-slots { grid-template-columns: 1fr; } .jx-tpl-ctl { flex-direction: column; align-items: stretch; } .jx-seg { display: flex; } .jx-seg-b { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { .jx-slot, .jx-seg-b { transition: none; } }

/* ---------- status LPJ otomatis di rincian pesanan ---------- */
.jx-lpj-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.jx-lpj-auto.ok { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; } .jx-lpj-auto.wait { background: #FEF3C7; color: #78350F; border: 1px solid #FDE68A; }
.jx-lpj-auto b { flex: 1 1 100%; } .jx-lpj-auto span { flex: 1 1 240px; min-width: 0; }
.jx-lpj-auto .ed-ib { flex: 0 0 auto; }
@media (max-width: 640px) { .jx-lpj-auto .ed-ib { width: 100%; justify-content: center; min-height: 44px; } }

/* ============================================================
   Detail pesanan admin v10 — teks & tabel lebih rapi dan modern
   ============================================================ */
#m-order .modal-body { padding: 20px; font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#m-order .modal-title { font-family: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif; font-size: 1.15rem; }

/* hero: pil status & pembayaran seragam, kontras di latar gelap */
#m-order .jx-hero .jx-pill { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); font-weight: 700; letter-spacing: .01em; }
#m-order .jx-hero .jx-pill.baru { background: rgba(96, 165, 250, .22); color: #DBEAFE; border-color: rgba(96, 165, 250, .45); }
#m-order .jx-hero .jx-pill.diproses { background: rgba(250, 204, 21, .2); color: #FEF08A; border-color: rgba(250, 204, 21, .45); }
#m-order .jx-hero .jx-pill.revisi { background: rgba(244, 114, 182, .22); color: #FBCFE8; border-color: rgba(244, 114, 182, .45); }
#m-order .jx-hero .jx-pill.selesai { background: rgba(74, 222, 128, .2); color: #BBF7D0; border-color: rgba(74, 222, 128, .45); }
#m-order .jx-hero .jx-pill.dibatalkan, #m-order .jx-hero .jx-pill.menunggu_bayar, #m-order .jx-hero .jx-pill.draft { background: rgba(248, 113, 113, .22); color: #FECACA; border-color: rgba(248, 113, 113, .45); }
#m-order .jx-pay, #m-order .jx-hero .jx-due { font-size: 12px; font-weight: 700; padding: 6px 12px; border: 1px solid transparent; }
#m-order .jx-pay.ok { background: rgba(74, 222, 128, .18); color: #BBF7D0; border-color: rgba(74, 222, 128, .4); }
#m-order .jx-pay.no { background: rgba(248, 113, 113, .2); color: #FECACA; border-color: rgba(248, 113, 113, .4); }
#m-order .jx-hero .jx-due { background: rgba(251, 146, 60, .2); color: #FED7AA; border-color: rgba(251, 146, 60, .45); border-radius: 999px; display: inline-flex; align-items: center; }
#m-order .jx-hero-v { font-family: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.02em; }

/* kartu seksi */
#m-order .jx-sec { border: 1px solid var(--border); background: var(--bg-white); }
#m-order .jx-sec h4 { font-family: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }

/* tombol kontak: rata, tidak terpotong */
#m-order .jx-od-actions { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
#m-order .jx-od-actions .ed-ib { height: auto; min-height: 44px; padding: 10px 14px; white-space: normal; line-height: 1.25; }

/* data pelanggan: tabel dua kolom (label | isi) */
#m-order .jx-kv { display: block; margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
#m-order .jx-kvi { display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 16px; border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--border); }
#m-order .jx-kvi:last-child { border-bottom: 0; }
#m-order .jx-kvi:nth-child(odd) { background: var(--bg-section); }
#m-order .jx-kvi:hover { background: rgba(230, 168, 23, .09); }
#m-order .jx-kvi.wide { grid-column: auto; }
#m-order .jx-kvi dt { margin: 0 !important; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: none; color: var(--text-muted); }
#m-order .jx-kvi dd { font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--text-dark); }

/* harga satuan: tabel sebenarnya */
.jx-tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; font-size: 14px; }
.jx-tbl th { text-align: left; padding: 10px 16px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-section); border-bottom: 1px solid var(--border); }
.jx-tbl td { padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--text-dark); overflow-wrap: anywhere; }
.jx-tbl tbody tr:last-child td { border-bottom: 0; }
.jx-tbl tbody tr:hover td { background: rgba(230, 168, 23, .08); }
.jx-tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.jx-tbl tfoot td { border-top: 2px solid var(--border); border-bottom: 0; background: var(--bg-section); font-weight: 800; }
.jx-tbl tfoot .num { color: var(--gold-dark, #B7791F); font-size: 15.5px; }

/* berkas: kartu dengan lencana jenis berkas */
#m-order .jx-file.t { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: var(--bg-white); transition: border-color .15s, box-shadow .15s; }
#m-order .jx-file.t:hover { border-color: var(--gold-medium, #E6A817); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .5); }
#m-order .jx-file .ft { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; background: var(--bg-section); color: var(--text-muted); border: 1px solid var(--border); }
#m-order .jx-file .ft-pdf { background: rgba(239, 68, 68, .14); color: #DC2626; border-color: rgba(239, 68, 68, .35); }
#m-order .jx-file .ft-docx, #m-order .jx-file .ft-doc { background: rgba(59, 130, 246, .14); color: #2563EB; border-color: rgba(59, 130, 246, .35); }
#m-order .jx-file .ft-xlsx, #m-order .jx-file .ft-xls, #m-order .jx-file .ft-csv { background: rgba(34, 197, 94, .14); color: #16A34A; border-color: rgba(34, 197, 94, .35); }
#m-order .jx-file .ft-jpg, #m-order .jx-file .ft-jpeg, #m-order .jx-file .ft-png, #m-order .jx-file .ft-webp { background: rgba(168, 85, 247, .14); color: #9333EA; border-color: rgba(168, 85, 247, .35); }
#m-order .jx-file .fi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#m-order .jx-file .fi .n { flex: none; font-size: 14px; font-weight: 700; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#m-order .jx-file .fi small { font-size: 12.5px; white-space: normal; }
#m-order .jx-file .fa { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#m-order .jx-file .fa .ed-ib { min-height: 36px; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* pesan: gelembung chat */
#m-order .jx-msg { max-width: 86%; padding: 10px 14px; margin: 8px 0; font-size: 14px; line-height: 1.55; border-radius: 16px; border: 1px solid transparent; }
#m-order .jx-msg small { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; opacity: .7; }
#m-order .jx-msg.admin { border-bottom-right-radius: 4px; border-color: rgba(230, 168, 23, .45); }
#m-order .jx-msg.pelanggan { border-bottom-left-radius: 4px; background: var(--bg-section); border-color: var(--border); color: var(--text-dark); }
#m-order .jx-sec .ed-ta { padding: 10px 12px; font: inherit; font-size: 14px; border: 1px solid var(--border); background: var(--bg-section); color: var(--text-dark); }
#m-order .jx-sec .ed-ta:focus, #m-order .jx-sec .ed-sel:focus { outline: 2px solid var(--gold-medium, #E6A817); outline-offset: 1px; }

@media (max-width: 640px) {
  #m-order .modal-body { padding: 12px; }
  #m-order .jx-kvi { grid-template-columns: 1fr; gap: 2px; padding: 10px 14px; }
  #m-order .jx-od-actions { grid-template-columns: 1fr; }
  #m-order .jx-file.t { flex-wrap: wrap; }
  #m-order .jx-file .fa { flex: 1 1 100%; justify-content: flex-start; }
  #m-order .jx-file .fa .ed-ib { flex: 1 1 auto; justify-content: center; }
  .jx-tbl th, .jx-tbl td { padding: 9px 12px; }
  #m-order .jx-msg { max-width: 94%; }
}

/* kotak status LPJ otomatis & tombol unduh */
[data-theme="dark"] #m-order .jx-lpj-auto.ok { background: rgba(74, 222, 128, .12); color: #BBF7D0; border-color: rgba(74, 222, 128, .4); }
[data-theme="dark"] #m-order .jx-lpj-auto.wait { background: rgba(250, 204, 21, .12); color: #FDE68A; border-color: rgba(250, 204, 21, .4); }
#m-order .jx-lpj-auto .ed-ib { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
#m-order .jx-file .fa a.ed-ib { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
#m-order .jx-lpj-auto .ed-ib span { flex: 0 0 auto; min-width: 0; }
@media (max-width: 640px) { #m-order .jx-lpj-auto .ed-ib { width: 100%; } }

/* ============================================================
   v11 — Salin prompt AI (admin: detail pesanan + tombol di tabel)
   ============================================================ */
#m-order .jx-ai { border-color: rgba(230, 168, 23, .55); background: linear-gradient(180deg, rgba(250, 204, 21, .10), transparent 70%), var(--bg-white); }
.jx-ai-info { margin: 0 0 10px; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.jx-ai-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.jx-ai-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(230, 168, 23, .16); color: #7A4B00; font-variant-numeric: tabular-nums; }
.jx-ai-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.jx-aibtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 800; line-height: 1.25; cursor: pointer; overflow: hidden; isolation: isolate; border: 1.5px solid var(--border); background: var(--bg-white); color: var(--text-dark); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, background .25s, border-color .25s, color .25s; }
.jx-aibtn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); transform: translateX(-130%); transition: transform .7s ease; }
.jx-aibtn:hover { transform: translateY(-2px); border-color: var(--gold-medium, #E6A817); box-shadow: 0 10px 22px -10px rgba(230, 168, 23, .7); }
.jx-aibtn:hover::after { transform: translateX(130%); }
.jx-aibtn:active { transform: translateY(0) scale(.96); box-shadow: none; }
.jx-aibtn:focus-visible { outline: 3px solid rgba(230, 168, 23, .55); outline-offset: 2px; }
.jx-aibtn .jx-ai-i { display: inline-flex; font-size: 16px; line-height: 1; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.jx-aibtn:hover .jx-ai-i { transform: scale(1.25) rotate(-8deg); }
.jx-aibtn .jx-ai-ck { position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; display: grid; place-items: center; background: #15803D; color: #fff; font-size: 13px; font-weight: 900; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.jx-aibtn.done { background: #DCFCE7; border-color: #15803D; color: #14532D; }
.jx-aibtn.done .jx-ai-ck { transform: scale(1); } .jx-aibtn.done .jx-ai-i { transform: scale(0); width: 0; margin: 0 -4px; }
.jx-aibtn[aria-busy="true"] { pointer-events: none; opacity: .7; }
.jx-aibtn.jx-ai-main { background: linear-gradient(135deg, #FACC15, #E6A817); border-color: #E6A817; color: #1F1300; box-shadow: 0 8px 20px -10px rgba(230, 168, 23, .9), inset 0 1px 0 rgba(255, 255, 255, .55); }
.jx-aibtn.jx-ai-main:hover { box-shadow: 0 14px 28px -10px rgba(230, 168, 23, .95), inset 0 1px 0 rgba(255, 255, 255, .55); }
.jx-aibtn.jx-ai-main.done { background: linear-gradient(135deg, #86EFAC, #22C55E); border-color: #15803D; color: #052E16; }
.jx-ai-ta { margin-top: 12px; width: 100%; min-height: 220px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 12.5px !important; line-height: 1.55; animation: jx-ai-in .3s both; }
.jx-ai-ta[hidden] { display: none; }
.jx-ai-reset { appearance: none; border: 0; background: none; padding: 6px 2px; margin-top: 6px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.jx-ai-reset:hover { color: #B91C1C; } .jx-ai-reset[hidden] { display: none; }
/* tombol di tabel pesanan */
.jx-aibtn.jx-ai-row { min-height: 36px; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; white-space: nowrap; }
.jx-aibtn.jx-ai-row .jx-ai-ck { left: 8px; width: 18px; height: 18px; margin-top: -9px; font-size: 11px; }
@keyframes jx-ai-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .jx-ai-chip { background: rgba(250, 204, 21, .18); color: #FDE68A; }
[data-theme="dark"] .jx-aibtn { background: #232832; }
[data-theme="dark"] .jx-aibtn.jx-ai-main { background: linear-gradient(135deg, #FACC15, #E6A817); }
[data-theme="dark"] .jx-aibtn.done { background: rgba(74, 222, 128, .16); color: #BBF7D0; border-color: #22C55E; }
@media (max-width: 640px) { .jx-ai-act { grid-template-columns: 1fr; } .jx-aibtn { min-height: 46px; } .jx-aibtn.jx-ai-row { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { .jx-aibtn, .jx-aibtn *, .jx-aibtn::after, .jx-ai-ta { animation: none !important; transition: none !important; } }

/* ============================================================
   v11 — Tombol modern di formulir pelanggan (jasa.html)
   Kembali · Lanjut · Pulihkan isian · Abaikan · Tambah baris · Bayar · Pilih berkas · Ya/Tidak
   ============================================================ */
.jasa .j-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 26px; border-radius: 16px; border: 0; font-size: 15.5px; font-weight: 800; letter-spacing: .005em; line-height: 1.2; text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, #FDE047 0%, #FACC15 38%, #E6A817 100%); color: #1F1300; box-shadow: 0 10px 22px -10px rgba(230, 168, 23, .9), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(161, 98, 7, .25);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease, background .3s ease, color .25s ease, border-color .25s ease; }
.jasa .j-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 100%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: translateX(-130%) skewX(-20deg); }
.jasa .j-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(230, 168, 23, 1), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(161, 98, 7, .25); }
.jasa .j-btn:hover::after { animation: jb-shine .8s ease; }
.jasa .j-btn:active { transform: translateY(0) scale(.96); box-shadow: 0 4px 10px -6px rgba(230, 168, 23, .9), inset 0 2px 4px rgba(161, 98, 7, .3); transition-duration: .08s; }
.jasa .j-btn:focus-visible { outline: 3px solid rgba(230, 168, 23, .6); outline-offset: 3px; }
.jasa .j-btn .ic { display: inline-flex; align-items: center; justify-content: center; font-style: normal; line-height: 1; transition: transform .35s cubic-bezier(.3, 1.7, .5, 1); will-change: transform; }
.jasa .j-btn .ic svg { display: block; width: 20px; height: 20px; }
.jasa .j-btn:disabled, .jasa .j-btn.is-loading { opacity: .8; cursor: progress; transform: none; box-shadow: 0 6px 14px -10px rgba(230, 168, 23, .8); }
.jasa .j-btn:disabled:hover::after { animation: none; }
/* indikator memuat (saat menyimpan draf) */
.jasa .j-btn.is-loading { pointer-events: none; }
.jasa .j-btn.is-loading .ic { display: none; }
.jasa .j-btn.is-loading::before { content: ''; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: jb-spin .7s linear infinite; order: 2; }
/* tombol sekunder (outline) */
.jasa .j-btn.alt { background: var(--j-card, #fff); color: var(--j-ink); border: 2px solid var(--j-line); box-shadow: 0 6px 14px -12px rgba(27, 31, 42, .6); }
.jasa .j-btn.alt::after { background: linear-gradient(100deg, transparent, rgba(250, 204, 21, .35), transparent); }
.jasa .j-btn.alt:hover { border-color: var(--j-gold); background: #FFF8E6; color: #7A5600; box-shadow: 0 14px 26px -14px rgba(230, 168, 23, .9); }
.jasa .j-btn.alt:active { box-shadow: inset 0 2px 5px rgba(230, 168, 23, .3); }
/* KEMBALI: panah bergeser ke kiri, ujung kiri menyala */
.jasa .j-btn.j-back { padding-left: 20px; }
.jasa .j-btn.j-back .ic { animation: jb-nudge-l 2.4s ease-in-out infinite; }
.jasa .j-btn.j-back:hover .ic { animation: none; transform: translateX(-6px); }
/* LANJUT: panah mengajak maju, kilau lewat saat disentuh */
.jasa .j-btn.j-next { padding-right: 20px; min-width: 150px; }
.jasa .j-btn.j-next .ic { animation: jb-nudge-r 2.4s ease-in-out infinite; }
.jasa .j-btn.j-next:hover .ic { animation: none; transform: translateX(6px); }
/* PULIHKAN ISIAN: gelap elegan, ikon putar berlawanan jarum jam */
.jasa .j-btn.j-restore-btn { background: linear-gradient(135deg, #2B3142, #1B1F2A); color: #FDE047; box-shadow: 0 12px 24px -12px rgba(27, 31, 42, .9), inset 0 1px 0 rgba(255, 255, 255, .12); }
.jasa .j-btn.j-restore-btn::after { background: linear-gradient(100deg, transparent, rgba(253, 224, 71, .5), transparent); }
.jasa .j-btn.j-restore-btn:hover { color: #fff; box-shadow: 0 18px 30px -14px rgba(27, 31, 42, 1), 0 0 0 3px rgba(250, 204, 21, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
.jasa .j-btn.j-restore-btn:hover .ic { transform: rotate(-360deg); transition-duration: .7s; }
.jasa .j-btn.j-restore-btn .ic svg { width: 19px; height: 19px; }
/* ABAIKAN: lembut, ikon ✕ berputar, hover kemerahan */
.jasa .j-btn.j-ignore { background: transparent; box-shadow: none; border: 2px dashed var(--j-line); color: var(--j-mut); }
.jasa .j-btn.j-ignore::after { display: none; }
.jasa .j-btn.j-ignore:hover { background: #FEE2E2; border-style: solid; border-color: #FCA5A5; color: #B91C1C; box-shadow: 0 12px 22px -14px rgba(185, 28, 28, .7); }
.jasa .j-btn.j-ignore:hover .ic { transform: rotate(90deg) scale(1.15); }
/* TAMBAH BARIS */
.jasa .j-btn.j-radd { min-height: 46px; padding: 10px 20px; border-radius: 14px; font-size: 14.5px; }
.jasa .j-btn.j-radd .ic { font-size: 18px; font-weight: 900; }
.jasa .j-btn.j-radd:hover .ic { transform: rotate(180deg) scale(1.15); }
/* BAYAR */
.jasa .j-btn.pay { background: linear-gradient(135deg, #22C55E 0%, #15803D 60%, #166534 100%); color: #fff; min-height: 56px; font-size: 17px; box-shadow: 0 14px 28px -12px rgba(21, 128, 61, .9), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(6, 78, 59, .35); animation: jb-pay 2.4s ease-in-out infinite; }
.jasa .j-btn.pay::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); }
.jasa .j-btn.pay:hover { box-shadow: 0 20px 34px -12px rgba(21, 128, 61, 1), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(6, 78, 59, .35); animation: none; }
.jasa .j-btn.pay:hover .ic { transform: scale(1.25) rotate(-10deg); }
.jasa .j-btn.pay:disabled { animation: none; }
/* gaya lama .fx pada tombol bawaan dinonaktifkan agar tidak bentrok */
.jasa .j-btn.fx::before { display: none; } .jasa .j-btn.fx-pulse::after { animation: none; }
/* PILIH BERKAS */
.jasa .j-pick { position: relative; overflow: hidden; isolation: isolate; border-radius: 14px; padding: 11px 18px; border: 2px solid var(--j-gold); background: linear-gradient(180deg, #fff, #FFF8E6); color: var(--j-gold-d); box-shadow: 0 8px 18px -14px rgba(230, 168, 23, .9); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s, background .25s, color .25s; }
.jasa .j-pick:hover { transform: translateY(-3px); background: linear-gradient(135deg, #FDE047, #E6A817); color: #1F1300; box-shadow: 0 16px 26px -14px rgba(230, 168, 23, 1); }
.jasa .j-pick:active { transform: scale(.96); }
.jasa .j-pick:focus-visible { outline: 3px solid rgba(230, 168, 23, .6); outline-offset: 3px; }
/* YA / TIDAK */
.jasa .j-seg { padding: 4px; gap: 4px; border-radius: 14px; background: #F1F3F7; border: 0; box-shadow: inset 0 1px 3px rgba(27, 31, 42, .12); }
.jasa .j-seg button { border-radius: 11px; padding: 10px 20px; background: transparent; transition: transform .2s cubic-bezier(.3, 1.7, .5, 1), background .25s, color .25s, box-shadow .25s; }
.jasa .j-seg button:hover { background: rgba(250, 204, 21, .3); }
.jasa .j-seg button:active { transform: scale(.93); }
.jasa .j-seg button[aria-pressed="true"] { background: linear-gradient(135deg, #FDE047, #E6A817); color: #1F1300; box-shadow: 0 6px 14px -8px rgba(230, 168, 23, 1); animation: jb-pick .35s cubic-bezier(.3, 1.8, .5, 1); }
/* gelombang sentuh (diberi lewat JS) */
.j-rpl { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; background: rgba(255, 255, 255, .55); transform: scale(0); animation: jb-rpl .6s ease-out forwards; }
.jasa .j-btn.alt .j-rpl, .jasa .j-pick .j-rpl { background: rgba(230, 168, 23, .35); }
/* tata letak */
.jasa .j-nav { gap: 12px; align-items: stretch; }
.jasa .j-rs-a { display: flex; flex-wrap: wrap; gap: 10px; }
.jasa .j-rs-a .j-btn { flex: 1 1 160px; padding: 11px 18px; min-height: 48px; font-size: 14.5px; }
.jasa .j-restore { border-radius: 18px; background: linear-gradient(135deg, #FFF8E6, #FFFDF6); box-shadow: 0 14px 30px -20px rgba(230, 168, 23, .9); }
@media (max-width: 640px) {
  .jasa .j-nav { gap: 10px; } .jasa .j-nav .j-btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; } .jasa .j-nav .j-btn.j-next { flex: 1.4 1 0; }
  .jasa .j-rs-a .j-btn { flex: 1 1 100%; } .jasa .j-btn { min-height: 52px; }
}
@keyframes jb-shine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(300%) skewX(-20deg); } }
@keyframes jb-spin { to { transform: rotate(360deg); } }
@keyframes jb-nudge-r { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(5px); } 90% { transform: translateX(1px); } }
@keyframes jb-nudge-l { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(-5px); } 90% { transform: translateX(-1px); } }
@keyframes jb-pay { 0%, 100% { box-shadow: 0 14px 28px -12px rgba(21, 128, 61, .9), 0 0 0 0 rgba(34, 197, 94, .5), inset 0 1px 0 rgba(255, 255, 255, .3); } 50% { box-shadow: 0 14px 28px -12px rgba(21, 128, 61, .9), 0 0 0 12px rgba(34, 197, 94, 0), inset 0 1px 0 rgba(255, 255, 255, .3); } }
@keyframes jb-pick { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes jb-rpl { to { transform: scale(1); opacity: 0; } }
[data-theme="dark"] .jasa .j-btn.alt { background: #232832; color: var(--j-ink); border-color: #3A414E; box-shadow: none; }
[data-theme="dark"] .jasa .j-btn.alt:hover { background: rgba(250, 204, 21, .14); color: #FDE68A; border-color: var(--j-gold); }
[data-theme="dark"] .jasa .j-btn.j-restore-btn { background: linear-gradient(135deg, #FDE047, #E6A817); color: #1F1300; }
[data-theme="dark"] .jasa .j-btn.j-ignore { background: transparent; border-color: #4A4430; color: #A3ABBA; }
[data-theme="dark"] .jasa .j-btn.j-ignore:hover { background: rgba(248, 113, 113, .16); color: #FECACA; border-color: #F87171; }
[data-theme="dark"] .jasa .j-pick { background: #232832; color: #FDE68A; }
[data-theme="dark"] .jasa .j-pick:hover { background: linear-gradient(135deg, #FDE047, #E6A817); color: #1F1300; }
[data-theme="dark"] .jasa .j-seg { background: #12151B; box-shadow: none; }
[data-theme="dark"] .jasa .j-restore { background: rgba(250, 204, 21, .12); }
@media (prefers-reduced-motion: reduce) { .jasa .j-btn, .jasa .j-btn *, .jasa .j-btn::after, .jasa .j-pick, .jasa .j-seg button { animation: none !important; transition: none !important; } .j-rpl { display: none; } }

/* v12 — Admin: Harga Video per Durasi */
.jx-vp { margin-top: 16px; }
.jx-vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; }
.jx-vp-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jx-vp-l { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.jx-vp-f .jx-tbl-in { width: 100%; box-sizing: border-box; }
.jx-vp-h { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.jx-vp-pv { border: 1px dashed rgba(230, 168, 23, .7); border-radius: 14px; padding: 12px; background: rgba(250, 204, 21, .07); }
.jx-vp-pvh { display: block; font-size: 13px; margin-bottom: 8px; }
.jx-vp-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; padding: 2px; }
.jx-vp-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 84px; padding: 6px 10px; border-radius: 10px; background: var(--bg-white); border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; animation: jx-ai-in .25s both; }
.jx-vp-chip b { font-size: 13px; color: var(--text-dark); } .jx-vp-chip.base { border-color: var(--gold-medium, #E6A817); background: rgba(250, 204, 21, .22); }
.jx-vp-msg { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #FEE2E2; color: #7F1D1D; font-size: 13px; font-weight: 700; } .jx-vp-msg[hidden] { display: none; }
[data-theme="dark"] .jx-vp-chip { background: #232832; } [data-theme="dark"] .jx-vp-msg { background: rgba(248, 113, 113, .16); color: #FECACA; }
@media (max-width: 640px) { .jx-vp-chip { flex: 1 1 28%; } }

/* ============================================================
   v13 — Bagikan & salin link halaman jasa (jasa-share.js) + tombol di header
   ============================================================ */
.jsh-ov { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 18, 26, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; font-family: var(--j-font, 'Plus Jakarta Sans', system-ui, sans-serif); }
.jsh-ov.on { opacity: 1; }
.jsh-box { width: 100%; max-width: 460px; max-height: 92vh; overflow: auto; background: var(--j-card, #fff); color: var(--j-ink, #1B1F2A); border-radius: 22px; padding: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55); transform: translateY(18px) scale(.97); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.jsh-ov.on .jsh-box { transform: none; }
.jsh-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jsh-hd h3 { margin: 0; font-size: 18px; font-weight: 800; }
.jsh-x { appearance: none; border: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(127, 127, 127, .15); color: inherit; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.jsh-x:hover { transform: rotate(90deg); background: #FEE2E2; color: #B91C1C; }
.jsh-sub { margin: 6px 0 14px; font-size: 13.5px; opacity: .75; line-height: 1.5; }
.jsh-f { display: block; margin-bottom: 12px; } .jsh-l { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.jsh-sel, .jsh-in, .jsh-ta { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: inherit; background: rgba(127, 127, 127, .09); border: 2px solid rgba(127, 127, 127, .25); border-radius: 12px; padding: 10px 12px; }
.jsh-ta { resize: vertical; line-height: 1.5; min-height: 90px; }
.jsh-sel:focus, .jsh-in:focus, .jsh-ta:focus { outline: none; border-color: #E6A817; box-shadow: 0 0 0 3px rgba(230, 168, 23, .25); }
.jsh-link { display: flex; gap: 8px; margin-bottom: 12px; } .jsh-link .jsh-in { flex: 1; min-width: 0; font-weight: 700; }
.jsh-copy { position: relative; overflow: hidden; appearance: none; border: 0; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border-radius: 12px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; color: #1F1300; background: linear-gradient(135deg, #FDE047, #E6A817); box-shadow: 0 8px 18px -10px rgba(230, 168, 23, .95); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, background .25s; }
.jsh-copy:hover { transform: translateY(-2px); } .jsh-copy:active { transform: scale(.94); }
.jsh-copy svg { transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); } .jsh-copy:hover svg { transform: rotate(-8deg) scale(1.15); }
.jsh-copy.done { background: linear-gradient(135deg, #86EFAC, #22C55E); color: #052E16; } .jsh-copy.done svg { transform: scale(1.2); }
.jsh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.jsh-t { appearance: none; border: 1.5px solid rgba(127, 127, 127, .25); background: rgba(127, 127, 127, .06); color: inherit; font: inherit; border-radius: 16px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, border-color .2s; }
.jsh-t:hover { transform: translateY(-4px); box-shadow: 0 14px 22px -14px rgba(0, 0, 0, .45); } .jsh-t:active { transform: scale(.95); }
.jsh-ti { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: #64748B; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); } .jsh-t:hover .jsh-ti { transform: scale(1.12) rotate(-6deg); }
.jsh-tl { font-size: 12.5px; font-weight: 800; text-align: center; line-height: 1.2; }
.jsh-t.wa .jsh-ti { background: #25D366; } .jsh-t.tg .jsh-ti { background: #229ED9; } .jsh-t.fb .jsh-ti { background: #1877F2; } .jsh-t.xx .jsh-ti { background: #111827; } .jsh-t.ml .jsh-ti { background: #EA580C; } .jsh-t.cp .jsh-ti { background: #E6A817; color: #1F1300; } .jsh-t.sh .jsh-ti { background: #7C3AED; }
.jsh-t:focus-visible, .jsh-copy:focus-visible, .jsh-x:focus-visible { outline: 3px solid rgba(230, 168, 23, .6); outline-offset: 2px; }
.jsh-toast { position: fixed; left: 50%; top: 22px; z-index: 10000; transform: translate(-50%, -20px); opacity: 0; padding: 11px 18px; border-radius: 999px; font: 800 14px/1.2 var(--j-font, system-ui, sans-serif); background: #14532D; color: #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .5); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; pointer-events: none; max-width: 90vw; text-align: center; }
.jsh-toast.on { transform: translate(-50%, 0); opacity: 1; } .jsh-toast.bad { background: #7F1D1D; }
[data-theme="dark"] .jsh-box { background: #1B1F27; color: #F1F3F7; } [data-theme="dark"] .jsh-sel option { background: #1B1F27; }
@media (max-width: 480px) { .jsh-ov { align-items: flex-end; padding: 0; } .jsh-box { max-width: none; border-radius: 22px 22px 0 0; padding: 18px 16px 22px; } .jsh-grid { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .jsh-ov, .jsh-box, .jsh-t, .jsh-ti, .jsh-copy, .jsh-copy svg, .jsh-toast, .jsh-x { transition: none !important; } }
/* tombol Bagikan di header halaman pelanggan */
.j-top-r { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.j-top { gap: 8px; } .j-top .j-share-btn { margin-left: auto; appearance: none; font-family: inherit; cursor: pointer; }
.j-top .j-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 999px; font-weight: 800; font-size: 14px; color: #1F1300; background: linear-gradient(135deg, #FDE047, #E6A817); border: 1.5px solid #E6A817; box-shadow: 0 8px 18px -10px rgba(230, 168, 23, .95); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s; }
.j-top .j-share-btn svg { transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.j-top .j-share-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgba(230, 168, 23, 1); } .j-top .j-share-btn:hover svg { transform: rotate(-12deg) scale(1.2); } .j-top .j-share-btn:active { transform: scale(.95); }
.j-top .j-share-btn:focus-visible { outline: 3px solid rgba(230, 168, 23, .6); outline-offset: 2px; }
@media (max-width: 400px) { .j-top .j-share-btn span { display: none; } .j-top .j-share-btn { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .j-top .j-share-btn, .j-top .j-share-btn svg { transition: none !important; } }

/* v14 — pengaturan prompt Video Animasi di detail pesanan */
.jx-ai-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0 0 12px; }
.jx-ai-cf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jx-ai-cf > span { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.jx-ai-cf .ed-sel { width: 100%; box-sizing: border-box; border-radius: 12px; }
.jx-ai-scn { background: linear-gradient(135deg, #FDE047, #E6A817) !important; color: #1F1300 !important; }