/* =========================================================================
   Nöbetçi Eczane — Tasarım v2 (style.css'in ÜSTÜNE biner; kaldırmak için layout'taki <link>'i silmeniz yeterli)
   Amaç: daha ferah, modern ve tutarlı bir görünüm — daha yumuşak yüzeyler, net tipografi, cam efektli üst çubuk,
   canlı ama sakin gradyanlar, geliştirilmiş kartlar/çipler/altbilgi ve hareket (azaltılmış harekete saygılı).
   ========================================================================= */

:root {
  --zemin: #f3f6f4;
  --yuzey: #ffffff;
  --yuzey-2: #f7faf8;
  --cizgi: #e0e8e4;
  --cizgi-2: #ecf1ee;
  --marka: #078a63;
  --marka-2: #12a97c;
  --marka-koyu: #06543d;
  --marka-acik: #e3f6ee;
  --marka-metin: #055640;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
  --golge-1: 0 1px 2px rgb(16 42 32 / .05), 0 1px 1px rgb(16 42 32 / .03);
  --golge-2: 0 2px 4px rgb(16 42 32 / .05), 0 14px 34px -10px rgb(16 42 32 / .14);
  --golge-3: 0 4px 10px rgb(16 42 32 / .07), 0 30px 70px -20px rgb(16 42 32 / .26);
  --ust-yuk: 64px;
  --hero-a: #04251c;
  --hero-b: #0a6a4d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #08110d; --yuzey: #101d17; --yuzey-2: #0c1712; --cizgi: #1f3027; --cizgi-2: #172720;
    --golge-1: 0 1px 0 rgb(255 255 255 / .02) inset; --golge-2: 0 12px 34px -12px rgb(0 0 0 / .7); --golge-3: 0 30px 70px -20px rgb(0 0 0 / .8);
  }
}
:root[data-theme="dark"] {
  --zemin: #08110d; --yuzey: #101d17; --yuzey-2: #0c1712; --cizgi: #1f3027; --cizgi-2: #172720;
  --golge-1: 0 1px 0 rgb(255 255 255 / .02) inset; --golge-2: 0 12px 34px -12px rgb(0 0 0 / .7); --golge-3: 0 30px 70px -20px rgb(0 0 0 / .8);
}

/* ---------- Zemin ve tipografi ---------- */
body {
  background:
    radial-gradient(1100px 520px at 90% -8%, rgb(18 169 124 / .10), transparent 62%),
    radial-gradient(900px 480px at -8% 4%, rgb(14 116 144 / .07), transparent 60%),
    var(--zemin);
  background-attachment: fixed;
  font-size: 16.5px;
  line-height: 1.65;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background:
  radial-gradient(1000px 520px at 90% -8%, rgb(52 196 144 / .09), transparent 62%), radial-gradient(900px 480px at -8% 4%, rgb(56 140 190 / .07), transparent 60%), var(--zemin); background-attachment: fixed; } }
:root[data-theme="dark"] body { background:
  radial-gradient(1000px 520px at 90% -8%, rgb(52 196 144 / .09), transparent 62%), radial-gradient(900px 480px at -8% 4%, rgb(56 140 190 / .07), transparent 60%), var(--zemin); background-attachment: fixed; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.028em; }
.bolum-baslik h2 { position: relative; padding-left: 16px; font-size: clamp(21px, 2.7vw, 27px); }
.bolum-baslik h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 4px; background: linear-gradient(180deg, var(--marka-2), var(--marka-koyu)); }
.bolum-baslik.bolum-nobetci h2::before { background: linear-gradient(180deg, #ff6b78, var(--nobetci)); }
main > section, main > nav + section { margin-top: 44px; }

/* ---------- Üst çubuk ---------- */
.ust { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--cizgi-2); transition: box-shadow .25s, background .25s; }
.ust.kaydi { box-shadow: 0 1px 0 var(--cizgi), 0 10px 30px -14px rgb(16 42 32 / .25); }
.logo { font-size: 19px; }
.logo-isaret { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #1fc592, #06543d); }
.menu a { padding: 9px 16px; transition: background .15s, color .15s; }
.menu a[aria-current] { background: var(--marka-acik); color: var(--marka-metin); }
.ara-tetik, .ikon-btn { background: var(--yuzey); transition: border-color .15s, box-shadow .15s, background .15s, transform .12s; }
.ara-tetik:hover, .ikon-btn:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka-2) 14%, transparent); }
.serit { background: transparent; border-bottom-color: var(--cizgi-2); }

