/* Kontrast: açık zeminde yazı --text, koyu bar ve koyu düğmede yalnızca --surface.
   Değişken header ve panelde ayrı tanımlı: panel header'ın dışında durur. */
.hd10,
.hd10-panel {
  --hd10-dark: color-mix(in srgb, var(--primary) 72%, black);
  --hd10-top: 4.5rem;
}

.site-header.hd10 {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border-bottom: 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 8%, transparent);
}

/* Üst kat */
.hd10-top { background: var(--surface); border-bottom: 1px solid var(--line); }
.hd10-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: var(--hd10-top);
  box-sizing: border-box;
}
.hd10-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-heading);
  text-decoration: none;
  white-space: nowrap;
}
.hd10-mark {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid var(--hd10-dark);
  border-radius: 50%;
  color: var(--hd10-dark);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.hd10-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hd10-actions { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.hd10-actions .icon { width: 1.15rem; height: 1.15rem; flex: none; color: inherit; }
.hd10-search { position: static; }
.hd10-search summary {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  list-style: none;
  color: var(--hd10-dark);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.hd10-search summary::-webkit-details-marker { display: none; }
.hd10-search summary::marker { content: ""; }
.hd10-search summary:hover { color: var(--surface); background: var(--hd10-dark); border-color: var(--hd10-dark); }
.hd10-sform {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem max(1.5rem, calc((100% - 1280px) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 26px 50px color-mix(in srgb, var(--text) 12%, transparent);
}
.hd10-sform input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3rem;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--hd10-dark);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}
.hd10-sform input::placeholder { color: color-mix(in srgb, var(--text) 62%, var(--surface)); }
.hd10-sform button {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--hd10-dark);
  color: var(--surface);
  cursor: pointer;
}
.hd10-sform button .icon { color: var(--surface); }
.hd10-sform button:hover { background: var(--primary); }

.hd10-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.hd10-call .icon { color: var(--hd10-dark); }
.hd10-call-num { font-size: 0.97rem; font-weight: 700; }
.hd10-call:hover .hd10-call-num { text-decoration: underline; text-underline-offset: 4px; }
.hd10-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.35rem;
  color: var(--surface);
  background: var(--hd10-dark);
  border-color: var(--hd10-dark);
  border-radius: 999px;
  font-size: 0.92rem;
  white-space: nowrap;
}
.hd10-cta .btn-label,
.hd10-cta .icon { color: var(--surface); }
.hd10-cta:hover { background: var(--primary); border-color: var(--primary); }
.hd10-burger { display: none; }

/* Alt kat: menü için ayrı koyu bar */
.hd10-bar { background: var(--hd10-dark); color: var(--surface); }
.hd10-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  min-width: 0;
  height: 3.1rem;
}
.hd10 .hd10-nav > a,
.hd10 .hd10-nav > .nav-drop > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 100%;
  box-sizing: border-box;
  padding: 0 0.6rem;
  color: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  transition: background 0.18s ease;
}
.hd10 .hd10-nav > a::after,
.hd10 .hd10-nav > .nav-drop > a::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0;
  height: 3px;
  background: var(--surface);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.hd10 .hd10-nav > a:hover,
.hd10 .hd10-nav > .nav-drop:hover > a,
.hd10 .hd10-nav > .nav-drop:focus-within > a {
  color: var(--surface);
  background: color-mix(in srgb, var(--surface) 12%, transparent);
}
.hd10 .hd10-nav > a:hover::after,
.hd10 .hd10-nav > a.is-active::after,
.hd10 .hd10-nav > .nav-drop:hover > a::after,
.hd10 .hd10-nav > .nav-drop > a.is-active::after { transform: scaleX(1); }
.hd10 .hd10-nav > a.is-active,
.hd10 .hd10-nav > .nav-drop > a.is-active { font-weight: 700; }
.hd10-chev { width: 0.75rem; height: 0.75rem; flex: none; transition: transform 0.2s ease; }
.hd10 .nav-drop { display: flex; align-items: stretch; }
.hd10 .nav-drop::after { content: none; }
.hd10 .nav-drop:hover .hd10-chev,
.hd10 .nav-drop:focus-within .hd10-chev { transform: rotate(180deg); }

