/* V2 sayfalarına eklenen ortak kurallar.
 *
 * build.js bu dosyayı her sayfanın <head> sonuna ekler. Tasarım sayfaları yalnızca satır içi
 * stil kullandığı için onları ancak !important ezebiliyor; kurallar bu yüzden öznitelik
 * seçicileri ve !important ile yazıldı. Kalıcı çözüm tasarımın kendisinin duyarlı olmasıdır;
 * o yapıldığında bu dosya küçülmeli.
 */

/* hidden özniteliği satır içi display'e yenilmesin (arama sayfasındaki boş durum kutusu vb.) */
[hidden] { display: none !important; }

/* Arama sonuçlarında eşleşen kelimeler */
mark { background: #fff3b0; color: inherit; padding: 0 1px; border-radius: 2px; }

/* Uygulama (PWA, spd-pwa.js): çevrimdışı uyarı şeridi ve Safari için yükleme tarifi */
.spd-serit {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  background: #fff8e1; border-top: 2px solid #ffb300; color: #5d4037;
  font: 600 13px/1.45 'Inter', system-ui, sans-serif; box-shadow: 0 -4px 16px rgba(17, 24, 39, .12);
}
.spd-serit p { margin: 0; max-width: 820px; }
.spd-serit button, .spd-yukle-kutusu button {
  font: 800 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .04em; cursor: pointer;
  border: 0; border-radius: 999px; padding: 9px 16px; color: #fff; background: #c2185b;
}
body.spd-serit-acik { padding-bottom: 76px; }
.spd-yukle-kutusu {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 100;
  width: min(440px, calc(100vw - 24px)); box-sizing: border-box; padding: 20px 22px 18px;
  background: #fff; border: 1px solid #e5e8ee; border-top: 4px solid #c2185b; border-radius: 14px;
  box-shadow: 0 10px 34px rgba(17, 24, 39, .22); color: #111827; font: 400 13.5px/1.55 'Inter', system-ui, sans-serif;
}
.spd-yukle-kutusu h2 { margin: 0 0 10px; font: 800 16px/1.3 'Nunito Sans', 'Inter', sans-serif; }
.spd-yukle-kutusu ol { margin: 0 0 10px; padding-left: 20px; }
.spd-yukle-kutusu li { margin-bottom: 6px; }
.spd-yukle-kutusu p { margin: 0 0 14px; font-size: 12.5px; color: #5a6478; }
@media print { .spd-serit, .spd-yukle-kutusu { display: none !important; } body.spd-serit-acik { padding-bottom: 0; } }

/* Yönetim girişi (spd-yonetim.js; build.js yonetimSayfasi): şifre girilene kadar yönetim sayfasında üst bilgi,
   giriş kutusu ve alt bilgi görünür; giriş kutusu üst bilginin hemen ardındadır */
html:not(.spd-yonetim-acik) .spd-yonetim-giris ~ :not(footer):not(script):not(.spd-serit):not(.spd-yukle-kutusu) { display: none !important; }
html.spd-yonetim-acik .spd-yonetim-giris { display: none !important; }

/* Üst bilgideki "Geri" düğmesi (build.js geriDugmesi, spd-geri.js) */
.spd-geri:hover, .spd-geri:focus-visible { background: rgba(255, 255, 255, .3) !important; }
/* Sayfa sonundaki "Geri" düğmesi (build.js geriAlt) */
.spd-geri-alt:hover, .spd-geri-alt:focus-visible { border-color: var(--theme) !important; color: var(--theme-ink) !important; }

/* SPD belgelerinden üretilen sayfalar (belge-sayfalari.js): bölüm bağlantıları ve "Tüm rehberler" */
.spd-bolum-baglanti:hover { border-color: var(--theme) !important; background: var(--theme-soft) !important; color: var(--theme-ink) !important; }
.spd-gezinti:hover { border-color: var(--theme) !important; transform: translateY(-2px); }

/* Ana sayfa "Özel Durumlarda Aşılama" rozetleri bağlantı; Özel Durumlar'da gelinen kart belirgin */
.spd-rozet:hover, .spd-rozet:focus-visible { background: #ffe0bf !important; text-decoration: underline !important; }
article.tk-card:target { box-shadow: 0 0 0 3px var(--theme), var(--shadow-pop) !important; }

/* Baskı: yana kaydırılan geniş tablolar (min-width:880px vb.) kâğıtta sağdan kesiliyordu */
@media print {
  .tk-scroll, [style*="overflow-x:auto"] { overflow: visible !important; }
  .tk-scroll table, [style*="overflow-x:auto"] table { min-width: 0 !important; }
  th[style*="position:sticky"], td[style*="position:sticky"] { position: static !important; }
}

/* ---------------------------------------------------------------------------------------------
 * Baskı şablonu (Dr. Övgü, 13.10.2026: sitedeki tablo tasarımı, site logosu ve başlığıyla). Sayfanın başında
 * yalnız baskıda görünen başlık (build.js baskiBasligi); menü, yol satırı, düğmeler, bölüm hızlı erişimi,
 * önceki/sonraki kartları ve alt bilgi basılmaz; tablolar ve kutular ekrandaki renkleriyle basılır.
 * Takvim sonucu kendi baskı görünümüyle basılır (patches.js TAKVIM_BASKI).
 * ------------------------------------------------------------------------------------------- */
.spd-sayfa-baski { display: none; }
@media print {
  body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .spd-sayfa-baski { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 2px solid #c2185b; color: #111827; font-family: 'Inter', system-ui, sans-serif; }
  .spd-sayfa-baski img { width: 46px; height: 46px; object-fit: contain; }
  .spd-sayfa-baski p { margin: 0; }
  .spd-sayfa-baski-kurum { font: 800 16px/1.2 'Nunito Sans', 'Inter', sans-serif; color: #a91250; }
  .spd-sayfa-baski-alt { margin-top: 2px !important; font-size: 10.5px; line-height: 1.35; color: #5a6478; }
  .spd-sayfa-baski-sag { margin-left: auto; text-align: right; }

  header[style*="position:sticky"], footer, .tk-btn, [data-spd-yukle],
  div:has(> div > a[href="index.html"]:first-child + span),
  section:has(> div[style*="grid"] > a[href^="#"]),
  [style*="minmax(250px,1fr)"]:has(> .tk-card[href]) { display: none !important; }

  [style*="background:var(--bg)"] { background: #fff !important; }
  [style*="max-width:1"][style*="margin:0 auto"] { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* Büyük bölüm kartları sayfa arasında bölünebilir (bölünmezse sayfalarda büyük boşluk kalıyordu); küçük
     kartlar, tablo satırları ve maddeler bölünmez, başlık altındaki içerikten ayrılmaz */
  article.tk-card, tr, li { break-inside: avoid; }
  h1, h2, h3, thead, .tk-card > div:first-child:has(+ .tk-scroll) { break-after: avoid; }
}

/* ---------------------------------------------------------------------------------------------
 * Dar ekran (telefon). Tasarım hiç ekran @media kuralı içermiyor; sabit ızgaralar ve yan
 * paneller telefonda içeriği birkaç piksele sıkıştırıyordu.
 * ------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Yapışkan başlık telefonda ekranın üçte birini kaplıyordu */
  header, aside { position: static !important; }
  [style*="scroll-margin-top"] { scroll-margin-top: 12px !important; }

  /* Sayfa kapları: yan boşlukları daralt */
  [style*="max-width:1"][style*="margin:0 auto"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:28px 30px"], [style*="padding:24px 30px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* Bütün ızgaralar tek sütun */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Tek sütunda "2. sütundan sona" yerleşen öğe yeni bir sütun açmasın (takvimde influenza kutusu) */
  [style*="grid-column:2/-1"] { grid-column: 1 / -1 !important; }
  /* Takvimdeki "Sonraki Dozlar" zaman çizelgesi: tarih | nokta | kart düzeni dar ekranda da korunur */
  .spd-zaman[style] { grid-template-columns: 78px 22px minmax(0, 1fr) !important; }
  .spd-zaman[style] > div:first-child { padding-right: 8px !important; }
  .spd-zaman[style] > div:last-child { padding-left: 8px !important; }
  /* Kullanım raporunun özet kutuları (yonetim-rapor.html) dar ekranda iki sütun */
  [data-spd-rapor-kutular][style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }

  /* Yan yana kutular sığmazsa alt satıra geçsin; sabit en küçük genişlikler kalksın.
     Dikey (column) kutulara uygulanmaz: orada sarma, sütunları içeriğe göre genişletip taşırıyor. */
  [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap !important; }
  [style*="min-width:1"], [style*="min-width:2"], [style*="min-width:3"] { min-width: 0 !important; }
  [style*="flex:0 0 88px"] { flex-basis: auto !important; }
  /* Ana sayfadaki "Hızlı Erişim" çipleri: sarınca tam genişlikte bir satır alsın */
  [style^="flex:1;display:flex"] { flex-basis: 100% !important; }

  /* Takvimden tarih seçme kutusu (spd-tarih-secici.js) yukarıdaki genel kurallardan muaf:
     7 sütunluk gün ızgarası ve tek satırlık başlık korunur */
  .spd-tarih-kutusu [role="grid"][style] { grid-template-columns: repeat(7, 36px) !important; }
  .spd-tarih-kutusu [style*="display:flex"][style] { flex-wrap: nowrap !important; }

  /* Tam takvim tablosunda solda sabit aşı adları dar: telefonda tarih sütunlarına yer kalsın */
  #spd-tablo th[scope="row"] { padding: 9px 10px !important; white-space: normal !important; width: 104px; }
  #spd-tablo-baslik th:first-child { padding-left: 10px !important; padding-right: 10px !important; }

  /* Üst bilgideki "Geri" düğmesi telefonda yalnız ok: logo ile aynı satıra sığsın */
  .spd-geri[style] { width: 36px; padding: 0 !important; justify-content: center; }
  .spd-geri-yazi { display: none; }
  /* Üst bilgideki site adı (Sosyal Pediatri Derneği Aşı Platformu) satıra sığmazsa logonun yanında sarar;
     Geri ile aynı satırda kalır, menü alt satıra geçer */
  header a[href="index.html"][style*="flex:0 0 auto"]:not([data-spd-geri]) { flex: 1 1 200px !important; min-width: 0; flex-wrap: nowrap !important; }

  /* Takvim adım çubuğundaki bağlantı çizgileri sarınca anlamsızlaşıyor */
  [style^="flex:1;height:2px"] { display: none !important; }

  h1 { font-size: clamp(24px, 7.5vw, 34px) !important; line-height: 1.2 !important; }
  img, svg { max-width: 100%; }
}