/* Pastikan html & body selalu 100% viewport, tanpa scroll bar di luar */
  html, body {
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    overflow-x: hidden;
  }
  /* Tombol fullscreen */
  #fs-btn {
    position: absolute;
    top: 1rem; right: 3.5rem;
    z-index: 1000;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(13,124,78,0.25);
    border: 1px solid rgba(13,124,78,0.5);
    color: #E8F4F0;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
  }
  #fs-btn:hover { background: #0D7C4E; transform: scale(1.1); }
  /* Sembunyikan fs-btn jika browser tidak support fullscreen */
  #fs-btn.hidden { display: none; }

  /* Tombol tutup media — diletakkan di samping tombol fullscreen */
  #close-btn {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 1000;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(220,38,38,0.2);
    border: 1px solid rgba(220,38,38,0.5);
    color: #E8F4F0;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
  }
  #close-btn:hover { background: #DC2626; transform: scale(1.1); }

/* ============================================
   FIX: #main-nav MENUTUPI KONTEN DI STAGE SEMPIT
   (bug pre-existing, ditemukan saat pengujian "muat seperti slide")
   Sengaja diletakkan di file paling akhir dimuat (lihat index.html)
   supaya menang di cascade CSS atas aturan dasar #main-nav /
   #nav-show-btn di style.css yang didefinisikan tanpa media query.
   ============================================ */
@media (max-width: 1260px) {
  #main-nav:not(.user-opened) {
    transform: translateX(calc(-100% - 1.6rem));
    opacity: 0;
    pointer-events: none;
  }
  #nav-show-btn { display: flex; }
}