/* ==========================================================================
   GETATBUL — arama ekranı (şablon dili)
   İki sütun: solda sonuç listesi, sağda harita. Mobilde tek sütun.
   Bu dosya en son yüklenir; bileşenlerin şablondaki görünümünü tanımlar.
   ========================================================================== */

.app {
  background-color: var(--color-canvas);
}

.app__grid {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  /* Satır yüksekliği kesin olsun: harita yüzde yüksekliğiyle büyümesin. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: var(--layout-max);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
  block-size: calc(100dvh - var(--header-height, 4.25rem));
  min-block-size: 32rem;
}

/* --- Sol sütun: sonuçlar ------------------------------------------------ */

.pane--list {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

.search-frame {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-block-size: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-inline-end: 2px;
}

.pane__head {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  padding-block-end: var(--space-2);
  background-color: var(--color-canvas);
}

.pane__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pane__context {
  margin-block-start: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* --- Arama formu -------------------------------------------------------- */

.search-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--space-2);
  align-items: center;
}

.search-form__query {
  position: relative;
  display: flex;
  align-items: center;
}

.search-form__icon {
  position: absolute;
  inset-inline-start: 0.7rem;
  display: inline-flex;
  color: var(--color-text-subtle);
  pointer-events: none;
}

.search-form__input {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding-inline: 2.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
}

.search-form__input:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: 0 0 0 3px var(--color-action-soft);
}

.search-form__select select {
  min-block-size: 2.75rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  max-inline-size: 9rem;
}

.search-form__actions .button {
  min-block-size: 2.75rem;
  border-radius: 12px;
}

/* --- Seçili filtre çipleri --------------------------------------------- */

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background-color: var(--brand-50);
  color: var(--color-on-tint);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.active-filter:hover {
  background-color: var(--brand-100);
  text-decoration: none;
}

.active-filter__remove {
  font-size: 1rem;
  line-height: 1;
}

.active-filters__clear {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* --- Filtre paneli ------------------------------------------------------ */

.filter-drawer {
  border: 1px solid var(--color-border-faint);
  border-radius: 14px;
  background-color: var(--color-surface);
}

.filter-drawer__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  color: var(--color-text-strong);
  font-size: 0.92rem;
  font-weight: 600;
  list-style: none;
}

.filter-drawer__summary::-webkit-details-marker {
  display: none;
}

.filter-drawer__icon {
  display: inline-flex;
  color: var(--color-action-strong);
}

.filter-drawer__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.35rem;
  block-size: 1.35rem;
  padding-inline: 0.3rem;
  border-radius: 999px;
  background-color: var(--brand-500);
  color: #fff;
  font-size: 0.72rem;
}

.filter-drawer[open] .filter-drawer__chevron {
  transform: rotate(180deg);
}

.filter-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 0.85rem 0.9rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-group__title {
  color: var(--color-text-subtle);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* --- Çipler (şablon: beyaz hap + renkli nokta) -------------------------- */

.chip--filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.1rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.chip--filter:hover {
  border-color: var(--color-border-strong);
  text-decoration: none;
}

/* **Ausgewählter Chip im Logo-Coral** (Cycle 335, Auftrag haluk 18.10.2026): Coral ist laut
   `tokens.css` die Aktionsfarbe — auch der ausgewählte Chip. Weiß erreicht auf #FF6B56 nur
   2,8:1, deshalb dunkle Tinte (6,6:1, AA), dieselbe Regel wie bei den Coral-Buttons. */
.chip--filter.is-active {
  border-color: var(--color-action);
  background-color: var(--color-action);
  color: var(--color-action-text);
}

.chip--area.is-extra {
  border-style: dashed;
}

.chip__dot {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background-color: var(--brand-700);
}

.chip__dot.is-private {
  background-color: var(--brand-500);
}

.chip--filter.is-active .chip__dot {
  /* Der Punkt bleibt sichtbar, ohne eine zweite feste Farbe (Cycle 335). */
  background-color: currentColor;
}

/* --- Sonuç kartları ----------------------------------------------------- */

.result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border-faint);
  border-radius: 14px;
  background-color: var(--color-surface);
  box-shadow: 0 1px 2px rgba(32, 32, 31, 0.04);
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.result-card:hover {
  border-color: var(--color-border);
  box-shadow: 0 8px 20px rgba(32, 32, 31, 0.07);
}

.result-card.is-selected {
  border-color: var(--brand-300);
  background-color: var(--brand-50);
  box-shadow: 0 10px 24px rgba(249, 115, 88, 0.16);
}

.result-card.is-private .result-card__icon {
  background-color: var(--brand-500);
}

.result-card.is-pharmacy .result-card__icon {
  background-color: var(--brand-500);
}

.result-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.result-card__name {
  color: var(--color-text-strong);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
}

.badge-pill {
  flex: none;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.72rem;
  font-weight: 700;
}

.badge-pill.is-private {
  background-color: var(--brand-100);
  color: var(--color-on-tint);
}

.badge-pill.is-pharmacy {
  background-color: var(--brand-100);
  color: var(--brand-800);
}

.result-card__services {
  color: var(--color-text-muted);
  font-size: 0.83rem;
  line-height: 1.45;
}

.result-card__services strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --- Sağ sütun: harita -------------------------------------------------- */

.pane--map {
  position: relative;
  min-block-size: 0;
  block-size: 100%;
}

.map-pane {
  position: relative;
  block-size: 100%;
  border: 1px solid var(--color-border-faint);
  border-radius: 18px;
  background-color: var(--map-canvas-bg, #e7e0d7);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Leaflet kendi katmanlarını mutlak konumlar; tuvalin tamamını kaplar. */
/* Harita kendi yığın bağlamını oluşturur: Leaflet'in iç katmanları (200-800)
   dışarı taşıp başlıktaki açılır panelin üstüne çiziliyordu. */
.map-pane {
  isolation: isolate;
}

.map-pane__canvas {
  position: absolute;
  inset: 0;
}

.map-pane__layer {
  position: absolute;
  z-index: 520;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.96);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.map-pane__status {
  position: absolute;
  z-index: 520;
  /* **Keine Klicks schlucken** (Cycle 206): Die Pille liegt über der Karte; ohne
     `pointer-events: none` waren Bündel-Blasen unter ihr nicht anklickbar. Sie ist reiner
     Text (`role="status"`), es gibt dort nichts zu treffen. */
  pointer-events: none;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.96);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  box-shadow: var(--shadow-xs);
}

.map-pane__busy {
  position: absolute;
  z-index: 600;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.96);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.dot {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background-color: var(--brand-700);
}

.dot.is-private {
  background-color: var(--brand-500);
}

.dot.is-pharmacy {
  background-color: var(--brand-500);
}

.swatch {
  inline-size: 0.85rem;
  block-size: 0.55rem;
  border-radius: 3px;
  background-color: var(--sand-300);
}

.swatch.band-high {
  background-color: var(--brand-800);
}

.swatch.band-medium {
  background-color: var(--brand-400);
}

.map-pane__note {
  margin-inline-start: auto;
  color: var(--color-text-subtle);
  font-size: 0.72rem;
}

/* --- Seçili sonuç kartı (harita üzerinde) ------------------------------- */

/* **Kopf fest, Inhalt scrollt darunter** (Cycle 351, Nutzerbefund 19.10.2026:
   „das X soll beim Scroll nicht verschwinden"): Vorher scrollte der Kopf mit dem
   Karteninhalt weg und der einzige sichtbare Rückweg verschwand. Die Karte ist jetzt eine
   Flex-Spalte; der Kopf bleibt stehen, der neue `.detail-card__scroll` scrollt. Dasselbe
   Muster wie beim Filter-Bottom-Sheet (`.filter-drawer__panel-scroll`, Cycle 316c). */
.detail-card {
  position: absolute;
  z-index: 540;
  inset-inline-start: 0.75rem;
  inset-block-end: 4.25rem;
  inline-size: min(23rem, calc(100% - 1.5rem));
  max-block-size: 62%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border-faint);
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.detail-card__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-block-end: 1px solid var(--color-rule);
}

/* Der Typ-Chip im Kartenkopf ist nur eine **Anzeige**, kein Tippziel: kompakt, damit der
   feste Kopf wenig Höhe belegt und lange Bezeichnungen mit … enden (Cycle 351). */
.detail-card__head .chip {
  min-block-size: 0;
  display: block;
  max-inline-size: calc(100% - 2.5rem);
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-card__scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-3) var(--space-3);
}

.detail-card__close {
  border: 0;
  background: none;
  color: var(--color-text-subtle);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.detail-card__name {
  margin-block-start: var(--space-2);
  color: var(--color-text-strong);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
}

.detail-card__location,
.detail-card__highlight {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.detail-card__highlight {
  color: var(--color-action-strong);
  font-weight: 600;
}

.detail-card__facts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-block-start: var(--space-3);
}

.detail-card__fact {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-2);
  font-size: 0.83rem;
}

.detail-card__fact dt {
  color: var(--color-text-subtle);
}

.detail-card__fact dd {
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.detail-card__date {
  color: var(--color-text-subtle);
}

/* --- Durumlar ----------------------------------------------------------- */

.state--empty {
  padding: var(--space-5) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  background-color: var(--color-surface);
  text-align: center;
}

.state__title {
  font-size: 1.05rem;
  font-weight: 650;
}

.state__text {
  margin-block-start: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.state__suggestions,
.state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-block-start: var(--space-3);
}

.results__limit {
  color: var(--color-text-subtle);
  font-size: 0.8rem;
}

.results__section-title {
  color: var(--color-text-subtle);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.results__section-count {
  background-color: var(--color-surface-2);
  color: var(--color-text-muted);
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 960px) {
  .app__grid {
    grid-template-columns: minmax(0, 1fr);
    block-size: auto;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }

  .search-frame {
    overflow: visible;
  }

  .pane__head {
    position: static;
  }

  .pane--map {
    block-size: 62vh;
    min-block-size: 22rem;
  }

  .search-form__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .search-form__select select {
    max-inline-size: none;
    inline-size: 100%;
  }

  /* **Rückweg freihalten** (Cycle 186): Die Detailkarte lag mit ihrem unteren Rand auf
     dem „Aramaya dön"-Knopf (5.4 rem, 44 px hoch) und fing dessen Tipps ab — nach der
     ersten Auswahl gab es auf dem Telefon keinen sichtbaren Weg zurück zur Liste.
     Unterkante jetzt 8.5 rem, also oberhalb des Knopfes. */
  .detail-card {
    inset-block-end: 8.5rem;
    max-block-size: 55%;
  }
}

/* ==========================================================================
   Uygulama kabuğu: başlık sabit, içerik kalan yüksekliği doldurur.
   Harita tam yüksekliği alır, böylece altındaki gösterge çubuğu görünür kalır.
   ========================================================================== */

/* Yükseklik zinciri **yalnızca arama sayfasında** kesin olmalı: harita ekranı
   doldurur, liste kendi içinde kayar.
   Önceden bu kural tüm `page-public` sayfalarına uygulanıyordu; gövde
   `overflow: hidden` + 100dvh olduğu için arama dışındaki uzun sayfalar
   **hiç kaydırılamıyordu** (kullanıcı bildirdi). */
body.page-search {
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  overflow: hidden;
}

/* layout.css'teki #main kuralı kimlikle geldiği için burada da kimlikle ezilir. */
body.page-search main#main {
  flex: 1;
  display: flex;
  min-block-size: 0;
  max-inline-size: none;
  padding: 0;
}

body.page-search .app {
  flex: 1;
  display: flex;
  min-block-size: 0;
}

body.page-search .app__grid {
  flex: 1;
  block-size: auto;
  min-block-size: 0;
}

/* --- Yer seçici (il / ilçe) --------------------------------------------- */

.place-picker {
  margin-block-start: var(--space-2);
}

.place-picker > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  list-style: none;
}

.place-picker > summary::-webkit-details-marker {
  display: none;
}

