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

.site-header.hd7 {
  position: sticky;
  top: 0;
  z-index: 20;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 6%, transparent);
}
.hd7-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 1.25rem;
  min-height: 4.9rem;
}
.hd7-row > .hd7-logo,
.hd7-row > .hd7-actions { align-self: center; }
.hd7-burger { display: none; }

/* Logo */
.hd7-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;
}
.hd7-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px 12px 12px 4px;
  background: var(--hd7-dark);
  color: var(--surface);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.hd7-name {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Menü: kapsül; aktifte koyu dolgu + açık yazı */
.hd7-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
}
.hd7 .hd7-nav > a,
.hd7 .hd7-nav .nav-drop > a {
  display: flex;
  align-items: center;
  padding: 0 0.15rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  background: transparent;
}
.hd7-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.85rem;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}
.hd7-nav-ico { display: inline-flex; flex: none; }
.hd7-nav-ico .icon { width: 1.05rem; height: 1.05rem; color: currentColor; }
/* Hover ve aktif: arkaplan yok; yazı + ikon koyu renk, altta çizgi */
.hd7 .hd7-nav > a:hover .hd7-pill,
.hd7 .hd7-nav .nav-drop:hover > a .hd7-pill,
.hd7 .hd7-nav .nav-drop:focus-within > a .hd7-pill,
.hd7 .hd7-nav > a.is-active .hd7-pill,
.hd7 .hd7-nav .nav-drop > a.is-active .hd7-pill {
  color: var(--hd7-dark);
  background: transparent;
}
.hd7 .hd7-nav > a.is-active .hd7-pill,
.hd7 .hd7-nav .nav-drop > a.is-active .hd7-pill { font-weight: 700; }
.hd7 .hd7-nav > a,
.hd7 .hd7-nav .nav-drop > a { box-shadow: inset 0 -3px 0 transparent; transition: box-shadow 0.18s ease; }
.hd7 .hd7-nav > a:hover,
.hd7 .hd7-nav .nav-drop:hover > a,
.hd7 .hd7-nav .nav-drop:focus-within > a { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--hd7-dark) 40%, transparent); }
.hd7 .hd7-nav > a.is-active,
.hd7 .hd7-nav .nav-drop > a.is-active { box-shadow: inset 0 -3px 0 var(--hd7-dark); }
.hd7 .hd7-nav > a:hover,
.hd7 .hd7-nav > a.is-active,
.hd7 .hd7-nav .nav-drop > a:hover,
.hd7 .hd7-nav .nav-drop > a.is-active {
  color: var(--text);
  background: transparent;
}
.hd7-chev { width: 0.8rem; height: 0.8rem; flex: none; transition: transform 0.2s ease; }
.hd7 .nav-drop { position: static; display: flex; align-items: stretch; }
.hd7 .nav-drop:hover .hd7-chev,
.hd7 .nav-drop:focus-within .hd7-chev { transform: rotate(180deg); }
.hd7 .nav-drop::after { content: none; }

/* Mega menü: header genişliğinde, solda bağlantılar, sağda koyu iletişim kartı */
.hd7 .nav-sub {
  top: 100%;
  left: 0;
  right: 0;
  transform: none;
  min-width: 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--text) 16%, transparent);
}
.hd7 .nav-drop:hover .nav-sub,
.hd7 .nav-drop:focus-within .nav-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  align-items: start;
  gap: 1.25rem;
  /* Header ~4.8rem + nav row + pay; vh yedek, dvh tercih */
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  overflow: hidden;
}
.hd7 .nav-sub:not(:has(.hd7-mega-card)) { grid-template-columns: minmax(0, 1fr); }
.hd7 .hd7-mega-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.2rem 1rem;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hd7 .hd7-mega-list.is-many {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.15rem 0.75rem;
}
.hd7 .hd7-mega-list.is-lots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.1rem 0.65rem;
}
.hd7 .hd7-mega-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 0.95rem;
  color: var(--text);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 12px;
}
.hd7 .hd7-mega-list.is-many a {
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  gap: 0.5rem;
}
.hd7 .hd7-mega-list.is-lots a {
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
  gap: 0.4rem;
}
.hd7 .hd7-mega-list a .icon { width: 1rem; height: 1rem; flex: none; color: var(--hd7-dark); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; }
.hd7 .hd7-mega-list a:hover,
.hd7 .hd7-mega-list a.is-active {
  color: var(--hd7-dark);
  background: transparent;
  border-bottom-color: transparent;
}
.hd7 .hd7-mega-list a:hover .icon,
.hd7 .hd7-mega-list a.is-active .icon { opacity: 1; transform: none; }
.hd7 .hd7-mega-list a.is-active { font-weight: 700; }
.hd7-mega-card {
  display: grid;
  align-content: center;
  align-self: start;
  position: sticky;
  top: 0;
  gap: 0.7rem;
  padding: 1.3rem;
  color: var(--surface);
  background: var(--hd7-dark);
  border-radius: 16px;
}
.hd7-mega-card p {
  margin: 0;
  color: var(--surface);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
}
.hd7 .hd7-mega-card a { text-decoration: none; }
.hd7 .hd7-mega-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--surface);
  font-weight: 600;
  border: 0;
}
.hd7 .hd7-mega-phone:hover { color: var(--surface); text-decoration: underline; text-underline-offset: 3px; }
.hd7 .hd7-mega-phone .icon { width: 1.05rem; height: 1.05rem; color: var(--surface); }
.hd7 .hd7-mega-cta {
  justify-content: center;
  padding: 0.7rem 1rem;
  color: var(--hd7-dark);
  background: var(--surface);
  border-color: var(--surface);
  border-radius: 10px;
  font-weight: 700;
}
.hd7 .hd7-mega-cta:hover { color: var(--hd7-dark); background: color-mix(in srgb, var(--surface) 88%, var(--primary)); }

