/* ==========================================================================
   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;
}

.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);
}

/* --------------------------------------------------------------------------
   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);
}

/* --------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */

.site-footer {
  border-block-start: var(--border-width) solid var(--color-rule);
  background-color: var(--color-surface-2);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: var(--layout-max);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-10);
}

.site-footer__note {
  max-inline-size: 84ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.site-footer__note .chip {
  margin-inline: 0.15rem;
}

.site-footer__meta {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.site-footer__meta a {
  color: var(--color-text-muted);
}

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

.auth-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  min-height: 100vh;
  min-height: 100dvh;
  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;
  }

  .site-footer__inner {
    padding-block-start: var(--space-8);
  }
}

/* 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,
  .site-footer {
    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;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background-color: var(--color-action-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-action-strong);
  cursor: pointer;
}

.pwa-install__button:hover {
  background-color: var(--brand-100);
}

.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;
  }
}

/* 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;
}

@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;
  }
}