/* black-clear-final.css
   Final ringan: semua background dibuat gelap/black solid, login & register dibuat lebih jelas.
   Tidak mengubah logic order/payment/API. */

:root{
  --khf-black: #03050a;
  --khf-black-2: #060913;
  --khf-panel: rgba(12, 18, 31, .98);
  --khf-panel-2: rgba(18, 26, 42, .96);
  --khf-border: rgba(226, 232, 240, .16);
  --khf-border-2: rgba(226, 232, 240, .24);
  --khf-text: #f8fafc;
  --khf-muted: #b7c0cf;
  --khf-soft: #8994a7;
  --khf-orange: #f59e0b;
  --khf-orange-2: #f97316;
  --khf-blue: #818cf8;
}

/* === GLOBAL DARK SOLID === */
html,
body{
  background: var(--khf-black) !important;
  background-image: none !important;
  color: var(--khf-text) !important;
}

body::before,
body::after,
html::before,
html::after,
.storefront-body::before,
.storefront-body::after,
.orange-home-page::before,
.orange-home-page::after,
.product-page-body::before,
.product-page-body::after,
.invoice-page::before,
.invoice-page::after,
.success-page::before,
.success-page::after,
.user-dashboard-page::before,
.user-dashboard-page::after,
.sf-bg-live,
.sf-bg-live *,
.vfx-aurora,
.vfx-orb,
#vfx-canvas,
#vfx-cursor-dot,
#vfx-cursor-ring{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
}

/* Buang background premium/ungu yang bikin belang */
.storefront-body,
.orange-home-page,
.product-page-body,
.invoice-page,
.success-page,
.user-dashboard-page,
.orders-page,
.page-shell,
.store-shell,
.auth-page,
.admin-page,
.po-page{
  background: var(--khf-black) !important;
  background-image: none !important;
}

/* Bagian utama tetap dark, bukan purple/gradient berat */
main,
section,
.sf-hero,
.hero,
.auth-right,
.auth-left,
.al-right,
.al-left,
.user-hero-live,
.product-hero,
.checkout-hero,
.invoice-hero,
.success-hero{
  background-color: transparent !important;
  background-image: none !important;
}