/* Açılır liste: barın hemen altında, ölü aralık yok */
.hd10 .nav-sub {
  top: 100%;
  left: 50%;
  min-width: 15rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--hd10-dark);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 26px 50px color-mix(in srgb, var(--text) 16%, transparent);
}
.hd10 .hd10-nav > .nav-drop:nth-child(-n+2) .nav-sub { left: 0; transform: none; }
.hd10 .hd10-nav > .nav-drop:nth-last-child(-n+3) .nav-sub { left: auto; right: 0; transform: none; }
.hd10 .nav-sub a {
  display: block;
  padding: 0.65rem 0.85rem;
  color: var(--text);
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
}
.hd10 .nav-sub a:hover,
.hd10 .nav-sub a.is-active { color: var(--hd10-dark); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.hd10 .nav-sub a.is-active { font-weight: 700; }

.hd10 a:focus-visible,
.hd10 button:focus-visible,
.hd10 summary:focus-visible { outline: 2px solid var(--hd10-dark); outline-offset: 2px; }
.hd10 .hd10-bar a:focus-visible { outline-color: var(--surface); outline-offset: -3px; }

/* Geniş ekran: üst kat kayar, menü barı yapışık kalır */
@media (min-width: 1280px) {
  .site-header.hd10 { top: calc(-1 * var(--hd10-top) - 1px); }
}
/* Dar masaüstü: yazı küçülmez; yalnız aralık daralır, telefon numarası ikona iner */
@media (min-width: 1280px) and (max-width: 1400px) {
  .hd10 .hd10-nav > a,
  .hd10 .hd10-nav > .nav-drop > a { padding: 0 0.5rem; }
  .hd10 .hd10-call-num { display: none; }
  .hd10 .hd10-nav > a::after,
  .hd10 .hd10-nav > .nav-drop > a::after { left: 0.5rem; right: 0.5rem; }
}

/* Menü sığmayan genişlikte: bar kalkar, panel açılır */
@media (max-width: 1279px) {
  .hd10-bar { display: none; }
  .hd10-top { border-bottom: 0; }
  .hd10-top-row { height: 4.2rem; gap: 0.75rem; }
  .hd10-call-num { display: none; }
  .hd10-call,
  .hd10-cta { width: 2.6rem; height: 2.6rem; padding: 0; justify-content: center; border-radius: 50%; }
  .hd10-call { color: var(--hd10-dark); border: 1px solid var(--line); }
  .hd10-cta .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .hd10-burger {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    color: var(--surface);
    background: var(--hd10-dark);
    border: 0;
    border-radius: 50%;
  }
  .hd10-bars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
  .hd10-bars i { display: block; height: 2px; border-radius: 2px; background: var(--surface); }
}
@media (max-width: 800px) {
  .hd10-name { font-size: 1.12rem; }
  .hd10-mark { width: 2.4rem; height: 2.4rem; }
}
@media (max-width: 520px) {
  .hd10-actions { gap: 0.5rem; }
  .hd10-actions .lang-switch { display: none; }
}

/* Panel */
.hd10-panel { background: var(--surface); color: var(--text); }
.hd10-panel .nav-panel-top { border-bottom: 1px solid var(--line); }
.hd10-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.2rem; }
.hd10-panel-head .lang-switch { margin: 0; }
.hd10-panel .nav-panel-top .nav-close {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 2.8rem;
  height: 2.8rem;
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 auto;
  padding: 0;
  color: var(--hd10-dark);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.hd10-panel .nav-close .icon { display: block; width: 1.7rem; height: 1.7rem; margin: 0; color: var(--hd10-dark); }
.hd10-panel .nav-panel-top .nav-close:hover .icon { color: var(--text); }
.hd10-panel .nav-panel-body { padding: 0.5rem 0; }
.hd10-panel .panel-item { border-bottom: 1px solid var(--line); }
.hd10-panel .panel-item:last-child { border-bottom: 0; }
.hd10-panel .panel-row { display: flex; align-items: center; list-style: none; cursor: pointer; }
.hd10-panel .panel-row::-webkit-details-marker { display: none; }
.hd10-panel .panel-row::marker { content: ""; }
.hd10-panel .panel-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9rem 0;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
}
.hd10-panel .panel-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  color: var(--hd10-dark);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.hd10-panel .panel-box .icon { width: 1.05rem; height: 1.05rem; color: inherit; }
.hd10-panel .panel-text { overflow-wrap: anywhere; }
.hd10-panel .panel-link.is-active { color: var(--hd10-dark); font-weight: 700; }
.hd10-panel .panel-link.is-active .panel-box { color: var(--surface); background: var(--hd10-dark); border-color: var(--hd10-dark); }
.hd10-panel .panel-chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--hd10-dark);
  border-radius: 50%;
}
.hd10-panel .panel-chev .hd10-chev { width: 1rem; height: 1rem; }
.hd10-panel .panel-group[open] .panel-chev .hd10-chev { transform: rotate(180deg); }
.hd10-panel .panel-sub { margin: 0 0 0.8rem 1.1rem; border-left: 1px solid var(--line); }
.hd10-panel .panel-child {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0 0.65rem 0.9rem;
  color: var(--text);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
  border: 0;
}
.hd10-panel .panel-child i { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--hd10-dark); }
.hd10-panel .panel-child.is-active { color: var(--hd10-dark); font-weight: 700; }
.hd10-panel .panel-reach .button:not(.button-ghost) { color: var(--surface); background: var(--hd10-dark); border-color: var(--hd10-dark); }
.hd10-panel .panel-reach .button-ghost { color: var(--text); border-color: var(--line); }
.hd10-panel .panel-reach .button-ghost .icon { color: var(--hd10-dark); }
.hd10-panel a:focus-visible,
.hd10-panel button:focus-visible,
.hd10-panel summary:focus-visible { outline: 2px solid var(--hd10-dark); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hd10 .hd10-nav > a,
  .hd10 .hd10-nav > .nav-drop > a,
  .hd10 .hd10-nav > a::after,
  .hd10 .hd10-nav > .nav-drop > a::after,
  .hd10-chev { transition: none; }
}
/* Az menü öğesi (7 ve altı): uçlara yaslanıp ortada boşluk bırakmak yerine ortalı ve geniş aralıklı dağılım. */
@media (min-width: 1280px) {
  .hd10 .hd10-nav:not(:has(> :nth-child(8))) { justify-content: center; gap: clamp(1.75rem, 3.2vw, 3.25rem); }
}