.place-picker > summary::before {
  content: "▸";
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.place-picker[open] > summary::before {
  content: "▾";
}

.place-picker__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.place-picker__fields .field-label,
.place-picker__fields label {
  display: block;
  margin-block-end: 0.2rem;
  color: var(--color-text-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.place-picker__fields select {
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 960px) {
  /* Mobilde belge normal akışta kayar: liste, sonra harita. */
  body.page-public {
    block-size: auto;
    overflow: visible;
  }

  body.page-public main#main {
    display: block;
  }

  body.page-public .app {
    display: block;
  }

  body.page-public .app__grid {
    display: block;
    block-size: auto;
    overflow: visible;
    padding-block: var(--space-3) var(--space-5);
  }

  .pane--list {
    display: block;
  }

  .pane--map {
    block-size: 60vh;
    min-block-size: 22rem;
    margin-block-start: var(--space-4);
  }
}

/* --- Sayfalama ---------------------------------------------------------- */

.results__more-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  padding-block: var(--space-2);
}

.results__more {
  inline-size: 100%;
}

.search-frame .results__section + .results__more-row {
  margin-block-start: var(--space-2);
}

/* --- Kalıcı bağlantı sayfası -------------------------------------------- */

.record {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: 42rem;
  margin: var(--space-6) auto;
  padding: var(--space-5);
  border: 1px solid var(--color-border-faint);
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.record__back {
  margin: 0;
  font-size: var(--text-sm);
}

.record__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.record__name {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.2;
}

.record__location {
  margin: 0;
  color: var(--color-text-muted);
}

.record__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.record__facts > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-rule);
}

.record__facts dt {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.record__facts dd {
  margin: 0;
}

/* **Uygulama alanları als Chip-Reihe** (Cycle 315): Jeder Chip ist ein Link auf
   `/getat/<slug>`; auf schmalen Geräten brechen die Chips um, statt zu scrollen. */
.record__areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.record__areas .chip {
  min-block-size: 44px;
  padding-block: var(--space-2);
}

/* **V8** (Cycle 315b): Uygulama-alanı-Chips auf `/ilce/<slug>` und `/merkez/<slug>`.
   Linkfarbe #177571 (petrol-700), Rand #eae3da (sand-300), Trefferfläche 44 px. */
.record .chip--area {
  min-block-size: 44px;
  padding-block: var(--space-2);
  border-color: var(--color-border);
  color: var(--petrol-700);
}

.record .chip--area:hover,
.record .chip--area:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--petrol-800);
}

/* **V9** (Cycle 315b): `/ilce/<slug>` gruppiert nach Art. Jede Gruppe ist ein
   aufklappbares `<details>`; die erste Gruppe steht offen, die übrigen bleiben zu, damit
   aus 379 Einträgen keine Endlosseite wird. */
.record__group {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.record__group + .record__group {
  margin-block-start: var(--space-2);
}

.record__group > summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  min-block-size: 48px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  list-style: none;
}

.record__group > summary::-webkit-details-marker {
  display: none;
}

.record__group__count {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.record__group > .record__list {
  padding: 0 var(--space-4) var(--space-4);
}

.record__group > .record__more {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin: 0 var(--space-4) var(--space-4);
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

@media (max-width: 63.999rem) {
  .record .chip--area {
    display: inline-flex;
  }

  /* **V6** (Cycle 315b): Auch auf `/ilce` und `/merkez` sind die übrigen Inline-Links
     (Zurück, İl, Rechenweg, Merkezname) mindestens 44 px hoch. Buttons und Chips bringen
     ihre eigene Regel mit. */
  .record a:not(.button):not(.chip) {
    display: inline-block;
    min-block-size: 44px;
    padding-block: 12px;
  }

  .record__more {
    display: flex;
    justify-content: center;
    inline-size: calc(100% - 2 * var(--space-4));
    min-block-size: 44px;
    padding-block: 12px;
  }
}

.detail-card__permalink {
  margin: 0;
  font-size: var(--text-sm);
}

@media (max-width: 600px) {
  .record__facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* ==========================================================================
   Kompakt ve modern sonuç listesi (Cycle 07)
   - Sol sütunda başlık ve araç çubuğu sabit, yalnızca liste kendi içinde kayar.
   - Kaydırma çubuğu kartların üstüne binmez (scrollbar-gutter: stable).
   - Kartlar tek satır ad + tek satır meta ile yoğun; ayrıntı panelde/haritada.
   ========================================================================== */

.pane--list {
  min-block-size: 0;
}

.search-frame {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-block-size: 0;
  /* Kaydırma artık listenin kendi alanında. */
  overflow: hidden;
  padding-inline-end: 0;
}

.results {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-block-size: 0;
}

.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(10px);
}

.results__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  /* **Zahl und Wort bleiben eine Einheit** (Korrektur 329b / P1): Die globale
     `anywhere`-Regel hatte die Trefferzeile zwischen Buchstaben umbrochen. */
  min-inline-size: auto;
  flex-shrink: 0;
  overflow-wrap: normal;
  white-space: nowrap;
}

.results__count strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

/* **GETAT-Zentren als Link** (Cycle 300): Nur der Zentrumsteil führt zur internen Erklärung
   (`/getat`). Unterstrichen, damit der Link auch ohne Farbe erkennbar bleibt (Kontrast/A11y). */
.results__count-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.results__count-link:hover,
.results__count-link:focus-visible {
  color: var(--color-link-hover);
}

.results__count-link strong {
  color: inherit;
}

.results__summary {
  flex: 1 1 8rem;
  min-inline-size: 0;
  margin: 0;
  overflow: hidden;
  font-size: 0.76rem;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results__clear {
  margin-inline-start: auto;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background-color: var(--color-surface-alt, var(--brand-50));
  font-size: 0.78rem;
  font-weight: 600;
  color: #177571;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.results__clear:hover,
.results__clear:focus-visible {
  background-color: var(--brand-100);
  color: #209897;
}

/* **Ergebnissatz steht in der Fußzeile** (Cycle 343, Nutzerauftrag 18./19.10.2026): Der
   Kopfblock („Sonuçlar" und Unterzeile) ist entfallen — er wiederholte den Zählsatz. Der
   erklärende Satz (Land, Provinz, Landkreis, Einzeltreffer) steht jetzt unten in der
   Fußzeile, in allen Formaten, in einer Zeile mit dem Beta-Hinweis. Im Rahmen bleibt er nur
   als **Quelle** für die Kopie (`preview_note_controller.js`) und ist unsichtbar. Die
   Kapsam-Notiz bleibt sichtbar unter der Zählsatz-Karte. Bei Begriffssuche fehlen beide:
   dort nennt der Zählsatz den Begriff schon. */
.results > .pane__context {
  display: none;
}

.results > .pane__coverage {
  margin: 0;
  padding-inline: 0.7rem;
}

/* Kendi kaydırma alanı: çubuk için yer ayrılır, içerik çubuğun altına kaymaz. */
/* Nöbet filtresi açıkken tek satırlık uyarı: küçük, kutu değil — sonuçları kapatmamalı. */
.results__note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs, 0.78rem);
  line-height: 1.45;
}

.results__scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-inline-end: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sand-300, #d8d2c4) transparent;
}

.results__scroll:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 4px;
  border-radius: 12px;
}

.results__scroll::-webkit-scrollbar {
  inline-size: 10px;
}

.results__scroll::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 0.4rem;
}

.results__scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: var(--sand-300, #d8d2c4);
}

.results__scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-400);
}

.results__section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.results__section-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.results__section-count {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background-color: var(--color-surface);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Kompakt kart ------------------------------------------------------- */

.result-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  inline-size: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  background-color: var(--color-surface);
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease,
    background-color 0.16s ease;
}

.result-card::before {
  content: "";
  position: absolute;
  inset-block: 0.55rem;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: 999px;
  background-color: transparent;
  transition: background-color 0.16s ease;
}

.result-card:hover {
  border-color: var(--brand-200);
  box-shadow: 0 10px 20px -14px rgb(32 32 31 / 45%);
  transform: translateX(2px);
}

.result-card:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.result-card.is-selected {
  border-color: var(--brand-200);
  background-color: var(--brand-50);
  box-shadow: 0 12px 24px -16px rgb(192 67 42 / 55%);
}

.result-card.is-selected::before {
  background-color: var(--brand-500);
}

.result-card.is-pharmacy .result-card__icon {
  background-color: var(--color-pharmacy-soft, var(--honey-100, #fdf1d8));
  color: var(--honey-700, #8a6318);
}

.result-card__top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-inline-size: 0;
}

.result-card__name {
  overflow: hidden;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card__location {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card__sep {
  color: var(--color-border-strong);
}

.result-card__services {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card__rank {
  align-self: start;
  min-inline-size: 1.5rem;
  padding: 0.1rem 0.3rem;
  border-radius: 8px;
  background-color: var(--color-canvas);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-text-subtle);
}

.result-card .badge-pill {
  flex: none;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
}

.result-card .chip--kind {
  flex: none;
  padding: 0.05rem 0.35rem;
  font-size: 0.68rem;
}

/* --- Sayfalama şeridi --------------------------------------------------- */

.results__more-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.1rem;
}

.results__limit {
  margin: 0;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}

.results__more {
  inline-size: auto;
  margin-inline-start: auto;
  padding-block: 0.45rem;
  font-size: 0.84rem;
}

/* --- Üst boşluk: başlık ve harita header'a yapışmasın ------------------- */

.app__grid {
  padding-block-start: var(--space-5);
  gap: var(--space-4);
}

.pane__head {
  padding-block: 0.2rem var(--space-3);
}

.pane--map .map-pane {
  padding-block-start: 0;
}

/* --- Kompakt kart, ikinci tur: iki satır, sağda rozet + sıra ------------ */

.result-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
}

.result-card__services {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card__rank {
  background-color: transparent;
  color: var(--color-text-subtle);
}

/* --- Arama çubuğu: tek satır, kompakt ---------------------------------- */

.search-form {
  padding: 0.5rem;
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow: 0 1px 2px rgb(32 32 31 / 4%);
}

.search-form__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-form__query {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.search-form__input {
  inline-size: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: var(--color-canvas);
  font-size: 0.92rem;
}

.search-form__input:focus {
  border-color: var(--brand-300, var(--brand-200));
  background-color: var(--color-surface);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
}

/* "Yer" menüsü araç çubuğunda sağda durur. */
.search-form .place-picker {
  flex: none;
}

.search-form .place-picker > summary {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-surface);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.search-form .place-picker[open] > summary {
  border-color: var(--brand-200);
  background-color: var(--color-action-soft);
  color: var(--color-action-strong);
}

/* Panel her katmanın üstünde kalır: Leaflet kendi panellerinde 400-800 arası
   z-index kullanır ve başlık bir yığın bağlamı oluşturmadığında (ör. çok kısa
   ekranlarda) paneli örtebiliyordu. */
.search-form .place-picker__fields {
  position: absolute;
  z-index: 1000;
  max-block-size: min(70vh, 26rem);
  overflow-y: auto;
  margin-block-start: 0.4rem;
  padding: 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  background-color: var(--color-surface);
  box-shadow: 0 18px 40px -24px rgb(32 32 31 / 55%);
}

/* Filtreler düğmesi de aynı hizada ve kompakt. */
.filter-drawer {
  border-radius: 16px;
}

.filter-drawer__summary {
  padding: 0.5rem 0.7rem;
  border-radius: 14px;
  font-size: 0.86rem;
}

/* Yükleyici düğme: birincil yerine ince, modern kapsül. */
.results__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  inline-size: 100%;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 12px;
  background-color: var(--brand-500);
  color: var(--sand-900);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.results__more:hover {
  background-color: var(--brand-400);
  color: var(--sand-900);
}

/* Künye satırı tek satırda kalır: taşan kısım kırpılır{
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.result-card__meta .result-card__services,
.result-card__meta .result-card__location {
  flex: 0 1 auto;
  min-inline-size: 0;
}

.result-card__meta .chip--kind {
  flex: none;
}

/* Araç çubuğu tek satır: arama + Yer + (filtreler altta kendi kutusunda) */
.search-form__row {
  flex-wrap: nowrap;
}

.place-picker {
  position: relative;
}

/* --- Araç çubuğu üçüncü tur: tek satır, taşma yok ---------------------- */

.search-form__row {
  align-items: center;
  gap: 0.4rem;
}

.search-form__query {
  position: relative;
}

.search-form__icon {
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 1;
}

.search-form__input {
  padding-inline-start: 2.2rem;
}

/* Filtreler kapsülü ve paneli */
.filter-drawer {
  position: relative;
  flex: none;
  border: 0;
}

.filter-drawer__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-surface);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.filter-drawer__summary::-webkit-details-marker {
  display: none;
}

.filter-drawer[open] > .filter-drawer__summary {
  border-color: var(--brand-200);
  background-color: var(--color-action-soft);
  color: var(--color-action-strong);
}

.filter-drawer > .filter-groups {
  position: absolute;
  inset-inline-end: 0;
  z-index: 6;
  inline-size: min(30rem, 86vw);
  max-block-size: min(70vh, 34rem);
  overflow-y: auto;
  margin-block-start: 0.45rem;
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow: 0 24px 50px -28px rgb(32 32 31 / 60%);
}

/* Konum ve hizmetler: konum önce yer alır, hizmetler kırpılır. */
.result-card__meta .result-card__location {
  flex: 1 1 auto;
  min-inline-size: 4rem;
}

.result-card__meta .result-card__services {
  flex: 0 1 auto;
  max-inline-size: 42%;
}

/* Konum artık tek esnek alan: tüm boşluğu alır, kırpılmaz. */
.result-card__meta .result-card__location {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.result-card__meta .chip--kind {
  margin-inline-start: auto;
}

/* --- Filtre paneli: yerel popover (dışa tıklama ve Esc kapatır) --------- */

.filter-drawer {
  position: relative;
  flex: none;
  border: 0;
}

.filter-drawer__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-surface);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.filter-drawer__summary:hover {
  border-color: var(--brand-200);
  background-color: var(--brand-50);
}

.filter-drawer__count {
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background-color: var(--brand-500);
  color: var(--sand-900);
  font-size: 0.7rem;
}

.filter-drawer__panel[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  inline-size: min(30rem, 92vw);
  max-block-size: min(72vh, 36rem);
  overflow-y: auto;
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow: 0 26px 60px -30px rgb(20 20 20 / 55%);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* GETAT düğmesinin popoveri: yalnızca alan çipleri, bu yüzden dar durur. */
.filter-drawer__panel--getat[popover] {
  /* On altı alan **kaydırmadan** sığsın: daha geniş panel, sarılan çipler. */
  inline-size: min(32rem, 94vw);
  max-block-size: min(80vh, 40rem);
  border-color: var(--color-public-soft-border, var(--color-rule));
}

/* Alan çipleri yatay kaydırmak yerine alt satıra geçer: hepsi bir bakışta görünür. */
.filter-drawer__areas .chip-row {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 0.4rem;
}

.filter-drawer__hint {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm, 0.86rem);
}

/* Araç çubuğundaki GETAT düğmesi: uygulamanın konusu, bu yüzden vurgulu. */
.filter-drawer__summary--getat {
  border-color: var(--color-public-strong);
  color: var(--color-public-strong);
  font-weight: 700;
}

.filter-drawer__summary--getat:hover {
  background-color: var(--color-public-soft);
}

.filter-drawer__panel[popover]::backdrop {
  background-color: rgb(20 20 20 / 12%);
}

/* Destekleyen tarayıcılarda panel düğmenin altına demirlenir. */
.search-form {
  anchor-name: --filter-anchor;
}

.filter-drawer__panel[popover] {
  position-anchor: --filter-anchor;
  inset-block-start: anchor(bottom);
  inset-inline-end: anchor(right);
}

/* ==========================================================================
   Şablon şeması (referans görsel): Kamu = petrol, Özel = logo turuncusu,
   Eczane = bal. Kartlar dört kısa satır, ince çerçeve, kendi panelinde.
   ========================================================================== */

/* --- Sağlayıcı rozetleri: dolu kapsül -------------------------------- */

.badge-pill.is-public {
  background-color: var(--petrol-600);
  color: #ffffff;
}

.badge-pill.is-private {
  background-color: var(--brand-500);
  color: var(--sand-900);
}

.badge-pill {
  padding: 0.12rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
}

/* --- Sol sütun: kart görünümlü panel + ayırıcı ------------------------ */

.pane--list {
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: 18px;
  background-color: var(--color-surface);
  box-shadow: 0 14px 40px -34px rgb(20 20 20 / 60%);
}

.pane--map {
  position: relative;
  border-inline-start: 1px solid var(--color-rule);
  padding-inline-start: var(--space-4);
}

.map-pane {
  position: relative;
}

.pane__title {
  font-size: 1.35rem;
}

/* --- Kart: dört satır, ikonlu ---------------------------------------- */

.result-card {
  display: block;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background-color: var(--color-surface);
}

.result-card:hover {
  border-color: var(--brand-200);
  transform: none;
  box-shadow: 0 10px 22px -18px rgb(20 20 20 / 55%);
}

.result-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-inline-size: 0;
}

.result-card__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-strong);
}