/* Card tetap kelihatan tapi ringan */
.card,
.sf-product-card,
.product-card,
.checkout-card,
.invoice-wrap,
.invoice-wrap-v2,
.success-card,
.panel-order-card,
.po-card,
.po-box,
.form-card,
.table-wrap,
.user-card,
.user-orders-section,
.dash-progress-card,
.manual-card,
.script-card,
.auth-panel,
.al-panel{
  background: var(--khf-panel) !important;
  background-image: none !important;
  border-color: var(--khf-border) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Navbar bawah tetap hitam jelas */
.sf-bottom-nav,
.user-bottom-nav,
.bottom-nav,
.mobile-bottom-nav,
.khf-bottom-nav{
  background: rgba(4, 6, 10, .96) !important;
  background-image: none !important;
  border: 1px solid rgba(245,158,11,.22) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.48) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === AUTH LOGIN & REGISTER CLEAR === */
body:has(.auth-right),
body:has(.af-wrap),
body:has(.auth-form-wrap){
  min-height: 100vh !important;
  background:
    linear-gradient(180deg, #03050a 0%, #050913 45%, #03050a 100%) !important;
  background-attachment: fixed !important;
}

.auth-left,
.auth-right{
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.auth-left::before,
.auth-left::after,
.al-left::before,
.al-left::after{
  display: none !important;
}

.auth-left-body,
.al-body{
  background: rgba(8, 13, 24, .82) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 28px !important;
  padding: 28px !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.32) !important;
}

.auth-form-wrap,
.af-wrap{
  width: min(100%, 430px) !important;
  padding: 30px 28px !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(9,14,25,.98)) !important;
  border: 1px solid rgba(226,232,240,.16) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.46) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.auth-form-title,
.af-title{
  color: #ffffff !important;
  font-size: clamp(28px, 5vw, 36px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

.auth-form-sub,
.af-sub,
.auth-foot-link,
.af-foot,
.af-hint{
  color: rgba(226,232,240,.70) !important;
}

.auth-form-sub a,
.af-sub a,
.auth-foot-link a,
.af-foot a{
  color: #fbbf24 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.auth-label,
.af-label{
  color: rgba(241,245,249,.82) !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
}

.auth-field,
.af-field,
.auth-input,
.al-input,
.auth-right input,
.auth-right textarea,
.auth-right select{
  min-height: 54px !important;
  background: rgba(23,31,49,.98) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(226,232,240,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-weight: 700 !important;
}

.auth-field::placeholder,
.af-field::placeholder,
.auth-right input::placeholder{
  color: rgba(226,232,240,.54) !important;
  opacity: 1 !important;
}

.auth-field:focus,
.af-field:focus,
.auth-right input:focus,
.auth-right textarea:focus,
.auth-right select:focus{
  border-color: rgba(245,158,11,.70) !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.13) !important;
  outline: none !important;
}

.auth-input-icon .ic,
.af-icon .ic,
.ic{
  stroke: rgba(226,232,240,.62) !important;
}

.captcha-pill{
  min-height: 54px !important;
  background: rgba(30,41,59,.98) !important;
  border: 1px solid rgba(226,232,240,.18) !important;
  color: #fbbf24 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.captcha-dot{
  background: #fbbf24 !important;
}

.captcha-check{
  background: rgba(129,140,248,.28) !important;
}

.auth-submit,
.af-btn{
  min-height: 56px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 45%, #f97316 100%) !important;
  color: #0b0b0b !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 34px rgba(249,115,22,.24) !important;
}

.auth-submit:hover,
.af-btn:hover{
  transform: none !important;
  filter: brightness(1.04) !important;
}

.google-btn,
.google-btn-v2{
  min-height: 52px !important;
  background: rgba(23,31,49,.96) !important;
  color: rgba(248,250,252,.86) !important;
  border: 1px solid rgba(226,232,240,.16) !important;
  box-shadow: none !important;
}

.auth-divider,
.af-divider{
  color: rgba(226,232,240,.52) !important;
}

.auth-divider::before,
.auth-divider::after,
.af-divider::before,
.af-divider::after{
  background: rgba(226,232,240,.12) !important;
}

.auth-error,
.af-error{
  background: rgba(127,29,29,.28) !important;
  border-color: rgba(248,113,113,.32) !important;
  color: #fecaca !important;
}

/* Mobile: halaman login/register lebih rapi dan tidak terlalu mepet */
@media (max-width: 780px){
  body:has(.auth-right),
  body:has(.af-wrap),
  body:has(.auth-form-wrap){
    display: block !important;
    min-height: 100svh !important;
    padding: 0 !important;
    background: #03050a !important;
  }

  .auth-left{
    display: none !important;
  }

  .auth-right{
    min-height: 100svh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 52px 18px 132px !important;
    overflow: visible !important;
  }

  .auth-form-wrap,
  .af-wrap{
    max-width: 100% !important;
    padding: 24px 20px !important;
    border-radius: 22px !important;
  }

  .auth-form-title,
  .af-title{
    font-size: 32px !important;
    margin-bottom: 6px !important;
  }

  .auth-form-sub,
  .af-sub{
    font-size: 15px !important;
    margin-bottom: 26px !important;
  }

  .auth-label,
  .af-label{
    font-size: 12px !important;
  }

  .captcha-row{
    gap: 10px !important;
    grid-template-columns: auto 1fr !important;
  }

  .captcha-pill{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* HP kecil: captcha tetap muat */
@media (max-width: 360px){
  .auth-right{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .auth-form-wrap,
  .af-wrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .captcha-row{
    grid-template-columns: 1fr !important;
  }
}

/* Matikan animasi berat */
*,
*::before,
*::after{
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}