/*
 * /nobetci-eczaneler/ (WB-0278) — yalnız bu sayfada yüklenir.
 * Harita arayüzü Google Haritalar'ın tanıdık dilini izler (sahip isteği): beyaz yüzen arama
 * çubuğu, sağ altta konum + yakınlaştırma, kırmızı iğne, mavi konum noktası, mavi "Yol Tarifi Al".
 * O7: açık zemin, koyu tema yok.
 */
.ecz { --g-mavi: #1a73e8; --g-mavi-koyu: #1557b0; --g-yazi: #202124; --g-yazi-2: #5f6368; --g-cizgi: #dadce0;
  --g-zemin: #f1f3f4; --g-golge: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --g-font: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Arial, sans-serif; }

.ecz-bas { margin: 22px 0 14px; }
.ecz-bas h1 { margin: 0 0 6px; }
.ecz-ozet { font-family: var(--g-font); font-size: 15px; color: var(--g-yazi-2); margin: 0; }
.ecz-ozet strong { color: var(--g-yazi); }
.ecz-bayat { font-family: var(--g-font); font-size: 14.5px; background: #fef7e0; border: 1px solid #f9e29c;
  color: #5c4200; border-radius: 8px; padding: 10px 14px; margin: 10px 0 0; }

/* ── Sahne: harita + yüzen denetimler ─────────────────────────────── */
.ecz-sahne { position: relative; height: min(72vh, 760px); min-height: 420px; margin: 0 0 26px;
  border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--g-cizgi); background: var(--g-zemin);
  font-family: var(--g-font); }
#ecz-harita { position: absolute; inset: 0; }
.ecz-harita--yok::after { content: "Harita şu anda yüklenemedi; aşağıdaki listeyi kullanabilirsiniz.";
  position: absolute; inset: auto 16px 50% 16px; text-align: center; color: var(--g-yazi-2); font-size: 15px; }
.ecz-yavas { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 90px 24px 24px; text-align: center; background: var(--g-zemin); }
.ecz-yavas p { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.5; color: var(--g-yazi-2); }
.ecz-sahne noscript p { position: absolute; inset: 45% 16px auto; text-align: center; color: var(--g-yazi-2); }

.ecz-ust { position: absolute; z-index: 3; top: 12px; left: 12px; right: 64px; display: flex; gap: 8px;
  flex-wrap: wrap; pointer-events: none; }
.ecz-ust > * { pointer-events: auto; }
.ecz-arama { display: flex; align-items: center; background: #fff; border-radius: 24px; box-shadow: var(--g-golge);
  height: 48px; padding: 0 6px 0 16px; width: min(400px, 100%); }
.ecz-arama svg { flex: none; color: var(--g-yazi-2); }
.ecz-arama input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 16px var(--g-font);
  color: var(--g-yazi); padding: 0 10px; height: 100%; }
.ecz-arama input::placeholder { color: var(--g-yazi-2); }
.ecz-arama input::-webkit-search-cancel-button { display: none; }
.ecz-arama button { border: 0; background: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  color: var(--g-yazi-2); display: grid; place-items: center; }
.ecz-arama button:hover { background: var(--g-zemin); }
.ecz-cip { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 18px; box-shadow: var(--g-golge);
  height: 36px; padding: 0 4px 0 12px; margin-top: 6px; }
.ecz-cip select { border: 0; background: transparent; font: 500 14px var(--g-font); color: var(--g-yazi); height: 100%;
  padding-right: 6px; cursor: pointer; max-width: 190px; }
.ecz-cip button { border: 0; background: var(--g-mavi); color: #fff; font: 500 13px var(--g-font); border-radius: 14px;
  padding: 5px 10px; cursor: pointer; }

.ecz-dgm-kare { position: absolute; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 8px; background: #fff;
  box-shadow: var(--g-golge); display: grid; place-items: center; color: var(--g-yazi-2); cursor: pointer; }