/* Sağ taraf */
.hd7-actions { display: flex; align-items: center; gap: 0.5rem; }
.hd7-actions .icon { width: 1.1rem; height: 1.1rem; flex: none; color: inherit; }
.hd7-search,
.hd7-psearch {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 2.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.hd7-search { width: 10.5rem; padding: 0 0.25rem 0 0.95rem; }
.hd7-search:focus-within,
.hd7-psearch:focus-within { border-color: var(--hd7-dark); }
.hd7-search input,
.hd7-psearch input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}
.hd7-search input::placeholder,
.hd7-psearch input::placeholder { color: color-mix(in srgb, var(--text) 62%, var(--surface)); }
.hd7-search button,
.hd7-psearch button {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hd7-dark);
  cursor: pointer;
}
.hd7-search button:hover,
.hd7-psearch button:hover { background: color-mix(in srgb, var(--primary) 11%, var(--surface)); }
.hd7-search button .icon,
.hd7-psearch button .icon { color: var(--hd7-dark); }
.hd7-call {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--hd7-dark);
  text-decoration: none;
}
.hd7-call:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.hd7-cta {
  padding: 0.68rem 1.2rem;
  white-space: nowrap;
  color: var(--text);
  background: var(--secondary);
  border-color: var(--secondary);
  border-radius: 999px;
  font-size: 0.9rem;
}
.hd7-cta:hover,
.hd7-cta:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--secondary) 86%, white);
  border-color: color-mix(in srgb, var(--secondary) 86%, white);
}
.hd7 a:focus-visible,
.hd7 button:focus-visible { outline: 2px solid var(--hd7-dark); outline-offset: 2px; }

