/* EczaneRadar — açık nötr/beyaz tema (vurgu mavi).
   Kurallar: gölge (box-shadow) yok, düğmeler köşesiz (tam yuvarlak).
   Derinlik gölgeyle değil, zemin tonu ve çok soluk çizgilerle kuruluyor.
   Kırmızı yalnızca marka çevresinde (logo ve etiket çarpısı); uyarı ve durum
   renkleri için kullanılmaz — kırmızı bir rozet "bu eczane kapalı" diye okunur. */

:root{
  --zemin:#f4f5f7; --zemin-alt:#ffffff;
  --kart:#ffffff; --kart-vurgu:#f7fbff;
  --metin:#0f2439; --soluk:#5d748f;
  --cizgi:#e7eff8; --cizgi-vurgu:#cfe0f3;
  --mavi:#2f8ef7; --mavi-koyu:#1668cc; --mavi-yumusak:#e6f0fd; --mavi-soluk:#f2f7fe;
  --gri-btn:#e9eef4; --gri-btn-vurgu:#dee6ef;
  --yesil:#22b573; --yesil-yumusak:#e2f6ed; --yesil-koyu:#127c52;
  /* Yapışkan çubukların camı: --zemin ve --zemin-alt'ın saydam karşılıkları.
     %72 buzlu camın altındaki yazıyı okunmaz eden sınır; doygunluk artışı
     bulanınca solan kart beyazını ve mavi düğmeyi geri getiriyor. Renkleri
     color-mix ile türetmek yerine elle yazdık: değer @supports'un dışında da
     okunuyor ve iki yerde tutarlı kalması gereken tek şey opaklık. */
  --cam:rgba(244,245,247,.72); --cam-alt:rgba(255,255,255,.72);
  --cam-suzgec:saturate(1.7) blur(14px);
  /* Üst çubuğun yüksekliği — etiket satırı buna yapışıyor. Buradaki değer
     tahmin; app.js çubuğu ölçüp üzerine yazıyor (JS yoksa tahmin iş görür). */
  --tepe-yuk:128px;
  /* Pil satırının yüksekliği. Yalnız ana sayfada, harita tam ekran açıkken
     kullanılıyor: katman çubuk + pil satırının altından başlıyor. Varsayılan 0,
     satırı olan sayfada app.js ölçüp yazıyor. */
  --etiket-yuk:0px;
  /* Marka kırmızısı. İmin kendisi artık bir dosya (assets/img/logo.png);
     bu değişken ondan arta kalan tek vurgu için — etiketin çarpısı. */
  --marka-im:#ff5a4d;
  /* Uyarı kartı: sıcak krem zemin, kenarı zeminin kendi tonundan türeyen soluk
     bir çizgi. Doygun amber kenarlık yerine bu: kutu sayfadan kopmuyor, kartların
     geri kalanıyla aynı dili konuşuyor. İki metin tonu var — gövde --uyari-soluk,
     kalın baş cümle --uyari-metin; ağırlık farkı renkle de destekleniyor.
     --uyari-koyu yalnız süresi dolmuş nöbetin kartında: aynı biçim, bir tık
     daha dolu zemin. */
  --uyari:#fdf6e9; --uyari-koyu:#fbeed3; --uyari-cizgi:#f0e0c0;
  --uyari-metin:#5a3f0d; --uyari-soluk:#7d6032;
  /* Harita döşemesi temaya bu iki değişkenle uyuyor (bkz. src/Harita.php).
     Hedef Google Maps'in sakin paleti: nötr açık zemin, beyaz/krem yollar,
     mavi deniz, yeşil park. OSM'in ham çizimi aynı yapıya sahip ama daha doygun.
     saturate(.62) turuncu anayolu kreme, pembe otoyolu somona indiriyor; deniz
     ve park kendi renklerini koruyacak kadar renk kalıyor. hue-rotate(10deg)
     OSM'in camgöbeğine kaçan denizini maviye çekiyor — park ve anayol da aynı
     yönde ısınıp Google'ın yeşil/krem tonuna oturuyor. brightness/contrast
     zemini beyaza yaklaştırıp bina ve POI kalabalığını geri plana itiyor. */
  --harita-suzgec:saturate(.62) hue-rotate(10deg) brightness(1.08) contrast(.88);
  --harita-opaklik:1;
  --gecis:180ms cubic-bezier(.2,.7,.3,1);
  --en:640px;
}
@media (prefers-color-scheme:dark){
  :root{
    --zemin:#0a1320; --zemin-alt:#0d1826;
    --kart:#121e2d; --kart-vurgu:#182739;
    --metin:#e7eefa; --soluk:#8ba2be;
    --cizgi:#1b2939; --cizgi-vurgu:#294057;
    --mavi:#3d94f6; --mavi-koyu:#8ac6ff; --mavi-yumusak:#16283c; --mavi-soluk:#101c2b;
    --gri-btn:#1c2b3d; --gri-btn-vurgu:#25374c;
    --yesil:#2ecc8f; --yesil-yumusak:#13312a; --yesil-koyu:#7ae3bb;
    --cam:rgba(10,19,32,.72); --cam-alt:rgba(13,24,38,.72);
    --uyari:#241d0f; --uyari-koyu:#2e2413; --uyari-cizgi:#3b3119;
    --uyari-metin:#f4e2bb; --uyari-soluk:#c2ab84;
    /* Açık döşemeyi koyuya çeviriyoruz. invert renkleri de ters çeviriyor (deniz
       kahverengiye düşüyor); ardından gelen hue-rotate(190deg) onları yerine
       koyuyor — 180° invert'i telafi ediyor, kalan 10° açık temadaki mavi
       düzeltmesinin aynısı. Sonuç Google'ın koyu haritası gibi: lacivert zemin,
       daha koyu mavi deniz, kısık yeşil park. */
    --harita-suzgec:saturate(.62) invert(1) hue-rotate(190deg) brightness(.8) contrast(.9);
    --harita-opaklik:.95;
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--metin);background:var(--zemin);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
main{max-width:var(--en);margin:0 auto;padding:0 18px 56px}
a{color:var(--mavi-koyu);text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--mavi);outline-offset:2px;border-radius:6px}
.ikon{flex:0 0 auto;vertical-align:-3px}

/* ---- üst çubuk: marka + arama + tarih ----
   Telefonda iki satırlık ızgara (marka|tarih üstte, arama altta); masaüstünde
   aynı üç öğe tek satırlık çubuğa diziliyor (aşağıdaki geniş ekran bölümü).
   İşaretleme tek, yerleşimi grid-template-areas ayırıyor.

   Her genişlikte yapışkan: sayfanın iki ana eylemi (arama ve — telefonda alt
   köşedeki — konum) listenin neresinde olursa olsun elin altında kalıyor.
   Yapışkanlığın bedeli örtücü bir zemin: saydam bırakılırsa liste çubuğun
   altından okunuyor. Buzlu cam bunu kayan içeriği tümden silmeden yapıyor —
   altındaki kart ve harita renk lekesi olarak sürüyor, yazısı bulanıyor.

   Zemin iki değişkenden geliyor; --cubuk opak yedek, --cubuk-cam ise camlı
   sürüm. Geniş ekran bölümü yalnız bu ikisini değiştiriyor, background
   bildirimini değil: yoksa @supports kuralını ezip masaüstünde camı düşürürdü.
   Telefonda ton sayfanınki (--zemin), çünkü arama kutusu --kart (beyaz) ve
   zıtlığını sayfanın nötr zemininden alıyor; masaüstünde çubuk tam genişlikte
   bir yüzey olduğu için --zemin-alt'a geçiyor.

   Ayıran çizgi ikisinde de aynı: kayan içerik çubuğun altına girerken sınır
   belli olsun. Gölge yok — tema gölgeyi zemin tonu ve soluk çizgiyle kuruyor. */
.tepe{
  position:sticky;top:0;z-index:600;
  --cubuk:var(--zemin);--cubuk-cam:var(--cam);
  max-width:var(--en);margin:0 auto;padding:14px 18px 12px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:10px 12px;grid-template-areas:"marka tarih" "ara ara";
  background:var(--cubuk);border-bottom:1px solid var(--cizgi);
}
.marka{
  grid-area:marka;display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:19px;letter-spacing:-.4px;color:var(--metin);text-decoration:none;
}
/* Marka imi: assets/img/logo.png — "E" ile radar dalgaları. Aynı çizim
   faviconların da kaynağı (assets/img/favicon.ico ve arkadaşları).
   34×22 dosyanın oranı (371/242); yükseklik satırın x-yüksekliğine oturuyor.
   Saydam zeminli tek renk olduğu için açık ve koyu temada aynı dosya çalışıyor. */
