/* ==========================================================================
   GETATBUL — layout.css
   Genel kabuk: sayfa, üst bilgi, marka bloğu, kahraman alanı, iki sütunlu
   arama yerleşimi, alt bilgi ve oturum kabuğu.

   Kırılım noktaları: 600px (dokunma hedefleri), 768px (form ızgarası),
   960px (liste + harita iki sütun), 1200px (geniş boşluklar).

   Mobil öncelikli: tek sütun varsayılandır; sayfa kaydırıldığında önce
   sonuç listesi, sonra ayrıntı, en son harita gelir. 960px üzerinde ayrıntı
   ve harita sağ sütuna geçer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sayfa gövdesi
   -------------------------------------------------------------------------- */

.page {
  display: block;
  inline-size: 100%;
}

/* --------------------------------------------------------------------------
   Marka bloğu (logo + kelime işareti)
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.brand-link:hover {
  color: inherit;
  text-decoration: none;
}

.brand-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Logo dosyası (JPEG) pin + yazıyı birlikte taşır; krem zemini başlık zeminiyle
   aynı tondadır, böylece kutu gibi görünmez. Genişlik orana göre hesaplanır. */
.brand__mark {
  display: block;
  flex: none;
  block-size: 2.5rem;
  inline-size: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Üst bilgi
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  border-block-end: var(--border-width) solid var(--color-rule);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  inline-size: 100%;
  max-inline-size: var(--layout-max);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
}

.site-header__tagline .badge {
  margin-inline-start: var(--space-2);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* Ende der Kopfzeile: Sprachauswahl und Tag/Nacht-Umschalter als **eine** Gruppe
   (Cycle 364). Der Umschalter steht rechts der Sprachauswahl; die Gruppe bleibt
   zusammen, damit die beiden auf schmalen Bildschirmen nicht umbrechen. */
.site-header__end {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.site-nav__link:hover {
  background-color: var(--color-surface-3);
  color: var(--color-text-strong);
  text-decoration: none;
}

.site-nav__link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-nav__link--quiet {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.site-nav__link--quiet:hover {
  color: var(--color-link);
}

/* **Trenner zwischen Suchfeld und Assistent** (Cycle 365, Nutzerwunsch 21.10.2026):
   Auf der Startseite/`/ara` steht der Assistent ab 1024 px direkt rechts des Suchfelds;
   eine feine senkrechte Linie grenzt beides ab. Sie hängt als `::before` am Link und
   kostet deshalb **keine** Breite — die Kopfzeile bleibt einzeilig, und der Abstand
   zwischen Feld und Assistent (2 × `--space-4` = 32 px, der leere `.pwa-install`-Block
   sitzt mit 0 Breite dazwischen) bleibt unverändert. Die Linie sitzt in dessen Mitte,
   also `--space-4` links vom Link.
   **Nur ab 1024 px**: darunter bekommt die Suche `order: 3` und steht in einer eigenen
   Zeile unter dem Assistenten (Soll Ansicht 17.10.2026, Cycle 329/364) — dort gäbe es
   keine Lücke zwischen beiden zu trennen. */
@media (min-width: 1024px) {
  .site-nav__link--divider {
    position: relative;
  }

  .site-nav__link--divider::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--space-4) * -1);
    inline-size: var(--border-width);
    block-size: 1.5rem;
    transform: translateY(-50%);
    background-color: var(--color-rule);
    pointer-events: none;
  }

  /* **PWA-Knopf sichtbar** (Chrome/Edge, solange die App nicht installiert ist): Er steht
     zwischen Suchfeld und Assistent, die Lücke ist dann **eine** (`--space-4` = 16 px).
     `--space-4` links vom Link wäre dort der Knopfrand selbst — die Linie klebte am Knopf.
     Deshalb rückt sie in die Mitte dieser Lücke (`--space-2`). Das Layout bleibt gleich;
     ohne `:has` (ältere Browser) bleibt es bei der Linie am Knopfrand. */
  .site-header__inner:has(.pwa-install__button:not([hidden])) .site-nav__link--divider::before {
    inset-inline-start: calc(var(--space-2) * -1);
  }
}