.result-card__line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-inline-size: 0;
  margin-block-start: 0.2rem;
  overflow: hidden;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.result-card__line > svg {
  flex: none;
  color: var(--color-text-subtle);
}

.result-card__location,
.result-card__services {
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-card__kind {
  flex: none;
}

.result-card__rank {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.55rem;
  opacity: 0;
}

.result-card {
  position: relative;
}

.result-card__line .chip--kind {
  padding: 0.02rem 0.32rem;
  font-size: 0.66rem;
}

/* --- Seçili filtre çipleri: logo coralı, koyu mürekkep (Cycle 335) ------- */
/* Vorher (Cycle 329/316d) petrol; auf Wunsch von haluk wieder das Logo-Coral. Die Regel
   steht weiterhin hier, damit ein `.active-filter` außerhalb des Suchbereichs denselben
   Vertrag trägt wie der Block A4 unten. */

.active-filter {
  border-color: var(--color-action);
  background-color: var(--color-action);
  color: var(--color-action-text);
  font-weight: 600;
}

.active-filter:hover {
  border-color: var(--color-action-hover);
  background-color: var(--color-action-hover);
  color: var(--color-action-text);
}

.active-filter__remove {
  color: var(--color-action-text);
  opacity: 1;
}

/* --- Harita lejantı --------------------------------------------------- */

.map-legend {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.map-legend__dot {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 999px;
  background-color: var(--color-public);
}

.map-legend__dot.is-private {
  background-color: var(--brand-500);
}

.map-legend__dot.is-pharmacy {
  /* Wie die Nadel: Eczane ist coral (Cycle 346). */
  background-color: var(--color-pharmacy-accent);
}

/* --- Başlık bloğu: panel içinde nefes alanı, altında ayırıcı ----------- */

.pane--list {
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.pane__head {
  padding-block: 0 0.7rem;
  margin-block-end: 0.2rem;
  border-block-end: 1px solid var(--color-rule);
}

.pane__head-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-inline-size: 0;
}

.pane__title {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

/* **Unterzeile unter „Sonuçlar"** (Cycle 217, Nutzerwunsch): Der Satz steht **unter** dem Titel in
   kleinerer Schrift und darf **umbrechen** — kein `white-space: nowrap`, kein `text-overflow:
   ellipsis`. Genau das war der Anlass: vorher endete die Zeile mit „Türkiye genelindeki kayı…". */
.pane__context {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-subtle);
}

/* „GETAT" im Satz führt auf die Info-Seite `/getat`. */
.pane__context-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pane__context-link:hover {
  color: var(--color-text-strong);
}

/* Üst şerit ile sayfa zemini aynı tonda olsun: renk sıçraması olmasın. */
.site-header {
  background-color: var(--color-canvas);
}

/* Paneller header'a yapışmasın. */
.app__grid {
  padding-block-start: var(--space-5);
}

/* --- Araç çubuğu: üstte arama, altta kapsüller ------------------------ */

.search-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.search-form__row {
  flex-wrap: nowrap;
}

.search-form__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* **Tek satır**: "Yakınımdaki" alt satıra kaymamalı (kullanıcı isteği). Sığmazsa
     düğmeler kısalır, satır kaymaz. */
  flex-wrap: nowrap;
  min-inline-size: 0;
}

/* Sayaçlı kapsüller biraz daralır: 390–430 px'te üçü de yazıyla sığsın. */
.search-form__actions .filter-drawer__summary,
.search-form__actions .search-form__nearby {
  padding-inline: 0.5rem;
  gap: 0.25rem;
  min-inline-size: 0;
  white-space: nowrap;
}

/* Geniş ekran kuralı (`.search-form__nearby { flex: 0 0 auto }`) araç şeridinde de
   geçerliydi ve düğmeyi **kaydırmaya kapatıyordu**: 390 px'te satır 9 px taşıyor,
   "Yakınımdaki" kutusu kapsayıcının dışına çıkıyordu. Şeritte daralabilir. */
.search-form__actions .search-form__nearby {
  flex: 0 1 auto;
}

.search-form__actions .filter-drawer__count {
  min-inline-size: 1.15rem;
  block-size: 1.15rem;
  padding-inline: 0.22rem;
  font-size: 0.68rem;
}

.search-form__actions .place-picker {
  margin-inline-start: 0;
}

.search-form__input {
  font-size: 0.9rem;
}

.results__head {
  margin-block-start: 0.1rem;
}

/* ==========================================================================
   Tasarım geçişi: tek ritim, tek yükseklik, sakin yüzeyler.
   ========================================================================== */

:root {
  --ui-gap: 0.5rem;
  --ui-panel-padding: 1.1rem;
  --ui-control-height: 2.1rem;
}

/* --- Başlık ve araç çubuğu --------------------------------------------- */

.pane--list {
  padding: var(--ui-panel-padding);
}

.pane__head {
  padding-block: 0 0.85rem;
  margin-block-end: 0.85rem;
  border-block-end: 1px solid var(--color-rule);
}

.pane__title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.pane__context {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
}

.search-form {
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.search-form__input {
  block-size: var(--ui-control-height);
  padding: 0 0.75rem 0 2.1rem;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background-color: var(--color-canvas);
  font-size: 0.875rem;
}

.search-form__icon {
  inset-inline-start: 0.7rem;
}

.search-form__actions {
  gap: 0.4rem;
}

.filter-drawer__summary,
.search-form .place-picker > summary {
  block-size: var(--ui-control-height);
  padding: 0 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-surface);
  font-size: 0.78rem;
  font-weight: 600;
}

.filter-drawer__summary:hover,
.search-form .place-picker > summary:hover {
  border-color: var(--color-border-strong);
}

/* --- Sayaç şeridi ------------------------------------------------------ */

.results__head {
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background-color: var(--color-canvas);
  backdrop-filter: none;
}

.results__count strong {
  font-size: 0.9rem;
}

.results__summary {
  font-size: 0.74rem;
}

.results__clear {
  padding: 0.2rem 0.55rem;
  background-color: transparent;
  font-size: 0.74rem;
  color: #177571;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.results__clear:hover,
.results__clear:focus-visible {
  background-color: var(--brand-50);
  color: #209897;
}

/* --- Bölüm başlıkları ve kartlar -------------------------------------- */

.results__section {
  gap: 0.4rem;
}

.results__section-title {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.results__section-count {
  padding: 0.02rem 0.35rem;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.result-list {
  gap: 0.4rem;
}

.result-card {
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(20 20 20 / 3%);
}

.result-card__name {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.result-card__line {
  gap: 0.3rem;
  margin-block-start: 0.16rem;
  font-size: 0.75rem;
  line-height: 1.45;
}

.result-card__line > svg {
  inline-size: 12px;
  block-size: 12px;
}

/* --- Yükleme düğmesi -------------------------------------------------- */

.results__more {
  border-radius: 12px;
  font-size: 0.82rem;
}

/* --- Harita üstü kapsüller ve lejant ---------------------------------- */

.map-pane__layer,
.map-pane__busy,
.map-legend {
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(8px);
  font-size: 0.74rem;
  box-shadow: 0 6px 18px -14px rgb(20 20 20 / 45%);
}

.map-legend {
  border-radius: 999px;
}

/* Harita zemini sakinleşsin: veri (turuncu bantlar, iğneler) öne çıksın. */
.map-pane__canvas .leaflet-tile-pane {
  filter: saturate(0.72) contrast(1.02) brightness(1.02);
}

.map-pane__canvas .leaflet-container,
/* Harita kendi yığın bağlamını oluşturur: Leaflet'in iç katmanları (200-800)
   dışarı taşıp başlıktaki açılır panelin üstüne çiziliyordu. */
.map-pane {
  isolation: isolate;
}

.map-pane__canvas {
  background-color: #f3efe7;
}

/* İlçe-Poligone (SVG-Pfade) werden beim Klick **fokussiert**; der Browser malte seinen
   `auto`-Fokusring um die Bounding-Box — also als **Rechteck**. Android Chrome zeichnet ihn dick,
   dunkel und gerundet (Nutzerbefund 14.10.2026: „schwarze Rechtecke“ beim Klick auf eine leere
   Stelle). Der Ring verschwindet deshalb nur beim **Zeiger**-Fokus; Tastatur-Fokus
   (`:focus-visible`) behält unseren eigenen Markenring. Der Tooltip bleibt: Leaflet öffnet ihn
   über denselben `click` (Cycle 290). Die Reihenfolge ist wichtig — `:focus-visible` steht zuletzt. */
.map-pane__canvas .leaflet-overlay-pane path:focus {
  outline: none;
}

.map-pane__canvas .leaflet-overlay-pane path:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* --- Kaydırma çubuğu için net bir şerit -------------------------------- */
/* Kartların sağ kenarı ile çubuk arasında her zaman boşluk kalsın: çubuk
   kendi şeridinde (14 px) ortalanır, içerik 1.1 rem içeride biter. */

/* Kaydırma çubuğu: kartlardan uzak, ince ve yalnızca liste üzerine
   gelindiğinde görünür. Böylece kutuların yanında sürekli bir çubuk durmaz. */
/* Nöbet filtresi açıkken tek satırlık uyarı: küçük, kutu değil — sonuçları kapatmamalı. */
.results__note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs, 0.78rem);
  line-height: 1.45;
}

.results__scroll {
  padding-inline: 0.15rem 1.35rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.results__scroll:hover {
  scrollbar-color: color-mix(in srgb, var(--sand-500) 60%, transparent) transparent;
}

.results__scroll::-webkit-scrollbar {
  inline-size: 16px;
}

.results__scroll::-webkit-scrollbar-track {
  margin-block: 0.5rem;
  background: transparent;
}

.results__scroll::-webkit-scrollbar-thumb {
  border: 5px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: transparent;
}

/* Çubuk yalnızca liste üzerine gelindiğinde görünür. */
.results__scroll:hover::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--sand-500) 60%, transparent);
}

.results__scroll::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--brand-500) 70%, transparent);
}

