.elementor-254 .elementor-element.elementor-element-650ee48{--display:flex;}.elementor-254 .elementor-element.elementor-element-f0b8fcb{width:100%;max-width:100%;}@media(min-width:768px){.elementor-254 .elementor-element.elementor-element-650ee48{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-f0b8fcb *//* ========================================================
   CONTACT PAGE - ROYAL MIDNIGHT GROWTH SYSTEM
   ======================================================== */
:root {
  --brand-purple: #7C3AED;
  --brand-emerald: #10B981; /* Sesuai dengan bg-brand-emerald di tombol React */
  --bg-obsidian: #11;
  --bg-slate: #0C0C0C;
  --text-white: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.4);
  --border-color: rgba(255, 255, 255, 0.05);
  --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.section-contact-page {
  background-color: var(--bg-obsidian);
  min-height: 100vh;
  padding: 128px 0 96px 0;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  color: var(--text-white);
}

.contact-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: flex-start; }
@media(min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 96px; } }

/* ===== INFO SIDE ===== */
.info-header-anim { animation: fadeSlideRight 0.6s ease-out forwards; }
@keyframes fadeSlideRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

.contact-tagline { color: var(--brand-purple); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4em; display: block; margin-bottom: 24px; }
.contact-headline { font-size: clamp(48px, 6vw, 72px); font-weight: 300; line-height: 0.9; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 24px; }
.hero-italic { font-family: serif; font-style: italic; color: rgba(255,255,255,0.4); }
.contact-desc { font-size: 18px; color: rgba(255,255,255,0.5); font-weight: 300; line-height: 1.6; max-width: 450px; margin-bottom: 64px; }

.group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(255,255,255,0.2); font-weight: 700; display: block; margin-bottom: 24px; }
.contact-details-group { margin-bottom: 48px; }
.contact-links { display: flex; flex-direction: column; gap: 24px; }
.contact-link-item { display: flex; align-items: center; gap: 24px; text-decoration: none; }

/* Interactive Circles */
.icon-circle { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: center; transition: var(--transition-smooth); }
.icon-circle svg { width: 20px; height: 20px; color: rgba(255,255,255,0.4); transition: var(--transition-smooth); }
.contact-link-item:hover .icon-circle.hover-purple { background: var(--brand-purple); border-color: var(--brand-purple); }
.contact-link-item:hover .icon-circle.hover-whatsapp { background: #25D366; border-color: #25D366; }
.contact-link-item:hover .icon-circle svg { color: #fff; }

.link-text { display: flex; flex-direction: column; }
.link-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.2); }
.link-main { font-size: clamp(20px, 2vw, 24px); font-weight: 300; letter-spacing: -0.02em; color: #fff; transition: color 0.3s; }
.contact-link-item:hover .hover-purple-text { color: var(--brand-purple); }
.contact-link-item:hover .hover-whatsapp-text { color: #25D366; }

.contact-socials-group { padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.05); }
.social-circles { display: flex; gap: 24px; }
.icon-circle-small { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: center; transition: var(--transition-smooth); color: rgba(255,255,255,0.4); text-decoration: none;}
.icon-circle-small svg { width: 20px; height: 20px; transition: var(--transition-smooth); }
.icon-circle-small:hover { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }

/* ===== FORM SIDE ===== */
.contact-form-side { animation: fadeSlideUp 0.8s ease-out 0.2s forwards; opacity: 0; }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.form-card-container { background: var(--bg-slate); border: 1px solid var(--border-color); border-radius: 4px; padding: 32px; position: relative; overflow: hidden; transition: border-color 0.5s; }
@media(min-width: 768px) { .form-card-container { padding: 48px; } }
.form-card-container:hover { border-color: rgba(255,255,255,0.1); }
.form-ambient-glow { position: absolute; top: 0; right: 0; width: 256px; height: 256px; background: rgba(124, 58, 237, 0.05); filter: blur(80px); border-radius: 50%; pointer-events: none; }

/* View Switching */
.form-view-active { display: block; animation: fadeIn 0.5s ease; }
.form-view-hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.form-header { margin-bottom: 40px; }
.form-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--brand-purple); font-family: monospace; font-weight: 700; display: block; margin-bottom: 8px; }
.form-title { font-size: 24px; font-weight: 300; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; margin: 0 0 8px 0; }
.form-subtitle { font-size: 12px; color: rgba(255,255,255,0.4); margin: 0; }

.agency-form { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 2; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media(min-width: 768px) { .form-row { grid-template-columns: 1fr 1fr; } }
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.4); font-family: monospace; }
.input-group input, .input-group select, .input-group textarea { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); border-radius: 2px; padding: 12px 16px; font-size: 12px; font-weight: 300; color: #fff; width: 100%; transition: var(--transition-smooth); }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: var(--brand-purple); outline: none; background: rgba(255,255,255,0.04); }
.input-group input::placeholder, .input-group textarea::placeholder { color: rgba(255,255,255,0.2); }

/* ==========================================
   FIXING DROPDOWN: Kunci Latar Gelap Premium 
   ========================================== */
.select-wrapper { 
  position: relative; 
}

.select-wrapper select { 
  appearance: none; 
  cursor: pointer; 
  color: rgba(255, 255, 255, 0.8) !important; 
  color-scheme: dark !important; /* Memaksa browser mengeluarkan native dark-mode UI */
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Memaksa elemen opsi (pilihan) menjadi warna slate gelap dengan teks putih bersih */
.select-wrapper select option { 
  background-color: #0C0C0C !important; /* Mengikuti warna background form Anda */
  color: #FFFFFF !important; 
  padding: 12px !important;
}

/* Mengatur panah dropdown */
.select-arrow { 
  position: absolute; 
  right: 16px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 12px; 
  height: 12px; 
  color: rgba(255, 255, 255, 0.5); 
  pointer-events: none; 
}

.btn-submit-emerald { margin-top: 16px; width: 100%; background: var(--brand-emerald); color: var(--bg-obsidian); border: none; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-radius: 2px; cursor: pointer; transition: var(--transition-smooth); }
.btn-submit-emerald:hover { background: rgba(16, 185, 129, 0.9); }
.btn-submit-emerald:disabled { background: #262626; color: #525252; cursor: not-allowed; }
.btn-text-submit { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 800; }
.icon-send { width: 16px; height: 16px; transition: transform 0.3s; }
.btn-submit-emerald:not(:disabled):hover .icon-send { transform: translateX(4px); }

/* Anti Spam */
.form-honeypot { display: none !important; position: absolute; left: -9999px; }

/* Success State */
.success-content { display: flex; flex-direction: column; items-center: center; text-align: center; padding: 48px 0; justify-content: center; align-items: center; gap: 24px; }
.success-icon-circle { width: 64px; height: 64px; border-radius: 50%; background: rgba(124, 58, 237, 0.1); border: 1px solid var(--brand-purple); display: flex; justify-content: center; align-items: center; color: var(--brand-purple); }
.success-icon-circle svg { width: 32px; height: 32px; }
.success-title { font-size: 24px; font-weight: 300; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; margin: 0; }
.success-desc { font-size: 12px; color: rgba(255,255,255,0.4); max-width: 320px; line-height: 1.6; margin: 0; }
.btn-outline-reset { margin-top: 16px; background: transparent; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); padding: 10px 20px; border-radius: 50px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: var(--transition-smooth); }
.btn-outline-reset:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-outline-reset svg { width: 12px; height: 12px; transition: transform 0.3s; }
.btn-outline-reset:hover svg { transform: translateX(2px); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }/* End custom CSS */