.marka-im{
  width:34px;height:22px;flex:0 0 auto;
  background:url("../img/logo.png") center/contain no-repeat;
}
/* Markanın hover'ı yok — ne renk ne boyut değişiyor. Her sayfada duran ve
   her zaman aynı yere giden bir im; imlecin üstünden geçmesi anlatacak bir
   şey taşımıyor. Klavye için :focus-visible yerinde (ortak kural). */
/* Verinin damgası: etiket üstte soluk, saat altta okunur. İki satır çünkü
   "Son güncelleme 12.09.2026 09:15" tek satırda marka ile yarışıyor ve dar
   ekranda ızgarayı taşırıyor. */
.tarih{
  grid-area:tarih;display:flex;flex-direction:column;align-items:flex-end;
  gap:1px;font-size:13px;line-height:1.25;text-align:right;
}
.tarih-et{font-size:11px;letter-spacing:.2px;color:var(--soluk)}
.tarih-an{font-variant-numeric:tabular-nums;color:var(--metin)}

/* ---- arama + konum ----
   İkisi tek kapta: masaüstünde yan yana (konum arama kutusunun sağında),
   telefonda alt alta. Sayfanın iki ana eylemi aynı yerde dursun diye. */
.ara-alan{grid-area:ara;min-width:0;display:flex;flex-direction:column}
.ara-sar{position:relative;min-width:0}
/* Seçiciler .ara-sar ile bağlı: kartın "Ara" düğmesi de .ara sınıfını taşıyor,
   bağlanmazsa arama kutusunun yüksekliği ve soluk ikon rengi ona da geçiyor. */
.ara-sar .ara{
  display:flex;align-items:center;gap:12px;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:999px;
  padding:0 22px;height:60px;
  transition:border-color var(--gecis),background-color var(--gecis);
}
.ara-sar .ara:focus-within{border-color:var(--cizgi-vurgu);background:var(--zemin-alt)}
.ara-sar .ikon{width:22px;height:22px;color:var(--soluk);stroke-width:2.2}
.ara-giris{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:16px;color:var(--metin);
  /* Dar telefonda yer tutucu düğmeye çarpıyor; kelimenin ortasından kesilmesindense
     üç nokta ile bitsin — metnin devamı olduğu görünsün. */
  text-overflow:ellipsis;
}
.ara-giris::placeholder{color:var(--soluk)}
.ara-giris::-webkit-search-cancel-button{-webkit-appearance:none}
/* Kutunun içindeki "Ara" düğmesi. Kabın kendi yuvarlak kenarına yaslanıyor
   (negatif margin, kabın padding'ini yiyor) — dışarıda ikinci bir kutu gibi
   durmuyor, aramanın parçası gibi duruyor. Yüksekliği kabınkinden küçük:
   düğme kabı taşırırsa odak halkası kenara biniyor. */
.ara-dugme{
  flex:0 0 auto;border:0;border-radius:999px;cursor:pointer;
  background:var(--mavi);color:#fff;font:inherit;font-size:15px;font-weight:600;
  height:44px;padding:0 20px;margin-right:-12px;
  transition:background-color var(--gecis);
}
.ara-dugme:hover{background:var(--mavi-koyu)}

.oneri{
  position:absolute;z-index:50;left:0;right:0;top:calc(100% + 8px);
  list-style:none;margin:0;padding:6px;max-height:min(60vh,380px);overflow:auto;
  background:var(--kart);border:1px solid var(--cizgi-vurgu);border-radius:20px;
}
.oneri li{margin:0}
.oneri button{
  display:flex;width:100%;align-items:baseline;gap:8px;
  border:0;background:none;font:inherit;text-align:left;cursor:pointer;
  padding:11px 14px;border-radius:14px;color:var(--metin);
}
.oneri button:hover,.oneri button[aria-selected="true"]{background:var(--mavi-yumusak)}
.oneri .ad{font-weight:600}
.oneri .ipucu{font-size:13px;color:var(--soluk);margin-left:auto;padding-left:10px;white-space:nowrap}
.oneri .yok{padding:14px;color:var(--soluk);font-size:14px}

/* ---- seçili bölge etiketleri (kırıntı yolunun yerine) ----
   Üst çubuğun hemen altına yapışıyor: uzun listede aşağı inerken hangi ilin
   hangi ilçesine bakıldığı ve bir üste dönüş yolu ekranda kalıyor. Çubukla
   aynı cam ve aynı çizgi — ikisi tek parça bir başlık gibi okunsun.

   top'un çubuğun yüksekliği olması gerekiyor ama CSS onu bilemiyor (yazı tipine
   ve satır kırılmasına bağlı). Ölçümü app.js yapıp --tepe-yuk'a yazıyor;
   :root'taki değer JS'siz tarayıcı için yeterince yakın bir tahmin.

   position:sticky, ≤700px'te buranın taşıdığı position:relative'in yerine
   geçiyor — ikisi de kapsayıcı blok kurduğu için .ilce-menu yine bu satıra
   yaslanıyor. */
.etiketler{
  position:sticky;top:var(--tepe-yuk);z-index:500;
  --cubuk:var(--zemin);--cubuk-cam:var(--cam);
  max-width:var(--en);margin:0 auto;padding:12px 18px;
  display:flex;flex-wrap:wrap;gap:10px;
  background:var(--cubuk);border-bottom:1px solid var(--cizgi);
}

/* Buzlu cam — iki yapışkan çubuğun ortak kuralı. Desteklenmeyen tarayıcıda hiç
   uygulanmıyor, ikisinin de opak zemini yerinde kalıyor: çubuk her hâlükârda
   örtücü. Yeri önemli — .tepe ve .etiketler bildirimlerinin İKİSİNDEN de sonra
   gelmeli, yoksa eşit özgüllükte sonra gelen background'ları camı eziyor. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tepe,.etiketler{
    background:var(--cubuk-cam);
    -webkit-backdrop-filter:var(--cam-suzgec);
    backdrop-filter:var(--cam-suzgec);
  }
}

/* ---- kaydırınca kayan üst çubuk (yalnız telefon/tablet) ----
   İki çubuk birlikte ekranın beşte birini yiyor. Aşağı inerken üst çubuk
   yukarı kayıp gözden kayboluyor, yukarı kaydırınca dönüyor; etiket satırı da
   onun bıraktığı yere çıkıp orada kalıyor — hangi ilin hangi ilçesine
   bakıldığı ve bir üste dönüş yolu hiç kaybolmuyor. Kararı app.js veriyor,
   burası yalnız iki durumu çiziyor.

   Gizleme transform ile: çubuk akışta yer kaplamaya devam ediyor, belge boyu
   değişmiyor, dolayısıyla içerik zıplamıyor. Yükseklik daraltmak (arama
   satırını kapatmak) bunu yapamazdı — belge kısalır ve kullanıcı aşağıdayken
   sayfa yerinden oynardı.

   Etiket satırının top'u --tepe-yuk'tan 0'a iniyor; ikisi aynı süreyle
   geçtiği için birlikte hareket ediyorlar. JS yoksa gövdeye sınıf hiç
   eklenmiyor ve çubuk her zamanki yapışkan halinde kalıyor. */
@media (max-width:999px){
  .tepe{transition:transform var(--gecis)}
  .etiketler{transition:top var(--gecis)}
  body.cubuk-gizli .tepe{transform:translateY(-100%)}
  body.cubuk-gizli .etiketler{top:0}
}

.etiket{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:999px;
  padding:7px 8px 7px 16px;font-size:14px;font-weight:600;
}
.etiket-sil{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;padding:0;font:inherit;cursor:pointer;
  width:22px;height:22px;border-radius:999px;color:var(--marka-im);
  background:var(--gri-btn);text-decoration:none;
  transition:background-color var(--gecis),color var(--gecis);
}
/* Çarpı 22px görünüyor ama 38×44 dokunuluyor: parmak ucu bu boyda bir hedefi
   sık sık ıskalıyor ve ıska pilin kendi <span>'ine düştüğü için hiçbir şey
   olmuyordu — kullanıcıya "ikinci kez basmak gerekti" diye görünen buydu.
   Genişlik pilin sağ iç boşluğu kadar (8px) taşıyor, yani komşu pile değmiyor;
   yükseklik satırın kendi boşluğuna taşıyor, orada rakip hedef yok. */
.etiket-sil::before{
  content:"";position:absolute;top:50%;left:50%;
  width:38px;height:44px;transform:translate(-50%,-50%);
}
.etiket-sil .ikon{width:12px;height:12px;stroke-width:2.6;vertical-align:0}
/* Yalnız gerçek imleçte: dokunmatikte :hover "ilk dokunuşta takılıp kalan" bir
   durum, iOS onu gördüğünde ilk dokunuşu bağlantıyı izlemek yerine hover'ı
   uygulamaya harcıyor. */