/* --- Lejant: sağlayıcı noktaları + erişim ölçeği ----------------------- */

.map-legend {
  gap: 0.55rem;
  padding: 0.4rem 0.7rem;
}

.map-legend__sep {
  inline-size: 1px;
  block-size: 0.9rem;
  background-color: var(--color-rule);
}

.map-legend__swatch {
  inline-size: 0.8rem;
  block-size: 0.6rem;
  border-radius: 3px;
  background-color: color-mix(in srgb, #ff6b56 30%, transparent);
}

.map-legend__swatch.is-high {
  background-color: color-mix(in srgb, #ff6b56 55%, transparent);
}

/* İlçe poligonları: ince, tıklanabilir{
  cursor: pointer;
}

/* --- "Yakınımdaki": düğme, yarıçap kapsülleri, mesafe ------------------ */

.search-form__nearby {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  block-size: var(--ui-control-height);
  padding: 0 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-surface);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.search-form__nearby:hover {
  border-color: var(--brand-200);
  background-color: var(--color-action-soft);
  color: var(--color-action-strong);
}

.search-form__nearby.is-busy {
  opacity: 0.65;
  cursor: progress;
}

.radius-pills {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-canvas);
}

.radius-pill {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}

.radius-pill.is-active {
  background-color: #177571;
  color: #fff;
}

/* Zemin yarı saydam coral: aydınlık ve karanlıkta da kontrast korunur. */
.result-card__distance {
  flex: none;
  padding: 0.02rem 0.35rem;
  border-radius: 999px;
  background-color: var(--color-action-soft);
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-action-strong);
}

/* Kullanıcı konumu ve yarıçap halkası */
.origin-marker {
  filter: drop-shadow(0 2px 6px rgb(29 127 245 / 45%));
}

.origin-radius {
  stroke-dasharray: 6 6;
}

/* ==========================================================================
   Her çözünürlükte okunur liste
   - Kısa ekranlarda (yatay telefon/tablet, dizüstü 720p) iki sütunlu düzen
     listeyi eziyordu: liste yüksekliği en az birkaç karta yetmeli.
   - Kural: liste alanı asla 16 rem'in altına inmez; sığmıyorsa sayfa kayar ve
     düzen mobildeki gibi alt alta geçer.
   ========================================================================== */

.app__grid {
  /* Çok kısa ekranlarda bile pane'e yer kalsın. */
  min-block-size: 34rem;
}

/* Nöbet filtresi açıkken tek satırlık uyarı: küçük, kutu değil — sonuçları kapatmamalı. */
.results__note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs, 0.78rem);
  line-height: 1.45;
}

.results__scroll {
  min-block-size: 12rem;
}

/* Orta genişlik: liste sütunu biraz daralsın, harita nefes alsın. */
@media (max-width: 1200px) and (min-width: 961px) {
  .app__grid {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  }

  .pane--list {
    padding: 0.9rem;
  }
}

/* Kısa ama geniş ekranlar (Tablet quer, 720p dizüstü): iki sütun korunur,
   çünkü alt alta düzende harita ekranın altına düşüyor ve görünmüyordu.
   Bunun yerine üstteki süs alanı kısılır: boşluklar ve denetim yüksekliği küçülür;
   liste en az üç kart gösterir.

   **Unterzeile steht in der Fußzeile** (Cycle 229, Nutzerbefund 11.10.2026; seit Cycle 343 in
   **allen** Formaten): Der Satz „Türkiye genelindeki tüm GETAT merkezleri ve eczaneler"
   (bzw. Provinz, Landkreis, Einzeltreffer) steht unten in der Fußzeile, in einer Zeile mit
   dem Beta-Hinweis (`.preview-note__context`, Nutzerwunsch: „es auch im Footer kommt aber in
   der gleichen Zeile wie für das Beta hinweis"). Im Rahmen bleibt er unsichtbar (Regel oben).
   Den Satz dort hält `app/javascript/controllers/preview_note_controller.js` aktuell (der
   Turbo-Rahmen wird ausgetauscht, die Fußzeile liegt außerhalb). */
@media (max-height: 860px) and (min-width: 961px) {
  .app__grid {
    padding-block: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .pane--list {
    padding: 0.85rem;
  }

  .pane__head {
    padding-block: 0 0.5rem;
    margin-block-end: 0.5rem;
  }

  .pane__title {
    font-size: 1.15rem;
  }

  .search-form {
    gap: 0.4rem;
  }

  .results__count strong {
    font-size: 0.85rem;
  }

  .results__head {
    padding: 0.35rem 0.6rem;
  }

  /* Nöbet filtresi açıkken tek satırlık uyarı: küçük, kutu değil — sonuçları kapatmamalı. */
.results__note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs, 0.78rem);
  line-height: 1.45;
}

.results__scroll {
    min-block-size: 14rem;
  }
}

/* **Kopf im Tablet-Querformat ausblenden** (Cycle 339, Nutzerbefund 18.10.2026): „auf den
   Tablet mit Queransicht brauchts das nicht" — im kurzen, breiten Fenster bleibt vom Kopf
   nur „Sonuçlar" übrig; die Unterzeile steht seit Cycle 229 in der Fußzeile. Der 31 px hohe
   Streifen mit beigem Band und Trennlinie nimmt der Liste den Platz, deshalb fällt der Kopf
   dort ganz weg.

   **Auch die Kapsam-Notiz** (`.pane__coverage`, nur bei unvollständiger Eczane-Abdeckung)
   entfällt hier: Im Querformat zählt jeder Zentimeter, und der Satz in der Fußzeile genügt
   für die Einordnung (haluk, 18.10.2026, 21:10: „weg, das was im Footer ist reicht").
   Damit bleibt vom Kopf nichts übrig — eine Regel statt Ausnahmen.

   Grenze **1024 px** = Beginn der zweispaltigen Ansicht (Cycle 316b); zwischen 961 und
   1023 px steht die Liste untereinander, dort bleibt der Kopf. Hochformat, Mobil und Desktop
   sind nicht betroffen und zeigen Titel und Kapsam-Notiz wie bisher. */
@media (max-height: 860px) and (min-width: 1024px) {
  .pane__head {
    display: none;
  }
}

/* Gerçekten çok kısa ekran: ancak burada alt alta düzen gerekir. */
@media (max-height: 560px) and (min-width: 961px) {
  body.page-public {
    block-size: auto;
    overflow: auto;
  }

  body.page-public main#main,
  body.page-public .app,
  body.page-public .app__grid,
  .pane--list {
    display: block;
  }

  body.page-public .app__grid {
    block-size: auto;
    min-block-size: 0;
    overflow: visible;
  }

  .search-frame {
    overflow: visible;
  }

  .results {
    display: block;
  }

  /* Nöbet filtresi açıkken tek satırlık uyarı: küçük, kutu değil — sonuçları kapatmamalı. */
.results__note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs, 0.78rem);
  line-height: 1.45;
}

.results__scroll {
    max-block-size: 58vh;
    min-block-size: 12rem;
  }

  .pane--map {
    block-size: 60vh;
    min-block-size: 18rem;
    margin-block-start: var(--space-3);
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* Çok kısa ekran: araç çubuğu ve başlık sıkışsın. */
@media (max-height: 620px) {
  .pane__head {
    padding-block: 0 0.5rem;
    margin-block-end: 0.5rem;
  }

  .pane__title {
    font-size: 1.1rem;
  }

  .search-form {
    gap: 0.35rem;
  }

  /* Nöbet filtresi açıkken tek satırlık uyarı: küçük, kutu değil — sonuçları kapatmamalı. */
.results__note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs, 0.78rem);
  line-height: 1.45;
}

.results__scroll {
    min-block-size: 10rem;
  }
}

/* Mobil ve dar ekranlar: liste de kendi içinde kaysın (sayfa 2.600 px'lik tek
   kaydırmaya dönüşmesin), harita hemen altında kalsın. */
@media (max-width: 960px) {
  /* Nöbet filtresi açıkken tek satırlık uyarı: küçük, kutu değil — sonuçları kapatmamalı. */
.results__note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs, 0.78rem);
  line-height: 1.45;
}

.results__scroll {
    max-block-size: 56vh;
    min-block-size: 16rem;
    padding-inline-end: 1rem;
    margin-block-end: var(--space-2);
  }

  /* Harita ve liste arasında net bir ayrım. */
  .pane--map {
    margin-block-start: var(--space-4);
  }

  .map-legend {
    inset-block-end: 1.9rem;
  }
}

/* Çok dar ekranda (≤380 px) araç şeridi tek satırda kalsın: "Yakınımdaki" yalnızca
   simgeye iner ve boşluklar daralır. 390 px'te üçü de yazıyla sığıyor. */
@media (max-width: 380px) {
  .search-form__nearby-text {
    display: none;
  }

}

/* ==========================================================================
   Arama başlıkta (logo yanında), sonuçlar haritanın yanında
   - Kullanıcı isteği: arama alanı header'da; treffer listesi haritanın yanında.
   ========================================================================== */

.site-header__inner {
  gap: var(--space-4);
}

.site-header__search {
  flex: 1 1 22rem;
  min-inline-size: 0;
  max-inline-size: 46rem;
}

/* Başlıktaki arama formu: kutusuz, tek satır. */
.site-header__search .search-form {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.site-header__search .search-form__row {
  gap: 0.4rem;
}

.site-header__search .search-form__input {
  block-size: 2.35rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-surface);
  font-size: 0.875rem;
}

.site-header__search .search-form__input:focus {
  border-color: var(--brand-300, var(--brand-200));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent);
}

.site-header__search .place-picker > summary {
  block-size: 2.35rem;
  padding: 0 0.8rem;
}

/* Liste panelindeki araç şeridi (filtreler, yakınımdaki). */
.search-form__actions {
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-rule);
  margin-block-end: var(--space-2);
}

/* Başlıkta arama varken çok dar ekranda ikinci satıra iner. */
@media (max-width: 700px) {
  .site-header__inner {
    /* Arama kendi satırına insin diye sarma **gerekli**; ama boşluk daraltılır. */
    flex-wrap: wrap;
    /* 16 px boşlukta üst satır 359 px istiyordu, kullanılabilir alan 358 px: menü bu yüzden
       alt satıra düşüyordu (ölçüldü). 8 px ile satır rahat sığar. */
    gap: var(--space-2);
  }

  /* Menü, "Asistan" bağlantısının hemen yanında kalır: `auto` boşluk sarma satırında
     satırın tamamını yutuyor ve menüyü alt satıra atıyordu. */
  .site-nav {
    flex-wrap: nowrap;
    margin-inline-start: 0;
  }

  /* **Cycle 190**: Der Sprachumschalter steht am **Zeilenende**. Ohne `auto`-Abstand füllt kein
     Element die Zeile (die Suche hat `order: 3`), rechts blieben 118 px leer — der Umschalter
     stand bei 263…294 px statt am Rand (412 px), und das Menü lief aus dem Bild.
     **Cycle 364**: Der Abstand sitzt an der Gruppe aus Sprachauswahl und Tema, damit der
     Umschalter rechts der Sprachauswahl bleibt. */
  .site-header__end {
    margin-inline-start: auto;
  }

  .site-header__search {
    order: 3;
    flex-basis: 100%;
  }

  /* Arama satırı taşmaz: alan kendi satırında, „Yer" und das Nachbarfeld bleiben
     in ihrer Breite (der „Yeni"-Knopf entfiel in Cycle 344). */
  .search-form__row {
    flex-wrap: wrap;
  }

  .search-form__query {
    flex: 1 1 100%;
  }

  .search-form__nearby,
  .place-picker {
    flex: 0 0 auto;
  }

  /* Panel formun tam genişliğinde ve hemen altında açılır.
     Mutlak konumdayken dar ekranda solundan taşıyor ("Önce il seçin" kesiliyordu);
     ekrana sabitlemek ise arama satırını örtüyordu. Bu yüzden konumlandırma
     çapası "Yer" düğmesinden forma taşınır. */
  .search-form {
    position: relative;
  }

  .search-form .place-picker {
    position: static;
  }

  .search-form .place-picker__fields {
    inset-inline: 0;
    inset-block-start: 100%;
    margin-block-start: 0.4rem;
    max-inline-size: none;
    max-block-size: 60vh;
  }

}

