/* =========================================================
   image.css — Modul 4 (CSS Image)
   Menerapkan: border pada img, width & height, opacity/
   transparansi saat hover, dan background-image + repeat.
   ========================================================= */

.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  flex-wrap:wrap;

  /* Background-image dengan pengulangan (repeat-x) mengikuti
     properti Modul 4: background-repeat & background-position */
  background-image:url('foto-profil.jpeg');
  background-repeat:repeat-x;
  background-position:bottom left;
  background-attachment:scroll;
}

.hero__avatar{
  width:220px;
  height:220px;
  object-fit:cover;
  object-position:top center;
  border:4px solid var(--green-dark);
  border-radius:50%;
  opacity:0.92;
  box-shadow:0 12px 28px rgba(22,35,61,0.25);
  transition:opacity .25s ease, transform .25s ease;
}

.hero__avatar:hover{
  opacity:1;
  transform:translateY(-4px);
}

/* Kartu pengalaman memakai potongan latar bergambar di bagian atas,
   properti singkat "background" seperti pada contoh CSS Background */
.kartu{
  background:var(--paper) url('../assets/pattern.svg') no-repeat top right;
  background-size:64px auto;
  border:1px solid #e4ddcd;
  border-radius:4px;
  padding:22px 20px;
}

/* Panel info kontak: border tipis + sedikit transparan seperti
   contoh "text di box transparan" pada Tugas Mandiri Modul 4 */
.info-kontak{
  background:rgba(22,35,61,0.92);
  color:var(--cream);
  border:1px solid var(--green-light);
  border-radius:4px;
  padding:22px 24px;
}

.info-kontak p{
  color:var(--cream);
  opacity:0.85;
  margin-bottom:10px;
  transition:opacity .2s ease;
}

.info-kontak p:hover{
  opacity:1;
}

.info-kontak span{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--green-light);
  text-transform:lowercase;
}