/* --------------------------------------------------------------------------
   Kahraman alanı ve ana akış
   -------------------------------------------------------------------------- */

#main {
  display: block;
  inline-size: 100%;
  max-inline-size: var(--layout-max);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) var(--space-16);
}

.search-frame {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.search-frame:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   Arama formu ve filtreler
   -------------------------------------------------------------------------- */

.search-form {
  display: block;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border-faint);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

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

.search-form__query {
  min-width: 0;
}

.search-form__input {
  min-height: var(--control-height);
  font-size: var(--text-lg);
}

.search-form__select {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.search-form__actions {
  display: flex;
  align-items: flex-end;
}

.search-form__actions .button {
  inline-size: 100%;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border-faint);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

/* --------------------------------------------------------------------------
   Preview-Hinweis (Cycle 225, gekürzt in Cycle 226)
   --------------------------------------------------------------------------
   **Eine** ruhige Zeile am unteren Rand, in jeder Sprache derselbe kurze Satz: kein Etikett,
   kein Aufklapper, kein Beschreibungstext. Nur Tokens und logische Properties. */

.preview-note {
  /* Auf der Suchseite ist `<body>` eine Flex-Spalte: die Zeile darf nicht schrumpfen. */
  flex: none;
  border-block-start: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* Zeilen-Hülle: **eine** Zeile. Seit Cycle 343 teilen sich der Ergebnissatz
   (`.preview-note__context`, aus dem Suchrahmen kopiert) und der Beta-Hinweis diese Zeile —
   in **allen** Formaten. Breite, Polster und Achse lagen vorher direkt an `__text`; in der
   Hülle bleiben sie für alle Ansichten gleich.

   **Kein Umbruch** (Nutzerauftrag 19.10.2026: „Fußzeile darf nur eine Zeile sein"): Der
   Ergebnissatz behält seine Breite, der Beta-Hinweis bekommt den Rest und endet dort mit
   „…". Vorher durfte die Zeile umbrechen — am Telefon wurde daraus eine zweite Zeile. */
.preview-note__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  max-inline-size: var(--layout-max);
  /* `--space-2` (8px) ergäbe 36px Höhe; `--space-1` hält die Zeile bei ~28px — die Vorgabe
     „sehr wenig Platz" und die 32px-Grenze im Browser-Check. */
  padding-block: var(--space-1);
  padding-inline: var(--gutter);
  margin: 0 auto;
  overflow: hidden;
}

/* Der Beta-Hinweis nimmt, was nach dem Ergebnissatz übrig bleibt, und wird mit „…" gekürzt.
   Der Entwicklerhinweis steht darin und wandert mit ihm ans Zeilenende (Cycle 261). */
.preview-note__text {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Entwicklerhinweis (Cycle 261): steht **im Fluss** des Beta-Satzes, damit er den Rest der
   letzten Zeile füllt statt eine neue zu beginnen (Nutzerauftrag: „Keine extra Zeile" — auch im
   Querformat-Tablet, wo Ergebnissatz und Beta-Hinweis diese Zeile schon teilen).
   Der Trenner `·` sitzt am Hinweis selbst; ein Zeilenumbruch davor ist erlaubt (das Leerzeichen
   zwischen den beiden Spans), ein Umbruch *im* Link wird nicht erzwungen.

   **Zwei Fassungen, ein Platz**: Wo Platz ist, steht die volle, übersetzte Formulierung; auf
   schmalen Ansichten nur der Name („HDSoft" — seit 13.10.2026, 20:09 statt der Domain). Wo „Platz ist", hat die Messung vom 13.10.2026 in fünf
   Sprachen entschieden (Balken ist **nicht** die Fensterbreite allein, sondern die geteilte
   Zeile): Im Querformat-Band (`max-height: 860px`, dort steht zusätzlich der Ergebnissatz in
   dieser Zeile, `search.css`) kostet die volle Formulierung erst **ab 1200 px** in keiner
   Sprache eine Zeile (1152 px: de +1; 1024/1100 px: tr/en/ru +1). Ist das Fenster höher als
   860 px, fällt die Kopie weg und die Zeile ist ab 961 px frei genug (gemessen 1024×1366,
   1280×900). Darunter — Telefon, 828×420 — steht nur der Name; er kostet in keiner
   geprüften Kombination eine Zeile (828/412/390/360 px). */
.preview-note__credit {
  color: var(--color-text-subtle);
}

.preview-note__credit::before {
  content: "·";
  margin-inline: var(--space-1);
}

.preview-note__credit-lang {
  display: none;
}

.preview-note__credit-kurz {
  display: inline;
}

@media (min-width: 1200px), (min-width: 961px) and (min-height: 861px) {
  .preview-note__credit-lang {
    display: inline;
  }

  .preview-note__credit-kurz {
    display: none;
  }
}

.preview-note__credit-link {
  color: inherit;
  /* Nicht nur die Farbe unterscheidet den Link (WCAG 1.4.1): er bleibt unterstrichen. */
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Satz aus dem Trefferrahmen (Cycle 229, Nutzerwunsch 11.10.2026): Seit Cycle 343 steht er in
   **allen** Formaten hier — vor dem Beta-Hinweis, in derselben Zeile. Die Kopie setzt
   `app/javascript/controllers/preview_note_controller.js`. Er darf seine Breite behalten und
   wird nicht gekürzt; nur der Beta-Hinweis danach endet bei knapper Breite mit „…". */
.preview-note__context {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
  color: var(--color-text-subtle);
}

/* Der Trenner macht die zwei Sätze auseinanderkennbar, ohne die Zeile zu erhöhen. */
.preview-note__context::after {
  content: "·";
  margin-inline-start: var(--space-1);
}

/* --------------------------------------------------------------------------
   Oturum kabuğu (auth)
   -------------------------------------------------------------------------- */

/* Die Anmeldeseiten tragen unten dieselbe Preview-Zeile: `<body>` ist eine Flex-Spalte über
   die volle Höhe, die Karte füllt den Rest (`flex: 1`) — so entsteht **kein** zusätzlicher
   Bildlauf nur wegen der Zeile. */
body.page-auth {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

body.page-auth main#main {
  flex: 1;
}

.auth-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--gutter);
  background-color: var(--color-surface-2);
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: var(--layout-auth);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border-faint);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.auth-card .brand-link {
  align-self: center;
}

.brand-link--auth {
  align-self: center;
}

.brand-link--admin .brand__mark {
  inline-size: 3.6rem;
  block-size: auto;
}

.auth-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.auth-card__lead {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  text-align: center;
}

.auth-card__alt {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  text-align: center;
}

.auth-card__alt--quiet {
  margin-block-start: calc(var(--space-4) * -1 + var(--space-1));
  font-size: var(--text-sm);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

.auth-form__actions .button {
  inline-size: 100%;
}

.auth-shell__foot {
  max-inline-size: var(--layout-auth);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  text-align: center;
}

/* Sayfa gövdesi sınıfları: her kabuk kendi dosyasında biçimlenir, burada
   yalnızca blok akışı ve zemin garantilenir. */
.page-public,
.page-auth {
  display: block;
}

.page-admin,
.page-pharmacy {
  display: block;
  background-color: var(--color-canvas);
}

/* --------------------------------------------------------------------------
   Kırılım noktaları
   -------------------------------------------------------------------------- */

/* 600px ve üzeri: üst bilgi tek satıra oturur, dokunma hedefleri normal
   boyuta döner. */
@media (min-width: 600px) {
  .site-nav {
    flex-wrap: nowrap;
  }
}

/* 768px ve üzeri: arama formu yatay ızgaraya geçer, filtre başlıkları
   yan yana durur. */
@media (min-width: 768px) {
  .search-form {
    padding: var(--space-5);
  }

  .search-form__row {
    grid-template-columns: minmax(0, 3fr) minmax(9rem, 1.2fr) minmax(9rem, 1.2fr) auto;
  }

  .search-form__actions .button {
    inline-size: auto;
    min-inline-size: 6rem;
  }

  .auth-form__actions .button {
    inline-size: auto;
    align-self: flex-start;
    min-inline-size: 10rem;
  }

  .auth-form__actions {
    flex-direction: row;
    justify-content: flex-start;
  }
}

/* 960px ve üzeri: liste solda, ayrıntı ve harita sağ sütunda. */
@media (min-width: 960px) {

  .filters {
    gap: var(--space-5);
  }
}

/* 1200px ve üzeri: sağ sütun biraz genişler, nefes alanı artar. */
@media (min-width: 1200px) {
}

@media (max-width: 959.98px) {
}

/* --------------------------------------------------------------------------
   Yazdırma
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .preview-note {
    display: none;
  }

  #main {
    max-inline-size: none;
    padding: 0;
  }
}

/* --- Kurulabilir uygulama düğmesi -------------------------------------- */

.pwa-install {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pwa-install__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  /* **A9: Petrol statt Coral** (Cycle 316e, Punkt 9): Fläche #177571, Text #fdfbf6;
     die frühere Coral-Kombination auf hellem Coral entfällt für diesen Knopf. */
  border: 1px solid #177571;
  border-radius: 999px;
  background-color: #177571;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fdfbf6;
  cursor: pointer;
}

.pwa-install__button:hover {
  border-color: #209897;
  background-color: #209897;
  color: #fdfbf6;
}

.pwa-install__hint {
  margin: 0;
  max-inline-size: 16rem;
  font-size: 0.72rem;
  color: var(--color-text-subtle);
}

@media (max-width: 700px) {
  .pwa-install__hint {
    display: none;
  }
}

/* **Kein Layoutsprung beim Installationsknopf** (Cycle 315b, S6): Der Knopf wird erst
   sichtbar, wenn der Browser `beforeinstallprompt` schickt — im Kopf brach die Zeile
   dadurch um (CLS 0,21). Unter 768 px schwebt er deshalb als Leiste am unteren Rand,
   ohne den Text zu verschieben. */
@media (max-width: 47.999rem) {
  .pwa-install {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline: var(--space-4);
    z-index: var(--z-dropdown);
    justify-content: center;
  }

  .pwa-install__button {
    inline-size: 100%;
    justify-content: center;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
  }
}

/* Giriş ekranı: yönetici hesabı yoksa gösterilen dürüst uyarı. */
.auth-card__notice {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-block-end: var(--space-4);
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--brand-200);
  border-radius: 12px;
  background-color: var(--brand-50);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.auth-card__notice strong {
  color: var(--color-text-strong);
}

.auth-card__notice code {
  padding: 0.05rem 0.3rem;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--brand-500) 16%, transparent);
  font-size: 0.78rem;
}

/* Karanlık modda logo: yazı açık tona döner (pin coralı kalır). */
.brand__mark--dark {
  display: none;
}

html[data-theme="dark"] .brand__mark--light {
  display: none;
}

html[data-theme="dark"] .brand__mark--dark {
  display: block;
}

/* --- Çevrimdışı durum şeridi ------------------------------------------- */

.connection-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem var(--gutter);
  background-color: var(--color-warning-soft, #fdf6e3);
  border-block-end: 1px solid var(--color-warning-border, var(--color-rule));
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.connection-bar[data-state="online"] {
  background-color: var(--color-success-soft, #eef7f1);
  border-block-end-color: var(--color-success-border, var(--color-rule));
}

.connection-bar__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background-color: var(--color-warning, #b4761b);
}

.connection-bar[data-state="online"] .connection-bar__dot {
  background-color: var(--color-success, #2f7d54);
}

.connection-bar__text {
  flex: 1 1 auto;
}

.connection-bar__retry {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-warning-border, var(--color-rule));
  border-radius: 999px;
  background-color: var(--color-surface);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-action-strong);
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   Başlıkta yer tasarrufu (telefon)
   --------------------------------------------------------------------------
   7 Ekim 2026: 390 px genişlikte "Eczane girişi" **alt satıra** düşüyordu; başlık iki satır
   olunca arama alanı aşağı itiliyordu. Çözüm: başlık tek satırda kalır (`nowrap`), marka
   görseli küçülür, boşluklar daralır ve giriş bağlantısı kısa etiketle gösterilir. */

.site-nav__label-short {
  display: none;
}

/* Soll Ansicht UI/UX 17.10.2026 (Cycle 329): Bis 1023 px gilt der mobile Header
   (Logo, Theme, Asistan-Symbol, kurzes Login, Flagge); die Suche steht darunter.
   Ab 1024 px steht die Kopfzeile in einer Zeile, das Suchfeld bleibt mindestens
   200 px breit. Bis 1279 px gilt das kurze Login-Label, ab 1280 px der Volltext. */
@media (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-nav {
    flex-wrap: nowrap;
    margin-inline-start: 0;
  }

  /* Cycle 364: Die Gruppe aus Sprachauswahl und Tema übernimmt den Rest der Zeile
     (vorher stand hier `.locale-switcher`); so bleibt der Umschalter rechts der
     Sprachauswahl, auch auf einsprachigen Seiten ohne Sprachauswahl. */
  .site-header__end {
    margin-inline-start: auto;
  }

  .site-nav__label-full {
    display: none;
  }

  .site-nav__label-short {
    display: inline;
  }

  /* Mobiler Header: Asistan nur als Symbol, Sprache nur als Flagge. */
  .site-nav__link--icon span {
    display: none;
  }

  .locale-switcher__toggle {
    gap: 0;
    padding-inline: var(--space-2);
  }

  .locale-switcher__code,
  .locale-switcher__caret {
    display: none;
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

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

  .site-nav {
    flex-wrap: nowrap;
  }

  .site-nav__label-full {
    display: none;
  }

  .site-nav__label-short {
    display: inline;
  }
}

@media (min-width: 1280px) {
  .site-nav__label-full {
    display: inline;
  }

  .site-nav__label-short {
    display: none;
  }
}

@media (max-width: 600px) {
  .site-header__inner {
    /* Boşluk ve taşma davranışı `search.css` içindeki 700 px bloğunda ayarlanır: o dosya
       **sonra** yüklendiği için kuralları buradakini geçersiz kılar. Burada yalnızca
       ölçü küçültülür. */
    padding-block: var(--space-2);
  }

  .brand-link {
    min-inline-size: 0;
  }

  .brand__mark {
    /* Marka yazısı telefonda daha küçük: asıl yer kaplayan öğe bu. */
    block-size: 28px;
    inline-size: auto;
  }

  .site-nav {
    gap: var(--space-2);
  }


  .site-nav__link {
    white-space: nowrap;
  }

  .site-nav__label-full {
    display: none;
  }

  .site-nav__label-short {
    display: inline;
  }

  /* Kurulum düğmesi ve açıklaması telefonda başlığı şişirmesin. */
  .pwa-install__button {
    padding: 0.35rem 0.55rem;
    font-size: 0.72rem;
  }
}

/* Yalnızca **çok** dar ekranlarda metinler kısalır: 390 px'te "Asistan" adı görünür kalır
   (kullanıcı geri bildirimi: orada hâlâ yer var). */
@media (max-width: 340px) {
  .brand__mark {
    block-size: 24px;
  }

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

/* --------------------------------------------------------------------------
   Dil seçici (Cycle 182)
   --------------------------------------------------------------------------
   Bayraklı açılır liste. Açılma/kapanma `<details>` ile yapılır: JavaScript
   olmadan da çalışır. Konumlar **mantıksal** (`inset-inline-*`) olduğu için
   Arapçada (RTL) menü kendiliğinden aynalanır. */

.locale-switcher {
  position: relative;
  flex: 0 0 auto;
}

.locale-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

/* Tarayıcının kendi üçgenini kaldır: kendi oku kullanılır. */
.locale-switcher__toggle::-webkit-details-marker {
  display: none;
}

.locale-switcher__toggle:hover,
.locale-switcher[open] > .locale-switcher__toggle {
  background-color: var(--color-surface-3);
  color: var(--color-text-strong);
}

.locale-switcher__toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.locale-switcher__flag {
  font-size: var(--text-lg);
  line-height: 1;
}

.locale-switcher__code {
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.locale-switcher__caret {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.locale-switcher[open] .locale-switcher__caret {
  transform: rotate(180deg);
}

.locale-switcher__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  min-inline-size: 12rem;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.locale-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-md);
  text-decoration: none;
  white-space: nowrap;
}

.locale-switcher__item:hover {
  background-color: var(--color-surface-3);
  color: var(--color-text-strong);
  text-decoration: none;
}

.locale-switcher__item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-offset));
}

.locale-switcher__item.is-current {
  color: var(--color-link);
  font-weight: var(--weight-medium);
}

.locale-switcher__check {
  margin-inline-start: auto;
}

/* Panel kenar çubuğu ve giriş kartındaki yerleşim. */
.admin-sidebar__locale {
  margin-block-end: var(--space-4);
}

.auth-card__locale {
  display: flex;
  justify-content: center;
  margin-block-end: var(--space-2);
}

/* Telefonda yalnızca bayrak: başlık **tek satırda** kalır. Kod ("TR") ve ok
   gizlenir, dolgu daralır; aksi hâlde "Eczane girişi" ikinci satıra düşüyordu
   (kullanıcı bildirimi, telefonda başlık tek satır olmalı). */
@media (max-width: 600px) {
  .locale-switcher__toggle {
    gap: 0;
    padding: var(--space-1) var(--space-2);
  }

  .locale-switcher__code,
  .locale-switcher__caret {
    display: none;
  }

  /* **Cycle 190**: Das Menü hängt an der **inline-end**-Kante des Umschalters. Die frühere
     Ausrichtung „von links" stammt aus Cycle 182, als der Umschalter noch mitten im Kopf saß;
     seit er am Zeilenende steht, lief das 12-rem-Menü dadurch 43 px aus dem Bild (Android zoomte
     heraus und schnitt die Beschriftungen ab). Zusätzlich ist die Breite gedeckelt, damit auch
     ein künftig anders platziertes Menü nicht über den Rand läuft. */
  .locale-switcher__menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    max-inline-size: calc(100vw - var(--space-4));
  }
}

/* 430 px altı (390–412 px'lik telefonlar): dil seçici eklenince başlık **yine** tek
   satırda kalsın diye marka bir kademe küçülür ve seçici yalnızca dolgusuz bayrak
   olur. Sınır 400 px'ti; **412 px**'lik Android'lerde (Pixel 7) Almanca/İngilizce
   etiketler daha uzun olduğu için dil seçici alt satıra düşüyordu (ölçüldü,
   10 Ekim 2026). "Asistan"/"Assistent" adı ve kısa giriş etiketi görünür kalır. */
@media (max-width: 430px) {
  .brand__mark {
    block-size: 24px;
  }

  .locale-switcher__toggle {
    padding: var(--space-1);
  }

  /* `search.css` (sonra yüklenir) dar ekranda boşluğu 8 px'e indiriyor; dil seçici
     eklenince üst satır taşıyordu. Daha kesin seçici burada 4 px yapar. */
  .site-header .site-header__inner {
    gap: var(--space-1);
  }

  /* **Asistan adı yerine yalnızca simge**: 320–430 px arasında (iPhone SE 375 px dâhil)
     ad + dil seçici + tema + giriş aynı satıra sığmıyor. Simgenin erişilebilir adı
     (`aria-label` + `title`) korunur; ad yalnızca dar ekranda gizlenir. */
  .site-nav__link--icon span {
    display: none;
  }
}

/* 340 px altı: 4 px Abstand reicht in Englisch nicht mehr („Sign in" + Symbol + Flagge +
   Marke) — 320 px ist die schmalste noch unterstützte Breite. */
@media (max-width: 340px) {
  .site-header .site-header__inner {
    gap: 2px;
  }
}