/* contact.css - Fixed untuk [data-theme="dark"]: Teks Putih Langsung */

/* Section Styling - Adjusted for Theme */
.contact-section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;  /* Smooth transisi saat theme change */
}

[data-theme="dark"] .contact-section {
  background: linear-gradient(135deg, var(--bg-color) 0%, #2a2a2a 100%); /* Dark variant */
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;  /* Kurangi opacity untuk dark mode readability */
  transition: opacity 0.3s ease;
}

[data-theme="dark"] .contact-section::before {
  opacity: 0.2;  /* Lebih subtle di dark */
}

.container {
  position: relative;
  z-index: 2;
}

/* Entrance Animations Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Section Title - With entrance animation */
.section-title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--text-color);  /* Otomatis terang di dark via variables */
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  animation: fadeInUp 0.8s ease-out forwards;
  transition: color 0.3s ease;
}

/* Lead text animation + FIX: Putih di Dark Mode (Override Bootstrap) */
.lead {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
  opacity: 0;
  transition: color 0.3s ease;
  color: var(--text-color);  /* Default dari variables */
}

[data-theme="dark"] .lead,
[data-theme="dark"] .text-muted {
  color: rgba(255, 255, 255, 0.8) !important;  /* Off-white putih di dark - FIX UTAMA! Override Bootstrap gray */
}

/* Contact Form Wrapper - Entrance + hover */
.contact-form-wrapper {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

[data-theme="dark"] .contact-form-wrapper {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);  /* Shadow lebih gelap di dark */
}

.contact-form-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.contact-form-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 204, 17, 0.2);
}

[data-theme="dark"] .contact-form-wrapper:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 204, 17, 0.4);  /* Adjust hover shadow di dark */
}

.form-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 0.75rem;
  justify-content: center;
}

.form-header .icon {
  font-size: 1.5rem;
  color: var(--secondary-color);
  background: rgba(212, 175, 55, 0.1);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.form-header .icon:hover {
  animation: pulseIcon 0.6s ease-in-out;
}

.form-header h4 {
  margin: 0;
  font-weight: 500;
  color: var(--text-color);
  text-align: center;
  /* transition: color 0.3s ease; */
}

/* Enhanced Form Inputs - With focus animation */
.input-group {
  position: relative;
}

.enhanced-input,
.enhanced-textarea {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--border-color);
  border-radius: 15px;
  padding: 1rem 1.5rem 1rem 3.5rem;
  font-size: 1rem;
  color: var(--text-color);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

[data-theme="dark"] .enhanced-input,
[data-theme="dark"] .enhanced-textarea {
  background: rgba(30, 30, 30, 0.8);  /* Background gelap di dark */
  color: var(--text-color);  /* Teks terang otomatis */
}

.enhanced-input::placeholder,
.enhanced-textarea::placeholder {
  color: #9ca3af;
  transition: color 0.3s ease;
}

[data-theme="dark"] .enhanced-input::placeholder,
[data-theme="dark"] .enhanced-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);  /* Placeholder terang di dark */
}

.enhanced-input:focus,
.enhanced-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 4px rgba(255, 204, 17, 0.1);
  transform: translateY(-2px) scale(1.02); /* Added scale for subtle pop */
}

[data-theme="dark"] .enhanced-input:focus,
[data-theme="dark"] .enhanced-textarea:focus {
  background: rgba(255, 205, 39, 0.059);  /* Background saat fokus */
  color: var(--text-color);  /* Gunakan variabel untuk warna teks */
}

.input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-color);
  font-size: 1.1rem;
  z-index: 5;
  transition: color 0.3s ease, transform 0.3s ease;
}

.enhanced-input:focus + .input-icon,
.enhanced-textarea:focus + .input-icon {
  color: var(--secondary-color);
  transform: translateY(-50%) scale(1.1); /* Subtle scale on focus */
}

.textarea-icon {
  top: 1.2rem;
}

