.header {

  border-bottom: 1px solid var(--border);

}

.header-inner {

  display: flex;
  align-items: center;
  justify-content: space-between;

}

.logo {

  font-size: 1.4rem;
  font-weight: 600;

}

.nav {

  display: flex;
  gap: 20px;

}

.nav a {

  font-size: 1.30rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0.85;

}

.nav a:hover {

  opacity: 1;

}



.header-actions {

  display: flex;
  align-items: center;
  gap: 10px;

}





.theme-toggle {

  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;

}

#theme-toggle {
  font-size: 20px;
  cursor: pointer;
  transition: transform .2s;
}

#theme-toggle:hover {
  transform: rotate(20deg) scale(1.1);
}



:root {
  --text: #222;
}

[data-theme="dark"] {
  --text: #fff;
}

.menu-toggle {

  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;

}

.mobile-menu {

  display: none;
  flex-direction: column;
  padding: 20px;
  border-top: 1px solid var(--border);

}

.mobile-menu a {

  padding: 10px 0;

}

#mobile-menu {

  position: absolute;

  top: 60px;
  right: 20px;

  background: var(--card);

  border-radius: 10px;

  padding: 15px;

  opacity: 0;
  visibility: hidden;

  transform: translateY(-10px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s;

}



#mobile-menu.active {

  opacity: 1;
  visibility: visible;

  transform: translateY(0);

}

#menu-toggle {

  font-size: 24px;

  cursor: pointer;


  color: var(--text);
  transition: color .2s ease;

}

#menu-toggle:hover {

  transform: scale(1.1);

}




@media (max-width:768px) {

  .nav {

    display: none;

  }

  .menu-toggle {

    display: block;

  }

  .mobile-menu.active {

    display: flex;

  }

  .header-inner {

    flex-wrap: wrap;

  }

}

.fi {

  font-size: 20px;

}



.lang-switch {

  display: flex;
  align-items: center;
  gap: 6px;

  background: var(--card);

  padding: 4px;

  border-radius: 10px;

  border: 1px solid var(--border);

}



.lang-btn {

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;

  border: none;
  background: none;

  cursor: pointer;

  font-size: 13px;
  font-weight: 500;

  color: var(--text);

  border-radius: 8px;

  opacity: .75;

  transition:

    background .25s ease,
    transform .15s ease,
    opacity .2s ease;

}



.lang-btn .fi {

  font-size: 16px;

}



.lang-btn:hover {

  opacity: 1;
  transform: translateY(-1px);
  background: var(--border);

}



.lang-btn.active {

  background: var(--border);
  color: var(--text);

  opacity: 1;

}



.lang-btn.active .fi {

  filter: brightness(1.2);

}