.main-header{position:fixed;top:0;right:0;left:0;z-index:1000;padding:var(--spacing-md) 0;transition:background var(--transition-normal);} .main-header.scrolled{background:rgba(10,10,10,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.05);} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);} .logo-link{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.5rem;font-weight:800;color:var(--primary-color);transition:var(--transition-fast);} .logo-link:hover{color:var(--primary-hover);transform:scale(1.02);} .logo-link i{font-size:1.75rem;} .logo-link span{background:linear-gradient(135deg,var(--primary-color),#ff5e6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .header-right{display:flex;align-items:center;gap:var(--spacing-xl);} .main-nav{display:flex;} .nav-list{display:flex;align-items:center;gap:var(--spacing-sm);} .nav-link{padding:var(--spacing-sm) var(--spacing-md);font-size:0.9rem;font-weight:500;color:var(--text-secondary);border-radius:var(--radius-md);transition:var(--transition-fast);} .nav-link:hover{color:var(--text-primary);background:rgba(255,255,255,0.05);} .nav-link.active{color:var(--text-primary);} .nav-dropdown{position:relative;} .nav-dropdown-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;} .nav-dropdown-toggle i{font-size:0.7rem;transition:var(--transition-fast);} .nav-dropdown:hover .nav-dropdown-toggle i{transform:rotate(180deg);} .nav-dropdown-menu{position:absolute;top:100%;right:0;min-width:200px;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,0.1);padding:var(--spacing-sm);opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition-fast);box-shadow:0 10px 40px rgba(0,0,0,0.5);} .nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);} .nav-dropdown-item{display:block;padding:var(--spacing-sm) var(--spacing-md);font-size:0.9rem;color:var(--text-secondary);border-radius:var(--radius-sm);transition:var(--transition-fast);} .nav-dropdown-item:hover{color:var(--text-primary);background:rgba(255,255,255,0.05);} .header-left{display:flex;align-items:center;gap:var(--spacing-md);} .search-bar{position:relative;display:flex;align-items:center;} .search-bar input{width:220px;padding:var(--spacing-sm) var(--spacing-md);padding-left:40px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-full);color:var(--text-primary);font-size:0.9rem;font-family:inherit;transition:var(--transition-fast);} .search-bar input::placeholder{color:var(--text-muted);} .search-bar input:focus{outline:none;background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);width:280px;} .search-bar button{position:absolute;left:var(--spacing-md);background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);} .search-bar button:hover{color:var(--text-primary);} .user-area{display:flex;align-items:center;gap:var(--spacing-sm);} .user-btn{width:38px;height:38px;background:rgba(255,255,255,0.08);border:none;border-radius:50%;color:var(--text-secondary);font-size:1rem;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;} .user-btn:hover{background:rgba(255,255,255,0.15);color:var(--text-primary);} .mobile-menu-toggle{display:none;width:40px;height:40px;background:transparent;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;} @media (max-width:992px){.nav-list{display:none;} .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;order:-1;} .search-bar input{width:180px;} .search-bar input:focus{width:200px;} .header-right{gap:var(--spacing-md);} } .mobile-menu{position:fixed;top:0;right:-100%;width:280px;max-width:85vw;height:100vh;background:var(--bg-secondary);z-index:1100;padding:var(--spacing-xl) var(--spacing-lg);transition:right 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:-10px 0 30px rgba(0,0,0,0.5);overflow-y:auto;} .mobile-menu.active{right:0;} .mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1050;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;} .mobile-menu-overlay.active{opacity:1;visibility:visible;} .mobile-menu-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);border-bottom:1px solid rgba(255,255,255,0.1);} .mobile-menu-close{width:40px;height:40px;background:transparent;border:none;color:var(--text-secondary);font-size:1.25rem;cursor:pointer;border-radius:50%;transition:var(--transition-fast);} .mobile-menu-close:hover{color:var(--text-primary);background:rgba(255,255,255,0.1);} .mobile-nav-list{display:flex;flex-direction:column;gap:var(--spacing-xs);} .mobile-nav-link{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-sm);font-size:1.05rem;font-weight:500;color:var(--text-secondary);border-radius:var(--radius-md);transition:var(--transition-fast);} .mobile-nav-link:hover,.mobile-nav-link.active{color:var(--text-primary);background:rgba(255,255,255,0.05);} .mobile-nav-link i{width:24px;text-align:center;font-size:1rem;color:var(--text-muted);} .mobile-search-container{margin-bottom:var(--spacing-lg);} .mobile-search-form{display:flex;align-items:center;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-full);overflow:hidden;} .mobile-search-form input{flex:1;padding:var(--spacing-md);background:transparent;border:none;color:var(--text-primary);font-size:0.95rem;font-family:inherit;} .mobile-search-form input::placeholder{color:var(--text-muted);} .mobile-search-form input:focus{outline:none;} .mobile-search-form button{padding:var(--spacing-md) var(--spacing-lg);background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);} .mobile-search-form button:hover{color:var(--text-primary);} .mobile-search-btn{display:none;width:36px;height:36px;background:rgba(255,255,255,0.08);border:none;border-radius:50%;color:var(--text-secondary);font-size:1rem;cursor:pointer;transition:var(--transition-fast);align-items:center;justify-content:center;} .mobile-search-btn:hover{background:rgba(255,255,255,0.15);color:var(--text-primary);} @media (max-width:576px){.mobile-search-btn{display:flex;} } @media (max-width:768px){.main-header{padding:var(--spacing-sm) 0;} .header-inner{padding:0 var(--spacing-sm);} .logo-link{font-size:1.25rem;} .logo-link i{font-size:1.4rem;} .search-bar input{width:150px;font-size:0.85rem;padding:8px 12px;padding-left:36px;} .search-bar input:focus{width:170px;} .search-bar button{left:10px;} .user-btn{width:36px;height:36px;font-size:0.9rem;} .mobile-menu-toggle{width:36px;height:36px;font-size:1.25rem;} body{padding-top:60px;} .hero{margin-top:-60px;padding-top:60px;} } @media (max-width:576px){.logo-link span{display:none;} .search-bar{display:none;} .user-area{gap:4px;} .user-btn{width:34px;height:34px;} .header-left{gap:var(--spacing-sm);} } @media (max-width:480px){.mobile-menu{width:100%;max-width:100%;right:-100%;} .mobile-nav-link{padding:var(--spacing-md);font-size:1rem;} } body{padding-top:70px;} .hero{margin-top:-70px;padding-top:70px;} .site-logo{height:38px;width:auto;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,0,0,0.2));} @media (max-width:768px){.site-logo{height:32px;} }