/* --- Nöbetçi eczaneler ------------------------------------------------- */

.result-card__duty {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background-color: var(--brand-500);
  color: var(--sand-900);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* **Abendschicht** (Cycle 239): gehört zur Tagesliste, ist aber **nicht jetzt** im Dienst —
   deshalb gedämpft statt in der Nöbet-Farbe. */
.result-card__duty--later {
  background-color: var(--sand-200);
  color: var(--sand-800);
  font-weight: 600;
}

.search-form__duty {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  block-size: var(--ui-control-height);
  padding: 0 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-surface);
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.search-form__duty-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background-color: var(--brand-500);
}

.search-form__duty.is-active {
  border-color: transparent;
  background-color: var(--brand-500);
  color: var(--sand-900);
}

.search-form__duty.is-active .search-form__duty-dot {
  background-color: var(--sand-900);
}

/* Haritada nöbetçi iğnesi: halka ile ayrılır. */
.map-pin--duty {
  box-shadow: 0 0 0 3px rgb(255 255 255 / 90%), 0 0 0 6px rgb(255 107 86 / 65%), 0 3px 8px rgb(20 20 20 / 35%);
}

/* **Spätere Schicht** (Cycle 272): Dieselbe Nadel, **gedämpfter** Ring. Das Zeichen ist auch vor
   Dienstbeginn sichtbar (die Nöbet-Ansicht zeigt die Tagesliste, Cycle 239), aber es behauptet
   nicht „jetzt offen" — die Blase nennt die Startzeit („Nöbetçi · 19:00'den itibaren"). */
.map-pin--duty-later {
  box-shadow: 0 0 0 3px rgb(255 255 255 / 85%), 0 0 0 6px rgb(255 107 86 / 30%), 0 3px 8px rgb(20 20 20 / 30%);
}

.popup-duty {
  color: var(--color-action-strong);
  font-weight: 700;
}

/* **Abendschicht in der Blase** (Cycle 239): gehört zur Tagesliste, ist aber nicht jetzt im
   Dienst — gedämpft, damit die Blase keine falsche Dringlichkeit behauptet. */
.popup-duty-later {
  color: var(--sand-800);
  font-weight: 600;
}

/* **Anruf-Symbol** (Cycle 273, umgestellt in Cycle 276): Es steht **rechts von der Telefonnummer**
   in der Telefonzeile (Detailkarte und Detailseite) sowie im Anruf-Link der Kartenblase. Der Text
   bleibt als `title`/`visually-hidden` erhalten („Ara" heißt türkisch auch „suche"). Das Symbol
   erbt die Textfarbe und bleibt so hoch wie eine Zeile. */
.detail-card__phone-icon,
.map-popup__icon {
  inline-size: 1.1em;
  block-size: 1.1em;
  vertical-align: -0.15em;
}

/* **Nummer und Hörer gehören in eine Zeile** (Cycle 286, Nutzerbefund mit Pixel-Screenshot):
   Die Faktenzeile ist ein Grid aus Label und Wertspalte; auf dem Telefon passte der nicht
   umbrechbare `tel:`-Link plus Symbol nicht mehr nebeneinander und das Symbol rutschte **unter**
   die Nummer. `nowrap` bindet beide zusammen, das Symbol darf nicht schrumpfen. */
.detail-card__phone {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.detail-card__phone-icon {
  flex: none;
  color: var(--brand-500);
}

/* Auf schmalen Geräten steht das Label **über** dem Wert: Der Wert bekommt die volle Breite,
   damit Nummer und Symbol sicher in eine Zeile passen (und lange Adressen lesbar bleiben). */
@media (max-width: 420px) {
  .detail-card__fact {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* Blase: Knopf zur Ayrıntı kartı desselben Eintrags (Cycle 230). Bewusst ein echter Knopf —
   ohne JavaScript gibt es keine Blase, ein Link wäre nur Schein. Leaflet unterbindet die
   Weitergabe von Popup-Klicks an die Karte, die Blase bleibt also offen. Mindesthöhe 32 px,
   damit der Knopf auf dem Telefon mit dem Daumen zu treffen ist. */
.map-popup__detail {
  margin-block-start: 0.5rem;
  min-block-size: 32px;
  padding: 0.25rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--brand-500);
  color: var(--sand-900);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.map-popup__detail:hover,
.map-popup__detail:focus-visible {
  background-color: color-mix(in srgb, var(--brand-500) 82%, #000);
}

/* **Direkte Kontaktwege in der Blase** (Cycle 259): anrufen, WhatsApp, E-Mail. Dieselbe
   Mindesthöhe wie der Ayrıntılar-Knopf (32 px, Daumen-Regel); zurückhaltender gestaltet, damit
   „Ayrıntılar" der Hauptknopf bleibt. Fehlt eine Angabe, fehlt der Knopf ganz. */
.map-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-start: 0.5rem;
}

.map-popup__actions a {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  padding: 0.2rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--sand-900) 22%, transparent);
  border-radius: 999px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.map-popup__actions a:hover,
.map-popup__actions a:focus-visible {
  border-color: var(--brand-500);
  background-color: color-mix(in srgb, var(--brand-500) 18%, transparent);
}

/* --- Mobil: karta dokununca haritaya geçiş, geri dönüş düğmesi --------- */

/* **Unten mittig, direkt über der Attributionszeile** (Cycle 352, Nutzerbefunde 19.10.2026:
   „es soll mittig unten sein nur tiefer", „erişim nasıl hesaplanır? auf gleicher Höhe wie
   Leaflet"). Der Erklärsatz der Legende ist entfallen, der Yöntem-Link steht jetzt **auf** der
   Attributionszeile unten links — damit ist der Platz unter dem Knopf frei und er rückt bis
   auf 1.8rem an den unteren Rand (vorher 5.4rem). Seine Unterkante liegt bei ~92 % der
   360 px hohen Karte, dazwischen ~5 px, darunter Link und OSM-Kredit. */
.map-pane__back {
  position: absolute;
  inset-block-end: 1.8rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: fit-content;
  min-block-size: 44px; /* dokunma hedefi */
  /* **Leaflet'in üstünde** olmalı: harita katmanları 400–700 arası z-index kullanıyor,
     düğme 5'te kaldığı için görünmüyordu (kullanıcı bu yüzden "yukarı çıkış yok" dedi).
     Diğer harita üstü öğelerle aynı seviye: 520. */
  /* 560: **über** der Detailkarte (540) — sie darf den Rückweg nie wieder abfangen
     (Cycle 186). */
  z-index: 560;
  display: none; /* yalnızca alt alta düzende görünür */
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(8px);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-action-strong);
  cursor: pointer;
  box-shadow: 0 8px 20px -16px rgb(20 20 20 / 50%);
}

@media (max-width: 700px) {
  .map-pane__back {
    display: inline-flex;
  }

  /* Harita yüksekliği kaydırma hedefi olarak net kalsın. */
  .pane--map {
    scroll-margin-block-start: var(--space-3);
  }
}

/* ==========================================================================
   Karanlık mod: harita ve yüzeyler
   ========================================================================== */

/* Karolar gece için filtrelenir: OSM'nin aydınlık zemini koyulaşır, renkler
   okunur kalır. */
html[data-theme="dark"] .map-pane__canvas .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.85);
}

html[data-theme="dark"] .map-pane__canvas,
html[data-theme="dark"] .map-pane__canvas .leaflet-container {
  background-color: var(--map-canvas-bg, #2a251e);
}

/* Harita üstü kapsüller ve lejant koyu yüzeyde. */
html[data-theme="dark"] .map-pane__layer,
html[data-theme="dark"] .map-pane__back,
html[data-theme="dark"] .map-legend,
html[data-theme="dark"] .map-pane__status {
  background-color: var(--map-control-bg, rgb(32 28 23 / 94%));
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* --- İşaret kümeleri --------------------------------------------------- */

.map-cluster-wrapper {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
}

.map-cluster {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  background-color: var(--brand-500);
  color: var(--sand-900);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 22px -12px rgb(20 20 20 / 55%);
}

.map-cluster.is-medium {
  inline-size: 2.9rem;
  block-size: 2.9rem;
  font-size: 0.88rem;
}

.map-cluster.is-large {
  inline-size: 3.3rem;
  block-size: 3.3rem;
  font-size: 0.95rem;
}

html[data-theme="dark"] .map-cluster {
  border-color: var(--color-surface-3);
  box-shadow: 0 10px 22px -10px rgb(0 0 0 / 70%);
}

/* --- Başlık satırı: tüm denetimler aynı hizada ------------------------- */
/* "Yer" varsayılan olarak list-item kutusudur ve birkaç piksel aşağı kayıyordu;
   arama alanı, Yer ve tema anahtarı tek yükseklikte ve ortalanmış olur. */

.site-header__search .search-form__row,
.site-header__inner {
  align-items: center;
}

.site-header__search .search-form__input,
.site-header__search .place-picker > summary,
.theme-toggle,
.pwa-install__button {
  block-size: 2.3rem;
  margin: 0;
}

/* details varsayılan olarak üstten boşluk alıyor (8 px) ve "Yer"i aşağı
   kaydırıyordu; başlıkta sıfırlanır. */
.site-header__search .place-picker {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Bazı kurallar 2.75rem min yükseklik veriyor; başlıkta hepsi tek boya iner. */
.site-header__search .search-form__input,
.site-header__search .place-picker > summary {
  block-size: 2.3rem;
  min-block-size: 2.3rem;
}

.site-header__search .place-picker > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
}

.site-header__search .place-picker > summary::-webkit-details-marker {
  display: none;
}

/* --- İl dizini ---------------------------------------------------------- */

.directory {
  max-inline-size: var(--layout-max);
  /* Üst öğe flex olduğu için "margin-inline: auto" öğeyi içerik genişliğine
     daraltıyordu: il dizini 1440 px ekranda 800 px'e sıkışıp 2 sütunda kalıyordu. */
  inline-size: 100%;
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-8);
}

.directory__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
}

.directory__lead {
  margin: 0 0 var(--space-5);
  max-inline-size: 46rem;
  color: var(--color-text-muted);
}

.directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.directory__card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  block-size: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  background-color: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.directory__card:hover {
  border-color: var(--brand-200);
  box-shadow: 0 10px 22px -18px rgb(20 20 20 / 55%);
  transform: translateY(-1px);
}