@media (hover:hover){
  .etiket-sil:hover{background:var(--marka-im);color:#fff}
}
/* Konumdan ilçe bulununca "İlçe seç" etiketi gizleniyor; inline-flex [hidden]'ı
   ezdiği için açıkça söylüyoruz. */
.etiket[hidden]{display:none}

/* İl sayfasında ilçe etiketinin yerinde duran açılır. <details>/<summary>:
   JS kapalıyken de açılıyor. */
.etiket-sec{position:relative;padding:0;cursor:pointer}
.etiket-sec>summary{
  display:flex;align-items:center;gap:4px;list-style:none;
  padding:7px 12px 7px 16px;border-radius:999px;color:var(--soluk);
}
.etiket-sec>summary::-webkit-details-marker{display:none}
.etiket-sec>summary:hover{color:var(--metin)}
.etiket-sec>summary .ikon{
  width:14px;height:14px;stroke-width:2.6;
  transition:transform var(--gecis);
}
.etiket-sec[open]>summary{color:var(--metin)}
.etiket-sec[open]>summary .ikon{transform:rotate(180deg)}
.ilce-menu{
  position:absolute;z-index:60;top:calc(100% + 8px);left:0;
  /* İçeriğe göre genişliyor ama dar ekranda sayfayı yana taşırmıyor. */
  width:max-content;min-width:220px;max-width:min(340px,calc(100vw - 40px));
  max-height:min(60vh,340px);overflow:auto;padding:6px;
  background:var(--kart);border:1px solid var(--cizgi-vurgu);border-radius:20px;
}
/* Dar ekranda menü etikete değil etiket satırının kendisine yaslanıyor: il adı
   uzunsa ("Afyonkarahisar") etikete yaslanan menü sayfayı yana taşırıyordu. */
@media (max-width:700px){
  /* .etiketler'in kapsayıcı bloğu artık position:sticky'den geliyor. */
  .etiket-sec{position:static}
  /* Etiket satırının yan boşluklarıyla aynı hizada. */
  .ilce-menu{left:18px;right:18px;width:auto;max-width:none}
}
/* Ana sayfanın pil satırı bir kırıntı yolu değil, haritanın süzgeci. Satırın
   başındaki sessiz sözcük bunu söylüyor — piller olmasa harita iğnesiz kalır,
   tıkladığında ne olacağını kullanıcı önceden bilmeli. */
/* Seçim yapılmış pil: yazısı artık bir yer adı, soluk değil. */
.etiket-sec.dolu>summary{color:var(--metin);font-weight:700}

.ilce-menu ul{list-style:none;margin:0;padding:0}
.ilce-menu a{
  display:block;padding:10px 14px;border-radius:14px;
  font-size:14px;font-weight:600;text-decoration:none;color:var(--metin);
}
.ilce-menu a:hover,.ilce-menu a:focus{background:var(--mavi-yumusak);color:var(--mavi-koyu)}

/* ---- başlık ---- */
h1{font-size:22px;line-height:1.25;margin:22px 0 4px;letter-spacing:-.5px;font-weight:700}
/* Alt satırı .sayi olan sayfalarda başlık sıkı duruyor (4px). Ana sayfada
   sayaç satırı yok — sayı özetin içinde kalın yazılıyor — ve özet doğrudan
   başlığın altına geliyor; orada 4px fazla dar kalıyor. */
h1 + .ozet{margin-top:12px}
h2{font-size:15px;margin:0 0 12px;letter-spacing:-.2px;color:var(--soluk);font-weight:600}
.sayi{color:var(--soluk);margin:0 0 18px;font-size:14px;display:flex;gap:10px;flex-wrap:wrap}


/* ---- uyarı ---- */
.uyari{
  background:var(--uyari);border:1px solid var(--uyari-cizgi);color:var(--uyari-soluk);
  padding:15px 17px;border-radius:14px;font-size:14px;line-height:1.6;margin:0 0 14px;
}
/* Baş cümle ("Bu nöbet sona erdi.") kartın manşeti: gövdeden hem ağırlıkça hem
   renkçe ayrılıyor, göz kutuya değince önce onu okusun. */
.uyari strong{font-weight:650;color:var(--uyari-metin)}
.uyari a{color:var(--uyari-metin);text-decoration-thickness:1px;text-underline-offset:3px}
/* "Bu nöbet sona erdi" kutusu ile "güncellenemedi" kutusu BİREBİR aynı görünüyor.
   Eskiden ikincisi bir tık dolu zemindeydi; ikisi üst üste düştüğünde (ki sık
   oluyor) sayfanın başında iki farklı sarı tonu yan yana geliyordu. İkisi de aynı
   şeyi söylüyor — "aşağıdaki bilgi güncel olmayabilir" — ve aynı ağırlıkta durmalı.
   Sınıf JS için duruyor (app.js kutuyu zamanı gelince gösteriyor). */

/* ---- çerez onayı ----
   Alt kenara oturan tek kutu. Sayfayı karartan bir katman YOK: kullanıcı gece
   yarısı eczane arıyor, listeyi bir onay kutusunun arkasına kilitlemek bu üründe
   yapılabilecek en kötü şey. Kutu görünürken de liste okunabilir ve tıklanabilir
   kalıyor; kutuyu kapatmadan da eczaneye ulaşılabiliyor. */
.cerez{
  /* Yapışkan üst çubuk 600, tam ekran harita 700 kullanıyor; onay kutusu ikisinin
     de üstünde olmalı, yoksa kısa ekranda ya da harita açıkken tıklanamıyor. */
  position:fixed;left:12px;right:12px;bottom:12px;z-index:800;
  max-width:520px;margin:0 auto;
  background:var(--kart);border:1px solid var(--cizgi-vurgu);border-radius:18px;
  padding:16px 18px;font-size:14px;line-height:1.5;color:var(--metin);
  box-shadow:0 10px 30px rgba(15,36,57,.16);
}
.cerez p{margin:0 0 10px}
.cerez p:last-child{margin:0}
.cerez a{color:var(--mavi-koyu)}
.cerez-dugme{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.cerez-dugme .btn{flex:0 0 auto}
/* Yüzen konum düğmesi de alt kenarda duruyor ve kutunun üzerine biniyordu.
   Kutu açıkken düğme kutunun boyu kadar yukarı çıkıyor; boy JS'te ölçülüyor
   (--cerez-yuk), çünkü metin sarması ekran genişliğine göre değişiyor. */
body.cerez-acik .konum.yuzen #yakin{bottom:calc(28px + var(--cerez-yuk,150px))}

/* Alt gezinmedeki tek düğme (çerez tercihi) bağlantı gibi görünmeli: aynı
   satırda duran altı bağlantıdan ayrışması için bir sebep yok. Burası yalnız
   düğmenin tarayıcı süsünü siliyor; boyut, renk ve hover'ı komşu bağlantılarla
   ORTAK kural veriyor (bkz. .alt-bag) — iki yerde ayrı yazılınca biri
   değişince öbürü geride kalıyordu. */
.bag-dugme{
  background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;
}

/* ---- konum ve harita düğmeleri ---- */
.konum{margin:0 0 18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.konum button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--mavi);color:#fff;border:1px solid transparent;border-radius:999px;
  padding:12px 22px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:background-color var(--gecis),border-color var(--gecis),color var(--gecis);
}
.konum button:hover{background:var(--mavi-koyu)}
/* Ana sayfada iki düğme var ve telefonda ikisi de il düğmeleri gibi kenardan
   kenara uzuyor: baş parmakla vurulacak tek sütun. Masaüstünde satıra dönüyorlar
   (aşağıdaki geniş ekran bölümü) ve "Haritayı aç" hepten kalkıyor — harita orada
   zaten ekranda. */
.konum.tam{gap:10px;align-items:stretch}
.konum.tam button{width:100%;padding:15px 22px}
/* İkincil: haritaya bakmak konum istemekten daha küçük bir istek. */
#harita-ac{background:var(--kart);color:var(--metin);border-color:var(--cizgi-vurgu)}
#harita-ac:hover{background:var(--mavi-yumusak);border-color:var(--mavi);color:var(--mavi-koyu)}
#konum-durum{font-size:13px;color:var(--soluk);min-height:1em}

/* Liste konuma göre değilken düğme sönük duruyor: beyaz zemin, koyu iğne.
   Konum uygulanınca dolu maviye geçiyor. Yeşil/kırmızı bir durum ışığı yok —
   ne olduğunu düğmenin yanındaki durum satırı (#konum-durum) söylüyor. */
#yakin{background:var(--kart);color:var(--metin);border-color:var(--cizgi)}
#yakin:hover{background:var(--kart-vurgu);border-color:var(--cizgi-vurgu)}
#yakin.konum-acik{background:var(--mavi);color:#fff;border-color:transparent}
#yakin.konum-acik:hover{background:var(--mavi-koyu);border-color:transparent}
/* Ana sayfada sıralanacak bir liste yok: düğme orada her zaman ana eylem
   rengiyle duruyor. */
.konum:not(.yuzen) #yakin{background:var(--mavi);color:#fff;border-color:transparent}
.konum:not(.yuzen) #yakin:hover{background:var(--mavi-koyu)}

/* Liste sayfasında telefonda düğme sağ alt köşeye çakılıyor: uzun listede aşağı
   inen kullanıcı için de elinin altında. display:contents ile sarmalayıcı
   yerleşimden çekiliyor; böylece düğme sabitlenirken durum yazısı üst çubuktaki
   yerinde akışta kalıyor. */
@media (max-width:999px){
  .konum.yuzen{display:contents}
  .konum.yuzen #yakin{
    position:fixed;z-index:70;right:16px;bottom:16px;
    width:56px;height:56px;padding:0;border-radius:999px;
    box-shadow:0 6px 20px rgba(15,23,42,.28);
  }
  .konum.yuzen #yakin .ikon{width:24px;height:24px}
  .konum.yuzen .konum-yazi{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  /* Sarmalayıcının alt boşluğu da gittiği için yazı payını kendisi taşıyor;
     boşken hiç yer kaplamıyor. */
  .konum.yuzen #konum-durum{display:block;margin:0 0 18px}
  .konum.yuzen #konum-durum:empty{display:none}
  /* Düğme sayfanın sonuna binmesin; boşluk yalnız düğmenin olduğu sayfada. */
  body:has(.konum.yuzen) main{padding-bottom:88px}
}

/* ---- iki bölmeli iskelet ----
   Telefonda tek sütun: yalnız liste; harita bölmesi ya hiç yok (liste sayfası)
   ya da düğmeyle açılan tam ekran katman (ana sayfa). Masaüstünde bölmeler yan
   yana geçiyor; sırayı CSS çevirdiği için işaretleme tek kalıyor. */
.duzen{display:flex;flex-direction:column}
.sol{min-width:0}
.sag{min-width:0}
.masaustu{display:none}          /* liste sayfasının sağ haritası: yalnız geniş ekranda */

/* ---- eczane kartları ---- */
.liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.kart{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:22px;
  overflow:hidden;
  transition:border-color var(--gecis),background-color var(--gecis);
}
.kart:hover{border-color:var(--cizgi-vurgu)}
.govde{padding:18px 20px 20px}
.kart h3{margin:0 0 6px;font-size:23px;line-height:1.2;letter-spacing:-.5px;font-weight:700}
.kart .yer{margin:0 0 6px;font-size:13px;color:var(--soluk)}
.kart .adres{margin:0;font-size:15px;color:var(--soluk);line-height:1.45}
/* Tarif italik ve cümle düzeninde (metin tarafı: Util::cumleDuzeni). Eskiden
   versal ve harf aralıklıydı; kaynakların çoğu zaten her şeyi büyük yazdığı için
   satır adresin üstünde ikinci bir başlık gibi bağırıyordu. İtalik onu adresten
   ayırmaya yetiyor — "burası resmî adres değil, tarif" demenin en sessiz yolu. */
.kart .tarif{
  margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--soluk);font-style:italic;
}
/* Eczane sayfasının künyesindeki aynı alan: orada zemin kartın kendisi, boyut
   komşu satırlarla aynı kalıyor; ayrımı yalnız italik kuruyor. */
