/* V54 — architectural header and asymmetric product mega menu */
.topbar:before{animation:none!important;opacity:0!important}

.header{
  height:88px;
  overflow:visible;
  background:#fdfeff;
  border-bottom:1px solid #dce7eb;
  box-shadow:0 10px 28px rgba(7,35,54,.07);
  backdrop-filter:none;
}
.header:before{display:none!important}
.header:after{
  height:1px;
  background:linear-gradient(90deg,transparent 3%,rgba(18,168,210,.36) 29%,#dce7eb 52%,rgba(255,107,26,.27) 78%,transparent 97%);
}
.header-in{height:100%;gap:22px}
.logo{width:205px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;gap:0}
.logo img{width:182px;filter:none}
.logo>span{display:none!important}

.nav{height:100%;gap:4px}
.nav>div,.nav>a{height:100%}
.nav>div>button,.nav>a{
  min-height:100%;
  height:100%;
  padding:0 15px;
  border-radius:0;
  background:transparent;
  color:#42596a;
  font-size:13px;
  font-weight:760;
  letter-spacing:-.012em;
}
.nav>div>button:after,.nav>a:after{
  bottom:0;
  height:2px;
  background:#12a8d2;
}
.nav-item.current>button:after,.nav>a.current:after{background:#12a8d2}
.nav>div>button:hover,.nav>a:hover,.nav-item.open>button,.nav-item.current>button,.nav>a.current{
  background:transparent;
  color:#087fa5;
  box-shadow:none;
}
.nav button b{
  width:7px;
  height:7px;
  margin:0 0 4px 10px;
  display:inline-block;
  border:0;
  border-right:1.5px solid #728994;
  border-bottom:1.5px solid #728994;
  border-radius:0;
  background:transparent;
  color:transparent;
  font-size:0;
  transform:rotate(45deg);
  transition:transform .18s,border-color .18s;
}
.nav-item.open>button b{border-color:#087fa5;transform:rotate(225deg)}

.dropdown.mega-menu{
  left:50%!important;
  top:87px;
  width:820px;
  max-width:calc(100vw - 32px);
  padding:15px;
  display:grid;
  gap:10px;
  border:1px solid #d6e2e6;
  border-top:2px solid #12a8d2;
  border-radius:0 0 16px 16px;
  background:#eef3f2;
  box-shadow:0 30px 76px rgba(4,29,46,.2);
  transform:translate(-50%,8px);
}
.nav-server .dropdown.mega-menu{border-top-color:#f46f2a}
.nav-item:hover>.dropdown.mega-menu,.nav-item.open>.dropdown.mega-menu,.nav-item:focus-within>.dropdown.mega-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.mega-menu .drop-head{
  min-height:55px;
  padding:2px 4px 13px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid #d4e0e4;
}
.mega-menu .drop-head>div{display:grid;gap:5px}
.mega-menu .drop-head small{color:#087fa5;font-size:8px;font-weight:950;letter-spacing:.15em}
.mega-menu .drop-head strong{color:#10283a;font-size:20px;line-height:1.15;letter-spacing:-.025em}
.mega-menu .drop-head-note{max-width:290px;padding-left:18px;border-left:1px solid #d2dde1;color:#667b88;font-size:10.5px;line-height:1.5}

.mega-menu .drop-grid{
  height:238px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-rows:repeat(3,74px);
  gap:8px;
}
.mega-menu .drop-card{
  --card-accent:#1db1d5;
  position:relative;
  min-width:0;
  min-height:0;
  margin:0;
  border:1px solid #d8e3e6;
  border-radius:9px;
  background:#fff;
  color:#10283a;
  box-shadow:none;
  transition:border-color .18s,background .18s,transform .18s;
}
.mega-menu .drop-card:nth-child(n+2){
  grid-column:2;
  padding:10px 11px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto 27px;
  align-items:center;
  gap:9px;
}
.mega-menu .drop-card:nth-child(n+2):hover{
  border-color:color-mix(in srgb,var(--card-accent) 54%,#d8e3e6);
  background:#fbfdfd;
  transform:translateX(3px);
}
.mega-menu .drop-primary{
  grid-column:1;
  grid-row:1/4;
  padding:22px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:48px 1fr auto;
  gap:14px 13px;
  overflow:hidden;
  border-color:#164153;
  background-color:#082433;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:32px 32px;
  color:#fff;
}
.mega-menu .drop-primary:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--card-accent);
}
.mega-menu .drop-primary:hover{border-color:color-mix(in srgb,var(--card-accent) 58%,#164153);transform:translateY(-2px)}
.mega-menu .drop-grid .ico{
  width:36px;
  height:36px;
  margin:0;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--card-accent) 34%,#d8e3e6);
  border-radius:6px;
  background:color-mix(in srgb,var(--card-accent) 9%,#fff);
  color:var(--card-accent);
  font-size:9px;
  font-style:normal;
  font-weight:950;
  letter-spacing:.04em;
}
.mega-menu .drop-primary .ico{
  width:48px;
  height:48px;
  grid-column:1;
  grid-row:1;
  border-color:color-mix(in srgb,var(--card-accent) 55%,transparent);
  background:color-mix(in srgb,var(--card-accent) 15%,transparent);
  color:#fff;
  font-size:10px;
}
.mega-menu .drop-card>span:nth-child(2){display:grid;gap:3px;min-width:0}
.mega-menu .drop-primary>span:nth-child(2){grid-column:1/3;grid-row:2;align-content:start;gap:7px}
.mega-menu .drop-kicker{color:var(--card-accent)!important;font-size:7px!important;font-weight:950!important;letter-spacing:.13em!important}
.mega-menu .drop-card strong{color:#132b3b;font-size:13px;line-height:1.15}
.mega-menu .drop-card>span:nth-child(2)>small:not(.drop-kicker){color:#71838e;font-size:9.5px;line-height:1.35}
.mega-menu .drop-primary strong{color:#fff;font-size:25px;letter-spacing:-.035em}
.mega-menu .drop-primary>span:nth-child(2)>small:not(.drop-kicker){max-width:280px;color:#a9bfca;font-size:11.5px;line-height:1.55}
.mega-menu .drop-card>em{
  color:#526c78;
  font-size:9px;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}
.mega-menu .drop-primary>em{
  grid-column:1/3;
  grid-row:3;
  align-self:end;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:19px;
  letter-spacing:-.025em;
}
.mega-menu .drop-card>i{
  width:27px;
  height:27px;
  margin:0;
  display:grid;
  place-items:center;
  border:1px solid #d7e2e5;
  border-radius:6px;
  color:#637b86;
  font-size:11px;
  font-style:normal;
}
.mega-menu .drop-primary>i{
  position:absolute;
  right:21px;
  bottom:18px;
  width:auto;
  height:34px;
  padding:0 11px;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:9px;
  font-weight:850;
}
.mega-menu .drop-card:hover>i{border-color:var(--card-accent);color:var(--card-accent)}
.mega-menu .drop-primary:hover>i{border-color:rgba(255,255,255,.28);color:#fff}
.drop-vds,.drop-web{--card-accent:#21b7d9!important}
.drop-cloud,.drop-corporate{--card-accent:#35bfa7!important}
.drop-dedicated,.drop-wordpress{--card-accent:#f27a35!important}
.drop-gpu,.drop-reseller{--card-accent:#81919a!important}

.mega-menu .drop-foot{
  min-height:48px;
  margin:0;
  padding:9px 4px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid #d5e0e3;
  border-radius:0;
  background:transparent;
  color:#667a86;
}
.mega-menu .drop-foot>span{font-size:9.5px;font-weight:700;white-space:nowrap}
.mega-menu .drop-foot>div{display:flex;align-items:center;gap:7px}
.mega-menu .drop-foot a{
  min-height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #cedbdf;
  border-radius:6px;
  background:#fff;
  color:#274554;
  font-size:9.5px;
  font-weight:850;
  white-space:nowrap;
}
.mega-menu .drop-foot .drop-all{border-color:#f46f2a;background:#f46f2a;color:#fff}
.mega-menu .drop-foot a:hover{border-color:#98b6c1;color:#087fa5}
.mega-menu .drop-foot .drop-all:hover{border-color:#dd5d1a;background:#dd5d1a;color:#fff}

.header-actions{padding-left:17px;gap:7px;border-left:1px solid #dce6e9}
.global-cart-trigger{
  width:68px;
  height:42px;
  flex:0 0 68px;
  padding:0 9px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #d9e4e7;
  border-radius:7px;
  background:#fff;
  color:#18384e;
  box-shadow:none;
}
.global-cart-trigger:after{content:"Sepet";font-size:9px;font-weight:850}
.global-cart-trigger:hover,.global-cart-trigger[aria-expanded="true"]{border-color:#acd5e0;background:#f5fbfc;color:#087fa5}
.global-cart-trigger>[data-cart-badge]{right:2px;top:-7px}
.login{
  min-height:42px;
  padding:0 12px;
  border:1px solid #d9e4e7;
  border-radius:7px;
  background:#fff;
  color:#274555;
  font-size:11px;
  font-weight:800;
}
.login:before,.login:after{display:none!important}
.login:hover{border-color:#acd5e0;color:#087fa5}
.header-actions .btn.small{
  min-height:44px;
  padding:0 16px;
  border-radius:7px;
  background:#f46f2a;
  box-shadow:0 10px 21px rgba(244,111,42,.2);
  font-size:11px;
}
.header-actions .btn.small:hover{background:#df5e1b;box-shadow:0 12px 24px rgba(244,111,42,.24)}

.nav button:focus-visible,.nav>a:focus-visible,.mega-menu a:focus-visible,.header-actions>a:focus-visible,.global-cart-trigger:focus-visible{
  outline:2px solid #0c9fc7;
  outline-offset:2px;
}

@media(max-width:1280px){
  .header-in{gap:13px}
  .logo{width:188px}
  .logo img{width:172px}
  .nav>div>button,.nav>a{padding:0 11px;font-size:12px}
  .global-cart-trigger{width:42px;flex-basis:42px;padding:0}
  .global-cart-trigger:after{display:none}
  .header-actions{padding-left:12px}
  .dropdown.mega-menu{width:780px}
}
@media(max-width:1050px){
  .header{height:78px}
  .nav{display:none}
  .logo{width:auto}
  .logo img{width:172px}
  .login{display:none}
  .header-actions{margin-left:auto;padding-left:13px}
  .mobile-nav.open{top:118px;height:calc(100dvh - 118px)}
  .m-cloud>i{background:#e2f7f4;color:#168e80}
  .m-gpu>i{background:#edf0f2;color:#566c77}
}
@media(max-width:720px){
  .header{height:70px}
  .header-in{width:calc(100% - 28px)}
  .logo img{width:149px}
  .header-actions{padding-left:8px}
  .global-cart-trigger{width:40px;flex-basis:40px}
  .header-actions .btn.small{display:none}
  .mobile-nav.open{top:110px;height:calc(100dvh - 110px)}
}