/* Inter Regular */
@font-face {
  font-family: 'Inter'; /* Nama font yang akan Anda gunakan di CSS */
  src: url('../assets/fonts/static/Inter-Regular.ttf') format('truetype');
  font-weight: 400; /* Nilai font-weight untuk Regular */
  font-style: normal;
  font-display: swap; /* Rekomendasi untuk performa */
}

/* Inter SemiBold */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/static/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600; /* Nilai font-weight untuk SemiBold */
  font-style: normal;
  font-display: swap;
}

/* Inter Bold */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/static/Inter-Bold.ttf') format('truetype');
  font-weight: 700; /* Nilai font-weight untuk Bold */
  font-style: normal;
  font-display: swap;
}

/* Inter Variable (opsional, jika Anda ingin menggunakannya) */
@font-face {
  font-family: 'Inter Variable'; /* Nama font yang berbeda untuk variable font */
  src: url('../assets/fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
  font-weight: 100 900; /* Rentang nilai font-weight yang didukung */
  font-style: oblique 0deg 10deg; /* Rentang nilai font-style (italic) yang didukung */
  font-display: swap;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* Default font-weight untuk body */
  background-color: #eaebd0; /* Warna latar belakang gelap */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.container {
  background-color: #f2f2f2; /* Warna latar belakang card */
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 375px; /* Batasi lebar container untuk tampilan mobile yang optimal */
  width: 90%; /* Menggunakan persentase agar responsif */
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

.name {
  color: #d5451b; /* Warna teks nama */
  font-size: 1.5rem; /* Ukuran font lebih besar untuk nama */
  font-weight: 700; /* Gunakan Inter Bold untuk nama */
  margin-bottom: 5px;
}

.location {
  color: #ff9b45;
  font-size: 0.9rem;
  font-weight: 600; /* Dibuat semi-bold agar lebih menonjol */
  margin-bottom: 15px;
}

.bio {
  color: #533b4d; /* Warna teks bio */
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 25px;
  /* font-style: italic; // Opsional: jika ingin bio miring */
}

.links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  /* font-weight: 600; // Pindahkan ke .link agar lebih spesifik */
}

.link {
  display: block;
  background-color: #2a4759; /* Warna latar belakang tombol default */
  color: #ffffff; /* Warna teks tombol */
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  text-align: center;
  transition: background-color 0.3s ease;
  font-weight: 600; /* Gunakan Inter SemiBold untuk teks link */
}

.link:hover {
  background-color: #ff9b45; /* Efek hover tombol umum */
  color: #ffffff; /* Pastikan teks tetap putih saat hover untuk tombol non-Shopee */
}

.section-title {
  color: #d5451b; /* Warna teks putih */
  font-size: 1rem;
  font-weight: 600; /* Gunakan Inter SemiBold untuk judul bagian */
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Media Queries untuk Responsif */
@media (max-width: 480px) {
  .container {
    padding: 20px; /* Kurangi padding di layar kecil */
  }

  .name {
    font-size: 1.3rem; /* Sesuaikan ukuran font nama */
  }

  .bio {
    font-size: 0.9rem; /* Sesuaikan ukuran font bio */
  }
}