/* Submit Button - With loading animation */
.submit-btn {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: 15px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #111;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.submit-btn:hover:not(:disabled) {
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255, 204, 17, 0.3);
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.submit-btn:hover::before {
  left: 100%;
}

.submit-btn .btn-icon {
  transition: transform 0.3s ease;
}

.submit-btn:hover .btn-icon {
  transform: translateX(5px);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loading-spinner {
  margin-left: 0.5rem;
}

/* Tambahan: Garis Atas Orange Gradient untuk Contact Info Wrapper (Sama Seperti Form) */
.contact-info-wrapper {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  position: relative;  /* KUNCI: Relative supaya ::before absolute works */
  overflow: hidden;    /* KUNCI: Hidden supaya garis tidak overflow */
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.5s forwards;  /* Animasi entrance sama seperti form */
}

.contact-info-wrapper::before {
  content: '';  /* Pseudo-element untuk garis atas */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;  /* Tinggi garis */
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));  /* Gradient kuning/orange sama seperti form */
  z-index: 1;   /* Di atas background */
}

.contact-info-wrapper:hover {
  transform: translateY(-5px);  /* Hover lift sama seperti form */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 204, 17, 0.2);
}

[data-theme="dark"] .contact-info-wrapper:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 204, 17, 0.4);  /* Hover shadow dark sama seperti form */
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 0.75rem;
  justify-content: center;
}