.tarif-satir{font-style:italic}

/* ---- harita kutusu: yalnız eczane sayfasında (bkz. .detay-harita) ----
   Kutu eczanenin KENDİ konumunu göstermiyor; her sayfada aynı bulanık kapak
   duruyor (assets/img/harita-fon.webp — 23 KB, OSM döşemelerinden üretilip
   okunamayacak kadar bulanıklaştırıldı) ve dokunmak Google Haritalar'ı açıyor.
   Koordinat başına basılan görsel havuzu 2026-09-13'te kaldırıldı; gerekçe
   Render::haritaCephesi'nin başında. Görsel her sayfada AYNI olduğu için
   ikinci sayfadan sonra tarayıcının önbelleğinden geliyor. */
.harita{
  position:absolute;inset:0;overflow:hidden;display:block;text-decoration:none;
  background:var(--mavi-soluk);
}
/* Kapak 1216×853 saklanıyor: kutunun telefondaki oranıyla (~343×240) aynı, yani
   object-fit:cover neredeyse hiç kırpmıyor, ve 3x ekranda da büyütülmediği için
   bulanıklık "bulanık" duruyor, blok blok değil. Bulanık içerik sıkıştığı için
   dosya bu ölçüde bile 23 KB. Döşeme süzgeci burada da geçerli: koyu temada
   kapak da tersine dönüyor. */
.harita-fon{
  position:absolute;inset:0;width:100%;height:100%;display:block;border:0;
  object-fit:cover;background:var(--mavi-soluk);
  filter:var(--harita-suzgec);opacity:var(--harita-opaklik);
  transform:scale(var(--olcek,1));transition:transform var(--gecis);
}
/* Düğme kutunun tam ortasında ve kutunun tamamı zaten bağlantı: telefonda
   hedef 600×240'lık kutunun kendisi, düğme yalnız nereye gidileceğini söylüyor.
   Kapağın rengi her sayfada aynı olduğu için kontrast da sabit. */
.harita-dugme{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:11px 18px;border-radius:999px;
  background:var(--kart);color:var(--metin);border:1px solid var(--cizgi);
  box-shadow:0 6px 20px rgba(10,25,45,.18);
  font-size:14px;font-weight:600;line-height:1;
  transition:transform var(--gecis);
}
.harita.cephe:hover .harita-dugme{transform:translate(-50%,-50%) scale(1.04)}
/* Koordinatı olmayan eczane: aynı kapak, düğme yerine soluk bir bilgi. */
.harita.cephe.yok .harita-dugme{color:var(--soluk);font-weight:500;box-shadow:none}
.harita.cephe.yok .harita-fon{opacity:calc(var(--harita-opaklik) * .55)}

/* ---- rozetler ----
   Ortak olan yalnız pilin biçimi. Yerleşim iki ayrı yerde: "Nöbetçi Eczane"
   eczane sayfasında haritanın ÜSTÜNDE duruyor (mutlak), mesafe rozeti liste
   kartında gövdenin AKIŞINDA (harita kalkınca üstüne binecek bir yüzey de
   kalmadı). */
.rozet{
  display:inline-flex;align-items:center;
  background:var(--kart);border-radius:999px;padding:6px 13px;
  font-size:12px;font-weight:600;color:var(--metin);white-space:nowrap;
  overflow:hidden;
}
/* Boşluk gap yerine tek tek veriliyor: "1 KM" ile "Uzaklıkta" tek bir söz
   öbeği, aralarındaki aralık ikon-metin aralığından dar olmalı — yoksa iki
   ayrı bilgi gibi okunuyor. */
.rozet i{
  width:8px;height:8px;border-radius:999px;background:var(--yesil);
  flex:0 0 auto;margin-right:7px;
}
.rozet b{margin-right:3px}
/* Mesafe rozetinde nokta yerine ulaşım ikonu: yürünecek mesafe yaya, ötesi
   araba (bkz. assets/app.js). İkon metnin rengini alıyor; ayrımı biçim
   taşıyor, renk değil. */
.rozet i.yaya,.rozet i.araba{
  width:14px;height:14px;border-radius:0;background:none;display:block;
}
.rozet i svg{width:100%;height:100%;display:block}
/* Gövdenin akışında: adresin altında kendi satırı. Zemini --kart olamaz,
   kartın kendisi de --kart — beyaz üstüne beyaz pil görünmez. Nötr gri
   seçildi: hemen altındaki nöbet durumu pili maviyi/yeşili kullanıyor,
   ikisi yan yana okunurken renk hangisinin ne söylediğini ayırıyor. */
.rozet.mesafe{margin:12px 0 0;background:var(--gri-btn)}

/* ---- adın başındaki canlı im ----
   Nabız atan yeşil nokta = "bu eczane ŞU AN açık". Sunucu hidden basıyor,
   app.js kullanıcının baktığı ana göre açıyor (bkz. Render::canliIm).

   İki katman: duran çekirdek (i) ve ondan yayılan halka (::before). Yalnız
   transform ve opacity canlanıyor — haritadaki iğne nabzıyla (.eczane-im)
   aynı gerekçe, düzen hesabı doğmuyor.

   em cinsinden: aynı bileşen kartın 23px h3'ünde de eczane sayfasının 20px
   h1'inde de adın yanında orantılı duruyor. vertical-align yerine göreli
   konum kullanılıyor ki nokta taban çizgisine değil, harfin ortasına otursun. */
