/* Header (DESIGN.md §6): parçalı arama + arama paneli, Menü. JS: header.js. Önizleme: design-previews/d-header.html */
/* Genişlik sayfanın .container'ından bağımsız: logo her sayfada aynı yerde durur. */
.site-header { --hd-w: 1320px; position: sticky; top: 0; z-index: 40; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.hd-inner { width: min(100% - 32px, var(--hd-w)); margin-inline: auto; min-height: 72px; display: grid; grid-template-columns: 1fr minmax(0, 640px) 1fr; align-items: center; gap: var(--s-6); }
.hd-inner .logo { justify-self: start; }

/* Parçalı arama çubuğu */
.hd-search { position: relative; display: flex; align-items: center; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 999px; padding: 4px; transition: opacity .2s, transform .2s, box-shadow .2s, visibility .2s; }
.hd-search:hover { box-shadow: 0 10px 28px -20px rgba(22, 41, 74, .5); }
.hd-seg { position: relative; flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 6px 20px; border: 0; border-radius: 999px; background: transparent; text-align: left; cursor: pointer; }
.hd-seg + .hd-seg::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--c-line); }
.hd-seg:hover { background: var(--c-tag-bg); }
.hd-seg[aria-expanded="true"] { background: var(--c-surface); box-shadow: 0 4px 16px -8px rgba(22, 41, 74, .35); }
.hd-seg[aria-expanded="true"]::before, .hd-seg[aria-expanded="true"] + .hd-seg::before { opacity: 0; }
.hd-seg-label { font-size: 12px; font-weight: 700; }
.hd-seg[aria-expanded="true"] .hd-seg-label { color: var(--c-primary); }
.hd-seg-value { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--c-muted); }
.hd-seg-value.is-dolu { color: var(--c-text); font-weight: 600; }
.hd-submit { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-5); border: 0; border-radius: 999px; background: var(--c-primary); color: #fff; font-weight: 700; cursor: pointer; }
.hd-submit:hover { background: var(--c-primary-dark); }
.hd-submit .ikon { width: 18px; height: 18px; }

/* Arama paneli: solda sekmeler, sağda alanlar ve kısayollar */
.hd-panel { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 2; width: min(760px, 100vw - 32px); display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(22, 41, 74, .5); }
.hd-panel[hidden], .hd-panel-top, .hd-panel-foot { display: none; }
.hd-tabs { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); background: var(--c-bg); border-right: 1px solid var(--c-line); border-radius: 20px 0 0 20px; }
.hd-tabs button { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; font-weight: 600; text-align: left; cursor: pointer; }
.hd-tabs .ikon { width: 20px; height: 20px; color: var(--c-muted); }
.hd-tabs button:hover { background: var(--c-tag-bg); }
.hd-tabs button[aria-selected="true"] { background: var(--c-surface); color: var(--c-primary); box-shadow: 0 1px 0 var(--c-line); }
.hd-tabs button[aria-selected="true"] .ikon { color: var(--c-primary); }
.hd-panel-body { padding: var(--s-5); min-height: 280px; }
.hd-pane[hidden] { display: none; }
.hd-pane h3 { margin: var(--s-5) 0 var(--s-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.hd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.hd-field { display: flex; flex-direction: column; gap: var(--s-1); }
.hd-field label { font-size: 13px; font-weight: 700; }
.hd-field input, .hd-field select, .hd-field .secici-dugme { width: 100%; min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); font-size: var(--fs-body); }
.hd-field input:focus, .hd-field .secici-dugme[aria-expanded="true"] { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-tag-bg); }
.hd-field .secici-dugme:disabled { color: var(--c-muted); cursor: not-allowed; opacity: .7; }
.hd-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hd-chips button, .hd-cities button { border: 1px solid var(--c-line); font-weight: 600; cursor: pointer; }
.hd-chips button { min-height: 40px; padding: 0 var(--s-4); border-radius: 999px; background: var(--c-surface); font-size: 14px; }
.hd-cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.hd-cities button { min-height: 52px; padding: 0 var(--s-4); border-radius: var(--r-lg); background: var(--c-bg); font-weight: 700; text-align: left; }
.hd-chips button:hover, .hd-cities button:hover, .hd-chips button[aria-pressed="true"], .hd-cities button[aria-pressed="true"] { border-color: var(--c-primary); color: var(--c-primary); }
.hd-near { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); margin-top: var(--s-2); padding: 0; border: 0; background: transparent; color: var(--c-primary); font-weight: 700; cursor: pointer; }
.hd-near[hidden] { display: none; }
.hd-near .ikon { width: 20px; height: 20px; }
.hd-recent { list-style: none; margin: 0; padding: 0; }
.hd-recent a { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-2); border-radius: var(--r-sm); color: var(--c-text); font-weight: 500; text-decoration: none; }
.hd-recent a:hover { background: var(--c-bg); color: var(--c-primary); }
.hd-recent .ikon { width: 18px; height: 18px; color: var(--c-muted); }
.hd-note { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--c-muted); }
.hd-note:empty, .hd-note[hidden] { display: none; }

