.top-nav {
    position: fixed; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 50%;
    height: var(--nav-height); 
    background-color: var(--glass-bg); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); 
    border: 1.5px solid var(--glass-border);
    border-radius: 40px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center; 
    align-items: center; 
    z-index: 100; 
    transition: top 0.4s ease-in-out; 
}
.top-nav.hidden { top: -150px; }
.nav-section { flex: 1; display: flex; align-items: center; }
.left-links { justify-content: flex-end; padding-right: 130px; gap: 25px; }
.right-links { justify-content: flex-start; padding-left: 130px; gap: 25px; }
.nav-logo-center {
    position: absolute; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    margin-top: 15px; 
    z-index: 101; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-image {
    height: 135px; 
    width: auto;
    filter: drop-shadow(0px 0px 15px rgba(255, 100, 0, 0.6));
    transition: filter 0.3s ease;
}
.logo-image:hover { filter: drop-shadow(0px 0px 25px rgba(255, 100, 0, 1)); }
.logo-fallback-text { font-size: 30px; font-weight: bold; color: gold; text-transform: uppercase; text-shadow: 2px 2px 4px #000; display: none; }
img.logo-image:not([src]), img.logo-image[src=""] + .logo-fallback-text { display: block; }