.directory__name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.directory__stats {
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.directory__access {
  margin-block-start: auto;
}

.directory__badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Semantik "soft" belirteçler kullanılır: karanlıkta yarı saydam coral olur ve
   açık renk metinle okunur kalır (sabit --brand-50 açık tonu karanlıkta
   eziyordu, kontrast 1,7'ye düşüyordu). */
.directory__badge.is-scored {
  background-color: var(--color-action-soft);
  color: var(--color-action-strong);
}

.directory__badge.is-covered {
  background-color: var(--color-public-soft);
  color: var(--color-public-strong);
}

.directory__badge.is-empty {
  background-color: var(--color-canvas);
  color: var(--color-text-subtle);
}

/* --- İlçe sayfası: kayıt kartının içinde ek bölümler -------------------- */

.record__subtitle {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.record__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.record__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  font-size: 0.86rem;
}

.record__note {
  color: var(--color-text-subtle);
  font-size: 0.78rem;
}

.record__section {
  border-block-start: 1px solid var(--color-border-faint);
  padding-block-start: var(--space-3);
}

.record__actions {
  margin: 0;
}

/* İlçe sayfası: mesafeye göre sıralı merkez listesi. */
.record__list--ranked li {
  align-items: center;
}

.record__rank {
  flex: none;
  min-inline-size: 4.2rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background-color: var(--color-action-soft);
  color: var(--color-action-strong);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* "Sizden" rozeti: kullanıcının konumuna göre mesafe. */
.record__mine {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background-color: var(--color-public-soft);
  color: var(--color-public-strong);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Kayıt sayfası: arama ve yol tarifi bağlantıları. */
.record__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.record__call {
  font-weight: 600;
}

/* Detay kartı: yol tarifi bağlantısı. */
.detail-card__links a {
  font-weight: 600;
}

/* --- Nöbetçi eczaneler sayfası ----------------------------------------- */

.duty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.duty-district__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.duty-district__count {
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background-color: var(--color-action-soft);
  color: var(--color-action-strong);
  font-size: 0.72rem;
  font-weight: 700;
}

.duty-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.duty-list__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-faint);
  border-radius: 12px;
  background-color: var(--color-surface);
  font-size: 0.85rem;
}

.duty-list__name {
  font-weight: 600;
}

.duty-list__meta {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.duty-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.78rem;
}

/* Nöbetçi listesinde en yakın eczane vurgulanır. */
.duty-list__item.is-nearest {
  border-color: var(--brand-500);
  box-shadow: 0 10px 22px -18px rgb(20 20 20 / 60%);
}

/* Harita altı notu: erişim yöntemi bağlantısı. */
.map-pane__note {
  position: absolute;
  inset-inline-start: var(--space-3);
  /* **Auf der Höhe der Leaflet-Zeile** (Cycle 352, Nutzerbefund 19.10.2026: „erişim nasıl
     hesaplanır? auf gleicher Höhe wie Leaflet"): Der Link rückt aus der eigenen Zeile in die
     Attribution und ist damit die unterste Zeile der Karte. */
  inset-block-end: 0.15rem;
  z-index: 500;
  margin: 0;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-surface) 88%, transparent);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* **GETAT-Hinweis über dem Yöntem-Link** (Cycle 352): Beide standen am selben Fleck, der
   breitere Yöntem-Hinweis verdeckte ihn. Seit der Satz „Renkler iki aşamalı…" entfiel, wäre
   der kleine Hinweis darunter hervorgeschoben — er steht deshalb eine Zeile höher. Auf dem
   Telefon entfällt er (`≤1023 px`), dort braucht der Rückweg den Platz. */
.map-pane__note--about {
  inset-block-end: 3.6rem;
}

/* Boş sonuç ekranındaki kapsam notu. */
.state__text--note {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background-color: var(--color-surface-muted, rgb(0 0 0 / 3%));
  font-size: 0.82rem;
}

/* Sonuç başlığındaki kapsam notu. */
.pane__coverage {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Cycle 316b — QC-Korrektur Suchfilter
   Filterpanel logisch am Suchformular, 44-px-Klickflächen, Bottom Sheet unter
   768 px, Liste/Karte untereinander bis 1023 px.
   ========================================================================== */

/* --- Panel: logische Kante statt physischem anchor(right) --------------- */

/* **Geschlossen bleibt verborgen**: Die Mobile-Regel setzt `display:flex`; ohne diese
   Bedingung überschrieb sie das UA-`display:none` und das Panel stand schon beim Laden offen. */
.filter-drawer__panel[popover]:not(:popover-open) {
  display: none;
}

.filter-drawer__panel[popover] {
  inline-size: min(30rem, calc(100vw - 32px));
  /* Anforderung A1: nie breiter als der Bildschirm minus 2 × 16 px. */
  max-inline-size: min(480px, calc(100vw - 32px));
  max-block-size: min(72vh, 36rem);
}

/* `anchor(start)` ist die **logische** Ankerkante: LTR links, RTL rechts. Das alte
   `inset-inline-end: anchor(right)` setzte in RTL die linke Panelkante auf die rechte
   Formularkante — das Panel lief aus dem Bild. */
@supports (anchor-name: --filter-anchor) {
  .filter-drawer__panel[popover] {
    position-anchor: --filter-anchor;
    inset-block-start: anchor(bottom);
    inset-inline-start: anchor(start);
    inset-inline-end: auto;
    margin-block-start: 0.45rem;
  }
}

/* Ohne Anchor-Positioning (ältere Browser): mittig, aber vollständig im Fenster. */
@supports not (anchor-name: --filter-anchor) {
  .filter-drawer__panel[popover] {
    inset-block-start: 5rem;
    /* Physisch zentrieren: In RTL würde `inset-inline-start: 50%` die rechte Kante setzen. */
    left: 50%;
    right: auto;
    translate: -50% 0;
  }
}

/* --- Aktive Filter: eigener ×-Knopf mit 44 × 44 px ---------------------- */

.active-filter {
  min-block-size: 44px;
  padding-block: 0;
  padding-inline: 0.85rem 0.15rem;
  gap: 0.15rem;
}

.active-filter__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  min-inline-size: 44px;
  block-size: 44px;
  min-block-size: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.active-filter__remove:hover,
.active-filter__remove:focus-visible {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Panel-Chips (auch GETAT-Alan) bleiben mit dem Daumen treffbar. */
.filter-drawer__panel .chip {
  min-block-size: 44px;
}

/* Die Aktionsleiste gehört nur zum Filter-Bottom-Sheet; am Desktop unsichtbar. */
.filter-drawer__apply {
  display: none;
}

/* --- A5: eine Spalte bis 1023 px, nebeneinander erst ab 1024 px --------- */

@media (max-width: 1023px) {
  body.page-public {
    block-size: auto;
    overflow: visible;
  }

  body.page-public main#main {
    display: block;
  }

  body.page-public .app {
    display: block;
  }

  body.page-public .app__grid {
    display: block;
    block-size: auto;
    overflow: visible;
    padding-block: var(--space-3) var(--space-5);
  }

  .search-frame {
    overflow: visible;
  }

  /* **Am letzten Treffer läuft die Seite weiter** (Cycle 340, Nutzerbefund 18.10.2026):
     In der gestapelten Ansicht ist `.results__scroll` eine eigene Scrollfläche (unter
     960 px mit 56 vh Höhe). Das `contain` aus der Grundregel kappte die Kette zum
     Fenster: Wer unten am letzten Treffer ankam, blieb stehen — Karte und Fuß der Seite
     waren mit dem Schwung nicht mehr zu erreichen. `auto` reicht den Schwung an die
     Seite weiter. Auf Desktop bleibt `contain`: dort scrollt bewusst nur die Liste. */
  .results__scroll {
    overscroll-behavior: auto;
  }

  .pane--list {
    display: block;
  }

  .pane__head {
    position: static;
  }

  .pane--map {
    block-size: 60vh;
    min-block-size: 22rem;
    margin-block-start: var(--space-4);
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  /* Bei untereinander liegender Karte ist der Rückweg sichtbar. */
  .map-pane__back {
    display: inline-flex;
  }

  /* Der GETAT-Hinweis entfällt hier (Cycle 352): Rückweg und Yöntem-Link teilen sich den
     unteren Rand; der Fuß der Seite verlinkt GETAT ohnehin. */
  .map-pane__note--about {
    display: none;
  }

}

/* 768 px: Karte unter der Liste mit genau 360 px Höhe. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pane--map {
    block-size: 360px;
    min-block-size: 360px;
  }
}

/* --- A4: Bottom Sheet unter 768 px -------------------------------------- */

@media (max-width: 767px) {
  .filter-drawer__panel[popover] {
    position: fixed;
    /* Volle verfügbare Breite, aber mit 16 px Rand an allen Seiten (A1). */
    inset: auto 16px 16px;
    inline-size: auto;
    max-inline-size: none;
    max-block-size: 90vh;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    translate: none;
  }

  .filter-drawer__panel-scroll {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-3);
  }

  /* Die GETAT-Pille hat keinen eigenen Festknopf; sie scrollt als Ganzes. */
  .filter-drawer__panel--getat[popover] {
    display: block;
    overflow-y: auto;
    padding: var(--space-3);
  }

  .filter-drawer__apply {
    display: block;
    flex: none;
    padding: 0.6rem var(--space-3) calc(0.6rem + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--color-rule);
    background-color: var(--color-surface);
  }

  .filter-drawer__apply-button {
    inline-size: 100%;
    min-block-size: 48px;
    border: 0;
    border-radius: 12px;
    background-color: var(--brand-500);
    color: var(--sand-900);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  /* Kategorie-Chips brechen um; kein seitliches Scrollen, kein Überlauf. */
  .filter-drawer__panel .chip-row--scroll {
    flex-wrap: wrap;
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .filter-drawer__panel .chip-row--scroll > * {
    flex: 0 0 auto;
  }
}

/* **Infobox für Provinzen ohne heutige Nöbet-Liste** (Cycle 318, QC 17.10.2026).
   Volle Listenbreite, Rand #eae3da, Chips in einer Zeile (Desktop); mobil umbrechen,
   kein seitliches Scrollen, Klickflächen mindestens 44 px. Logische Eigenschaften
   spiegeln die Box in AR automatisch. */
.duty-absence {
  inline-size: 100%;
  box-sizing: border-box;
  border: 1px solid #eae3da;
  border-radius: 14px;
  background-color: #fdfbf6;
  padding: clamp(16px, 2.5vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.duty-absence__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.duty-absence__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  background-color: #f5f0e9;
  color: #645c54;
}

.duty-absence__body {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.duty-absence__title {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.35;
  color: #141414;
  overflow-wrap: break-word;
}

.duty-absence__date,
.duty-absence__call {
  margin: 0;
  color: #645c54;
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.duty-absence__all {
  align-self: flex-start;
  margin-block-start: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 0 1.25rem;
  border: 1px solid #177571;
  border-radius: 999px;
  background-color: #177571;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.duty-absence__all:hover,
.duty-absence__all:focus-visible {
  /* #209897 mit dunklem Text bleibt bei 4,5:1 (weiß läge bei 3,5:1). */
  border-color: #209897;
  background-color: #209897;
  color: #141414;
  text-decoration: none;
}

.duty-absence__all:focus-visible {
  outline: 2px solid #209897;
  outline-offset: 2px;
}

.duty-absence__neighbours {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}

.duty-absence__label {
  margin: 0;
  color: #645c54;
  font-size: 0.9rem;
  font-weight: 600;
}

.duty-absence__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  max-inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.duty-absence__chips > li {
  flex: 0 0 auto;
}

.duty-absence__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: 14px;
  border: 1px solid #d8e4e2;
  border-radius: 999px;
  background-color: #f6faf9;
  color: #177571;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.duty-absence__chip:hover,
.duty-absence__chip:focus-visible {
  border-color: #177571;
  background-color: #eef6f5;
}


@media (max-width: 700px) {
  /* Mobil: Chips brechen um, kein seitliches Scrollen (QC 17.10.2026). */
  .duty-absence__chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* Mobil steht der Text unter dem Symbol; so kann der Button die volle
     Kartenbreite einnehmen (Soll Ansicht 17.10.2026). */
  .duty-absence__head {
    flex-direction: column;
  }

  .duty-absence__body {
    inline-size: 100%;
  }

  .duty-absence__chip {
    white-space: normal;
  }

  /* Mobil: „Tüm eczaneleri göster" nimmt die volle Breite ein. */
  .duty-absence__all {
    inline-size: 100%;
    max-inline-size: 100%;
  }
}

/* ==========================================================================
   Cycle 329 — Soll Ansicht UI/UX 17.10.2026 (Punkte 2, 3, 6)
   ========================================================================== */

/* Kein Element breiter als der Viewport; lange Namen dürfen umbrechen. */
html,
body {
  max-inline-size: 100%;
}

/* Lange Namen (Provinzen, Zentren, Straßen) brechen, statt den Viewport zu sprengen.
   `break-word` trennt nur, wenn ein Wort wirklich nicht passt; `anywhere` bleibt den
   echten Einzelwörtern ohne Trennstellen vorbehalten (Korrektur 329b / P1). */
body {
  overflow-wrap: break-word;
}

/* URLs, E-Mail-Adressen, Codes und IDs dürfen an jeder Stelle brechen. */
a[href^="http://"],
a[href^="https://"],
a[href^="mailto:"],
code,
kbd,
.break-anywhere,
[data-break-anywhere] {
  overflow-wrap: anywhere;
}

.record,
.record > *,
.record__head > *,
.record__facts > div > *,
.record__list > li {
  min-inline-size: 0;
}

.record__head {
  flex-wrap: wrap;
}

.record__name,
.record__location,
.record__back,
.record__facts dd,
.record__note,
.record__list li,
.record p {
  overflow-wrap: break-word;
}

/* Der Geolocation-Knopf auf /ilce und /merkez: volle Breite, Umbruch, 44 px. */
.record__actions .button {
  max-inline-size: 100%;
  box-sizing: border-box;
}

.record__section[data-controller="geolocation"] .record__actions .button {
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 44px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* /ara unter 768 px: Radius vier gleich breite Segmente in eigener Zeile;
   die Chipzeile darf umbrechen, statt abgeschnitten zu werden. */
@media (max-width: 767px) {
  .search-form__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
  }

  /* Auch bei 360 px steht „Yakınımdaki" ausgeschrieben; die Zeile bricht lieber um. */
  .search-form__actions .search-form__nearby-text {
    display: inline;
  }

  /* Bei 390/430 px passen beide Knöpfe mit Zählern in eine Zeile, wenn der
     Umgebungs-Knopf etwas enger gepolstert ist. */
  .search-form__actions .search-form__nearby {
    gap: 0.2rem;
    padding-inline: 0.3rem;
  }

  .search-form__actions .radius-pills {
    order: 3;
    flex: 1 0 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
  }

  .radius-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding: 0.2rem 0.25rem;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .search-form__actions {
    flex-wrap: nowrap;
  }

  .search-form__actions .radius-pills {
    flex: 0 0 auto;
  }

  .radius-pill {
    white-space: nowrap;
  }
}

/* Formularfelder: Rand und Fokusring 2 px #209897 (Punkt 6). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border: 2px solid #209897;
  outline: 2px solid #209897;
  outline-offset: 0;
  box-shadow: 0 0 0 2px #209897;
}

/* **Kopfzeilen-Suche: helles Coral statt Petrol** (Cycle 361, Regression aus 329).
   Die eigenen Marken-Werte (`--brand-300`/`--brand-500`) gelten nur hier; alle übrigen
   Formularfelder behalten den petrolfarbenen Fokusring aus der Regel darüber. Zwei Regeln
   müssen überschrieben werden: `input:focus-visible` und die spätere
   `.page-search :is(…):focus-visible`-Regel (gleiche Spezifität, deshalb mit `.page-search`
   davor). Ohne das bleibt die petrolfarbene `outline` sichtbar. */
.site-header__search .search-form__input:focus,
.site-header__search .search-form__input:focus-visible,
.page-search .site-header__search .search-form__input:focus,
.page-search .site-header__search .search-form__input:focus-visible {
  border-color: var(--brand-300, var(--brand-200));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent);
}

/* Kopfzeilen-Suche: mobil eigene Zeile, ab 1024 px mindestens 200 px breit.
   Die Regeln stehen hier, weil `search.css` die Layout-Regeln überschreibt. */
@media (max-width: 1023px) {
  .site-header__search {
    order: 3;
    flex: 1 1 100%;
    min-inline-size: 0;
    max-inline-size: none;
  }
}

@media (min-width: 1024px) {
  .site-header__search {
    flex: 1 1 200px;
    min-inline-size: 200px;
    max-inline-size: 46rem;
  }
}

/* Das Suchfeld selbst bleibt mindestens 200 px breit (Soll Ansicht Punkt 1). */
.site-header__search .search-form__query {
  min-inline-size: 200px;
}

/* ==========================================================================
   Cycle 316c — QC-Nachzieher Suchfilter (V1–V6, V8, V9)
   Bottom Sheet mit Kopfzeile und fester Leiste, Popover mit umbrochenen
   Chip-Reihen, Fokusfarben, Kartenhöhe 360 px und AR-Kartentexte.
   ========================================================================== */

/* --- V1/V2/V6: Panel als Dialog mit Kopf, Scrollinhalt und fester Leiste --- */

.filter-drawer__panel[popover] {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  max-block-size: min(70vh, 640px);
}

.filter-drawer__panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.55rem 0.55rem 0.55rem 0.85rem;
  border-block-end: 1px solid var(--color-rule);
  background-color: var(--color-surface);
}

.filter-drawer__panel-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text-strong);
}

.filter-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  min-inline-size: 44px;
  block-size: 44px;
  min-block-size: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.filter-drawer__close:hover,
.filter-drawer__close:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.filter-drawer__panel-scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3);
}

/* Die Aktionsleiste bleibt in **beiden** Breiten unten stehen (V6). */
.filter-drawer__apply {
  display: block;
  flex: none;
  padding: 0.6rem var(--space-3) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--color-rule);
  background-color: var(--color-surface);
}

.filter-drawer__panel[popover]::backdrop {
  background-color: rgb(20 20 20 / 40%);
}

/* **„Filtreler" ist ein Knopf mit aria-expanded und 44 px Höhe** (V2). */
.filter-drawer__summary {
  min-block-size: 44px;
}

/* --- V6: Chip-Reihen im Popover umbrechen, kein seitliches Scrollen --- */

.filter-drawer__panel .chip-row--scroll {
  flex-wrap: wrap;
  overflow: visible;
  padding-inline: 0;
  margin-inline: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.filter-drawer__panel .chip-row--scroll > * {
  flex: 0 0 auto;
}

/* --- V5: ×-Farbe, aktive Chips mit AA-Kontrast, Chip-Abstand ---------------- */
/* Cycle 335: Der aktive Chip ist wieder das **Logo-Coral** (#FF6B56) statt #b45309 und
   statt Petrol; Text und × sitzen in der Tintenfarbe (6,6:1). */

.active-filter__remove {
  color: var(--color-action-text);
}

.active-filter__remove:hover,
.active-filter__remove:focus-visible {
  color: var(--color-action-text);
}

.active-filter,
.active-filter:hover {
  background-color: var(--color-action);
  color: var(--color-action-text);
}

.active-filter:hover {
  background-color: var(--color-action-hover);
}

.filter-drawer__panel .chip-row,
.filter-drawer__panel .chip-row--scroll,
.active-filters {
  gap: 0.5rem;
}

/* --- V9: AR-Karten: zwei Zeilen Name, Kürzung am logischen Ende ------------- */

.result-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
}

.result-card__location,
.result-card__services {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- V5: Karte bei 360/390 px genau 360 px hoch ----------------------------- */

@media (max-width: 767px) {
  .pane--map,
  .pane--map.pane--map {
    block-size: 360px;
    min-block-size: 360px;
  }

  /* Das Sheet bleibt über die volle Breite, max. 90vh, mit 16 px Rand. */
  .filter-drawer__panel[popover] {
    max-block-size: 90vh;
  }
}

/* --- V8: Kopfzeile 768–1023 px einzeilig, Suchfeld flexibel ab 240 px -------- */

.site-nav__link--signin .site-nav__icon {
  display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__inner {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .site-header__search {
    flex: 1 1 240px;
    min-inline-size: 240px;
    max-inline-size: none;
  }

  .site-nav {
    flex-wrap: nowrap;
    margin-inline-start: 0;
  }

  .site-nav__link--signin {
    inline-size: 44px;
    min-inline-size: 44px;
    block-size: 44px;
    min-block-size: 44px;
    padding: 0;
  }

  .site-nav__link--signin .site-nav__label-full,
  .site-nav__link--signin .site-nav__label-short {
    display: none;
  }

  .site-nav__link--signin .site-nav__icon {
    display: inline-flex;
  }
}

/* ==========================================================================
   Cycle 316d — QC-Korrektur Suchfilter /ara
   A1/A2 Aktionsleiste, A3 Scrollsperre, A4 Chipfarben, A11/Z3 Kopfzeile,
   Z1 Radiusumschalter, Z2 neutrale Badges, Z5 Meta-Zeile,
   Altbestand: Fokusring, Linkfarbe, Coral nur an erlaubten Flächen, 44-px-Felder.
   Z4 (runder „+“-Knopf) ist mit Cycle 344 entfallen: die Suche ist dynamisch.
   ========================================================================== */

/* --- A3: Hintergrund scrollt bei offenem Panel nicht ---------------------- */
body.filter-panel-open {
  overflow: hidden;
}

/* --- A1/A2: Aktionsleiste im Filterpanel -------------------------------- */
.filter-drawer__apply {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid #eae3da;
  background-color: var(--color-surface);
}

.filter-drawer__clear {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: #177571;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.filter-drawer__clear:hover,
.filter-drawer__clear:focus-visible {
  color: #209897;
}

.filter-drawer__apply-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background-color: #177571;
  color: #fdfbf6;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.filter-drawer__apply-button:hover {
  background-color: #209897;
  color: #fdfbf6;
}

@media (max-width: 767px) {
  .filter-drawer__apply {
    flex-wrap: wrap;
    /* **8 px statt 12 px** (Cycle 316e, Punkt 7): gestapelte Leiste, „Temizle“ oben. */
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .filter-drawer__clear {
    inline-size: 100%;
    min-block-size: 44px;
    /* Logischer Startrand: links in LTR, rechts in AR. */
    justify-content: flex-start;
  }

  .filter-drawer__apply-button {
    inline-size: 100%;
    min-block-size: 48px;
  }
}

/* --- A4: Aktive Chips im Logo-Coral, Hover heller (Cycle 335) ------------ */
/* Seit 316d waren aktive Chips petrol (#177571). Auf Wunsch von haluk (18.10.2026) sind sie
   wieder das Logo-Coral; Petrol bleibt die Farbe der **Orte** (Karte, Badges). Text und ×
   tragen die Tintenfarbe, weil Weiß auf #FF6B56 nur 2,8:1 erreicht. */
.page-search .chip--filter.is-active,
.page-search .active-filter,
.page-search .active-filter:hover {
  border-color: var(--color-action);
  background-color: var(--color-action);
  color: var(--color-action-text);
  /* **Kein dauerhafter Ring** (Cycle 316e, Punkt 6): Der Fokusring erscheint nur bei
     `:focus-visible` (Altbestand-Regel unten). */
  box-shadow: none;
}

.page-search .chip--filter.is-active:hover,
.page-search .active-filter:hover {
  background-color: var(--color-action-hover);
  color: var(--color-action-text);
}

.page-search .chip--filter.is-active:focus,
.page-search .active-filter:focus {
  box-shadow: none;
}

.page-search .active-filter__remove {
  color: var(--color-action-text);
}

.page-search .active-filter__remove:hover,
.page-search .active-filter__remove:focus-visible {
  color: var(--color-action-text);
  background-color: color-mix(in srgb, var(--color-action-text) 18%, transparent);
}

.page-search .filter-drawer__count {
  background-color: #177571;
  color: #fdfbf6;
}

/* --- Z2: neutrale Kartenbadges und Entfernungspille --------------------- */
.page-search .badge-pill,
.page-search .badge-pill.is-public,
.page-search .badge-pill.is-private,
.page-search .badge-pill.is-pharmacy {
  background-color: #eae3da;
  color: #141414;
}

.page-search .result-card__distance {
  background-color: #eae3da;
  color: #645c54;
}

/* --- Cycle 337: „Daha Fazla Sonuç Yükle" wieder im Logo-Coral ----------- */
/* Die 316d-Regel „Coral nur am ‚+ Yeni'" hat diesen Knopf auf Petrol gezogen; seit Cycle 335
   (aktive Chips coral) gilt sie nicht mehr, und den „+ Yeni"-Knopf gibt es seit Cycle 344
   nicht mehr. Der Basiszustand `.results__more` ist bereits
   coral (#FF6B56, Text #141414, Hover #FF8B6F). Die Farbe muss hier trotzdem stehen:
   `.page-search a` färbt Links petrol und ist spezifischer als `.results__more`. */
.page-search .results__more {
  background-color: var(--brand-500);
  color: var(--color-action-text);
}

.page-search .results__more:hover {
  background-color: var(--brand-400);
  color: var(--color-action-text);
}

/* **„Nöbetçi" bleibt Coral** (Cycle 362, Nutzerbefund 21.10.2026: „war das auch schon
   coral" / „meine Coral"): Cycle 316d hatte das Etikett auf /ara petrolfarben gefärbt
   (#177571/weiß); die Apotheke darunter ist seit Cycle 346 Coral, das Etikett gehört dazu.
   Die Basisregel `.result-card__duty` (Coral `--brand-500`, Tinte `--sand-900`, AA 6,6:1)
   gilt deshalb auch hier — kein `background-color`/`color` in dieser Datei mehr setzen.
   Nur die spätere Schicht bleibt gedämpft, damit sie nicht „jetzt im Dienst" behauptet. */
.page-search .result-card__duty--later {
  background-color: #eae3da;
  color: #141414;
}

/* --- Altbestand: Links und Fokusring ----------------------------------- */
/* **Themes** (Cycle 347): feste Werte kippten den Kontrast im dunklen Thema (Axe:
   `.site-nav__link--icon`, `.site-nav__label-full`, `.results__clear`). `--color-public`
   ist hell Petrol (#177571) und dunkel das helle Petrol (#7cc4be) — kein Honig, kein
   #b45309. */
.page-search a {
  color: var(--color-public-strong);
}

.page-search a:hover {
  color: var(--color-public);
}

/* **„İçeriğe geç" ist kein Inhaltslink** (Cycle 344, Nebenfund): Die Regel `.page-search a`
   ist spezifischer als `.skip-link` und färbte den hellen Text der Fokus-Pille petrol
   (#177571 auf #141414, 2,2:1). Der Sprunglink behält in beiden Zuständen den Sandton. */
.page-search .skip-link,
.page-search .skip-link:hover {
  color: #fdfbf6;
}

/* **Infobox-Knopf** (Cycle 347): `.page-search a` (0,2,1) ist spezifischer als
   `.duty-absence__all` (0,1,0) und färbte den weißen Text petrol — petrol auf petrol.
   Hier gilt wieder Weiß; im Hover bleibt es beim dunklen Text auf #209897. */
.page-search .duty-absence__all {
  color: #fff;
}

.page-search .duty-absence__all:hover,
.page-search .duty-absence__all:focus-visible {
  color: #141414;
}

/* Kein #b45309 mehr auf /ara (Cycle 316d, Altbestand): die verbliebenen
   `--brand-700`-Stellen (Sprachumschalter, Filter-Icon, Kartenrückweg, Detail-Hinweis)
   werden petrol. */
.page-search .locale-switcher__label,
.page-search .locale-switcher__check,
.page-search .locale-switcher__item,
.page-search .locale-switcher__flag,
.page-search .filter-drawer__icon,
.page-search .connection-bar__retry,
.page-search .map-pane__back,
.page-search .detail-card__highlight {
  color: #177571;
  border-color: #177571;
}

.page-search :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #209897;
  outline-offset: 2px;
}

/* --- A11/Altbestand: alle Bedienelemente mindestens 44 px -------------- */
.page-search .search-form__input,
.page-search .site-header__search .search-form__input,
.page-search .search-form__select select,
.page-search .site-header__search .place-picker > summary,
.page-search .search-form__nearby,
.page-search .filter-drawer__summary {
  min-block-size: 44px;
}

/* Die Kopfzeile bleibt auf einer Höhe: der Themen-Knopf wächst mit den 44-px-Feldern. */
.page-search .theme-toggle {
  block-size: 44px;
  min-block-size: 44px;
}

/* --- Z1: Radiusumschalter bis 767 px in eigener, voller Zeile ----------- */
.page-search .radius-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  white-space: nowrap;
}

.page-search .radius-pill.is-active {
  background-color: #177571;
  color: #fff;
}

@media (max-width: 767px) {
  .search-form__actions {
    flex-wrap: wrap;
    gap: 0.2rem;
    row-gap: 8px;
  }

  /* Die drei Werkzeugknöpfe bleiben in **einer** Zeile; nur die Radiusgruppe
     bekommt eine eigene Zeile (Z1). Etwas engere Innenabstände schaffen den Platz. */
  .search-form__actions .filter-drawer__summary,
  .search-form__actions .search-form__nearby {
    padding-inline: 0.35rem;
  }

  .search-form__actions .radius-pills {
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    inline-size: 100%;
    max-inline-size: 100%;
    padding: 4px;
    box-sizing: border-box;
  }

  .search-form__actions .radius-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 44px;
    padding: 0 0.2rem;
    white-space: nowrap;
  }

  .radius-pill.is-active {
    background-color: #177571;
    color: #fff;
  }
}

/* --- A11/Z3: 768–1023 px Suchfeld unter dem Header ---------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .site-header__search {
    order: 3;
    flex: 1 1 100%;
    min-inline-size: 0;
    max-inline-size: none;
  }

  .site-header__search .search-form__row {
    display: flex;
    flex-wrap: wrap;
  }

  .site-header__search .search-form__query {
    flex: 1 1 100%;
  }

  .site-header__search .place-picker {
    flex: 0 0 auto;
  }

  .site-nav {
    flex-wrap: nowrap;
    margin-inline-start: 0;
  }
}

/* Ab 1024 px bleibt das Suchfeld in der Kopfzeile (V8 aus 316c). */
@media (min-width: 1024px) {
  .site-header__search {
    flex: 1 1 240px;
    min-inline-size: 240px;
  }
}

/* --- A11: Platzhalter darf in keiner Sprache abgeschnitten sein --------- */
/* 320–480 px: die langen DE/EN/RU-Platzhalter brauchen eine kleinere Schrift,
   sonst enden sie mitten im Wort. */
@media (max-width: 480px) {
  .page-search .site-header__search .search-form__input {
    font-size: 0.78rem;
  }
}

@media (max-width: 380px) {
  .page-search .site-header__search .search-form__input {
    font-size: 0.72rem;
  }
}

/* 1024–1199 px ist die Kopfzeile eng: Asistent und „+“ treten als Icon auf, damit
   das Suchfeld breit genug für den vollständigen Platzhalter bleibt. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header .site-nav__link--icon {
    inline-size: 44px;
    min-inline-size: 44px;
    padding: 0;
    justify-content: center;
  }

  .site-header .site-nav__link--icon span {
    display: none;
  }

  .site-header__search .search-form__input {
    font-size: 0.66rem;
    padding-inline: 2rem 0.5rem;
  }
}

/* --- Z5: Meta-Zeile bricht um statt abgeschnitten ----------------------- */
.page-search .result-card__line--meta {
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
  row-gap: 2px;
}

.page-search .result-card__line--meta .result-card__kind {
  flex: 0 1 auto;
  min-inline-size: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-search .result-card__line--meta .chip--kind {
  flex: 0 1 auto;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- A13: Zahl und Suffix ohne Lücke ----------------------------------- */
/* Der Zählsatz steht in einem Strong-Knoten (Zahl + Suffix); hier nur absichern, dass
   ein Zeilenumbruch nicht mitten in „1.000'den“ fällt. */
.page-search .results__count strong {
  white-space: nowrap;
}

/* ==========================================================================
   Cycle 342 — Werkzeugleiste: „Yer" als vierte Kapsel, alle vier in einer Zeile
   Wunsch (haluk, 18.10.2026): „Yer" steht auf derselben Leiste wie GETAT,
   Filtreler und die Umgebungssuche — in **allen** Sprachen eine Zeile.
   ========================================================================== */

/* --- Der Yer-Knopf: eigene Kapsel in der Werkzeugleiste ----------------- */

.place-picker__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 1 auto;
  min-inline-size: 0;
  block-size: var(--ui-control-height);
  /* Dieselbe Klickhöhe wie die übrigen Pillen (A11, 44 px). */
  min-block-size: 44px;
  padding: 0 0.5rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-surface);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  /* Anker für das Panel; die Kante ist logisch (RTL: linke Kante). */
  anchor-name: --place-anchor;
}

/* Aufklapp-Pfeil wie beim früheren `<summary>`; in RTL zeigt er nach links. */
.place-picker__summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--color-text-subtle);
}

