/* Base */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #db2777; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #be185d; }

/* Gradient text */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #ec4899, #8b5cf6);
}

/* Mobile menu transition */
#mobile-menu { transition: transform .3s ease-in-out, opacity .3s ease-in-out; }
.menu-hidden { transform: translateX(100%); opacity: 0; pointer-events: none; }
.menu-visible { transform: translateX(0); opacity: 1; pointer-events: auto; }

/* Hero subtle animation */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .8s ease-out both; }

/* Blob animation (yang sebelumnya belum ada) */
@keyframes blobMove {
  0% { transform: translate(0,0) scale(1); }
  33% { transform: translate(16px,-18px) scale(1.04); }
  66% { transform: translate(-14px,10px) scale(.98); }
  100% { transform: translate(0,0) scale(1); }
}
.blob { animation: blobMove 8s ease-in-out infinite; }
.blob-delay { animation-delay: 2s; }

/* Background pattern (About) */
.bg-pattern {
  background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
}

/* FAQ icon rotate via class */
.faq-open .faq-icon { transform: rotate(180deg); display:inline-block; transition: transform .2s ease; }
.faq-icon { transition: transform .2s ease; }

/* Force tombol toggle chord selalu terlihat */
.toggle-chord{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 14px !important;
  border-radius: 12px !important;

  background: #db2777 !important;      /* pink */
  color: #ffffff !important;            /* text putih */
  border: 1px solid rgba(219,39,119,.35) !important;

  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  opacity: 1 !important;
  visibility: visible !important;
}

.toggle-chord:hover{
  background: #be185d !important;
}

.chord-box { white-space: pre-wrap; }

.glow-logo{
  box-shadow:
    0 0 10px rgba(236,72,153,0.6),
    0 0 20px rgba(236,72,153,0.4);
}

.glow-logo-name{
  filter: drop-shadow(0 0 6px rgba(236,72,153,0.5));
}

/* Sembunyikan tombol hamburger saat menu terbuka */
.menu-btn-hidden{
  opacity: 0;
  pointer-events: none;
}