/*
Custom Css
*/
.icon-circle {
    --size: 30px;

    /* pastikan width = height dan tidak melar */
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1 / 1;
    flex: 0 0 var(--size);     /* cegah flex shrink/stretch */
    border-radius: 50%;

    /* pusatkan ikon */
    display: inline-grid;
    place-items: center;

    /* cegah tinggi aneh dari baseline font */
    line-height: 1;
  }

  /* skala ikon proporsional ke lingkaran */
  .icon-circle > i {
    font-size: calc(var(--size) * 0.5);
    line-height: 1;
  }
.about-me-wrap{
  background: #f8fafc; /* putih kebiruan lembut seperti contoh */
}

.about-title{
  color: #2563eb;           /* ungu aksen judul */
  font-weight: 700;
  position: relative;
}
.about-title::after{
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  background: #2563eb;     /* garis kecil di bawah "About Me" */
  border-radius: 3px;
  margin-top: 8px;
}

.about-photo{
  background: linear-gradient(180deg, rgba(124,58,237,.08), rgba(99,102,241,.08));
  border-radius: 1rem;
}
.about-photo img{
  display: block;
  width: 100%;
  border-radius: 1rem;
}

.about-pill{
  background: #f1edff;     /* chip lembut */
  color: #2563eb;
  border: 1px solid #e2d9ff;
  padding: .55rem .9rem;
  font-weight: 500;
}

#pom .pom-img{
  width: 100%;
  max-width: 320px;         /* atur ukuran lingkaran di desktop */
  aspect-ratio: 1 / 2;      /* pastikan selalu bulet */
  border-radius: 50%;
  border: 1px solid #dee2e6;/* setara .border Bootstrap */
  padding: 12px;            /* ruang putih di dalam lingkaran */
  background: #fff;
  display: block;
  margin-inline: auto;      /* center */
  object-fit: contain;      /* tampilkan seluruh produk tanpa terpotong */
}

@media (max-width: 576px){
  #pom .pom-img{
    max-width: 240px;       /* lebih kecil di mobile */
    padding: 8px;
  }
}

/* CONTACT US styles */
#contact-us .contact-title{ color:#2563eb; }             /* judul oranye */
#contact-us .contact-icon{
  font-size:40px; color:#2563eb; line-height:1;
}
#contact-us .contact-link{
  color:#2563eb; text-decoration:none;
}
#contact-us .contact-link:hover{ text-decoration:underline; }

#contact-us .store-badge{ max-height:70px; }            /* tinggi badge */
@media (max-width:576px){
  #contact-us .store-badge{ max-height:60px; }
}

/* Samakan ukuran badge */
.store-badge {
  width: clamp(120px, 22vw, 200px); /* pilih 1 nilai tetap jika mau (mis. 220px) */
  height: auto;                     /* jaga proporsi */
  display: block;                   /* hilangkan extra gap inline */
}


@media (min-width: 768px) {
  .store-badges { flex-direction: row; gap: 24px; }
}