:dir(rtl) .place-picker__summary::before {
  content: "◂";
}

.place-picker__summary:hover {
  border-color: var(--color-border-strong);
}

.place-picker__summary[aria-expanded="true"] {
  border-color: var(--brand-200);
  background-color: var(--color-action-soft);
  color: var(--color-action-strong);
}

/* --- Das Panel: kleines Popover, am Knopf verankert --------------------- */

/* Geschlossen bleibt das Panel verborgen: die ältere Regel
   `.site-header__search .place-picker { display: flex }` (Details-Aufbau) hebt sonst die
   UA-Regel `[popover]:not(:popover-open) { display: none }` auf — das Panel stünde offen. */
.place-picker[popover]:not(:popover-open) {
  display: none;
}

.place-picker[popover] {
  display: block;
  position: fixed;
  inset: auto;
  margin: 0;
  inline-size: min(24rem, calc(100vw - 24px));
  max-block-size: min(70vh, 26rem);
  overflow-y: auto;
  padding: 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  background-color: var(--color-surface);
  box-shadow: 0 26px 60px -30px rgb(20 20 20 / 55%);
  overscroll-behavior: contain;
}

@supports (anchor-name: --place-anchor) {
  .place-picker[popover] {
    position-anchor: --place-anchor;
    inset-block-start: anchor(bottom);
    /* Logische **Startkante**: Das Panel wächst nach innen (LTR rechts, RTL links).
       Mit `anchor(end)` lief es am Desktop links aus dem Bild (gemessen: x = -52). */
    inset-inline-start: anchor(start);
    inset-inline-end: auto;
    margin-block-start: 0.4rem;
    /* Reicht der Platz nicht, klappt das Panel auf die andere Seite. */
    position-try-fallbacks: flip-inline;
  }
}

