:root {
--gece: #0E1B2C; --gece-acik: #1B2E47;
--kirmizi: #E2243B; --kirmizi-koyu: #B81830;
--yesil: #15803D; --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; } .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); 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-baslik { margin: 28px 0 6px; font-size: 26px; }
.sayfa-alt { margin: 0 0 18px; color: var(--metin-soluk); font-size: 15px; } .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-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 { 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; 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-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; } .ust-link {
color: #fff;
text-decoration: none;
font-size: 14px; font-weight: 700;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
border-radius: 999px;
padding: 8px 16px;
white-space: nowrap;
}
.ust-link:hover { background: rgba(255,255,255,.18); }
.rehber-arac { margin: 0 0 16px; }
.rehber-arama {
width: 100%;
max-width: 460px;
padding: 13px 16px;
font-size: 15px;
border: 1px solid var(--cizgi);
border-radius: 12px;
background: var(--kart);
color: var(--metin);
}
.rehber-arama:focus {
outline: 3px solid rgba(226, 36, 59, .25);
border-color: var(--kirmizi);
}
.nobet-rozet {
position: absolute;
top: 16px; right: 16px;
background: var(--kirmizi);
color: #fff;
font-size: 12px; font-weight: 800;
border-radius: 999px;
padding: 4px 11px;
box-shadow: 0 2px 8px rgba(226, 36, 59, .35);
}
.ilce-filtre small { opacity: .65; font-weight: 400; } .yakin-kutu { margin: 0 0 24px; }
.btn-konum {
background: linear-gradient(135deg, var(--kirmizi), var(--kirmizi-koyu));
color: #fff;
width: 100%;
max-width: 460px;
padding: 15px 18px;
font-size: 16px;
border: 0;
cursor: pointer;
box-shadow: 0 4px 14px rgba(226, 36, 59, .3);
}
.btn-konum:disabled { opacity: .75; cursor: wait; }
.yakin-durum {
margin: 10px 0 0;
font-size: 14px;
color: var(--metin-soluk);
background: #FFF7ED;
border: 1px solid #FED7AA;
border-radius: 10px;
padding: 10px 14px;
max-width: 460px;
}
.mesafe-rozet {
position: absolute;
top: 16px; right: 16px;
background: var(--gece);
color: #fff;
font-size: 12.5px; font-weight: 700;
border-radius: 999px;
padding: 4px 11px;
}
#yakin-bolum { padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px dashed var(--cizgi); } .dogrulandi { color: var(--yesil); font-weight: 800; }
.ozellik-rozet {
display: inline-block;
background: #ECFDF5; color: #065F46;
border: 1px solid #A7F3D0;
border-radius: 999px;
padding: 3px 12px;
font-size: 13px; font-weight: 700;
margin-right: 6px;
}
.bolum-baslik {
font-size: 17px;
margin: 26px 0 10px;
padding-top: 18px;
border-top: 1px solid var(--cizgi);
}
.saat-listesi, .nobet-listesi {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 6px;
}
.saat-listesi li { display: flex; gap: 10px; font-size: 14.5px; }
.saat-listesi .etiket { min-width: 96px; font-weight: 700; color: var(--gece); }
.nobet-listesi li {
background: #F8FAFC;
border: 1px solid var(--cizgi);
border-radius: 8px;
padding: 8px 14px;
font-size: 14.5px;
} .kirinti {
margin: 22px 0 0;
font-size: 13px;
color: var(--metin-soluk);
}
.kirinti a { color: var(--metin-soluk); }
.sss { margin: 8px 0 28px; }
.sss details {
background: var(--kart);
border: 1px solid var(--cizgi);
border-radius: 12px;
padding: 14px 18px;
margin-bottom: 10px;
}
.sss summary {
font-weight: 700;
cursor: pointer;
font-size: 15px;
}
.sss p { margin: 10px 0 2px; color: var(--metin-soluk); font-size: 14.5px; }
.diger-ilceler { margin-bottom: 28px; }
.ilce-baglar-sarici {
background: #EDF1F7;
border-top: 1px solid var(--cizgi);
padding: 26px 0 30px;
}
.ilce-baglar-baslik { margin: 0 0 12px; font-size: 16px; color: var(--gece); }
.ilce-baglar ul {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 7px 18px;
}
.ilce-baglar a {
color: var(--metin-soluk);
text-decoration: none;
font-size: 13.5px;
}
.ilce-baglar a:hover { color: var(--kirmizi); text-decoration: underline; } .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-not {
background: #FFF7ED;
border: 1px solid #FED7AA;
color: #7C2D12;
border-radius: 12px;
padding: 12px 16px;
font-size: 13.5px;
margin: 0 0 36px;
} .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; }
} .eczane-tarif {
margin: 0;
font-size: 13px;
color: var(--gece);
background: #F1F5F9;
border-radius: 8px;
padding: 7px 11px;
} .spot {
background: var(--kart);
border: 1px solid var(--cizgi);
border-left: 4px solid var(--kirmizi);
border-radius: 12px;
padding: 16px 20px;
margin: 0 0 22px;
}
.spot p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; }
.spot p:last-child { margin-bottom: 0; }