/* Mobil: ekran kenarlarına yapışmayan yüzen menü kartı */
.hd7-panel {
  inset: 0.75rem;
  max-height: calc(100dvh - 1.5rem);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--text) 55%, transparent);
}
.hd7-panel .nav-panel-top {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  border-bottom: 0;
}
.hd7-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.2rem;
}
.hd7-panel .nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 2.6rem;
  height: 2.6rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--hd7-dark);
  color: var(--surface);
  line-height: 0;
  cursor: pointer;
}
.hd7-panel .nav-close:hover { background: var(--primary); }
.hd7-panel .nav-close .icon { display: block; width: 1.1rem; height: 1.1rem; margin: 0; color: var(--surface); }
.hd7-panel .nav-panel-body { padding: 0 0 0.4rem; }
.hd7-psearch { width: 100%; height: 2.9rem; margin-bottom: 0.5rem; padding: 0 0.3rem 0 1rem; background: var(--background); }
.hd7-panel .panel-item { border-bottom: 1px solid var(--line); }
.hd7-panel .panel-item:last-child { border-bottom: 0; }
.hd7-panel .panel-row { display: flex; align-items: center; list-style: none; cursor: pointer; }
.hd7-panel .panel-row::-webkit-details-marker { display: none; }
.hd7-panel .panel-row::marker { content: ""; }
.hd7-panel .panel-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  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;
}
.hd7-panel .panel-text { overflow-wrap: anywhere; }
/* Aktif: koyu nokta + koyu yazı (açık zemin) */
.hd7-panel .panel-link.is-active { color: var(--hd7-dark); font-weight: 700; }
.hd7-panel .panel-link.is-active::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 3px;
  background: var(--hd7-dark);
}
.hd7-panel .panel-chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  color: var(--text);
}
.hd7-panel .panel-chev:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.hd7-panel .panel-chev .hd7-chev { width: 1.05rem; height: 1.05rem; }
.hd7-panel .panel-group[open] .panel-chev .hd7-chev { transform: rotate(180deg); }
.hd7-panel .panel-sub { margin: 0 0 0.7rem 0.2rem; border-left: 2px solid var(--line); }
.hd7-panel .panel-child {
  display: block;
  padding: 0.6rem 0 0.6rem 1rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 0;
}
.hd7-panel .panel-child.is-active {
  color: var(--hd7-dark);
  font-weight: 700;
  margin-left: -2px;
  padding-left: calc(1rem + 2px);
  box-shadow: inset 2px 0 0 var(--hd7-dark);
}
.hd7-panel .nav-panel-foot { padding: 0.5rem 0 1.1rem; }
.hd7-panel .panel-reach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hd7-panel .panel-reach:has(> :only-child) { grid-template-columns: 1fr; }
.hd7-panel .panel-reach .button { min-width: 0; padding: 0.8rem 0.6rem; white-space: nowrap; border-radius: 12px; font-size: 0.92rem; }
.hd7-panel .panel-reach .button span { overflow: hidden; text-overflow: ellipsis; }
.hd7-panel .panel-reach .button:not(.button-ghost) { color: var(--surface); background: var(--hd7-dark); border-color: var(--hd7-dark); }
.hd7-panel .panel-reach .button-ghost { color: var(--text); background: transparent; border-color: var(--line); }
.hd7-panel a:focus-visible,
.hd7-panel button:focus-visible,
.hd7-panel summary:focus-visible { outline: 2px solid var(--hd7-dark); outline-offset: 2px; }
.hd7-panel .nav-close:focus-visible { outline-color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .hd7-panel:not([hidden]) { animation: hd7-card 0.24s ease both; }
}
@keyframes hd7-card {
  from { transform: scale(0.97) translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Masaüstü: iki sıra. Üstte logo, geniş arama, telefon ve ana eylem; altında ferah menü şeridi. */
.hd7-call-text { display: none; }
@media (min-width: 1201px) {
  /* Üst sıra koyu bant (tam genişlik), alt sıra açık */
  .site-header.hd7 {
    background: linear-gradient(var(--hd7-dark) 0 4.8rem, color-mix(in srgb, var(--primary) 4%, var(--surface)) 4.8rem 100%);
  }
  .hd7-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: 4.8rem auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0;
    min-height: 0;
  }
  .hd7-actions { display: contents; }
  .hd7-row > .hd7-logo { grid-area: 1 / 1; color: var(--surface); }
  .hd7-row > .hd7-logo .hd7-mark { color: var(--hd7-dark); background: var(--surface); }
  .hd7-search {
    grid-area: 1 / 2;
    justify-self: center;
    width: 100%;
    max-width: 30rem;
    height: 3rem;
    padding: 0 0.3rem 0 1.2rem;
    background: var(--background);
  }
  /* Koyu bantta telefon: ikon + numara, açık yazı */
  .hd7 .hd7-call {
    grid-area: 1 / 3 / 2 / -1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: auto;
    height: auto;
    padding: 0.4rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--surface);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .hd7 .hd7-call:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
  .hd7 .hd7-call .icon { width: 1.15rem; height: 1.15rem; color: var(--surface); }
  .hd7-call-text { display: inline; }
  .hd7 .hd7-search:focus-within { border-color: var(--surface); }
  /* Ana eylem alt sırada, sağda */
  .hd7-cta { grid-area: 2 / 4; align-self: center; display: inline-flex; align-items: center; gap: 0.55rem; margin: 0.4rem 0; padding: 0.6rem 1.35rem; font-size: 0.92rem; }
  .hd7-cta .icon { width: 1.05rem; height: 1.05rem; color: var(--surface); }
  .hd7-nav {
    grid-area: 2 / 1 / 3 / 4;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0;
  }
  /* Dikey boşluk bağlantının içinde: imleç pilden panele kesintisiz iner */
  .hd7 .hd7-nav > a,
  .hd7 .hd7-nav .nav-drop > a { padding: 0.55rem 0.15rem 0.7rem; }
  .hd7-pill { padding: 0.6rem 1.15rem; font-size: 0.95rem; }
  .hd7 .nav-sub { top: calc(100% - 0.1rem); }
}
@media (min-width: 1201px) and (max-width: 1320px) {
  .hd7-pill { padding: 0.6rem 0.95rem; }
}
/* Menü sığmıyorsa: logo solda, kare noktalı menü düğmesi sağda */
@media (max-width: 1200px) {
  .hd7-nav,
  .hd7-search,
  .hd7-cta { display: none; }
  .hd7-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 4.2rem; }
  .hd7-burger {
    display: inline-grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
    color: var(--hd7-dark);
    cursor: pointer;
  }
  .hd7-dots {
    display: grid;
    grid-template-columns: repeat(2, 0.42rem);
    gap: 0.2rem;
  }
  .hd7-dots i {
    display: block;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 2px;
    background: var(--hd7-dark);
  }
  .hd7-dots i:first-child { border-radius: 50%; }
}
@media (max-width: 800px) {
  .hd7-call { display: none; }
  .hd7-name { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hd7-pill,
  .hd7-chev,
  .hd7 .hd7-mega-list a .icon { transition: none; }
}