/* Mega menü (header 07 mantığı): 8+ alt sayfalı grup header genişliğinde sütunlu panel açar;
   is-many 3, is-lots 4 sütun; yükseklik ekranla sınırlı, fazlası panel içinde kayar. Mobil panel değişmez. */
.hd10 .hd10-nav > .nav-drop.has-mega { position: static; }
.hd10 .nav-drop.has-mega > .nav-sub.is-mega {
  left: 0;
  right: 0;
  transform: none;
  min-width: 0;
  padding: 1rem max(1.25rem, calc((100% - 1280px) / 2 + 1.25rem));
  border-radius: 0 0 22px 22px;
}
.hd10 .nav-drop.has-mega:hover > .nav-sub.is-mega,
.hd10 .nav-drop.has-mega:focus-within > .nav-sub.is-mega {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.15rem 1rem;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hd10 .nav-drop.has-mega:hover > .nav-sub.is-mega.is-many,
.hd10 .nav-drop.has-mega:focus-within > .nav-sub.is-mega.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.1rem 0.75rem; }
.hd10 .nav-drop.has-mega:hover > .nav-sub.is-mega.is-lots,
.hd10 .nav-drop.has-mega:focus-within > .nav-sub.is-mega.is-lots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.1rem 0.65rem; }
.hd10 .nav-sub.is-mega a { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.hd10 .nav-sub.is-mega.is-many a { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
.hd10 .nav-sub.is-mega.is-lots a { padding: 0.42rem 0.6rem; font-size: 0.86rem; }
@media (max-width: 1279px) {
  .hd10 .nav-sub.is-mega { display: none !important; }
}