/* ---------- Düğmeler ---------- */
.btn { border-radius: 999px; padding-inline: 24px; letter-spacing: -.005em; }
.btn-buyuk { border-radius: 999px; padding-inline: 30px; }
.btn-birincil { background: linear-gradient(180deg, #16b886, #078a63); box-shadow: 0 10px 24px -8px rgb(7 138 99 / .6), inset 0 1px 0 rgb(255 255 255 / .28); }
.btn-nobetci { background: linear-gradient(180deg, #ff6572, #dc2f3d); box-shadow: 0 12px 28px -8px rgb(220 47 61 / .6), inset 0 1px 0 rgb(255 255 255 / .3); }
.btn-ikincil { background: var(--yuzey); border-color: var(--cizgi); box-shadow: var(--golge-1); }
.btn-ikincil:hover { background: var(--marka-acik); border-color: var(--marka-2); color: var(--marka-metin); }
.btn:focus-visible { outline-offset: 3px; }
.eylem .btn { border-radius: 14px; }

/* ---------- Hero ---------- */
.hero {
  margin-top: 22px; border-radius: var(--r-xl); border: 1px solid rgb(255 255 255 / .09);
  background:
    radial-gradient(900px 420px at 100% -15%, rgb(52 211 153 / .32), transparent 60%),
    radial-gradient(640px 360px at -8% 115%, rgb(255 107 120 / .20), transparent 62%),
    radial-gradient(500px 300px at 55% 120%, rgb(56 189 248 / .12), transparent 60%),
    linear-gradient(135deg, var(--hero-a), var(--hero-b) 62%, #0d8a68);
  box-shadow: 0 40px 90px -38px rgb(4 70 50 / .75), inset 0 1px 0 rgb(255 255 255 / .14);
}
.hero::before { opacity: .35; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .07), transparent 42%); }
.hero h1 { letter-spacing: -.04em; font-weight: 850; }
.hero .lead { opacity: .94; font-weight: 450; }
.etiket-ust { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .2); backdrop-filter: blur(8px); }
.durum-kart { background: linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / .06)); border-color: rgb(255 255 255 / .24); box-shadow: 0 24px 50px -24px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .2); }
.durum-sayilar > div { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .12); }
.hero-acil { background:
    radial-gradient(900px 420px at 100% -15%, rgb(255 107 120 / .38), transparent 60%),
    radial-gradient(640px 360px at -8% 115%, rgb(52 211 153 / .14), transparent 62%),
    linear-gradient(135deg, #3b0f16, #1d0a0e); }

/* ---------- Kartlar ve listeler ---------- */
.kart { border-radius: var(--r-lg); padding: 20px 20px 18px; border-color: var(--cizgi); background: var(--yuzey); }
.kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); }
.kart h3 { font-size: 19px; }
.kart-nobetci { background: linear-gradient(180deg, color-mix(in srgb, var(--nobetci-acik) 55%, var(--yuzey)) 0, var(--yuzey) 46%); border-color: color-mix(in srgb, var(--nobetci) 22%, var(--cizgi)); }
.kart-nobetci::before { left: 0; top: 22px; bottom: 22px; width: 4px; }
.satirlar { border-radius: var(--r-lg); box-shadow: var(--golge-1); }
.kutu { border-radius: var(--r-md); }
.rozet { letter-spacing: .05em; }
.sss details { border-radius: var(--r-md); box-shadow: var(--golge-1); transition: border-color .2s, box-shadow .2s; }
.sss details[open] { border-color: color-mix(in srgb, var(--marka) 35%, var(--cizgi)); box-shadow: var(--golge-2); }
.adim, .kars { border-radius: var(--r-lg); box-shadow: var(--golge-1); }
.adim { transition: transform .2s, box-shadow .2s; }
a.adim:hover, .hizli-kart:hover, .acil-no:hover { transform: translateY(-3px); }
.adim-no { border-radius: 14px; background: linear-gradient(145deg, var(--marka-acik), color-mix(in srgb, var(--marka-acik) 60%, var(--yuzey))); }