/* Ohne Anchor-Positioning (ältere Browser): mittig, aber vollständig im Fenster. */
@supports not (anchor-name: --place-anchor) {
  .place-picker[popover] {
    inset-block-start: 5rem;
    left: 50%;
    right: auto;
    translate: -50% 0;
  }
}

.place-picker__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

.place-picker__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text-strong);
}

.place-picker__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  min-inline-size: 44px;
  block-size: 44px;
  min-block-size: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.place-picker__close:hover,
.place-picker__close:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Die Felder stehen im Popover im Fluss: die absolute Positionierung aus dem
   früheren `<details>`-Aufbau (voll breit unter dem Formular) gilt hier nicht mehr. */
.place-picker[popover] .place-picker__fields {
  position: static;
  inset: auto;
  z-index: auto;
  max-block-size: none;
  max-inline-size: none;
  overflow: visible;
  margin-block-start: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* --- Vier Kapseln, eine Zeile: Werkzeugleiste bis an die Pane-Kanten ---- */

@media (max-width: 767px) {
  .search-form__actions {
    /* Die vier Kapseln bleiben nebeneinander; nur die Radiusgruppe (Z1) bekommt
       ihre eigene Zeile, weil sie `flex: 1 0 100%` trägt. */
    flex-wrap: wrap;
    gap: 0.2rem;
    /* Volle Pane-Breite (die Pane-Innenkante wird aufgehoben), damit „Konum"
       und die Zähler in jeder Sprache Platz haben. */
    margin-inline: calc(-1 * var(--ui-panel-padding));
    padding-inline: 0.25rem;
  }

  .search-form__actions .filter-drawer__summary,
  .search-form__actions .search-form__nearby,
  .search-form__actions .place-picker__summary {
    padding-inline: 0.3rem;
  }

  /* Auf dem Telefon klebt das Yer-Panel als kleines Sheet unten am Fenster — wie die
     Filterpanels (A4). Eine Verankerung am Knopf lief bei 360–430 px aus dem Bild. */
  .place-picker[popover] {
    inset: auto 16px 16px;
    inline-size: auto;
    max-inline-size: none;
    max-block-size: min(80vh, 30rem);
    margin: 0;
    translate: none;
    border-radius: 16px;
  }
}

/* Kopfzeile auf dem Telefon: Das Suchfeld steht allein in **einer** Zeile —
   „Yer" ist in die Werkzeugleiste umgezogen, der „Yeni"-Knopf entfällt (Cycle 344). */
@media (max-width: 700px) {
  .site-header__search .search-form__row {
    flex-wrap: nowrap;
  }

  .site-header__search .search-form__query {
    flex: 1 1 auto;
  }
}

/* Auch 768–1023 px: Das Suchfeld nimmt die freie Breite (die Regel aus A11/Z3
   setzte es auf 100 %, seit Cycle 344 gibt es keinen Knopf mehr daneben). */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__search .search-form__query {
    flex: 1 1 auto;
  }
}

/* Enge Telefone (≤ 430 px): etwas kleinere Schrift und schmalere Innenabstände.
   Gemessen bei 360 px mit Zählern: „Filters | Place | Nearby“ braucht 324 px, russisch
   „Фильтры | Место | Рядом“ 346 px — verfügbar sind 318 px. */
@media (max-width: 430px) {
  .search-form__actions .filter-drawer__summary,
  .search-form__actions .search-form__nearby,
  .search-form__actions .place-picker__summary {
    font-size: 0.75rem;
    padding-inline: 0.25rem;
  }
}

/* Sehr schmale Geräte (≤ 380 px): Symbole entfallen, die Beschriftungen und Zähler
   bleiben. So stehen alle vier Kapseln auch bei 320–380 px in einer Zeile — in jeder
   Sprache. */
@media (max-width: 380px) {
  .search-form__actions .filter-drawer__icon,
  .search-form__actions .search-form__nearby svg,
  .place-picker__summary::before {
    display: none;
  }
}

/* Noch schmaler (≤ 340 px): Schrift und Innenabstand eine Stufe enger, damit auch
   russisch (längste Beschriftung) ohne Umbruch passt. */
@media (max-width: 340px) {
  .search-form__actions .filter-drawer__summary,
  .search-form__actions .search-form__nearby,
  .search-form__actions .place-picker__summary {
    font-size: 0.72rem;
    padding-inline: 0.2rem;
  }
}