/* LIGHTWEIGHT DARK BACKGROUND FINAL
   Fokus: semua background jadi dark solid, efek premium berat dimatikan.
   Tidak mengubah logo, layout, tombol utama, atau logic order.
*/
:root {
  --khf-bg: #070a12;
  --khf-bg-2: #0b1020;
  --khf-card: rgba(15, 23, 42, .94);
  --khf-card-2: rgba(17, 24, 39, .96);
  --khf-border: rgba(148, 163, 184, .18);
  --khf-text: #f8fafc;
  --khf-muted: #aeb8c8;
  --khf-orange: #f59e0b;
}

html,
body {
  background: var(--khf-bg) !important;
  background-image: none !important;
  color: var(--khf-text) !important;
  min-height: 100% !important;
}

body::before,
body::after,
html::before,
html::after,
.khf3d-stage,
.khf3d-shape,
.khf-real-3d-bg,
.live-3d-bg,
.real-3d-bg,
.premium-bg,
.animated-bg,
.bg-3d,
.bg-live,
.bg-orb,
.orb,
.glow,
.light-effect,
.aurora,
.particles,
.particle,
.stars,
.star,
.mesh-bg,
.gradient-bg,
.orange-home-page::before,
.orange-home-page::after,
.storefront-body::before,
.storefront-body::after,
.page-shell::before,
.page-shell::after,
.po-page::before,
.po-page::after,
.auth-page::before,
.auth-page::after,
.invoice-page::before,
.invoice-page::after,
.checkout-page::before,
.checkout-page::after,
.success-page::before,
.success-page::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}

body,
.orange-home-page,
.storefront-body,
.page-shell,
.po-page,
.auth-page,
.admin-body,
.user-dashboard-page,
.invoice-page,
.checkout-page,
.success-page,
.products-page,
.manual-products-page,
.scripts-page,
main,
.wrapper,
.container,
.app,
.app-shell,
.content,
.page,
.section,
.sf-shell,
.pd-shell,
.po-shell,
.user-shell,
.admin-shell,
.auth-shell {
  background: var(--khf-bg) !important;
  background-image: none !important;
}

/* Kartu tetap dark premium, tapi tanpa blur berat. */
.card,
.panel,
.box,
.admin-card,
.auth-card,
.auth-form-wrap,
.af-wrap,
.detail-card,
.success-header-card,
.invoice-detail-card,
.checkout-product-info,
.checkout-form-card,
.qris-container,
.po-card,
.po-info,
.po-pkg-card,
.product-card,
.sf-product-card,
.pd-product-card,
.orange-product-card,
.orange-info-card,
.orange-live-card,
.user-profile-card,
.user-stat-live,
.user-action-card-live,
.user-order-live-card,
.order-item,
.table-wrap,
.form-card,
.live-card,
.khf-menu-panel,
.cs-menu,
.cs-panel {
  background: var(--khf-card) !important;
  background-image: none !important;
  border-color: var(--khf-border) !important;
  color: var(--khf-text) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

/* Elemen input/tabel/detail agar tetap kebaca di background dark. */
input,
select,
textarea,
.table,
table,
tr,
td,
th,
.detail-row,
.info-row,
.invoice-row,
.success-row,
.order-row,
.form-control,
.form-input {
  background-color: rgba(15, 23, 42, .88) !important;
  border-color: var(--khf-border) !important;
  color: var(--khf-text) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder,
.text-muted,
.muted,
.small,
label,
.desc,
.description,
.subtitle,
.note {
  color: var(--khf-muted) !important;
}

/* Navbar dan bottom nav tetap gelap, tombol orange tetap hidup. */
.navbar,
.header,
.topbar,
.bottom-nav,
.sf-bottom-nav,
.user-bottom-nav,
.mobile-bottom-nav,
.khf-bottom-nav {
  background: rgba(7, 10, 18, .98) !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, .16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .35) !important;
}

button,
.btn,
.button,
.primary-btn,
.btn-primary,
a.btn-primary,
.checkout-btn,
.order-btn,
.pay-btn,
.open-panel-btn {
  will-change: auto !important;
}

/* Matikan animasi berat, bukan semua hover. */
.khf3d-tilt,
.khf-tilt-active,
[data-khf3d-tilt],
.pd-product-card,
.orange-product-card,
.orange-info-card,
.po-pkg-card,
.sf-product-card,
.card {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease !important;
  transform: none !important;
}

@media (max-width: 768px), (pointer: coarse) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .card,
  .panel,
  .box,
  .product-card,
  .sf-product-card,
  .pd-product-card,
  .orange-product-card,
  .po-pkg-card,
  .detail-card,
  .invoice-detail-card,
  .checkout-form-card,
  .qris-container {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
  }
}