/* ==========================================================================
   MODULE: PRE-FOOTER CTA (LIGHT 60-30-10 TRANSITION BEFORE DARK FOOTER)
   60% Base      : #f8fafc (Clean Slate Light Canvas)
   30% Secondary : #ffffff (Elevated Form Card), #0f172a & #64748b (Typography)
   10% Accent    : #1b43fe (Royal Blue Brand Anchor)
   ========================================================================== */

/* 1. SECTION WRAPPER (60% Light Base Canvas) */
.section-prefooter-cta {
  background-color: #f8fafc !important; /* Terang bersih, memutus kepekatan dark background */
  padding-top: var(--_sizes---spacing--spacing-massive, 5rem) !important;
  padding-bottom: var(--_sizes---spacing--spacing-massive, 5rem) !important;
  position: relative !important;
  z-index: 3 !important;
  border-top: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
}

/* 2. GRID 2 KOLOM */
.nx-cta-box {
  display: grid !important;
  grid-template-columns: 1fr 1.08fr !important;
  gap: clamp(2.5rem, 5vw, 4.5rem) !important;
  align-items: center !important;
}

/* --- SISI KIRI: Headline & Value Proposition --- */
.nx-cta-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* Pill Badge Versi Light */
.nx-cta-info .nx-header-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(27, 67, 254, 0.08) !important;
  border: 1px solid rgba(27, 67, 254, 0.2) !important;
  border-radius: 9999px !important;
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #1b43fe !important;
  width: fit-content !important;
}

.nx-cta-info .nx-badge-dot {
  width: 6px !important;
  height: 6px !important;
  background-color: #1b43fe !important;
  border-radius: 50% !important;
}

/* 30% Charcoal Headline & Lead */
.nx-cta-info .cta-heading {
  color: #0f172a !important; /* Deep Slate / Hampir Hitam */
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: clamp(2rem, 3.8vw, 3rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
}

.nx-cta-info .nx-highlight {
  color: #1b43fe !important; /* 10% Aksen */
}

.nx-cta-info .cta-lead {
  color: #475569 !important; /* 30% Neutral Text */
  font-family: var(--font-body, "Aspekta", sans-serif) !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Kontak Cepat Kiri */
.nx-cta-direct-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  margin-top: 0.5rem !important;
}

.nx-cta-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.nx-cta-icon-box {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(27, 67, 254, 0.1) !important;
  border: 1px solid rgba(27, 67, 254, 0.25) !important;
  color: #1b43fe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.nx-cta-label {
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #64748b !important;
  text-transform: uppercase !important;
}

.nx-cta-val {
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 200ms ease !important;
}

.nx-cta-val:hover {
  color: #1b43fe !important;
}

/* --- SISI KANAN: Card Form Bersih (30% Secondary Structured Container) --- */
.nx-cta-form-card {
  background: #ffffff !important; /* Kartu putih tebal berdiri kokoh di atas latar slate */
  border-radius: 20px !important;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.05) !important;
  border: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
}

.nx-cta-form-header {
  margin-bottom: 1.5rem !important;
}

.nx-cta-form-header .form-title {
  color: #0f172a !important;
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.35rem 0 !important;
}

.nx-cta-form-header .form-subtitle {
  color: #64748b !important;
  font-family: var(--font-body, "Aspekta", sans-serif) !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Field Formulir */
.nx-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
  margin: 0 !important;
}

.nx-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

.nx-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}

.nx-form-label {
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 0.2rem !important;
  display: block !important;
}

.nx-form input.nx-form-input,
.nx-form select.nx-form-input,
.nx-form textarea.nx-form-input,
.nx-form-input {
  min-height: 50px !important;
  padding: 0.85rem 1.15rem !important;
  font-family: var(--font-body, "Aspekta", sans-serif) !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  outline: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: all 200ms ease-in-out !important;
  -webkit-appearance: none !important;
}

/* 10% Focus Ring */
.nx-form input.nx-form-input:focus,
.nx-form select.nx-form-input:focus,
.nx-form textarea.nx-form-input:focus {
  border-color: #1b43fe !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(27, 67, 254, 0.12) !important;
}

.nx-form-input::placeholder {
  color: #94a3b8 !important;
  font-size: 0.9rem !important;
}

select.nx-form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b43fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1.15rem center !important;
  padding-right: 2.75rem !important;
  cursor: pointer !important;
}

textarea.nx-form-input {
  min-height: 100px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

/* 3. TOMBOL CTA (10% Brand Focal Point) */
.nx-btn.nx-btn-primary.nx-btn-block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0.95rem 1.5rem !important;
  background-color: #1b43fe !important;
  color: #ffffff !important;
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: none !important;
  margin-top: 0.5rem !important;
  cursor: pointer !important;
  transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease !important;
  box-shadow: 0 4px 14px rgba(27, 67, 254, 0.3) !important;
}

.nx-btn.nx-btn-primary.nx-btn-block:hover {
  background-color: #1435cc !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(27, 67, 254, 0.42) !important;
}

.nx-form-guarantee {
  font-family: var(--font-body, "Aspekta", sans-serif) !important;
  font-size: 0.78rem !important;
  color: #64748b !important;
  text-align: center !important;
  display: block !important;
}

/* Responsif Mobile & Tablet */
@media screen and (max-width: 991px) {
  .nx-cta-box {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
}

@media screen and (max-width: 640px) {
  .nx-form-row {
    grid-template-columns: 1fr !important;
  }
  .nx-cta-form-card {
    padding: 1.5rem !important;
  }
}