.canli{
  display:inline-block;position:relative;top:-.08em;
  width:.42em;height:.42em;margin-right:.42em;
}
.canli i,.canli::before{
  content:"";position:absolute;inset:0;border-radius:999px;background:var(--yesil);
}
.canli::before{animation:nabiz-nokta 2.4s cubic-bezier(.2,.6,.3,1) infinite}
/* Pil biçimi — YALNIZ eczane sayfasında, adın üstünde (bkz. Render::canliIm).
   Orada tek bir eczane var ve im sayfanın manşeti olabilecek kadar yer buluyor;
   listede aynı şeyi on karta koymak sayfayı rozet tarlasına çevirirdi, orada
   çıplak nokta kalıyor.

   Nokta artık kutunun kendisi değil içindeki <i>; halka da onun ::after'ı.
   Böylece pil büyüyüp metni alırken nabız noktanın üstünde kalıyor. */
.canli.pil{
  display:inline-flex;align-items:center;gap:9px;position:relative;top:0;
  width:auto;height:auto;margin:22px 0 0;padding:7px 14px 7px 11px;
  border-radius:999px;background:var(--yesil-yumusak);color:var(--yesil-koyu);
  font-size:13px;font-weight:650;line-height:1;white-space:nowrap;
}
.canli.pil::before{content:none}
.canli.pil i{
  position:relative;inset:auto;width:9px;height:9px;flex:0 0 auto;
  border-radius:999px;background:var(--yesil);
}
.canli.pil i::after{
  content:"";position:absolute;inset:0;border-radius:999px;background:var(--yesil);
  animation:nabiz-nokta 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
/* Pil görünürken başlık ona yaklaşıyor: ikisi tek bir manşet bloğu. Gizliyken
   (JS yok ya da nöbet dışı) h1 kendi üst boşluğunu koruyor. */
.canli.pil:not([hidden]) + h1{margin-top:8px}
@keyframes nabiz-nokta{
  0%   {transform:scale(1);opacity:.6}
  70%  {transform:scale(2.8);opacity:0}
  100% {transform:scale(2.8);opacity:0}
}

/* ---- nöbet saati ve canlı durum ----
   Saati sunucu basıyor (eskimeyen bilgi), durum rozetini app.js dolduruyor
   (eskiyen bilgi). JS gelmezse saat tek başına görünür ve doğru kalır; durum
   rozeti [hidden] olarak basıldığı için boş bir kutu da açılmaz. */
.nobet-saat{
  margin:12px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;color:var(--soluk);
}
.nobet-saat .ikon{width:15px;height:15px;flex:0 0 auto;opacity:.7}
.nobet-saat time{color:var(--metin);font-weight:600;font-variant-numeric:tabular-nums}
.nobet-durum{
  font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:999px;
  background:var(--mavi-yumusak);color:var(--mavi-koyu);
}
.nobet-acik .nobet-durum{background:var(--yesil-yumusak);color:var(--yesil-koyu)}
.nobet-bitti .nobet-durum{background:var(--uyari);color:var(--uyari-metin)}
/* Nöbeti bitmiş kayıt listeden ÇIKARILMIYOR — kullanıcı neden gitmemesi
   gerektiğini görmeli (docs/yapilacaklar.md §1). Yalnız görsel ağırlığı
   düşüyor: eskiden soluyan haritaydı, harita kalkınca ağırlığı adın tonu
   taşıyor. Punto ve kalınlık aynı kalıyor — kayıt okunmaz hâle gelmemeli,
   yalnız açık olanların arkasına düşmeli. */
.kart.nobet-bitti h3{color:var(--soluk)}
/* Eczane sayfasında satır tek başına duruyor; kartın içindeki kadar sıkışık
   olmasın diye kendi aralığı var. */
main>.nobet-saat{margin:0 0 18px}

/* ---- düğmeler: köşesiz ---- */
.eylem{display:flex;gap:10px;margin:18px 0 0;flex-wrap:wrap}
/* min-width 96: satırda artık üçüncü bir düğme var (paylaş). 120'de "Ara" ile
   "Yol Tarifi" telefonda birlikte sığmıyor, yazı iki satıra iniyor ve satır iki
   kat yükseliyordu. Esneme (flex:1 1 0) artan yeri yine ikisine bölüştürüyor;
   yer gerçekten yetmeyince (çok dar ekran) paylaş alt satıra iniyor. */
.btn{
  flex:1 1 0;min-width:96px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;text-decoration:none;
  border-radius:999px;padding:13px 18px;font-size:15px;font-weight:600;
  border:1px solid transparent;
  transition:background-color var(--gecis),color var(--gecis),border-color var(--gecis);
}
.btn .ikon{vertical-align:0}
.btn.ara{background:var(--mavi);color:#fff}
.btn.ara:hover{background:var(--mavi-koyu)}
.btn.yol{background:var(--gri-btn);color:var(--metin)}
.btn.yol:hover{background:var(--gri-btn-vurgu)}
/* Paylaş: yalnız ikon, yazısız. flex:0 0 auto — "Ara" ve "Yol Tarifi" satırı
   eşit bölüşmeyi sürdürsün, üçüncü düğme onların yerini yemesin.

   Ölçü AÇIKÇA yazılıyor (52×52), ikondan türetilmiyor: komşularının boyu
   13px padding + 24px satır kutusu + 1px kenar = 52px ve düğme onlarla aynı
   hizada durmalı. İkon boyu buna bağlı olsaydı ikonu küçültmek düğmeyi de
   küçültürdü; ikisi ayrıldı.

   align-self:center: satır yüksekliği yazı tipiyle birlikte kayarsa düğme
   esneyip elipse dönmesin, bir tık kısa ama daire kalsın. Arıza biçimi
   böylesi doğru. (aspect-ratio ile çözülmüyor: flex ana eksende genişlik önce
   içerikten hesaplanıyor, esneyen yükseklik o an henüz bilinmiyor.)

   Renkleri "Yol Tarifi" ile birebir aynı: gri zemin, ikon --metin. O değişken
   temayla birlikte dönüyor — açık temada koyu lacivert, koyu temada beyaza
   yakın. Yani ikon açıkta siyah, koyuda beyaz görünüyor ve iki temada da
   zeminin üstünde duruyor. Satırdaki iki ikincil eylem böylece tek dil
   konuşuyor; ana eylem yalnız "Ara". */
.paylas-btn{
  /* min-width:0 şart: .btn'in min-width:96px'i yoksa width'i eziyor ve düğme
     96×52 bir kapsüle dönüyor. */
  flex:0 0 auto;align-self:center;min-width:0;
  width:52px;height:52px;padding:0;cursor:pointer;
  background:var(--gri-btn);color:var(--metin);
}
.paylas-btn .ikon{width:18px;height:18px}
.paylas-btn:hover{background:var(--gri-btn-vurgu)}
/* Panoya kopyalandı: düğme bir an yeşile dönüyor. Masaüstünde paylaşım sayfası
   açılmadığı için kullanıcının tek geri bildirimi bu (ekran okuyucuya aynı şey
   .okuma-gizli satırından gidiyor). Yumuşak yeşil, düğmenin geri kalan
   diliyle aynı ağırlıkta — dolu bir zemin bir anlığına ana eylem gibi
   okunurdu. */
.paylas-btn.kopyalandi,.paylas-btn.kopyalandi:hover{
  background:var(--yesil-yumusak);color:var(--yesil-koyu);
}
/* .btn inline-flex; [hidden]'ı ezmemesi için açıkça söyleniyor (JS gelmeden
   düğme hiç görünmüyor). */
.paylas-btn[hidden]{display:none}

/* ---- eczane sayfası ----
   Yerleşim liste sayfasının aynısı (solda içerik, masaüstünde sağda harita);
   buradaki kurallar yalnız o sayfaya özgü parçalar için. */

/* Kart başlığındaki bağlantı: renk kartın kendi metni gibi duruyor, altı ancak
   üstüne gelince çiziliyor — liste bir bağlantı yığınına dönmesin. */
.kart-bag{color:inherit;text-decoration:none}
.kart-bag:hover{text-decoration:underline;text-decoration-thickness:1.5px}

/* Üstteki harita kutusu yalnız telefonda: masaüstünde sağdaki gezilebilir
   harita eczanenin iğnesini zaten gösteriyor (bkz. Render::eczaneSayfa). */
.detay-harita{
  position:relative;height:240px;margin:0 0 18px;
  border:1px solid var(--cizgi);border-radius:22px;overflow:hidden;
  background:var(--mavi-soluk);
}
.detay-harita:hover .harita-fon{--olcek:1.06}

/* Numaralı "Ara" düğmesi satırın kalanını alıyor: sayfanın asıl işi o. Yazılar
   bölünmüyor — "Yol Tarifi" iki satıra inince düğme kutu gibi duruyor. */
.detay-eylem{margin:0 0 20px}
.detay-eylem .btn{white-space:nowrap}
.detay-eylem .ara{flex:1 1 auto;letter-spacing:.2px}
/* Yol tarifi YALNIZ masaüstünde. Telefonda harita kutusu zaten tek dokunuşla
   Google Haritalar'ı açıyor; aynı bağlantıyı satıra ikinci kez koymak "Ara"nın
   yerini yiyordu (numara yazılı olduğu için o düğme geniş). Masaüstünde ise o
   kutu gizli — sağdaki gezilebilir harita var — ve satır yol tarifinin tek
   yeri oluyor. */
.detay-eylem .yol{display:none}

.bilgi{margin:0;display:flex;flex-direction:column;gap:1px;background:var(--cizgi);
  border:1px solid var(--cizgi);border-radius:18px;overflow:hidden}
.bilgi>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;
  background:var(--kart);padding:13px 18px}
.bilgi dt{color:var(--soluk);font-size:13px;line-height:1.5;padding-top:1px}
.bilgi dd{margin:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere}

/* .btn inline-flex; [hidden]'ı ezmemesi için açıkça söyleniyor (JS gelmeden
   paylaş düğmesi hiç görünmüyor — bkz. app.js paylas()). */
.btn[hidden]{display:none}

/* Aynı ilçedeki diğer nöbetçiler — hem ikinci seçenek hem iç link ağı. */
.komsu{margin:30px 0 0}
.komsu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.komsu li a{
  display:flex;align-items:baseline;gap:10px;padding:12px 16px;
  border:1px solid var(--cizgi);border-radius:16px;background:var(--kart);
  color:var(--metin);text-decoration:none;
  transition:background-color var(--gecis),border-color var(--gecis);
}
.komsu li a:hover{background:var(--kart-vurgu);border-color:var(--cizgi-vurgu)}
.komsu .ad{font-weight:600;font-size:15px;min-width:0}
.komsu .uzak{margin-left:auto;font-size:13px;color:var(--soluk);white-space:nowrap}
.komsu-daha{margin:12px 0 0;font-size:14px}

/* ---- gezilebilir haritalar: ana sayfada tam ekran, liste sayfasında sağ bölme ---- */
.tam-harita{
  height:100%;min-height:0;margin:0;
  background:var(--mavi-soluk);position:relative;z-index:0;
}

/* Ana sayfanın haritası telefonda sayfada durmuyor: "Haritayı aç" düğmesine
   basılınca tam ekran katman olarak geliyor (bkz. assets/harita.js). Sayfanın
   ilk ekranı böylece liste ve düğmelerden ibaret kalıyor.

   "Tam ekran" ekranın TAMAMI değil: üst çubuk (arama) ile pil satırı (il/ilçe)
   yukarıda kalıyor, katman onların altından başlıyor. Sebep işlevsel — haritada
   iğneleri getiren tek şey o piller; onları haritanın altında bırakmak
   kullanıcıyı iğnesiz bir haritayla baş başa bırakırdı. İkisi de yerlerini
   bıraktığı için position:fixed: katmanın üstünde kalmaları gerekiyor. */
.katman{display:none}
/* overflow-anchor: iki çubuk akıştan çıkınca belge kısalıyor ve tarayıcının
   kaydırma çıpası sayfayı kendiliğinden aşağı kaydırıyordu — harita kapanınca
   kullanıcı bıraktığı yerde değil, iki çubuk aşağıda buluyordu kendini. */
body.harita-acik{overflow:hidden;overflow-anchor:none}
body.harita-acik .tepe,body.harita-acik .etiketler{
  position:fixed;left:0;right:0;z-index:800;
  /* Cam kalkıyor: altta kalan sayfanın yazıları çubuğun içinden sızıyordu.
     Harita açıkken bu iki satır "içeriğin üstünde yüzen çubuk" değil,
     haritanın kendi başlığı — opak olmaları gerekiyor. */
  background:var(--zemin);-webkit-backdrop-filter:none;backdrop-filter:none;
}
body.harita-acik .tepe{top:0}
body.harita-acik .etiketler{top:var(--tepe-yuk)}
body.harita-acik .katman{
  display:block;position:fixed;z-index:700;background:var(--zemin);
  top:calc(var(--tepe-yuk) + var(--etiket-yuk));left:0;right:0;bottom:0;
}
.harita-kapat{
  position:absolute;top:14px;right:14px;z-index:1100;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;cursor:pointer;
  background:var(--kart);color:var(--metin);
  border:1px solid var(--cizgi-vurgu);border-radius:999px;
  transition:background-color var(--gecis),color var(--gecis);
}
.harita-kapat .ikon{width:18px;height:18px;vertical-align:0}
.harita-kapat:hover{background:var(--gri-btn-vurgu)}

/* Boş haritanın üstündeki şerit: "il seçin". Leaflet'in kendi katmanlarının
   üstünde (pane'ler 200–700) ama denetimlerinin (1000) altında duruyor.
   pointer-events:none — şerit haritanın sürüklenmesini engellemiyor.
   Kapatma düğmesine çarpmasın diye sağdan pay bırakıyor. */
.harita-ipucu{
  position:absolute;z-index:800;top:14px;left:50%;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - 96px);margin:0;
  padding:10px 16px;border-radius:999px;pointer-events:none;
  background:var(--kart);border:1px solid var(--cizgi-vurgu);
  font-size:14px;font-weight:600;color:var(--metin);text-align:center;
}
.harita-ipucu[hidden]{display:none}
.yan-harita{position:relative;z-index:0;height:100%}
/* Döşeme, eczane sayfasının durağan haritasıyla aynı süzgeçten geçiyor: iki harita
   yan yana durduğunda (masaüstünde tam olarak öyle) aynı gri-mavi tonda olmalı. */