.info-header .icon {
  font-size: 1.5rem;
  color: var(--secondary-color);
  background: rgba(212, 175, 55, 0.1);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.info-header .icon:hover {
  animation: pulseIcon 0.6s ease-in-out;
}

.info-header h4 {
  margin: 0;
  font-weight: 500;
  color: var(--text-color);
  text-align: center;
}

/* Contact Cards - Platform-specific hovers blended with theme + staggered entrance */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-cards .contact-card:nth-child(1) {
  animation: staggerIn 0.6s ease-out 0.8s forwards;
  opacity: 0;
}

.contact-cards .contact-card:nth-child(2) {
  animation: staggerIn 0.6s ease-out 0.9s forwards;
  opacity: 0;
}

.contact-cards .contact-card:nth-child(3) {
  animation: staggerIn 0.6s ease-out 1.0s forwards;
  opacity: 0;
}

.contact-cards .contact-card:nth-child(4) {
  animation: staggerIn 0.6s ease-out 1.1s forwards;
  opacity: 0;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 15px;
  text-decoration: none;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .contact-card {
  background: rgba(30, 30, 30, 0.7);
  border-color: var(--border-color);
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.contact-card:hover {
  transform: translateX(10px) scale(1.02) rotate(1deg); /* Added subtle rotation for dynamism */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  color: white;
  border-color: transparent;
}

.contact-card:hover::before {
  opacity: 1;
}

/* Platform hovers: Blend with theme gold for cohesion */
.contact-card.whatsapp:hover {
  background: linear-gradient(135deg, #25d366, var(--primary-color)); /* Green + gold */
}

.contact-card.email:hover {
  background: linear-gradient(135deg, #ff6b6b, var(--secondary-color)); /* Red + gold */
}

.contact-card.linkedin:hover {
  background: linear-gradient(135deg, #0077b5, var(--primary-color)); /* Blue + gold */
}

.contact-card.github:hover {
  background: linear-gradient(135deg, #333, var(--secondary-color)); /* Dark + gold */
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.2);
}

.contact-card:hover .card-icon {
  transform: scale(1.1) rotate(5deg); /* Added rotation for fun, subtle effect */
  background: rgba(255, 255, 255, 0.3);
}

.card-content h6 {
  margin: 0 0 0.25rem 0;
  font-weight: 500;
  font-size: 0.95rem;
}

.card-content p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* PERBAIKAN: Mobile Horizontal - Icon Atas + Hanya Nama (h6) Bawah, Hide p Total (768px ke bawah) */
@media (max-width: 768px) {
  /* Rule existing (jangan hapus) */
  .section-title {
    font-size: 2rem;
  }
  
  .lead {
    font-size: 1rem;
  }
  
  .contact-form-wrapper,
  .contact-info-wrapper {
    margin-bottom: 2rem;
  }
  
  .enhanced-input,
  .enhanced-textarea {
    padding: 1rem 1.2rem 1rem 3rem;
  }

  /* PERBAIKAN: Horizontal Layout - 1 Baris Sejajar (Fit Tanpa Slider/Scroll) */
  .contact-info-wrapper .contact-cards {
    flex-direction: row !important;          /* Horizontal sejajar */
    flex-wrap: wrap !important;              /* Allow wrap kalau ekstrem kecil, tapi prioritas 1 baris */
    justify-content: space-around !important; /* Sejajar rata di tengah - fit otomatis tanpa overflow */
    align-items: flex-start;                 /* Align top untuk konsistensi height */
    gap: 0.25rem !important;                 /* Gap sangat rapat antar card */
    margin-top: 1rem;                        /* Jarak dari header */
    width: 100%;                             /* Full width */
    /* NO OVERFLOW-X: Hapus slider - semuanya fit dengan compact size */
  }

  /* PERBAIKAN: Compact Card - Icon Atas + Hanya h6 Bawah (Vertical dalam Card) */
  .contact-info-wrapper .contact-card {
    flex-direction: column !important;       /* ICON ATAS + CONTENT BAWAH (stacked vertikal) */
    align-items: center;                     /* Center horizontal */
    justify-content: flex-start;             /* Start dari atas */
    padding: 0.5rem;                         /* Padding minimal */
    min-width: 60px !important;              /* Min width sangat kecil supaya 4 card fit HP (total ~240px + gaps) */
    width: auto;                             /* Auto berdasarkan content */
    height: auto;                            /* Auto height (~50px sekarang, karena no p) */
    border-radius: 12px !important;          /* Rounded */
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);   /* Border tipis */
    background: rgba(255, 255, 255, 0.8);    /* Background subtle */
    flex: 1;                                 /* Rata space antar card */
    max-width: 70px;                         /* Max width supaya tidak melebar */
  }

  [data-theme="dark"] .contact-info-wrapper .contact-card {
    background: rgba(122, 111, 67, 0.158) !important;  /* Dark background */
    border-color: var(--border-color);
  }

  /* PERBAIKAN: Icon Kecil di Atas */
  .contact-info-wrapper .contact-card .card-icon {
    width: 28px !important;                  /* Icon sangat kecil */
    height: 28px;
    font-size: 0.9rem !important;            /* Size icon pas */
    margin-bottom: 0.25rem;                  /* Jarak icon ke h6 bawah */
    background: rgba(255, 255, 255, 0.2);    /* Subtle bg */
    border-radius: 50%;                      /* Bulat icon */
    color: var(--primary-color) !important;  /* Kuning theme */
    flex-shrink: 0;                          /* Tidak shrink */
    transition: transform 0.3s ease;
  }

  [data-theme="dark"] .contact-info-wrapper .contact-card .card-icon {
    color: var(--primary-color) !important;  /* Tetap kuning di dark */
    background: rgba(255, 204, 17, 0.2);     /* Adjust bg dark */
  }

  /* PERBAIKAN: Content Bawah - Hanya h6 (Nama Platform), Hide p Total */
  .contact-info-wrapper .contact-card .card-content {
    display: flex !important;                /* Pastikan terlihat */
    flex-direction: column !important;        /* VERTIKAL: h6 saja (no p) */
    align-items: center;                     /* Center text di bawah icon */
    justify-content: center;
    width: 100%;                             /* Full width card */
    text-align: center;                      /* Center text */
  }

  /* PERBAIKAN: h6 (Nama Platform) - Kecil & Tampil */
  .contact-info-wrapper .contact-card .card-content h6 {
    margin: 0 !important;                    /* No margin (karena no p bawah) */
    font-size: 0.7rem !important;            /* Kecil untuk nama (WhatsApp, Email, dll.) */
    font-weight: 600;
    color: var(--text-color) !important;     /* Warna adaptif */
    line-height: 1.2;                        /* Rapat vertikal */
    white-space: nowrap;                     /* No wrap */
  }

  /* PERBAIKAN: Hide p Total - Tidak Tampil Detail (Nomor/Email/Path) */
  .contact-info-wrapper .contact-card .card-content p {
    display: none !important;                /* SEMBUNYIKAN TOTAL - Hanya h6 tampil! */
  }

  [data-theme="dark"] .contact-info-wrapper .contact-card .card-content h6 {
    color: rgba(255, 203, 17, 0.619) !important;  /* h6 terang di dark */
  }

  /* PERBAIKAN: Hover Simple - Scale Up untuk Card */
  .contact-info-wrapper .contact-card:hover {
    transform: scale(1.05) !important;       /* Scale ringan */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    background: rgba(255, 204, 17, 0.2) !important;  /* Kuning subtle */
    border-color: var(--primary-color) !important;
  }

  [data-theme="dark"] .contact-info-wrapper .contact-card:hover {
    background: rgba(255, 203, 17, 0.532) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  }

  .contact-info-wrapper .contact-card:hover .card-icon {
    transform: scale(1.1) !important;        /* Icon scale lebih */
  }

  .contact-info-wrapper .info-header {
    margin-bottom: 1rem;                     /* Rapat */
  }
}

/* Opsional: Untuk Layar Sangat Kecil (576px ke bawah) - Lebih Compact Lagi (Hide p Tetap) */
@media (max-width: 576px) {
  .contact-info-wrapper .contact-cards {
    gap: 0.2rem !important;                  /* Gap lebih rapat */
    justify-content: space-between !important; /* Rata kiri-kanan untuk fit ekstrem */
  }

  .contact-info-wrapper .contact-card {
    min-width: 55px !important;              /* Lebih kecil lagi */
    padding: 0.4rem;
    max-width: 65px;
  }

  .contact-info-wrapper .contact-card .card-icon {
    width: 26px !important;
    height: 26px;
    font-size: 0.85rem !important;
    margin-bottom: 0.2rem;
  }

  .contact-info-wrapper .contact-card .card-content h6 {
    font-size: 0.7rem !important;           /* Lebih kecil h6 */
  }

  /* PERBAIKAN: Hide p Tetap di Small Screen */
  .contact-info-wrapper .contact-card .card-content p {
    display: none !important;                /* Pastikan hide di very small */
  }

  /* Rule existing lainnya (jangan hapus) */
  .contact-section {
    padding: 3rem 0;
  }
  
  .contact-form-wrapper,
  .contact-info-wrapper {
    padding: 1.5rem;
    border-radius: 15px;
  }
  
  .submit-btn {
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
  }
  
  .enhanced-input:focus,
  .enhanced-textarea:focus {
    transform: translateY(-1px) scale(1.01);
  }
}

/* Responsive Contact Form Wrapper */

/* PERBAIKAN: Mobile Horizontal - Icon Atas + Hanya Nama (h6) Bawah, Hide p Total (768px ke bawah) */
@media (max-width: 768px) {
  .contact-form-wrapper .info-header {
    margin-bottom: 1rem;                     /* Rapat */
  }
}

/* Opsional: Untuk Layar Sangat Kecil (576px ke bawah) - Lebih Compact Lagi (Hide p Tetap) */
@media (max-width: 576px) {
  .contact-form-wrapper{
    padding: 1.5rem;
    border-radius: 15px;
  }
  
  .submit-btn {
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
  }
  
  .enhanced-input:focus,
  .enhanced-textarea:focus {
    transform: translateY(-1px) scale(1.01);
  }
}