/*
Theme Name: Hatay Nöbetçi Eczaneler
Theme URI: http://www.hataynobetcieczaneler.com
Author: Hatay Nöbetçi Eczaneler
Description: Hatay ili için günlük nöbetçi eczane listesi teması. Özel "eczane" yazı tipi, ilçe filtresi, tek dokunuşla arama ve yol tarifi butonları, Schema.org Pharmacy işaretlemesi içerir.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hatay-nobetci
*/

:root {
  --gece: #0E1B2C;        /* gece laciverti — nöbet saatleri */
  --gece-acik: #1B2E47;
  --kirmizi: #E2243B;     /* eczane tabelası kırmızısı */
  --kirmizi-koyu: #B81830;
  --yesil: #15803D;       /* "Açık" durumu */
  --zemin: #F5F7FA;
  --kart: #FFFFFF;
  --metin: #1A2433;
  --metin-soluk: #5B6B80;
  --cizgi: #E3E9F1;
  --radius: 14px;
  --golge: 0 2px 10px rgba(14, 27, 44, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--zemin);
  color: var(--metin);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { color: var(--kirmizi); }

.govde { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* ---------- Üst bant: ışıklı eczane tabelası hissi ---------- */
.site-ust {
  background:
    radial-gradient(900px 220px at 18% -40%, rgba(226, 36, 59, .28), transparent 60%),
    linear-gradient(180deg, var(--gece-acik), var(--gece));
  color: #fff;
  padding: 18px 0 22px;
}
.site-ust .govde { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.logo-e {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center;
  background: var(--kirmizi);
  color: #fff; font-size: 30px; font-weight: 800; font-family: Georgia, serif;
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 26px rgba(226,36,59,.55); /* gece yanan tabela */
  text-decoration: none;
}
.site-baslik { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .2px; }
.site-baslik a { color: #fff; text-decoration: none; }
.site-aciklama { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,.66); }

.bugun-rozet {
  margin-left: auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.bugun-rozet .nokta {
  width: 9px; height: 9px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80;
  animation: nabiz 2s infinite;
}
@keyframes nabiz { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .bugun-rozet .nokta { animation: none; } }

/* ---------- Sayfa başlığı ---------- */
.sayfa-baslik { margin: 28px 0 6px; font-size: 26px; }
.sayfa-alt { margin: 0 0 18px; color: var(--metin-soluk); font-size: 15px; }

/* ---------- İlçe filtresi ---------- */
.ilce-filtre {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 22px;
}
.ilce-filtre button, .ilce-filtre a {
  border: 1px solid var(--cizgi);
  background: var(--kart);
  color: var(--metin);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.ilce-filtre .aktif,
.ilce-filtre button:hover, .ilce-filtre a:hover {
  background: var(--gece);
  border-color: var(--gece);
  color: #fff;
}
.ilce-filtre button:focus-visible, .ilce-filtre a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--kirmizi);
  outline-offset: 2px;
}

/* ---------- Eczane kartları ---------- */
.eczane-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.eczane-kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  box-shadow: var(--golge);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.eczane-kart::before {       /* kart üstündeki kırmızı tabela şeridi */
  content: "";
  position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--kirmizi), var(--kirmizi-koyu));
  border-radius: var(--radius) var(--radius) 0 0;
}
.eczane-ad { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
.eczane-ad a { color: var(--metin); text-decoration: none; }
.eczane-ad a:hover { color: var(--kirmizi); }
.eczane-ilce {
  align-self: flex-start;
  background: #EEF3F9; color: var(--gece);
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.eczane-adres { margin: 0; color: var(--metin-soluk); font-size: 14px; flex: 1; }

.eczane-butonlar { display: flex; gap: 10px; margin-top: 4px; }
.btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 10px;            /* gece, tek elle: büyük dokunma alanı */
  border-radius: 10px;
  font-size: 15px; font-weight: 700;
  text-decoration: none;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.07); }
.btn-ara { background: var(--yesil); color: #fff; }
.btn-tarif { background: var(--gece); color: #fff; }

/* ---------- Tekil eczane sayfası ---------- */
.tekil-kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  box-shadow: var(--golge);
  padding: 26px 24px;
  margin: 26px 0 40px;
}
.tekil-kart h1 { margin: 0 0 4px; font-size: 26px; }
.tekil-meta { color: var(--metin-soluk); margin: 0 0 18px; }
.tekil-detay { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.tekil-detay li { display: flex; gap: 10px; align-items: baseline; }
.tekil-detay .etiket { min-width: 86px; font-weight: 700; font-size: 14px; color: var(--gece); }
.tekil-butonlar { display: flex; gap: 12px; max-width: 460px; }
.harita-kutu { margin-top: 24px; border-radius: 12px; overflow: hidden; border: 1px solid var(--cizgi); }
.harita-kutu iframe { display: block; width: 100%; height: 340px; border: 0; }

/* ---------- Boş durum ---------- */
.bos-durum {
  background: var(--kart);
  border: 1px dashed var(--cizgi);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--metin-soluk);
  margin: 0 0 40px;
}
.bos-durum strong { color: var(--metin); display: block; font-size: 17px; margin-bottom: 6px; }

/* ---------- Bilgi notu ---------- */
.bilgi-not {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  color: #7C2D12;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin: 0 0 36px;
}

/* ---------- Alt bilgi ---------- */
.site-alt {
  background: var(--gece);
  color: rgba(255,255,255,.7);
  padding: 26px 0;
  font-size: 13.5px;
}
.site-alt a { color: #fff; }
.site-alt .govde { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .bugun-rozet { margin-left: 0; }
  .tekil-butonlar { max-width: none; }
}