/* =====================================================================
   CONTACT & FAQ
   ===================================================================== */
.cf-section {
  /* Catatan cleanup: --cf-fs-box-title & --cf-fs-desc (ukuran) dihapus,
     dulu didefinisikan di :root tapi tidak pernah dipakai (dead code).
     Var --cf-fw-* juga dihapus krn nilainya sudah di-inline langsung
     memakai token --fw-* global, mengurangi satu lapis indirection. */
  --cf-fs-title: var(--fs-judul1);
  --cf-fs-label: var(--fs-judul2);
  --cf-fs-body: var(--fs-text1);
  width: 100%;
  background: transparent;
  font-family: var(--font-body);
}

@keyframes Cnct-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

.cf-container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px 56px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.cf-hdr { text-align: center; max-width: 800px; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 20px 0 0; margin-bottom: 40px; }
.cf-judul { font-size: var(--cf-fs-title); font-weight: var(--fw-black); color: var(--primary); margin: 0; padding: 0; text-align: center; line-height: var(--lh-tight); }
.cf-judul::after { content: ''; display: block; height: 1px; width: 120px; margin: 6px auto; background: linear-gradient(90deg, transparent 0%, var(--primary-border) 20%, var(--primary) 50%, var(--primary-border) 80%, transparent 100%); }
.cf-hdr-desc { font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-sec); margin: 0; text-align: center; }
.cf-card { background: var(--surface); border-radius: var(--card-radius); overflow: hidden; display: flex; align-items: stretch; width: 100%; transition: box-shadow 0.3s ease, transform 0.3s ease; box-shadow: var(--card-shadow); animation: Cnct-fade-up 0.6s var(--ease-standard) both; animation-delay: 0.05s; }
.cf-card:hover { transform: translateY(var(--card-lift)); box-shadow: var(--card-shadow-hover); }
.cf-left { flex: 1 1 0; padding: 40px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--space-4); position: relative; z-index: 1; min-width: 0; }
.cf-tagline { font-size: var(--cf-fs-label); font-weight: var(--fw-bold); letter-spacing: 1.5px; color: var(--primary); text-transform: uppercase; margin: 0; }
.cf-body-text { font-size: var(--cf-fs-body); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-sec); margin: 0; text-align: left; }
.cf-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-tombol); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-decoration: none; border-radius: var(--radius-pill); padding: 10px 22px; background: var(--surface); border: none; box-shadow: var(--card-shadow); transition: var(--transition-hover); white-space: nowrap; cursor: pointer; color: var(--primary); line-height: var(--lh-tight); }
.cf-btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.3s ease; }
.cf-btn:hover { box-shadow: var(--shadow-pressed); transform: translateY(2px); }
.cf-btn:active { box-shadow: var(--shadow-inset) !important; transform: translateY(2px) !important; }
.cf-btn:hover svg { transform: translateX(3px); }
.cf-divider { height: 1px; background: var(--primary-dim); width: 100%; margin: var(--space-2) 0; }
.cf-faq-label { font-size: var(--cf-fs-label); font-weight: var(--fw-bold); letter-spacing: 1.5px; color: var(--primary); text-transform: uppercase; margin: 0; }
.cf-faq-wrap { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.cf-faq-item { border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--card-shadow); transition: var(--transition-hover); }
.cf-faq-item:hover { box-shadow: 2px 2px 4px var(--bg-shadow-dark), -2px -2px 4px var(--bg-shadow-light); transform: translateY(2px); }
.cf-faq-item.open { box-shadow: inset 4px 4px 8px var(--bg-shadow-dark), inset -3px -3px 6px var(--bg-shadow-light) !important; transform: translateY(2px) !important; }
.cf-faq-btn { width: 100%; background: none; border: none; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; font-family: var(--font-body); font-size: var(--fs-text2); font-weight: var(--fw-semibold); color: var(--primary); text-align: left; line-height: var(--lh-snug); transition: color 0.25s; }
.cf-faq-item.open .cf-faq-btn { color: var(--primary); }
.cf-faq-icon { width: var(--icon-md); height: var(--icon-md); min-width: var(--icon-md); border-radius: var(--radius-circle); border: 1.5px solid var(--primary-border); position: relative; transition: all 0.35s var(--ease-standard); flex-shrink: 0; }
.cf-faq-icon::before, .cf-faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--primary); border-radius: 2px; transition: all 0.35s var(--ease-standard); }
.cf-faq-icon::before { width: 8px; height: 1.5px; transform: translate(-50%,-50%); }
.cf-faq-icon::after { width: 1.5px; height: 8px; transform: translate(-50%,-50%); }
.cf-faq-item.open .cf-faq-icon { background: var(--primary-dim); border-color: var(--primary); transform: rotate(45deg); }
.cf-faq-answer { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s var(--ease-standard), opacity 0.3s ease; }
.cf-faq-item.open .cf-faq-answer { opacity: 1; }
.cf-faq-answer p { font-size: var(--cf-fs-body); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-sec); margin: 0; padding: 0 22px 20px; text-align: left; }

@media (min-width: 1441px) {
  .cf-container { padding: 0 100px 40px; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .cf-container { padding: 0 50px 40px; }
}
@media (max-width: 1024px) {
  .cf-container { padding: 0 var(--space-6) var(--space-6); }
  .cf-hdr { margin-bottom: var(--space-6); }
}
@media (max-width: 768px) {
  .cf-left { padding: 28px var(--space-6); }
  .cf-hdr { margin-bottom: var(--space-5); }
}
@media (max-width: 480px) {
  .cf-container { padding: 0 20px 20px; }
  .cf-card { border-radius: var(--card-radius-mobile); }
  .cf-left { border-right: none; padding: 20px var(--space-4); align-items: flex-start; text-align: left; }
  .cf-actions { justify-content: flex-start; }
  .cf-btn { padding: 8px 18px; }
  .cf-faq-item { border-radius: var(--radius-sm); }
  .cf-faq-btn { padding: var(--space-3) 14px; gap: var(--space-2); }
  .cf-faq-answer p { padding: 0 14px var(--space-3); }
  .cf-hdr { margin-bottom: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-card { animation: none; }
  .cf-card:hover, .cf-faq-item:hover { transform: none; }
  .cf-faq-answer { transition: none; }
}