.tam-harita .leaflet-tile-pane,.yan-harita .leaflet-tile-pane{
  filter:var(--harita-suzgec);opacity:var(--harita-opaklik);
}
.tam-harita .leaflet-container,.yan-harita .leaflet-container{background:var(--mavi-soluk);font:inherit}
.leaflet-container a{color:var(--mavi-koyu)}

/* Gezilebilir haritanın iğnesi: aynı levha (assets/img/pin.png). Büyütmeyi içteki
   <i> yapıyor: Leaflet iğnenin konumunu dış öğenin transform'una yazıyor, oraya
   scale eklersek iğne yerinden oynar (bkz. assets/harita.js).
   Gölgeli duruyor, sebebi zemin: iğne sokak ve etiket kalabalığının üstünde
   ve o kalabalıkta kaybolabiliyor.
   Temanın "gölge yok" kuralının bilinçli istisnası — bu bir kart değil, haritadan
   yükselen bir im; gölge derinlik süsü değil, okunurluk. Damla biçimi olduğu için
   box-shadow değil drop-shadow: gölge dikdörtgenin değil imin biçimini alıyor. */
.eczane-im i{
  display:block;width:100%;height:100%;
  background:url("../img/pin.png") center/contain no-repeat;
  transform-origin:50% 94%;              /* büyürken damlanın ucu yerinde kalsın */
  filter:drop-shadow(0 2px 3px rgba(9,26,46,.38));
  transition:transform var(--gecis);
}
.eczane-im.buyuk i{transform:scale(1.3)}

/* Nabız: imin ucundan çıkan halka. Eczanenin NEREDE olduğunu değil, haritada
   BURADA bir şey olduğunu söylüyor — kalabalık bir sokak dokusunun üstünde
   duran iğne göze ancak hareketle çarpıyor. Halka imin ucunda (top:36px,
   iconAnchor ile aynı nokta), yani büyüdükçe eczanenin kendisinden yayılıyor.

   Yalnız transform ve opacity canlanıyor: ikisi de derleyici katmanında
   çalışıyor, yüz iğnelik bir ilde bile düzen (layout) hesabı doğurmuyor.
   pointer-events:none — halka imin tıklama hedefini büyütmüyor, haritanın
   sürüklenmesini de engellemiyor. */
