.hamburger-btn { position: fixed; top: 0; right: 0; width: auto; height: auto; padding: 16px 24px; background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; z-index: 200; transition: all 0.3s ease; opacity: 1; transform: translateY(0); }

    .hamburger-btn.hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }

    .hamburger-btn:hover { background: transparent; }

    .hamburger-btn span { width: 24px; height: 2.5px; background: white; border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; display: block; transform-origin: center; }

.hamburger-btn-text { color: white; font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; margin-top: 3px; }

.hamburger-btn.active span:nth-child(1) { transform: translateY(6px) rotate(-45deg); }

.hamburger-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }

.hamburger-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(45deg); }

@media (max-width: 992px) {
    .hamburger-btn { padding: 14px 20px; }
    .hamburger-btn span { width: 22px; }
    .hamburger-btn-text { font-size: 0.85rem; }
    .hamburger-btn.active span:nth-child(1) { transform: translateY(6.5px) rotate(-45deg); }
    .hamburger-btn.active span:nth-child(3) { transform: translateY(-6.5px) rotate(45deg); }
}

@media (max-width: 768px) {
    .hamburger-btn { padding: 12px 16px; gap: 5px; }
    .hamburger-btn span { width: 20px; height: 2px; }
    .hamburger-btn-text { font-size: 0.8rem; }
    .hamburger-btn.active span:nth-child(1) { transform: translateY(6px) rotate(-45deg); }
    .hamburger-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(45deg); }
}

/* ensure hamburger and logo area has enough space so fullscreen menu content starts below it */
@media (max-width: 768px) {
    .hamburger-btn { top: 8px; }
}

@media (max-width: 576px) {
    .hamburger-btn { padding: 10px 12px; }
    .hamburger-btn span { width: 18px; }
    .hamburger-btn-text { font-size: 0.75rem; letter-spacing: 0.5px; }
    .hamburger-btn.active span:nth-child(1) { transform: translateY(5px) rotate(-45deg); }
    .hamburger-btn.active span:nth-child(3) { transform: translateY(-5px) rotate(45deg); }
}