/* ==========================================================================
   1. STYLING HEADER & LOGO
   ========================================================================== */
/* Membuat kotak putih di belakang logo */
.md-header__button.md-logo img {
    background-color: white;
    padding: 5px;       /* Jarak logo ke pinggir kotak */
    border-radius: 4px; /* Biar sudutnya tumpul */
    height: 40px;       /* Ukuran kotak */
    width: auto;
}

/* ==========================================================================
   2. ANIMASI HALAMAN (Slide Up)
   ========================================================================== */
.md-content__inner {
    animation: slide-up 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0;
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   3. EFEK GAMBAR KONTEN
   ========================================================================== */
.md-content img {
    transition: transform 0.3s ease;
}

.md-content img:hover {
    transform: scale(1.02); /* Zoom dikit pas kursor nempel */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-radius: 8px;
}

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   4. TOMBOL PDF FLOATING (MODIFIKASI: MODE HANTU/TRANSPARAN)
   ========================================================================== */
.fab-pdf-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  
  /* Styling Dasar */
  background-color: var(--md-primary-fg-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 9999; /* Pastikan nilainya tinggi seperti ini */  
  cursor: pointer;
  text-decoration: none; /* Hapus garis bawah link */

  /* --- MODIFIKASI DIMULAI DISINI --- */
  /* Membuat tombol transparan & abu-abu saat diam */
  opacity: 0.3;          /* Transparan 70% */
  filter: grayscale(100%); /* Jadi hitam putih */
  transition: all 0.3s ease; /* Animasi perubahan halus */
}

/* Ukuran Icon SVG */
.fab-pdf-button svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Efek Saat Disentuh/Hover (JADI JELAS KEMBALI) */
.fab-pdf-button:hover {
  transform: scale(1.1); /* Membesar sedikit */
  opacity: 1;            /* Jadi solid (tidak transparan) */
  filter: grayscale(0%); /* Warna biru muncul lagi */
  box-shadow: 0 6px 12px rgba(0,0,0,0.5); /* Bayangan lebih tegas */
  background-color: var(--md-primary-fg-color);
}

/* Tooltip (Teks Penjelas) */
.fab-tooltip {
  position: absolute;
  right: 70px;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.fab-pdf-button:hover .fab-tooltip {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   5. RESPONSIVE MOBILE
   ========================================================================== */
@media screen and (max-width: 768px) {
  .fab-pdf-button {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
  /* Sembunyikan tooltip di HP agar tidak menutupi layar */
  .fab-tooltip {
    display: none; 
  }
}