.eczane-im::before{
  content:"";position:absolute;left:50%;top:36px;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:999px;
  background:var(--marka-im);pointer-events:none;
  animation:nabiz 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes nabiz{
  0%   {transform:scale(.35);opacity:.55}
  70%  {transform:scale(2.8);opacity:0}
  100% {transform:scale(2.8);opacity:0}
}

/* Adın pili: imin SAĞINDA, başının hizasında. Haritaya bakan kullanıcı hangi
   eczane olduğunu balonu açmadan görüyor — gece yarısı aranan şey çoğu zaman
   "hangisi bana yakın" değil, "aradığım eczane bu mu".

   Yatay yazı kalabalıkta üst üste binebiliyor; pil zemini ve ince çizgisi onu
   okunur tutuyor, uzun ad üç noktayla kesiliyor. pointer-events:none: pil bir
   düğme değil, etiket — tıklama imin kendisine ve haritaya kalıyor. */
.eczane-ad{
  position:absolute;left:calc(100% - 3px);top:2px;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:3px 9px;border-radius:999px;
  background:var(--kart);border:1px solid var(--cizgi-vurgu);
  font-size:11.5px;font-weight:600;line-height:1.35;color:var(--metin);
  pointer-events:none;
}
.eczane-ad:empty{display:none}
/* Uzaktan bakarken piller kapalı: iğneler birbirine girdiğinde ad yığını
   haritayı okunmaz ediyor (kararı assets/js/harita.js veriyor). Tek istisna
   vurgulanan iğne — listede bir kartın üstüne gelen kullanıcı hangi iğnenin
   o kart olduğunu her yakınlıkta görmeli. */
.adsiz .eczane-ad{display:none}
.adsiz .eczane-im.buyuk .eczane-ad{display:block}
/* Seçili/üstüne gelinmiş im öne çıkıyor: adı komşularının pilinin altında
   kalmasın. */
.eczane-im.buyuk{z-index:1000 !important}

/* ---- Leaflet'in kendi süsleri ----
   Kütüphane koyu gölgeler ve köşeli beyaz kutularla geliyor; ikisi de temanın
   kuralına aykırı. Gölgeyi kaldırıp denetimleri kart yüzeyine ve tam yuvarlağa
   çekiyoruz — sayfadaki öteki düğmelerle aynı dile düşsünler. */
.leaflet-bar,.leaflet-popup-content-wrapper,.leaflet-popup-tip{box-shadow:none}
.leaflet-bar{border:1px solid var(--cizgi-vurgu);border-radius:999px;overflow:hidden}
.leaflet-bar a,.leaflet-bar a:first-child,.leaflet-bar a:last-child,
.leaflet-touch .leaflet-bar a:first-child,.leaflet-touch .leaflet-bar a:last-child{
  background:var(--kart);color:var(--metin);border-bottom-color:var(--cizgi);border-radius:0;
}
.leaflet-bar a:hover,.leaflet-bar a:focus{background:var(--gri-btn);color:var(--metin)}
.leaflet-touch .leaflet-bar{border:1px solid var(--cizgi-vurgu)}
/* Atıf zorunlu ama sayfanın konusu değil: köşede soluk bir satır olarak duruyor. */
.leaflet-control-attribution{
  background:var(--kart);color:var(--soluk);
  font-size:10px;line-height:1.5;padding:2px 8px;border-radius:8px 0 0 0;
}
.leaflet-control-attribution a{color:var(--soluk)}
.tam-harita .leaflet-popup-content-wrapper,.tam-harita .leaflet-popup-tip,
.yan-harita .leaflet-popup-content-wrapper,.yan-harita .leaflet-popup-tip{
  background:var(--kart);color:var(--metin);border-radius:16px;
}
.leaflet-popup-content{margin:14px 16px;font-size:14px;line-height:1.5}
.leaflet-popup-content b{display:block;font-size:15px;margin-bottom:2px}
/* Balonun genişliğini içeriği belirliyor: adres kısaysa kutu daralıyor ve iki
   düğme birbirinin içine giriyordu. Alt sınır harita.js'te (minWidth), buradaki
   nowrap da "Yol Tarifi"nin iki satıra kırılmasını kesiyor. */
.leaflet-popup-content .pop-eylem{display:flex;gap:8px;margin-top:10px}
.leaflet-popup-content .pop-eylem a{
  flex:1;text-align:center;border-radius:999px;padding:7px 12px;
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
}
.leaflet-popup-content .pop-ara{background:var(--mavi);color:#fff}
.leaflet-popup-content .pop-yol{background:var(--gri-btn);color:var(--metin)}
.harita-yok{padding:28px 18px;color:var(--soluk);font-size:14px;text-align:center}
/* Öneri listesi haritanın üstünde kalmalı: Leaflet katmanları z-index 400+ kullanıyor. */
.ara-sar{z-index:500}

/* ---- daha fazla göster ----
   Liste HTML'de tam duruyor; app.js fazlasını gizleyip bu düğmeyi açıyor.
   JS yoksa düğme hidden kalır ve liste bütün haliyle görünür. */
.daha-sar{display:flex;margin:16px 0 0}
.daha{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:2px;
  background:var(--kart);border:1px solid var(--cizgi-vurgu);color:var(--metin);
  border-radius:999px;padding:14px 20px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:background-color var(--gecis),border-color var(--gecis);
}
.daha:hover{background:var(--mavi-yumusak);border-color:var(--mavi)}
.daha-sayi{color:var(--soluk);font-weight:600}
.daha-sayi:not(:empty)::before{content:"·";margin:0 6px}
/* Sayfalamayla gizlenen ve konum filtresinin dışında kalan kartlar. */
.kart.gizli,.kart.disari{display:none}

/* ---- ilçe gezinmesi ---- */
.ilceler{margin:30px 0 0}
.ilceler ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.ilceler a{
  display:inline-block;padding:7px 15px;border:1px solid var(--cizgi);border-radius:999px;
  font-size:14px;text-decoration:none;background:var(--kart);color:var(--metin);
  transition:background-color var(--gecis),border-color var(--gecis),color var(--gecis);
}
.ilceler a:hover{background:var(--mavi-yumusak);border-color:var(--cizgi-vurgu);color:var(--mavi-koyu)}
.ilceler a.aktif{background:var(--mavi);border-color:var(--mavi);color:#fff}
.ilceler a.aktif:hover{background:var(--mavi-koyu);border-color:var(--mavi-koyu);color:#fff}

/* ---- il listesi (ana sayfa) ---- */
.iller{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.iller a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 20px;border:1px solid var(--cizgi);border-radius:999px;
  text-decoration:none;color:var(--metin);background:var(--kart);font-weight:600;
  transition:border-color var(--gecis),background-color var(--gecis);
}
.iller a:hover{border-color:var(--cizgi-vurgu);background:var(--kart-vurgu)}
.iller span{
  color:var(--mavi-koyu);font-size:13px;font-weight:600;
  background:var(--mavi-yumusak);padding:3px 12px;border-radius:999px;
}
/* Baştaki beş kısayol: sayı yok, ad yeter — bu bir liste değil, hızlı geçiş
   şeridi. Alfabetik listenin kendisi aşağıda olduğu gibi duruyor. */
.iller.populer{flex-direction:row;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.iller.populer a{padding:10px 15px;font-size:14px}

/* ---- özet, SSS ve metin blokları ----
   Bu üçü sayfanın "cevap" katmanı: liste kime gideceğini söylüyor, bunlar
   soruyu cevaplıyor. Görsel ağırlıkları listeyi bastırmamalı — kullanıcı gece
   yarısı eczane arıyor, makale okumuyor. Bu yüzden özet listenin üstünde düz
   metin olarak duruyor (kart değil, kendi yüzeyi yok), SSS ise kapalı başlıyor. */

.ozet{
  margin:0 0 22px;font-size:15px;line-height:1.65;color:var(--soluk);
}
/* Özetin gövdesi soluk; kalın yazılan yer (ana sayfada nöbetçi eczane sayısı)
   tam metin rengine çıkıyor — göz paragrafta önce oraya düşsün. */
.ozet strong{font-weight:700;color:var(--metin)}
/* Özetteki bağlar: sayılan eczane adları Google Haritalar'a (Render::adlar),
   eczane sayfasındaki telefon numarası da tel:'e gidiyor. Kalın metnin rengi bağ
   rengine dönüyor: altı çizili kalın bir metnin tıklanabilir olduğu, renk de
   söylemeden anlaşılmıyor. */
.ozet-yol strong,.ozet-tel strong{color:var(--mavi-koyu)}
.ozet-yol:hover strong,.ozet-tel:hover strong{color:var(--mavi)}

.sss{margin:34px 0 0}
.sss h2{font-size:19px;margin:0 0 12px}
.sss-oge{
  border:1px solid var(--cizgi);border-radius:16px;background:var(--kart);
  margin:0 0 8px;overflow:hidden;
}
.sss-oge summary{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:14px 16px;cursor:pointer;list-style:none;font-weight:600;font-size:15px;
}
.sss-oge summary::-webkit-details-marker{display:none}
.sss-oge summary:hover{background:var(--kart-vurgu)}
.sss-oge summary .ikon{color:var(--soluk);transition:transform var(--gecis)}
.sss-oge[open] summary .ikon{transform:rotate(180deg)}
.sss-cevap{padding:0 16px 15px}
.sss-cevap p{margin:0;font-size:14.5px;line-height:1.7;color:var(--metin)}

/* Metin sayfaları (hakkında, gizlilik, SSS…) ve ana sayfanın açıklama bölümü. */
.metin{font-size:15.5px;line-height:1.75}
.metin h2{font-size:19px;margin:30px 0 10px}
.metin h2:first-child{margin-top:0}
.metin p{margin:0 0 14px}
.metin ul{margin:0 0 14px;padding-left:20px}
.metin li{margin:0 0 8px}
.metin code{
  font-size:.9em;background:var(--gri-btn);padding:1px 6px;border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.metin .ozet{font-size:16px}
.metin-daha{font-size:13px;color:var(--soluk);margin:22px 0 0}

/* Ana sayfadaki büyükşehir ilçe şeridi: kısayol listesiyle aynı biçim, sayı yok. */
.iller.ilce-bag{flex-direction:row;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.iller.ilce-bag a{padding:9px 14px;font-size:14px}

/* ---- alt ---- */
.alt{margin-top:36px;padding-top:20px;border-top:1px solid var(--cizgi)}
.damga,.sorumluluk,.telif,.bos{font-size:13px;color:var(--soluk);margin:0 0 10px}
.sorumluluk{background:var(--kart);border:1px solid var(--cizgi);padding:13px 16px;border-radius:16px}
.telif{font-size:12px}
/* Alt gezinme: her sayfadan hakkında/gizlilik/iletişim'e erişim. Sağlık konulu
   bir dizinde bu bağlantıların her yerde bulunması içeriğin nasıl
   değerlendirildiğini doğrudan etkiliyor (bkz. src/Sayfa.php). */
.alt-bag{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px}
.alt-bag a,.alt-bag .bag-dugme{font-size:13px;color:var(--soluk);text-decoration:none}
.alt-bag a:hover,.alt-bag .bag-dugme:hover{color:var(--mavi-koyu);text-decoration:underline}
.bos{text-align:center;padding:28px 0}
/* Yalnız ekran okuyucuya. display:none olmaz — okunmayan bir canlı bölge
   (role="status") hiçbir şey duyurmuyor. */
.okuma-gizli{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ================================================================
   Masaüstü: solda liste, sağda sabit harita (Google Maps düzeni).
   Eşik 1000px — bunun altında tek sütun kalıyor, tablet dikeyde de öyle.
   ================================================================ */
@media (min-width:1000px){
  :root{--sol:430px;--tepe:76px}

  /* Üst çubuk tek satıra ve sayfanın tamamına yayılıyor; yapışkanlığı, camı ve
     çizgisi ortak kuraldan geliyor. Ton burada --zemin-alt: çubuk artık 640px'lik
     sütun değil, sol liste ile haritanın üstünü örten tam genişlikte bir yüzey.
     Yüksekliği sabit olduğu için etiket satırının yapıştığı yer de ölçüme
     gerek kalmadan biliniyor. */
  :root{--tepe-yuk:var(--tepe)}
  .tepe{
    --cubuk:var(--zemin-alt);--cubuk-cam:var(--cam-alt);
    max-width:none;height:var(--tepe);
    padding:0 24px;gap:24px;align-content:center;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"marka ara tarih";
  }
  .marka{font-size:20px}
  .ara-alan{flex-direction:row;align-items:center;gap:12px}
  .ara-sar{flex:1 1 520px;max-width:520px;min-width:260px}
  .ara-sar .ara{height:46px;padding:0 18px}
  .ara-sar .ikon{width:20px;height:20px}
  .ara-dugme{height:34px;padding:0 16px;font-size:14px;margin-right:-10px}
  /* Çubuğun yüksekliği sabit: düğme kırılmasın, durum yazısı taşmasın. */
  .ara-alan .konum{flex:0 1 auto;min-width:0;margin:0}
  .ara-alan #yakin{flex:0 0 auto;white-space:nowrap;padding:10px 18px;font-size:14px}
  .ara-alan #konum-durum{min-width:0;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .duzen{flex-direction:row;align-items:flex-start}
  .sol{
    order:0;flex:0 0 var(--sol);width:var(--sol);
    border-right:1px solid var(--cizgi);min-height:calc(100vh - var(--tepe));
  }
  .sag{order:1;flex:1 1 auto;position:sticky;top:var(--tepe);height:calc(100vh - var(--tepe))}
  .masaustu{display:block}

  main{max-width:none;margin:0;padding:0 20px 40px}
  /* Metin sayfalarında (hakkında, gizlilik, SSS, il dizini) sol/sağ bölme yok:
     <main class="duz"> doğrudan gövdede duruyor. Yukarıdaki kural main'i sol
     sütuna sığdırmak için genişletiyor; burada ortalanmış okuma sütununu geri
     alıyoruz — 1300px genişliğinde tek satır metin okunmaz. */
  main.duz{max-width:var(--en);margin:0 auto;padding:0 20px 56px}
  .etiketler{max-width:none;margin:0;padding:14px 20px}
  h1{font-size:20px;margin-top:18px}
  /* Üç düğme yan yana: Ara (esner) · Yol Tarifi · Paylaş (52px ikon). */
  .detay-eylem .yol{display:inline-flex;flex:0 0 auto}
  .tam-harita,.yan-harita{height:100%;min-height:0;margin:0}

  /* Kart tek sütun ve yalnız metin: dar sütuna daha çok eczane sığıyor.
     Eczanenin yeri zaten sağdaki büyük haritada, üstelik gezilebilir. */
  .liste{gap:12px}
  .kart{border-radius:18px}
  .govde{padding:14px 16px}
  .kart h3{font-size:17px;margin-bottom:3px}
  .kart .yer{font-size:12px;margin-bottom:4px}
  .kart .adres{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .kart .tarif{margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .eylem{gap:8px;margin-top:12px}
  /* Dar sütunda üç düğme yan yana: yazılar bölünmüyor. "Yol Tarifi" iki satıra
     inince satır iki kat yükseliyor ve düğmeler kutuya dönüyordu. */
  .btn{min-width:0;padding:9px 12px;font-size:13.5px;border-radius:999px;white-space:nowrap}
  .btn .ikon{width:14px;height:14px}
  /* Komşularının boyu burada 9px padding + 22px satır kutusu + 1px kenar = 42. */
  .paylas-btn{width:42px;height:42px}
  .paylas-btn .ikon{width:16px;height:16px}
  /* Dar sütunda rozet de küçülüyor; "Uzaklıkta" yerinde kalıyor — artık
     haritanın üstünde 118px'e sıkışmıyor, satırın tamamı onun. */
  .rozet.mesafe{margin-top:10px;padding:5px 11px;font-size:11.5px}
  .rozet.mesafe i{margin-right:5px}

  /* Eczane sayfası: üstteki harita kutusu gizleniyor, sağdaki Leaflet
     eczanenin kendi iğnesini gerçekten gösteriyor. */
  .detay-harita{display:none}
  .bilgi>div{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:11px 14px}
  .bilgi dd{font-size:14px}
  .detay-eylem .btn{font-size:14px;padding:11px 14px}

  /* Haritadaki iğneyle listedeki kartın bağı: biri seçilince ikisi de vurgulanır.
     Kartın boş yerine tıklamak da haritada balonu açtığı için imleç el oluyor. */
  .kart{cursor:pointer}
  .kart.secili{border-color:var(--mavi);background:var(--kart-vurgu)}

  .konum,.konum.tam{flex-direction:row;align-items:center;gap:12px;flex-wrap:nowrap}
  .konum.tam button{width:auto;padding:12px 22px}
  #harita-ac,.harita-kapat{display:none}
  .katman{display:block}
  .iller a{padding:13px 18px}
  .alt{margin-top:28px}
}
@media (min-width:1500px){
  :root{--sol:470px}
}

@media (max-width:420px){
  :root{--tepe-yuk:115px}
  .tepe{padding:12px 16px 10px}
  .marka{font-size:17px}
  .tarih{font-size:12px}
  .tarih-et{font-size:10px}
  .ilce-menu{left:16px;right:16px}
  .ara-sar .ara{height:54px;padding:0 14px;gap:10px}
  /* Dar ekranda düğme yer yiyor ve yer iple çekiliyor: iç boşluklar kısılıyor ki
     yazı alanına "mahalle veya eczane ara" sığmayı sürdürsün. */
  .ara-dugme{height:40px;padding:0 14px;margin-right:-8px}
  .etiketler{padding:10px 16px}
  main{padding:0 16px 48px}
  .detay-harita{height:210px}
  .kart h3{font-size:20px}
  .bilgi>div{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:12px 15px}
  .govde{padding:16px 16px 18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  /* Nabız süs değil, dikkat çeken bir hareket — hareketi kapatan kullanıcıda
     halka duruyor ama yok olmuyor: iğnenin ucunda sabit bir nokta kalıyor.
     Adın yanındaki im de öyle: nokta yerinde, yalnız yayılan halka susuyor. */
  .eczane-im::before{animation:none;transform:scale(1);opacity:.35}
  .canli::before,.canli.pil i::after{animation:none;transform:scale(1);opacity:.3}
  .btn:hover,.iller a:hover,.ilceler a:hover,.konum button:hover,.daha:hover,
  .komsu li a:hover{transform:none}
  .detay-harita:hover .harita-fon{--olcek:1}
}