html {
  scroll-behavior: smooth;
}

/* Elak hero bertindih navbar */
section:first-of-type {
  scroll-margin-top: 100px; /* bagi offset masa anchor link */
}

/* Navbar smooth transition */
/* Tambahan untuk top bar iklan */
header .border-x {
  border-color: rgba(255, 255, 255, 0.25);
}

/* Hover animasi ikon top bar */
header button:hover iconify-icon {
  transform: scale(1.15);
  transition: transform 0.2s ease;
}



/* Mobile nav animation */
#mobileMenu {
  transform-origin: top;
  transition: all 0.3s ease-in-out;
}


/* Hover dropdown animation */
.group:hover .group-hover\:visible {
  visibility: visible !important;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1 !important;
}

/* Flag hover shadow */
header .group img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

header .group:hover img {
  transform: scale(1.1);
  box-shadow: 0 0 4px rgba(255,255,255,0.3);
}


/* ===========================
   Navbar title adjustment
   =========================== */

   
/* Untuk desktop: rapatkan teks atas-bawah */
@media (min-width: 768px) {
  .wpjrfc-title {
    line-height: 1.1;       /* rapatkan antara baris */
    font-size: 1.05rem;     /* kecilkan sedikit */
  }

  header .space-x-3 {
    gap: 0.5rem;            /* kurangkan jarak logo dengan teks */
  }

  header img {
    height: 2.75rem;        /* kecilkan sedikit logo */
  }

  header .py-3 {
    padding-top: 0.4rem;    /* kurangkan tinggi navbar keseluruhan */
    padding-bottom: 0.4rem;
  }
}



.gsm-tooltip {
  position: absolute;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  z-index: 9999;
  max-width: 200px;
  text-align: center;
}
.gsm-tooltip.show {
  opacity: 1;
}



/* ===========================
   Global Page Offset for Fixed Navbar
   =========================== */

/* Gunakan kelas ini untuk semua halaman utama di bawah navbar */
.page-content {
  padding-top: 9rem; /* offset ~112px untuk pastikan tidak bertindih */
}

/* Responsive tweak: pada skrin kecil navbar lebih tinggi (mobile stacked) */
@media (max-width: 768px) {
  .page-content {
    padding-top: 8rem; /* beri ruang lebih pada mobile */
  }
}



.opacity-50 {
  opacity: 0.5;
}
.pointer-events-none {
  pointer-events: none;
}


.jersey-slide.scale-150 {
  transform: scale(1.5);
  z-index: 50;
}




/* ===========================
   Footer & background
   =========================== */
.bg-pattern-green {
  background-color: #006904; /* hijau utama */
  background-image: url('../images/french-stucco.png');
  background-repeat: repeat;
  background-size: auto;
}

/* ===========================
   Iconify v3 Fix untuk Saiz & Penjajaran
   =========================== */

/* Hover animasi footer */
footer a .iconify {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

footer a:hover .iconify {
  transform: scale(1.15);
  opacity: 0.9;
}


@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
  animation: fadeIn 0.25s ease-out;
}

.toast img {
  flex-shrink: 0;
}





  #scrollTopBtn:hover {
    background:#1f4d33;
    transform:scale(1.1);
  }
  @media (max-width:640px){
    #scrollTopBtn{
      width:40px;
      height:40px;
      right:12px;
    }
    #scrollTopBtn iconify-icon {
      font-size:1.3rem;
    }
  }