/* ---------- Çipler ve il ızgarası ---------- */
.cipler a, .cip { background: var(--yuzey); box-shadow: var(--golge-1); }
.cipler a:hover { background: var(--marka-acik); color: var(--marka-metin); }
.izgara a { border-radius: var(--r-md); min-height: 54px; background: var(--yuzey); box-shadow: var(--golge-1); }
.izgara a:hover { background: var(--marka-acik); color: var(--marka-metin); }
.izgara em { background: linear-gradient(180deg, #ff6572, var(--nobetci)); color: #fff; }

/* ---------- Form alanları ---------- */
.alan input, .girdi { border-radius: 16px; background: var(--yuzey); border-color: var(--cizgi); }
.alan input:focus, .girdi:focus { background: var(--yuzey); }

/* ---------- Hızlı erişim ---------- */
.hizli-kart { border-radius: var(--r-lg); padding: 18px 20px; background: var(--yuzey); }
.hizli-ik { border-radius: 16px; width: 50px; height: 50px; background: linear-gradient(145deg, var(--marka-acik), color-mix(in srgb, var(--marka-acik) 55%, var(--yuzey))); }
.hizli-kart.acil .hizli-ik { background: linear-gradient(145deg, var(--nobetci-acik), color-mix(in srgb, var(--nobetci-acik) 55%, var(--yuzey))); }

/* ---------- Alt bilgi: koyu, ferah ---------- */
.alt { margin-top: 56px; border-top: 0; color: #a9c0b6; background:
  radial-gradient(900px 300px at 10% 0%, rgb(18 169 124 / .16), transparent 60%), linear-gradient(180deg, #0a1511, #07100c); padding-top: 52px; }
.alt h2 { color: #f1f8f4; font-size: 16px; }
.alt a { color: #a9c0b6; text-decoration: none; }
.alt a:hover { color: #6fe3b8; text-decoration: underline; }
.alt .acil a { color: #ff8a94; }
.alt .telif { border-top-color: rgb(255 255 255 / .09); }
.alt-liste { gap: 9px; }

/* ---------- Mobil alt çubuk ---------- */
.alt-cubuk { border-top-color: var(--cizgi); box-shadow: 0 -10px 30px -16px rgb(16 42 32 / .3); }
.alt-cubuk .merkez { border-radius: 20px; box-shadow: 0 14px 28px -10px rgb(220 47 61 / .6); }

/* ---------- Yukarı çık düğmesi (JS ekler) ---------- */
.yukari-cik { position: fixed; right: 16px; bottom: calc(var(--alt-cubuk) + 18px); z-index: 80; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin); display: grid; place-items: center; cursor: pointer; box-shadow: var(--golge-2); opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .2s, translate .2s, background .15s; }
.yukari-cik.goster { opacity: 1; translate: 0 0; pointer-events: auto; }
.yukari-cik:hover { background: var(--marka-acik); }

/* ---------- Kaydırınca belirme (JS yalnızca ekran dışındaki bölümleri işaretler) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gor-bekle { opacity: 0; translate: 0 22px; }
  .gor-bekle.gor-oldu { opacity: 1; translate: 0 0; transition: opacity .6s cubic-bezier(.2, .7, .2, 1), translate .6s cubic-bezier(.2, .7, .2, 1); }
  @keyframes kayan { 100% { background-position: -200% 0; } }
}
.iskelet { border-radius: var(--r-md); min-height: 16px; background: linear-gradient(90deg, var(--cizgi-2) 25%, var(--cizgi) 37%, var(--cizgi-2) 63%); background-size: 200% 100%; animation: kayan 1.4s linear infinite; }

/* ---------- Yazı boyutu (erişilebilirlik) ---------- */
html[data-yazi="buyuk"] body { font-size: 18.5px; }
html[data-yazi="cokbuyuk"] body { font-size: 20.5px; }
html[data-yazi="buyuk"] .btn, html[data-yazi="cokbuyuk"] .btn { min-height: 54px; }

/* ---------- Favoriler ---------- */
.fav-btn { color: var(--soluk); }
.fav-btn[aria-pressed="true"] { color: #e11d48; background: #fff1f3; border-color: #fecdd3; }
:root[data-theme="dark"] .fav-btn[aria-pressed="true"] { background: #3a1519; border-color: #61262f; color: #ff8a94; }
.fav-serit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 18px; border-radius: var(--r-lg); background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-1); }
.fav-serit strong { margin-right: 4px; }
.fav-serit .cipler { gap: 6px; }

/* ---------- Yazdırma ---------- */
@media print { body { background: #fff !important; } .alt, .yukari-cik { display: none !important; } }

/* Hızlı erişim kartları dar ekranda sıkışmasın */
.hizli { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); }
.hizli-kart strong { overflow-wrap: anywhere; }

/* Mobilde hero'daki ikincil düğmeler yan yana, ikon üstte */
@media (max-width: 559px) {
  .hero-kucuk .hero-eylemler .btn-hayalet { flex: 1 1 calc(33.333% - 8px); min-width: 0; flex-direction: column; gap: 4px; min-height: 66px; padding: 8px 6px; font-size: 12.5px; line-height: 1.2; border-radius: 18px; }
  .hero-kucuk .hero-eylemler .btn-hayalet .i { font-size: 18px; }
  .hero-kucuk .hero-eylemler .btn-nobetci, .hero-kucuk .hero-eylemler .btn-acil, .hero-kucuk .hero-eylemler .btn-birincil { flex: 1 1 100%; }
}

/* Veteriner "7/24" etiketi: nöbetçi (kırmızı) ile karıştırılmasın diye sakin mavi-yeşil */
.rozet-724 { background: #e0f2fe; color: #075985; letter-spacing: .04em; }
:root[data-theme="dark"] .rozet-724 { background: #0c2a3d; color: #7dd3fc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rozet-724 { background: #0c2a3d; color: #7dd3fc; } }

/* ---------- Reklam alanları ---------- */
.reklam { min-height: 0; margin: 24px 0 0; }
.reklam:not(.dolu) { display: none; }
.ana-reklam { margin-top: 28px; }
.ana-reklam .reklam { margin: 0; }
.reklam-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 20px; border-radius: var(--r-lg); border: 1.5px dashed color-mix(in srgb, var(--marka-2) 55%, var(--cizgi)); background: color-mix(in srgb, var(--marka-acik) 45%, var(--yuzey)); color: var(--metin); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.reklam-cta:hover { border-color: var(--marka-2); transform: translateY(-2px); box-shadow: var(--golge-2); color: var(--metin); }
.reklam-cta strong { flex: 1 1 220px; font-size: 17px; }
.reklam-cta-eylem { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; color: var(--marka-metin); }
.reklam-cta .ilan-etiket { margin: 0; }
.mobil-iletisim { display: inline-grid; }
@media (min-width: 960px) { .mobil-iletisim { display: none; } }

/* ---------- Çerez / reklam izni bildirimi ---------- */
.izin-banner { position: fixed; left: 12px; right: 12px; bottom: calc(var(--alt-cubuk) + 12px); z-index: 700; max-width: 760px; margin-inline: auto; padding: 16px 18px; border-radius: 20px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-3); }
.izin-ic { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.izin-ic > div:first-child { flex: 1 1 320px; }
.izin-ic p { color: var(--soluk); font-size: 14px; line-height: 1.5; margin-top: 4px; }
.izin-eylem { display: flex; gap: 10px; }
.izin-eylem .btn { min-height: 44px; padding-inline: 20px; }
.baglanti-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.baglanti-btn:hover { color: #6fe3b8; text-decoration: underline; }