/* Sağ taraf: Kliniğinizi ekleyin + Menü */
.hd-actions { justify-self: end; display: flex; align-items: center; gap: var(--s-2); }
.hd-add { white-space: nowrap; }
.hd-menu-wrap { position: relative; }
.hd-menu { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); font-weight: 700; cursor: pointer; }
.hd-menu:hover, .hd-menu[aria-expanded="true"] { border-color: var(--c-primary); color: var(--c-primary); }
.hd-menu .ikon { width: 20px; height: 20px; }
.hd-menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 2; min-width: 240px; display: flex; flex-direction: column; padding: var(--s-2); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: 0 24px 48px -24px rgba(22, 41, 74, .45); }
.js .hd-menu-list:not(.is-open) { display: none; }
.hd-menu-list a { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--c-text); font-weight: 600; text-decoration: none; }
.hd-menu-list a:hover, .hd-menu-list a[aria-current] { background: var(--c-bg); color: var(--c-primary); }
.hd-menu-list .ikon { width: 20px; height: 20px; color: var(--c-muted); }
.hd-menu-list a:hover .ikon, .hd-menu-list a[aria-current] .ikon { color: var(--c-primary); }
.hd-menu-add { display: none !important; }

.hd-pill { display: none; }
.hd-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(22, 41, 74, .28); }
.hd-scrim[hidden] { display: none; }
body.hd-acik { overflow: hidden; }

/* JS yoksa: arama gizli (sayfadaki arama formları çalışır), menü bağlantıları açık durur. */
html:not(.js) .hd-search, html:not(.js) .hd-menu, html:not(.js) .hd-pill { display: none; }
html:not(.js) .hd-menu-list { position: static; flex-direction: row; flex-wrap: wrap; padding: 0; border: 0; box-shadow: none; background: none; }
html:not(.js) .hd-menu-list .ikon { display: none; }

/* Kendi arama çubuğu olan sayfalar (ana sayfa, liste, arama, 404): header'daki çubuk, sayfadaki çubuk geçilince belirir. */
@media (min-width: 900px) {
  body:has(main [data-arama]) .site-header:not(.is-gecti) .hd-search { opacity: 0; visibility: hidden; transform: translateY(-6px); }
}

/* Dar masaüstü: "Kliniğinizi ekleyin" menüye geçer. */
@media (max-width: 1179px) {
  .hd-add { display: none; }
  .hd-menu-add { display: flex !important; }
}

/* Mobil: logo + menü, altında arama hapı; panel tam ekran açılır, bölümler alt alta. */
@media (max-width: 899px) {
  .site-header { position: relative; }
  .hd-inner { grid-template-columns: 1fr auto; gap: var(--s-3); min-height: 64px; }
  .hd-search { display: contents; }
  .hd-seg, .hd-submit, .hd-tabs { display: none; }
  .hd-menu { width: var(--tap); padding: 0; justify-content: center; }
  .hd-menu span { display: none; }
  .hd-pill { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; margin-bottom: var(--s-3); padding: 0 var(--s-4); border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg); box-shadow: 0 8px 20px -16px rgba(22, 41, 74, .5); text-align: left; cursor: pointer; }
  .hd-pill .ikon { width: 20px; height: 20px; color: var(--c-primary); flex: none; }
  .hd-pill span { display: flex; flex-direction: column; min-width: 0; }
  .hd-pill b { font-size: 14px; }
  .hd-pill small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--c-muted); }
  body:has(main [data-arama]) .hd-pill { display: none; }
  .hd-panel { position: fixed; inset: 0; translate: none; z-index: 50; width: auto; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
  .hd-panel-top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--s-2) 0 var(--s-4); border-bottom: 1px solid var(--c-line); }
  .hd-close { min-height: var(--tap); padding: 0 var(--s-3); border: 0; background: transparent; color: var(--c-primary); font-weight: 700; cursor: pointer; }
  .hd-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-4) var(--s-6); }
  .hd-pane[hidden] { display: block; }
  .hd-pane + .hd-pane { margin-top: var(--s-6); padding-top: var(--s-2); border-top: 1px solid var(--c-line); }
  .hd-cities { grid-template-columns: repeat(2, 1fr); }
  .hd-panel-foot { display: block; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); }
  .hd-panel-foot .btn { width: 100%; min-height: 52px; }
}
@media (max-width: 479px) {
  .hd-fields { grid-template-columns: 1fr; }
}