/* ==========================================================================
   icons.css: gaya ikon Font Awesome
   Font Awesome dimuat dari CDN (lihat index.html). Berkas ini hanya mengatur
   ukuran, warna, dan posisi ikon agar seragam dengan desain Febsite.
   ========================================================================== */

/* ---- ikon inline di dalam teks / tombol ---- */
.fa-solid,
.fa-regular,
.fa-brands {
  font-size: .95em;
  line-height: 1;
  vertical-align: -0.055em;
}

/* tanda panah serong pada tombol: bergeser saat tombol disentuh */
.btn i,
.business-link i,
.mini-cta i {
  transition: transform .3s ease;
}
.btn:hover i,
.business-link:hover i {
  transform: translate(2px, -2px);
}

/* ---- tombol menu (beranda) ---- */
.menu i { pointer-events: none; font-size: 19px; }

/* ---- titik status pada bilah alamat browser ---- */
.secure { color: #4bb543; font-size: 6px; vertical-align: .08em; }

/* ---- alur Instagram → Website → Pelanggan ---- */
.flow-line i {
  font-style: normal;
  color: #bbb;
  font-size: 9px;
}

/* ---- bintang testimoni pada mockup hero ---- */
.stars {
  color: #f0a92e;
  font-size: 7px;
  letter-spacing: .12em;
  display: block;
  margin-bottom: 3px;
}

/** baris langkah (01-04): panah bergeser saat kursor mendekat **/
.step-arrow i { transition: transform .35s cubic-bezier(.2,.8,.2,1); display: inline-block; }
.step:hover .step-arrow i { transform: translate(4px, -4px); }

/* ---- ikon pada teks kecil penanda ---- */
.kicker i,
.eyebrow i { font-size: .9em; opacity: .75; }

/* ---- ikon pada tautan footer/kontak ---- */
/* padding 10px vertikal menaikkan tinggi sentuh dari 15px menjadi 38px, supaya
   tautan WhatsApp/Instagram di footer nyaman ditekan dengan jari. Jarak antar
   tautan dikurangi sebagai imbangan agar bloknya tidak jadi terlalu tinggi. */
.footer-links { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: -12px; }
.footer-links a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 12px; transition: color .25s ease, background .25s ease; }
.footer-links a:hover { color: #111; background: rgba(0,0,0,.035); }
.footer-links i { font-size: 12px; }

.contact-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 12px;
  color: #8b8c90;
}
.contact-note i { color: #4bb543; }

@media(prefers-reduced-motion: reduce) {
  .btn i, .business-link i, .step-arrow i { transition: none; }
}