/* Kheiron — shared navigation layer.
   Added 2026-09-08: the four solution families each have their own page now, so
   Çözümler needs a real menu instead of a home-page anchor. */

.nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-group > a {
  white-space: nowrap;
}
/* KheironStand is a plain primary-nav label. The earlier external-link marker
   added noise and wrapped at intermediate widths, so it is intentionally absent. */
.nav-brandlink {
  display: flex !important;
  align-items: center;
  white-space: nowrap;
}

.nav-caret {
  width: 30px;
  min-height: 30px;
  min-width: 30px;
  display: grid;
  place-items: center;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-size: .78rem;
  line-height: 1;
  opacity: .75;
  transition: transform 180ms ease-out, background 180ms ease-out;
}
.nav-caret:hover {
  background: rgba(255, 255, 255, .12);
}
.nav-group[data-open="true"] .nav-caret {
  transform: rotate(180deg);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -12px;
  z-index: 60;
  display: none;
  width: 316px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(26, 29, 31, .95);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.nav-menu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 14px;
  content: "";
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group[data-open="true"] .nav-menu {
  display: grid;
  gap: 2px;
}

.nav-menu a {
  min-height: 44px;
  display: grid !important;
  align-content: center;
  gap: 2px;
  padding: 9px 13px !important;
  place-items: start !important;
  border-radius: 10px;
  text-align: left;
}
.nav-menu a b {
  font-family: "JetBrains Mono", monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: #9aa6ad;
  text-transform: uppercase;
}
.nav-menu a strong {
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
}
.nav-menu a:hover b,
.nav-menu a:focus-visible b {
  color: #ff8f88;
}
.nav-menu .nav-menu-all {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0 0 10px 10px;
  color: #cdd6db;
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Inside the collapsed mobile panel the menu is always open — no nested toggle. */
@media (max-width: 980px) {
  .nav-group {
    display: block;
  }
  .nav-caret {
    display: none;
  }
  .nav-menu {
    position: static;
    display: grid;
    width: auto;
    margin: 4px 0 8px;
    padding: 6px 0 6px 12px;
    border: 0;
    border-left: 2px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-menu::before {
    display: none;
  }
  .nav-menu .nav-menu-all {
    display: none !important;
  }
}

/* ── Footer ────────────────────────────────────────────────────────────────
   Added 2026-09-08. The footer previously sat on the same chassis surface as
   the content sections, so it read as one more section instead of the close.
   It now becomes its own dark surface — the same graphite family already used
   by the header and the dark content tracks. */

footer {
  position: relative;
  margin-top: 0;
  padding: 74px 0 40px !important;
  border-top: 0 !important;
  color: #d7dee2;
  background: var(--graphite, #242a2d);
}
footer::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--signal, #ee3b33), rgba(238, 59, 51, .05));
}
footer .technical {
  color: #8d99a1;
}
footer a {
  color: #eef2f4;
}
footer a:hover {
  color: #ff8f88;
}
footer .footer-copy,
footer .footer-unit small {
  color: #9fabb3;
}
footer .footer-contact address {
  max-width: 30ch;
  color: #9fabb3;
  font-style: normal;
  line-height: 1.55;
}
footer .footer-brand {
  width: min(190px, 100%);
  height: auto !important;
  aspect-ratio: 584 / 127;
  object-fit: contain;
  object-position: left center;
  filter: none;
  opacity: 1;
}
footer .footer-bottom {
  color: #8d99a1;
  border-top-color: rgba(255, 255, 255, .14) !important;
}

/* Mobile panel readability — id selector beats the per-page inline nav rules. */
@media (max-width: 980px) {
  #nav-links.open {
    background: rgba(18, 21, 23, .97);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
  }
  #nav-links.open > a,
  #nav-links.open .nav-group > a {
    justify-items: start;
    place-items: center start;
    text-align: left;
  }
  #nav-links.open .nav-menu a {
    place-items: center start !important;
  }
}