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