/* === HEADER BASE === */
.top-header{background:rgba(20,22,40,.85);border:1px solid rgba(81,101,255,.5);border-radius:16px;box-shadow:0 0 20px rgba(81,101,255,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:sticky;top:10px;margin:10px auto;width:calc(100% - 20px);z-index:1000;padding:10px 0;will-change:transform}
.header-container{max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-wrap:wrap}

/* === LOGO === */
.logo{font-size:1.6rem;color:#4da3ff;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:6px;transition:color .3s ease}
.logo:hover{color:#82c4ff}
.logo-img{height:40px;width:auto;display:block;filter:drop-shadow(0 0 4px rgba(77,163,255,.5));transition:transform .3s ease}
.logo-img:hover{transform:scale(1.05)}

/* === SEARCH === */
.search-form{display:flex;align-items:center;background:rgba(27,28,46,.9);border:1px solid rgba(81,101,255,.6);border-radius:12px;padding:4px 8px;width:320px;transition:all .3s ease;box-shadow:inset 0 0 6px rgba(81,101,255,.4)}
.search-form input{background:transparent;border:none;color:#fff;flex:1;padding:6px 8px;outline:none;font-size:.95rem;border-radius:12px}
.search-form button{background:none;border:none;color:#4da3ff;cursor:pointer;font-size:1rem;transition:color .3s ease}
.search-form button:hover{color:#82c4ff}
.search-form:focus-within{border-color:#82c4ff;box-shadow:0 0 10px rgba(81,101,255,.7)}

/* === NAVIGATION === */
.nav-links{display:flex;align-items:center;gap:5px;position:relative}
.nav-links a,.dropbtn{color:#ccc;text-decoration:none;font-weight:500;padding:6px 12px;border-radius:10px;transition:color .3s ease,background .3s ease}
.nav-links a:hover,.dropbtn:hover{color:#fff;background:rgba(81,101,255,.2)}

/* === DROPDOWN === */
.dropbtn{background:transparent;border:none;color:#ccc;font:inherit;cursor:pointer;padding:6px 12px;border-radius:10px;appearance:none;-webkit-appearance:none;-moz-appearance:none;box-shadow:none;transition:color .3s ease,background .3s ease}
.dropdown.mega{position:relative}
.dropdown-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000}
.dropdown-panel{display:none;position:fixed;left:50%;transform:translateX(-90%);top:90px;width:clamp(280px,92vw,1000px);max-height:70vh;overflow:auto;background:#1c1e35;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.45);padding:18px;z-index:1100;animation:fadeIn .18s ease-in;contain:layout paint}
.dropdown-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
@media (max-width:900px){.dropdown-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.dropdown-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.dropdown-grid{grid-template-columns:1fr}}
.dropdown-item{display:block;color:#fff;background:rgba(255,255,255,.03);border:1px solid rgba(81,101,255,.18);padding:10px 12px;border-radius:10px;text-decoration:none;font-size:.95rem;transition:background .2s ease,transform .1s ease,border-color .2s ease}
.dropdown-item:hover{background:rgba(81,101,255,.15);border-color:rgba(81,101,255,.35);transform:translateY(-1px)}
.dropdown.mega.open .dropdown-panel{display:block}
.dropdown.mega.open .dropdown-backdrop{display:block}

/* === MOBILE === */
@media (max-width:700px){
.header-container{flex-direction:column;align-items:left;gap:10px}
.search-form{width:100%;max-width:95%}
.nav-links{gap:5px;flex-wrap:wrap;justify-content:left}
.logo{font-size:1.3rem}
}

/* === ANIMATION === */
@keyframes fadeIn{from{opacity:0;transform:translate(-50%,-5px)}to{opacity:1;transform:translate(-50%,0)}}