/* ============================================================
   Tutsy ID — Perbaikan UI (fixes)
   File  : assets/css/tutsy-fixes.css
   Tujuan: Merapikan tampilan yang menumpuk tanpa mengubah
           struktur HTML Nicepage (murni CSS override).
   - Tombol marketplace & sosial media (section 4, 9, 10)
   - Logo yang menimpa heading di layar kecil (section 6, 12)
   - Widget WhatsApp popup (submit tidak terpotong, panah ekor)
   ============================================================ */

/* ---------- 1. Tombol marketplace & sosial media ----------
   Nicepage menata tombol dengan margin negatif manual yang rapuh
   (hancur saat teks diterjemahkan lebih panjang). Ganti jadi
   inline-block mengalir alami, rata tengah, wrap otomatis. */
.u-section-4 .u-sheet-1 {
  text-align: center;
}
.u-section-4 .u-btn-1,
.u-section-4 .u-btn-2,
.u-section-4 .u-btn-3,
.u-section-4 .u-btn-4,
.u-section-9 .u-btn-1,
.u-section-9 .u-btn-2 {
  display: inline-block !important;
  vertical-align: top;
  margin: 8px 6px !important;
}
/* Tombol FOLLOW TANIA (section 10, dalam layout cell) */
.u-section-10 .u-container-layout-7 {
  text-align: center;
}
.u-section-10 .u-container-layout-7 .u-btn-1 {
  display: inline-block !important;
  margin: 12px auto 0 !important;
}

/* ---------- 2. Logo tidak menimpa heading di layar kecil ----------
   Gambar logo (tutsytransparant) di section Key Benefits & Contact
   dibuat mengalir normal & kecil di mobile, bukan absolute. */
@media (max-width: 767px) {
  .u-section-6 .u-image-1,
  .u-section-12 .u-image-1 {
    position: static !important;
    display: block !important;
    width: 160px !important;
    height: auto !important;
    margin: 0 auto 18px !important;
  }
  .u-section-6 .u-text-1 {
    margin-top: 24px !important;
  }
}

/* ---------- 3. Widget WhatsApp popup ----------
   - Popup fleksibel: form & status tidak pernah overflow card
   - Scroll aman di layar pendek
   - Panah ekor kecil penghubung popup -> tombol FAB */
.tutsy-popup {
  display: none;
  flex-direction: column;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#tutsy-widget.open .tutsy-popup {
  display: flex;
}
.tutsy-form {
  flex: 0 0 auto;
}
.tutsy-submit {
  margin-top: 2px;
}
.tutsy-popup::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.10);
  pointer-events: none;
}
/* Header: pastikan avatar tidak pernah terpotong */
.tutsy-header {
  flex: 0 0 auto;
}
.tutsy-avatar {
  flex-shrink: 0;
}

/* Mobile kecil: popup menempel lebih rapi ke FAB */
@media (max-width: 480px) {
  #tutsy-widget {
    right: 12px;
    bottom: 12px;
  }
  .tutsy-popup {
    right: 0;
    bottom: calc(100% + 12px);
    max-height: calc(100vh - 90px);
  }
  .tutsy-popup::after {
    right: 18px;
  }
}