.ecz-dgm-kare:hover { color: var(--g-yazi); background: #f8f9fa; }
#ecz-tam { top: 12px; right: 12px; }
#ecz-konumum { right: 9px; bottom: 150px; border-radius: 50%; width: 42px; height: 42px; }
.konumlu #ecz-konumum { color: var(--g-mavi); }
.ecz-tam-ikon--kapat { display: none; }
.tam .ecz-tam-ikon--ac { display: none; }
.tam .ecz-tam-ikon--kapat { display: block; }

/* MapLibre denetimleri — Google'ın sağ alt yakınlaştırma grubu gibi. */
.ecz .maplibregl-ctrl-bottom-right { right: 10px; bottom: 26px; }
.ecz .maplibregl-ctrl-group { border-radius: 8px; box-shadow: var(--g-golge); }
.ecz .maplibregl-ctrl-group:not(:empty) { box-shadow: var(--g-golge); }
.ecz .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.ecz .maplibregl-ctrl-attrib { font: 11px var(--g-font); }
.ecz .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { margin: 0 0 6px; }

/* Konum notu (Google'ın alt bilgi balonu gibi). */
.ecz-konum-not { position: absolute; z-index: 4; left: 12px; bottom: 12px; max-width: min(460px, calc(100% - 80px));
  background: #fff; border-radius: 10px; box-shadow: var(--g-golge); padding: 10px 12px; font-size: 13.5px;
  color: var(--g-yazi); line-height: 1.4; display: flex; gap: 10px; align-items: center; }
.ecz-konum-not[hidden] { display: none; }
.ecz-konum-not__dugmeler { flex: none; display: flex; flex-direction: column; gap: 6px; }
.ecz-konum-not button { border: 0; background: var(--g-mavi); color: #fff; font: 500 13.5px var(--g-font);
  border-radius: 16px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.ecz-konum-not button.ikincil { background: #fff; color: var(--g-mavi); box-shadow: inset 0 0 0 1px var(--g-cizgi); }
.ecz-konum-not button[hidden] { display: none; }
.secim-modu .ecz-sahne { box-shadow: 0 0 0 3px var(--g-mavi); }
.kart-acik .ecz-konum-not { display: none; }

/* ── Yer kartı ─────────────────────────────────────────────────────── */
.ecz-kart { position: absolute; z-index: 5; top: 72px; left: 12px; width: 380px; max-height: calc(100% - 96px); overflow: auto;
  background: #fff; border-radius: 12px; box-shadow: var(--g-golge); padding: 18px 18px 16px; color: var(--g-yazi); }
.ecz-kart[hidden] { display: none; }
.ecz-kart__tutamak { display: none; }
.ecz-kart__kapat { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--g-yazi-2); cursor: pointer; font-size: 22px; line-height: 1; }
.ecz-kart__kapat:hover { background: var(--g-zemin); }
.ecz-kart__ad { font: 500 21px/1.25 var(--g-font); margin: 0 34px 4px 0; color: var(--g-yazi); letter-spacing: 0; }
.ecz-kart__alt { font-size: 14px; color: var(--g-yazi-2); margin: 0 0 14px; }
.ecz-kart__alt .ecz-kart__mesafe::before { content: " · "; }
.ecz-kart__ilce { color: #188038; font-weight: 500; }
.ecz-eylem { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.ecz-dgm { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 19px;
  font: 500 14.5px var(--g-font); text-decoration: none; cursor: pointer; border: 1px solid var(--g-cizgi);
  color: var(--g-mavi); background: #fff; white-space: nowrap; }
.ecz-dgm:hover { background: #f1f6fe; color: var(--g-mavi-koyu); }
.ecz-dgm--mavi { background: var(--g-mavi); border-color: var(--g-mavi); color: #fff; }
.ecz-dgm--mavi:hover { background: var(--g-mavi-koyu); border-color: var(--g-mavi-koyu); color: #fff; }
.ecz-dgm[hidden] { display: none; }
.ecz-kart__satir { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; margin: 0;
  padding: 9px 0; border-top: 1px solid #eef0f1; }
.ecz-kart__satir svg { flex: none; color: var(--g-mavi); margin-top: 1px; }
.ecz-kart__satir[hidden] { display: none; }
.ecz-kart__tarif { color: var(--g-yazi-2); }

/* Mobil / tam ekranda liste düğmesi (Google'ın "Listeyi görüntüle" hapı). */
.ecz-liste-git { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: none;
  align-items: center; gap: 8px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--g-golge);
  color: var(--g-mavi); font: 500 14.5px var(--g-font); height: 40px; padding: 0 18px; cursor: pointer; }

/* Tam ekran (masaüstü ve mobil). */
.ecz-sahne.tam, .tam .ecz-sahne { position: fixed; inset: 0; z-index: 1000; height: 100%; min-height: 0; max-height: none;
  margin: 0; border-radius: 0; box-shadow: none; }
html.ecz-tam-acik, html.ecz-tam-acik body { overflow: hidden; }
.tam .ecz-liste-git { display: inline-flex; }

/* ── Liste ─────────────────────────────────────────────────────────── */
.ecz-liste-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ecz-liste-bas h2 { margin: 0; }
.ecz-sayac { font-family: var(--g-font); color: var(--g-yazi-2); font-size: 14px; }
.ecz-not { font-family: var(--g-font); font-size: 13.5px; color: var(--g-yazi-2); margin: 4px 0 14px; }
/* Konum varken liste tek sütun, en yakından uzağa (eczane.js listeyiSirala). */
.mesafeli .ecz-ilce { display: none; }
.ecz__rozet { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: #e6f4ea; color: #137333;
  font-size: 12.5px; font-weight: 600; vertical-align: 2px; }
#ecz-sirali li.ecz:first-child { border-top: 1px solid #e8eaed; }
.ecz-ilce { margin: 0 0 22px; }
.ecz-ilce h3 { font-size: 19px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--cetvel-kalin, #17130e);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ecz-ilce h3 a { color: inherit; text-decoration: none; }
.ecz-ilce h3 a:hover { color: var(--g-mavi); text-decoration: underline; }
.ecz-ilce__sayi { font-family: var(--g-font); font-size: 13.5px; font-weight: 500; color: var(--g-yazi-2); }
.ecz__ilce a { color: inherit; text-decoration: none; }
.ecz__ilce a:hover { text-decoration: underline; }
.ecz-yakin-bolum { margin: 0 0 26px; font-family: var(--g-font); }
.ecz-yakin-bolum > p { font-size: 15px; line-height: 1.5; color: var(--g-yazi); max-width: 760px; }
.ecz-cipler { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ecz-cipler a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--g-cizgi);
  border-radius: 17px; background: #fff; color: var(--g-yazi); text-decoration: none; font-size: 14px; font-weight: 500; }
.ecz-cipler a:hover { background: #f1f6fe; border-color: #c6dafc; color: var(--g-mavi-koyu); }
.ecz-cipler span { color: var(--g-yazi-2); font-weight: 400; font-size: 13px; }
.ecz-bilgi h3 { font-size: 17px; margin: 14px 0 8px; }
.ecz-ul { list-style: none; margin: 0; padding: 0; font-family: var(--g-font); }
li.ecz { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; padding: 14px 0; border-bottom: 1px solid #e8eaed; }
li.ecz[hidden] { display: none; }
.ecz__ad { font-size: 17px; font-weight: 600; color: var(--g-yazi); margin: 0; }
.ecz__mesafe { font-weight: 500; color: var(--g-mavi); font-size: 14px; margin-left: 6px; white-space: nowrap; }
.ecz__mesafe[hidden] { display: none; }
.ecz__ilce { color: #188038; font-size: 13.5px; font-weight: 500; margin: 2px 0 0; }
.ecz__adres, .ecz__tarif, .ecz__tel { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--g-yazi); }
.ecz__tarif { color: var(--g-yazi-2); }
.ecz__tel a { color: var(--g-mavi); text-decoration: none; font-weight: 500; }
.ecz__eylem { display: flex; flex-direction: column; gap: 8px; align-items: stretch; align-self: center; }
.ecz__eylem .ecz-dgm { justify-content: center; }
.ecz-bos { font-family: var(--g-font); color: var(--g-yazi-2); }

/* İlçe bağlantıları + SSS + bilgi. */
.ecz-ilceler { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 18px; font-family: var(--g-font); font-size: 15px; }
.ecz-ilceler li { padding: 5px 0; border-bottom: 1px solid #eef0f1; display: flex; justify-content: space-between; gap: 8px; }
.ecz-ilceler span { color: var(--g-yazi-2); font-size: 13.5px; }
.ecz-bilgi { max-width: var(--olcu-dar, 700px); }

/* ── Dar ekran: harita ekranı doldurur, kart alt sayfa olur ─────────── */
@media (max-width: 880px) {
  .ust-serit, .nameplate__alt { display: none; }
  .nameplate { padding-top: 12px; }
  .nameplate__cetvel { margin-top: 10px; }
  .ecz-bas { margin: 14px 0 10px; }
  .ecz-bas h1 { font-size: 24px; line-height: 1.2; }
  .ecz-ozet { font-size: 14px; }
  /* .kap'ın 20px iç boşluğundan taşar; altında 64px kalır ki sayfa kaydırılabilsin. */
  .ecz-sahne { height: calc(100svh - 64px); min-height: 380px; margin: 0 -20px 22px; border-radius: 0; box-shadow: none;
    border-top: 1px solid var(--g-cizgi); border-bottom: 1px solid var(--g-cizgi); }
  .ecz-ust { top: 10px; left: 10px; right: 60px; }
  .ecz-arama { width: 100%; height: 46px; }
  .ecz-liste-git { display: inline-flex; }
  #ecz-tam { top: 13px; right: 10px; }
  #ecz-konumum { bottom: 160px; }
  .ecz .maplibregl-ctrl-bottom-right { bottom: 36px; }
  /* Not arama çubuğunun altında durur; altta yakınlaştırma düğmelerini örtüyordu. */
  .ecz-konum-not { left: 10px; right: 10px; max-width: none; top: 112px; bottom: auto; }
  .ecz-kart { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62%; border-radius: 16px 16px 0 0;
    padding: 10px 18px 18px; box-shadow: 0 -2px 10px rgba(60,64,67,.25); }
  .ecz-kart__tutamak { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--g-cizgi); margin: 0 auto 10px; }
  .kart-acik .ecz-liste-git { display: none; }
  li.ecz { grid-template-columns: 1fr; }
  .ecz__eylem { flex-direction: row; flex-wrap: wrap; }
  .ecz__eylem .ecz-dgm { flex: 1 1 auto; }
}

/* ?konum-tani=1 — yalnız tanı için (sahip bildirimi 2026-09-27). */
.ecz-tani { font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; background: #fff8e1; border: 1px solid #f9e29c; border-radius: 8px;
  padding: 10px 12px; margin: 0 0 12px; color: #3c2f00; }
.ecz-tani strong { display: block; font-family: var(--g-font); margin-bottom: 4px; }