/* ===============================
  HERO SECTION
================================= */
.home-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4vw;
}
.home-left {
  flex: 1;
}
.home-right {
  flex: 1;
  display: flex;
  justify-content: center;
}
.home-left .title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin: 15px 0 20px;
  color: var(--dark);
}
.home-left .description {
  font-size: 18px;
  line-height: 1.6;
  color: var(--dark);
  max-width: 600px;
  opacity: 0.85;
}
.cta-group {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 20px;
} /* Hero Image & Animation */
.hero-img {
  width: 90%;
  max-width: 420px;
  animation: float 5s ease-in-out infinite;
}

/* ===============================
   SOCIAL LINKS & CV DOWNLOAD
================================= */
.social-links {
  margin-top: 30px; /* Jarak dari tombol CTA */
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-links a {
  /* Tautan Sosial Default */
  opacity: 0.7;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px; /* Jarak antara ikon dan teks 'CV' */
}

/* Gambar SVG */
.social-links .social-icon {
  width: 24px; /* Ukuran default ikon */
  height: 24px;
  opacity: 0.9; /* Tambahkan sedikit opacity pada ikon */
  transition: 0.2s ease;
}

/* Tautan CV Download */
.social-links a[title='Download CV'] {
  background-color: var(--light);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 15px;
  border: 2px solid rgba(167, 167, 167, 0.37);
  border-radius: 5px;
  opacity: 0.8;
}

.social-links a:hover {
  opacity: 1;
}

/* Efek Hover untuk Ikon di Hero */
.social-links a:hover .social-icon {
  opacity: 1;
  transform: translateY(-2px); /* Efek sedikit naik */
}

.social-links a[title='Download CV']:hover {
  background-color: var(--primary);
  color: var(--light);
  transform: none;
}
/* Efek Hover untuk ikon di tombol CV. Kita atur warna ikon di sini */
.social-links a[title='Download CV']:hover .social-icon {
  /* Karena kita menggunakan tag <img>, kita tidak bisa mengubah warna fill, 
       tapi kita bisa memberikan efek filter agar terlihat kontras di background gelap. */
  filter: invert(1);
  transform: none;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
} /* =============================== RESPONSIVE HOME ================================= */ /* Laptop (max 1366px) */
@media (max-width: 1366px) {
  .home-left .title {
    font-size: 38px;
  }
  .hero-img {
    max-width: 380px;
  }
} /* Tablet Portrait (max 768px) */
@media (max-width: 768px) {
  .home-hero {
    flex-direction: column;
    text-align: center;
    padding-top: 40px;
  }
  .home-left {
    order: 2; /* Tulisan pindah ke bawah gambar */
    align-items: center;
  }
  .home-right {
    order: 1; /* Gambar pindah ke atas */
    width: 100%;
  }
  .home-left .title {
    font-size: 32px;
  }
  .cta-group {
    justify-content: center;
    width: 100%;
  }
  .hero-img {
    max-width: 300px;
  } /* Grid menjadi 1 kolom centered jika item sedikit */
  .projects-grid,
  .tech-grid {
    justify-items: center;
  }
  .social-links {
    justify-content: center; /* Pusatkan tautan sosial di mobile */
  }
} /* Mobile (max 576px) */
@media (max-width: 576px) {
  .cta-group {
    flex-direction: column; /* Tombol jadi atas-bawah */
    width: 100%;
  }
  .btn-secondary {
    width: 100%;
    text-align: center;
  }
  .home-left .title {
    font-size: 28px;
  }
}