:root {
  --i18n-image-error: "Görsel yüklenemedi";
}

html[lang="en"] {
  --i18n-image-error: "Image unavailable";
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.language-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 16px rgba(119, 223, 255, .025);
}

.language-switch button {
  min-width: 31px;
  height: 28px;
  padding: 0 8px;
  color: #8297ad;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.language-switch button:hover {
  color: #fff;
}

.language-switch button[aria-pressed="true"] {
  color: #071321;
  background: #dff7ff;
  box-shadow: 0 5px 14px rgba(58, 185, 226, .14);
}

.language-switch button:focus-visible {
  outline: 2px solid #77dfff;
  outline-offset: 2px;
}

.shot.is-error::after {
  content: var(--i18n-image-error) !important;
}

@media (min-width: 431px) and (max-width: 640px) {
  .nav {
    height: 96px !important;
  }

  .brand-main {
    font-size: 27px !important;
  }

  .nav-links .current {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    color: #fff !important;
    border: 1px solid rgba(119, 223, 255, .42) !important;
    border-radius: 999px !important;
    background: rgba(119, 223, 255, .09) !important;
    box-shadow: inset 0 0 18px rgba(119, 223, 255, .045), 0 0 24px rgba(40, 166, 208, .08) !important;
    text-shadow: none !important;
  }

  .nav-links .current::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    display: block !important;
    border-radius: 50% !important;
    background: #77dfff !important;
    box-shadow: 0 0 12px rgba(119, 223, 255, .8) !important;
  }

  .nav-links .current::after {
    display: none !important;
  }
}

.legal-language-note {
  width: min(1280px, calc(100% - 64px));
  margin: 22px auto 0;
  padding: 13px 16px;
  color: #c9d9e7;
  border: 1px solid rgba(121, 220, 255, .22);
  border-radius: 13px;
  background: rgba(121, 220, 255, .065);
  font-size: 12px;
  line-height: 1.55;
}

.language-support-toast,
.site-toast {
  max-width: min(360px, calc(100vw - 36px));
  position: fixed;
  top: 108px;
  right: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  color: #edf7ff;
  border: 1px solid rgba(121, 220, 255, .28);
  border-radius: 14px;
  background: rgba(7, 20, 34, .94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38), inset 0 0 24px rgba(121, 220, 255, .045);
  backdrop-filter: blur(18px);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-9px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

.toast-icon {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 6px;
  color: #071321;
  border-radius: 9px;
  background: #dff7ff;
}

.language-support-toast.is-visible,
.site-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .legal-language-note {
    width: min(100% - 36px, 1280px);
  }

  .language-support-toast,
  .site-toast {
    top: 90px;
    right: 18px;
  }

  .nav {
    gap: 10px;
  }

  .nav-links,
  .nav-actions {
    margin-left: auto;
  }

  .language-switch {
    padding: 2px;
  }

  .language-switch button {
    min-width: 27px;
    height: 25px;
    padding: 0 6px;
    font-size: 9px;
  }
}

@media (max-width: 430px) {
  .brand-by {
    display: block;
    margin-top: 5px;
    padding-right: 1px;
    font-size: 6px;
    letter-spacing: 1.35px;
    white-space: nowrap;
  }

  .nav-links,
  .nav-actions {
    gap: 9px !important;
    font-size: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .language-switch button,
  .language-support-toast,
  .site-toast {
    transition-duration: .01ms !important;
  }
}