/* aj-contact.css — gaya khusus halaman "Hubungi Kami" (contact-us.html).

   Dimuat paling akhir, sesudah aj-custom.css & aj-dark-theme.css, mengikuti
   pola aj-help.css: kartunya digambar di sini (bukan lewat utility bawaan
   tema) supaya mode terang dan gelap sama-sama punya permukaan sendiri.

   Kenapa perlu: kartu kontak sebelumnya memakai .bg-secondary, dan di gelap
   aj-dark-theme.css memetakan .bg-secondary ke warna kanvas halaman — jadi
   kartunya melebur habis ke latar dan yang tersisa cuma ikon melayang. Nilai
   warna di bawah memakai variabel palet .uc-dark dari aj-dark-theme.css,
   bukan hex baru, persis seperti .aj-cat-card di aj-help.css. */

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

/* Dasar stacking hero. Dulu di sini ada leburan ke warna kanvas karena di gelap
   #hero_header memakai gradien biru yang berhenti mendadak di halaman sependek
   ini; gradiennya sudah dihapus (aj-dark-theme.css "#hero_header"), jadi hero
   langsung sewarna kanvas dan tidak ada yang perlu dileburkan lagi. */
#hero_header {
  position: relative;
}
#hero_header > .section-outer {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   Kartu kanal kontak
   ------------------------------------------------------------------------- */

.aj-contact-card {
  background: #fafafa;
  border: 1px solid rgba(39, 53, 74, 0.06);
  height: 100%;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

/* Pengganti .lg:hover:scale-105 sebelumnya: mengangkat kartu 2px tidak
   membuat teks di dalamnya ikut buram seperti transform: scale, dan sama
   dengan kartu kategori Pusat Bantuan (.aj-cat-card di aj-help.css). */
@media (min-width: 992px) {
  .aj-contact-card:hover,
  .aj-contact-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(39, 53, 74, 0.08);
    border-color: rgba(1, 104, 250, 0.25);
  }
}

/* Kotak ikon. Ikonnya digambar sebagai mask ber-currentColor, bukan <img>,
   supaya satu berkas SVG yang sama bisa ikut warna aksen tiap mode — sumber
   aslinya mengunci fill ke #2D2DDB, yang di latar gelap nyaris tidak
   terbaca. --aj-icon dipasang per kanal di bawah. */
.aj-contact-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: rgb(var(--bs-primary-rgb));
  border: 1px solid rgba(39, 53, 74, 0.06);
}
.aj-contact-icon::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  background-color: currentColor;
  -webkit-mask: var(--aj-icon) center / contain no-repeat;
  mask: var(--aj-icon) center / contain no-repeat;
}
@media (max-width: 991.98px) {
  .aj-contact-icon::before {
    width: 32px;
    height: 32px;
  }
}

.aj-contact-icon--email {
  --aj-icon: url('../images/aj/email.svg');
}
.aj-contact-icon--chat {
  --aj-icon: url('../images/aj/chat.svg');
}
.aj-contact-icon--instagram {
  --aj-icon: url('../images/aj/instagram.svg');
}
.aj-contact-icon--help {
  --aj-icon: url('../images/aj/help-center.svg');
}

.aj-contact-meta,
.aj-contact-address address {
  opacity: 0.7;
}

/* Alamat kantor: permukaan yang sama dengan kartu di atasnya. */
.aj-contact-address {
  background: #fafafa;
  border: 1px solid rgba(39, 53, 74, 0.06);
}

/* ---------------------------------------------------------------------------
   Mode gelap
   ------------------------------------------------------------------------- */

.uc-dark .aj-contact-card,
.uc-dark .aj-contact-address {
  background: rgb(var(--color-surface));
  border-color: rgb(var(--color-line));
}
@media (min-width: 992px) {
  .uc-dark .aj-contact-card:hover,
  .uc-dark .aj-contact-card:focus-within {
    background: rgb(var(--color-surface-muted));
    border-color: rgb(var(--color-brand) / 0.45);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }
}

/* Kotak ikon jadi tint aksen, sama seperti .aj-cat-icon di Pusat Bantuan —
   kotak putih akan menyilaukan di atas permukaan gelap. */
.uc-dark .aj-contact-icon {
  background: rgb(var(--color-brand) / 0.16);
  border-color: transparent;
  color: rgb(var(--color-brand));
}

.uc-dark .aj-contact-card h5 {
  color: rgb(var(--color-ink));
}
.uc-dark .aj-contact-meta,
.uc-dark .aj-contact-address address {
  color: rgb(var(--color-ink-soft));
  opacity: 0.85;
}

/* .uc-link mewarisi biru terang bawaan tema yang terlalu redup di latar
   gelap; samakan dengan aksen palet gelap. */
.uc-dark .aj-contact-link {
  color: rgb(var(--color-brand));
}