/* =========================================================
   ANESTHUB - ORTAK TASARIM (CSS) DOSYASI
   Tüm sayfalardaki temalar, menüler ve ortak kartlar buradan yönetilir.
========================================================= */

/* Modül içi bibliyografik bloklar okuyucu görünümünde gösterilmez.
   Atıflar bağımsız Kaynakça modülünde tek yerde tutulur. */
.kaynak, .refs { display:none !important; }
.not:has(> .kaynak:only-child) { display:none !important; }

/* Kaynak kutularından ayrılan, klinik güvenlik açısından gerekli sınır notları. */
.klinik-sinir {
  margin:18px 0 0;
  padding:11px 13px;
  border:1px solid var(--border);
  border-left:3px solid var(--blue);
  border-radius:8px;
  background:var(--bbg);
  color:var(--text2);
  font-size:calc(12.5px * var(--ah-yazi, 1));
  line-height:1.65;
}

/* =========================================================
   YAZI TİPLERİ — KENDİ SUNUCUMUZDAN
   Dosyalar /fonts klasöründe ve service worker önbelleğinde.
   Google'a hiçbir istek gitmez; uygulama çevrimdışıyken de
   görünüm aynı kalır.

   latin-ext alt kümesi Türkçe için ZORUNLUDUR:
   ğ Ğ ş Ş İ karakterleri orada. Silmeyin.

   Yeni bir sayfa eklerken <link href="fonts.googleapis.com...">
   EKLEMEYİN — style.css zaten bu tanımları getiriyor.
========================================================= */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/montserrat-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/montserrat-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/jetbrains-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/jetbrains-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/jetbrains-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/jetbrains-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/jetbrains-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/jetbrains-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --font: 'Inter', 'Nunito', 'Calibri', sans-serif;
  --mono: 'JetBrains Mono', 'Consolas', monospace;
  /* EKLENDİ: index.html'de 41 yerde kullanılıyordu ama hiç tanımlı değildi */
  --font-heading: 'Montserrat', 'Arial Black', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --radius: 8px;
  --radius-lg: 14px;
  --transition: 0.2s ease;
  --shadow-lg: 0 2px 8px rgba(16,32,48,.10);
}

/* ── TEMALAR ── */
/* TÜM TEMALARDA KONTRAST 7–12 ARALIĞINA ÇEKİLDİ (sürüm 6.4).
   Ölçüm: light 14,7 · dark 14,2 · navy 13,0 · cream 15,6 ·
   forest 13,7 · safak 14,0 — hepsi uzun okuma için fazla yüksekti.
   WCAG yalnızca ALT sınır (7:1) koyar; üst sınır yoktur ama
   15:1 civarı parlama yapar ve sürekli kullanan kişiyi yorar.
   t54 testi her temada bu aralığı denetler.

   AÇIK TEMA — sürüm 6.4'te yumuşatıldı.
   Eskiden kart zemini saf beyaz (#fff) ve metin #1a2a35 idi:
   kontrast 14,7:1. Uzun okumada bu parlama yapar; önerilen
   aralık 7–12:1'dir. Kart zemini kırık beyaza, metin bir ton
   açığa çekildi → 11,2:1. Hâlâ WCAG AAA'nın (7:1) belirgin
   üzerinde, ama göz yormuyor. */
/* =========================================================
   TEMALAR — SÜRÜM 8.3'te 7'DEN 4'E İNDİRİLDİ

   ŞİKÂYET: "Temalar çok açıktan birden bire çok koyuya geçiyor,
   neredeyse hiç ara tema yok."

   ÖLÇÜM DOĞRULADI. Eski 7 temanın algısal açıklığı (L*):
     cream 97 · light 95 · sakin 91  ← üçü de neredeyse aynı
     navy 9 · forest 8 · dark 6 · safak 6  ← dördü de neredeyse aynı
   Yani 7 seçenek vardı ama gerçekte YALNIZCA İKİ parlaklık
   seviyesi vardı; L* 20–85 arası tamamen boştu.

   YENİ DÜZEN — dört parlaklık basamağı:
     Açık     L* 95   parlak ortam
     Yumuşak  L* 80   gündüz, parlama olmadan
     Loş      L* 26   akşam / loş ameliyathane
     Koyu     L*  6   gece nöbeti

   ATLAS — 2026'da ayrı bir karakter seçeneği olarak eklendi.
   Yeni bir parlaklık basamağı değil; basılı klinik atlasların
   kırık kâğıt, grafit ve mürekkep mavisi dilini taşıyan
   alternatif bir açık palettir. Doygun neonlar ve renkli gölgeler yoktur.

   NEDEN TAM ORTA (L* 50) BİR TEMA YOK?
   Fizik izin vermiyor. L* 35–65 arasındaki bir zeminde ne siyah
   ne beyaz metin 4,5:1 kontrasta ulaşır (en iyi ihtimalle 5,3:1
   ve o da sınırda). Yapılabilecek en iyisi, "kısık bir açık" ile
   "açılmış bir koyu" sunmaktır; yukarıdaki Yumuşak ve Loş tam
   olarak bunlardır.

   KONTRAST — hepsi ölçülerek belirlendi:
     gövde metni    ~10–11:1   (WCAG AAA sınırı 7:1)
     ikincil metin  ~5,8–6,2:1
     üçüncül metin  ~4,7–4,8:1 (WCAG AA sınırı 4,5:1)
     vurgu renkleri  5:1 açık temalarda, 7,5:1 koyu temalarda

   Bu blokları elle düzenlerseniz kontrastı yeniden ölçün.
========================================================= */

/* SÜRÜM 8.15 — AÇIK TEMA CANLANDIRILDI
   Şikâyet: "uygulama çok soluk, bir iki renk var". Vurgu renkleri
   daha doygun tonlara çekildi; metin kontrastı yine ölçülerek
   ≥5:1 tutuldu (kart zemini #fbfcfd üzerinde). Renkli zemin
   saydamlığı .08 → .09. Kenarlıklar daha açık ve serin: kartlar
   çizgiyle değil, zemin farkı ve yumuşak gölgeyle ayrışır. */
[data-theme="light"] {
  --bg:#eef2f6; --bg2:#fbfcfd; --bg3:#e3e9f0; --bg4:#f5f8fb;
  --border:#d3dae2; --border2:#98a2ad;
  --text:#2c3843; --text2:#4b5965; --text3:#5b6873;
  --accent:#0a735e; --abg:rgba(10,115,94,0.09); --aborder:rgba(10,115,94,0.32);
  --accent-bg:rgba(10,115,94,0.09); --accent-border:rgba(10,115,94,0.32);
  --blue:#1c64c8; --bbg:rgba(28,100,200,0.09); --blue-bg:rgba(28,100,200,0.09);
  --orange:#b93d0b; --obg:rgba(185,61,11,0.09); --orange-bg:rgba(185,61,11,0.09);
  --red:#c42029; --rbg:rgba(196,32,41,0.09); --red-bg:rgba(196,32,41,0.09);
  --yellow:#945700; --ybg:rgba(232,163,0,0.13); --yellow-bg:rgba(232,163,0,0.13);
  --purple:#7438d6; --pbg:rgba(116,56,214,0.09); --purple-bg:rgba(116,56,214,0.09);
  --pink:#bd1e6a; --pkbg:rgba(189,30,106,0.09);
  --teal:#0a6f87; --tbg:rgba(10,111,135,0.09);
  --shadow:0 1px 2px rgba(16,32,48,.06), 0 2px 6px rgba(16,32,48,.05); --blue-dolgu:#1c64c8;
  }
[data-theme="atlas"] {
  --bg:#e7e1d7; --bg2:#f5f0e7; --bg3:#d8d0c3; --bg4:#ede7dc;
  --border:#b9afa1; --border2:#847a6e;
  --text:#25323a; --text2:#4d5a61; --text3:#606a6e;
  --accent:#315f78; --abg:rgba(49,95,120,0.08); --aborder:rgba(49,95,120,0.30);
  --accent-bg:rgba(49,95,120,0.08); --accent-border:rgba(49,95,120,0.30);
  --blue:#3d6485; --bbg:rgba(61,100,133,0.08); --blue-bg:rgba(61,100,133,0.08);
  --orange:#8b551b; --obg:rgba(139,85,27,0.08); --orange-bg:rgba(139,85,27,0.08);
  --red:#9e3f3b; --rbg:rgba(158,63,59,0.08); --red-bg:rgba(158,63,59,0.08);
  --yellow:#755c16; --ybg:rgba(117,92,22,0.08); --yellow-bg:rgba(117,92,22,0.08);
  --purple:#66517e; --pbg:rgba(102,81,126,0.08); --purple-bg:rgba(102,81,126,0.08);
  --pink:#874b65; --pkbg:rgba(135,75,101,0.08);
  --teal:#376d6a; --tbg:rgba(55,109,106,0.08);
  --shadow:0 1px 2px rgba(37,50,58,.09); --blue-dolgu:#3d6485;
  }
[data-theme="yumusak"] {
  --bg:#cbc7bf; --bg2:#dcd9d2; --bg3:#bdb9b0; --bg4:#d5d1ca;
  --border:#eeeeee; --border2:#84827f;
  --text:#1f1d1a; --text2:#474440; --text3:#53514c;
  --accent:#13574a; --abg:rgba(19,87,74,0.08); --aborder:rgba(19,87,74,0.3);
  --accent-bg:rgba(19,87,74,0.08); --accent-border:rgba(19,87,74,0.3);
  --blue:#1a507e; --bbg:rgba(26,80,126,0.08); --blue-bg:rgba(26,80,126,0.08);
  --orange:#763f0b; --obg:rgba(118,63,11,0.08); --orange-bg:rgba(118,63,11,0.08);
  --red:#94201c; --rbg:rgba(148,32,28,0.08); --red-bg:rgba(148,32,28,0.08);
  --yellow:#644904; --ybg:rgba(100,73,4,0.08); --yellow-bg:rgba(100,73,4,0.08);
  --purple:#5a3f89; --pbg:rgba(90,63,137,0.08); --purple-bg:rgba(90,63,137,0.08);
  --pink:#8f1e52; --pkbg:rgba(143,30,82,0.08);
  --teal:#115564; --tbg:rgba(17,85,100,0.08);
  --shadow:0 1px 3px rgba(16,32,48,.10); --blue-dolgu:#1a507e;
  }
[data-theme="los"] {
  --bg:#373d47; --bg2:#424956; --bg3:#2e343d; --bg4:#3d444f;
  --border:#535558; --border2:#6f7377;
  --text:#ffffff; --text2:#bec4cb; --text3:#a6abb1;
  --accent:#9ce4d0; --abg:rgba(156,228,208,0.12); --aborder:rgba(156,228,208,0.3);
  --accent-bg:rgba(156,228,208,0.12); --accent-border:rgba(156,228,208,0.3);
  --blue:#b5dafa; --bbg:rgba(181,218,250,0.12); --blue-bg:rgba(181,218,250,0.12);
  --orange:#f8cfa6; --obg:rgba(248,207,166,0.12); --orange-bg:rgba(248,207,166,0.12);
  --red:#ffc9c9; --rbg:rgba(255,201,201,0.12); --red-bg:rgba(255,201,201,0.12);
  --yellow:#ffd064; --ybg:rgba(255,208,100,0.12); --yellow-bg:rgba(255,208,100,0.12);
  --purple:#ddceff; --pbg:rgba(221,206,255,0.12); --purple-bg:rgba(221,206,255,0.12);
  --pink:#ffc7df; --pkbg:rgba(255,199,223,0.12);
  --teal:#89e4ef; --tbg:rgba(137,228,239,0.12);
  --shadow:0 2px 12px rgba(0,0,0,.42); --blue-dolgu:#b5dafa;
  }
[data-theme="dark"] {
  --bg:#0f1419; --bg2:#161d25; --bg3:#1c2630; --bg4:#0a1018;
  --border:#2f3335; --border2:#4b5054;
  --text:#bccad3; --text2:#8c979e; --text3:#7a848a;
  --accent:#27ba93; --abg:rgba(39,186,147,0.12); --aborder:rgba(39,186,147,0.3);
  --accent-bg:rgba(39,186,147,0.12); --accent-border:rgba(39,186,147,0.3);
  --blue:#54a9ff; --bbg:rgba(84,169,255,0.12); --blue-bg:rgba(84,169,255,0.12);
  --orange:#f78740; --obg:rgba(247,135,64,0.12); --orange-bg:rgba(247,135,64,0.12);
  --red:#ff7e7e; --rbg:rgba(255,126,126,0.12); --red-bg:rgba(255,126,126,0.12);
  --yellow:#f0b429; --ybg:rgba(240,180,41,0.13); --yellow-bg:rgba(240,180,41,0.13);
  --purple:#bc8fff; --pbg:rgba(188,143,255,0.12); --purple-bg:rgba(188,143,255,0.12);
  --pink:#ff76b8; --pkbg:rgba(255,118,184,0.12);
  --teal:#1db5cc; --tbg:rgba(29,181,204,0.12);
  --shadow:0 2px 12px rgba(0,0,0,.42); --blue-dolgu:#54a9ff;
  }


/* =========================================================
   SÜRÜM 8.15 — KONU RENKLERİ (KATEGORİ PALETİ)
   Sekiz konu grubunun her biri kalıcı bir renk kimliği taşır:
     acil kırmızı · cihaz mavi · perioperatif yeşil · hasta grupları mor
     cerrahi turuncu · rejyonal pembe · araçlar sarı · eğitim camgöbeği
   --k-x   canlı ton: çizgi, nokta, dolgu, ikon kutusu
   --k-x-m mürekkep ton: yazı ve beyaz yazılı dolgu zemini
           (açık temalarda kart zemininde ≥5:1 ölçüldü)
   Yan menü/ana sayfa kullanımı renk.css'te. Modül sayfaları
   <html data-renk="..."> ile kendi grubunun rengini VURGU rengi
   olarak alır (aşağıda): sekmeler, düğmeler, başlık simgeleri
   o renge döner; kullanıcı hangi bölümde olduğunu renkten bilir.
========================================================= */
html, html[data-theme="light"], html[data-theme="atlas"], html[data-theme="yumusak"] {
  --k-acil:#e5484d;     --k-acil-m:#c42029;
  --k-cihaz:#2f7de1;    --k-cihaz-m:#1c64c8;
  --k-periop:#12a37a;   --k-periop-m:#0a735e;
  --k-hasta:#8b5cf6;    --k-hasta-m:#7438d6;
  --k-cerrahi:#f2711c;  --k-cerrahi-m:#b93d0b;
  --k-rejyonal:#d6409f; --k-rejyonal-m:#bd1e6a;
  --k-arac:#e8a300;     --k-arac-m:#9a6700;
  --k-egitim:#0ea5c6;   --k-egitim-m:#0a6f87;
  --k-fav:#e8a300;      --k-fav-m:#9a6700;
  --g-on:#ffffff;
  --serit:linear-gradient(90deg,#e5484d 0%,#f2711c 16%,#e8a300 32%,#12a37a 50%,#0ea5c6 64%,#2f7de1 78%,#8b5cf6 100%);
}
html[data-theme="los"], html[data-theme="dark"] {
  --k-acil:#ff6b6b;     --k-acil-m:#ff8a8a;
  --k-cihaz:#5aa2ff;    --k-cihaz-m:#7db5ff;
  --k-periop:#2fd4a0;   --k-periop-m:#4fdcb0;
  --k-hasta:#a98bff;    --k-hasta-m:#bba3ff;
  --k-cerrahi:#ff9147;  --k-cerrahi-m:#ffa468;
  --k-rejyonal:#f472c0; --k-rejyonal-m:#f78fcd;
  --k-arac:#f5c13d;     --k-arac-m:#f7cd62;
  --k-egitim:#38c8e6;   --k-egitim-m:#62d4ec;
  --k-fav:#f5c13d;      --k-fav-m:#f7cd62;
  --g-on:#0d1218;
  --serit:linear-gradient(90deg,#ff6b6b 0%,#ff9147 16%,#f5c13d 32%,#2fd4a0 50%,#38c8e6 64%,#5aa2ff 78%,#a98bff 100%);
}


/* Modül sayfasının vurgu rengi = grubunun mürekkep tonu */
html[data-renk] {
  --accent:var(--rk); --abg:color-mix(in srgb, var(--rk) 10%, transparent);
  --aborder:color-mix(in srgb, var(--rk) 34%, transparent);
  --accent-bg:var(--abg); --accent-border:var(--aborder);
}
html[data-renk="acil"]     { --rk:var(--k-acil-m); }
html[data-renk="cihaz"]    { --rk:var(--k-cihaz-m); }
html[data-renk="periop"]   { --rk:var(--k-periop-m); }
html[data-renk="hasta"]    { --rk:var(--k-hasta-m); }
html[data-renk="cerrahi"]  { --rk:var(--k-cerrahi-m); }
html[data-renk="rejyonal"] { --rk:var(--k-rejyonal-m); }
html[data-renk="arac"]     { --rk:var(--k-arac-m); }
html[data-renk="egitim"]   { --rk:var(--k-egitim-m); }


/* ── MOBİL GENEL DÜZELTMELERİ ── */
img, video { max-width: 100%; height: auto; }

/* Uzun kelime/URL kırma — SADECE gerçekten sığmayan kelimelerde.
   NOT: eski "overflow-wrap:anywhere" normal Türkçe kelimeleri de ortadan bölüyordu
   (kelimeler heceye ayrılmış gibi görünüyordu). "break-word" sadece zorunlu hâlde böler. */
.card-body, .dlist, .dl, .hl, .formula-note, .dlist li,
.dl li, .check-text, .mode-desc, .card-desc, .page-subtitle,
table td, table th { word-break: normal; overflow-wrap: break-word; hyphens: manual; }
/* 8.14: genel güvenlik ağı — uzun URL, e-posta veya İngilizce bileşik
   ifade dar ekranda paragraf kutusundan taşmasın (legal, rejyonal tablo
   hücresindeki kalın metinler, özellikli durum kutuları). */
p, li, dd, dt, label, td b, td strong, .kutu .v, .kutu .a { overflow-wrap: break-word; }
/* 8.14: form alanları hiçbir zaman kabından geniş olmasın. Uzun
   seçenek metni olan <select> ızgara sütununu iterek iframe içinde
   yatay kaymaya yol açıyordu (nöromüsküler reversal formu). */
select, input, textarea { max-width: 100%; }
.calc-grid > *, .calc-field { min-width: 0; }

/* Tüm sayfada otomatik heceleme kapalı */
html, body { hyphens: manual; -webkit-hyphens: manual; }

/* Tablo taşmasını engelle. Her kartı kaydırma alanına çevirmek dokunmatik
   tarayıcıda ilk dikey hareketin karta takılmasına yol açıyordu. Yalnızca
   gerçekten tablo içeren kartlar yatay taşma alanı olur. */
.data-table-wrap { overflow-x: auto; border-radius: var(--radius); }
.card-body { overflow-x: visible; }
.card-body:has(table) { overflow-x: auto; }

/* Çok küçük ekranlar (< 480px) */
@media (max-width: 480px) {
  .page-title { font-size:calc(18px * var(--ah-yazi, 1)) !important; }
  .card-title { font-size:calc(13px * var(--ah-yazi, 1)); }
  .page-subtitle { font-size:calc(13px * var(--ah-yazi, 1)); }
  .hl { font-size:calc(12px * var(--ah-yazi, 1)); padding: 9px 12px; }
  .formula-eq { font-size:calc(12px * var(--ah-yazi, 1)); padding: 8px 10px; }
  .calc-result-val { font-size:calc(16px * var(--ah-yazi, 1)); }
  .calc-result-label { font-size:calc(10px * var(--ah-yazi, 1)); }
  .badge { font-size:calc(9px * var(--ah-yazi, 1)); padding: 2px 5px; }
  .tab-btn { font-size:calc(12px * var(--ah-yazi, 1)); padding: 8px 12px; }
  .dlist li { font-size:calc(12px * var(--ah-yazi, 1)); }
}

/* ── FEEDBACK WIDGET ── */
.feedback-widget {
  background: var(--ybg, rgba(176,128,0,.08));
  border: 1.5px solid var(--yellow, #b08000);
  border-left: 4px solid var(--yellow, #b08000);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  transition: box-shadow .2s;
}
.feedback-widget:focus-within { box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.feedback-header { display: flex; align-items: center; gap: 10px; }
.feedback-icon { font-size:calc(20px * var(--ah-yazi, 1)); flex-shrink: 0; }
.feedback-header-text { flex: 1; }
.feedback-title { font-size:calc(14px * var(--ah-yazi, 1)); font-weight:700; color: var(--text); }
.feedback-sub { font-size:calc(11.5px * var(--ah-yazi, 1)); color: var(--text3); margin-top: 1px; }
.feedback-toggle {
  background: transparent;
  border: 1px solid var(--yellow, #b08000);
  color: var(--yellow, #b08000);
  border-radius: 6px; padding: 5px 12px;
  font-size:calc(12px * var(--ah-yazi, 1)); font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s; font-family: var(--font);
}
.feedback-toggle:hover { background: var(--yellow, #b08000); color: #fff; }
.feedback-body { display: none; margin-top: 12px; }
.feedback-body.open { display: block; }
.feedback-textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border2, #ccd);
  background: var(--bg2); color: var(--text);
  font-family: var(--font); font-size:calc(13px * var(--ah-yazi, 1));
  resize: vertical; min-height: 70px; line-height: 1.5;
  outline: none; transition: border-color .15s;
}
.feedback-textarea:focus { border-color: var(--yellow, #b08000); }
.feedback-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; gap: 8px; flex-wrap: wrap;
}
.feedback-anon { font-size:calc(11px * var(--ah-yazi, 1)); color: var(--text3); }
.feedback-submit {
  background: var(--yellow, #b08000); border: none; color: #fff;
  border-radius: 6px; padding: 7px 18px; font-size:calc(13px * var(--ah-yazi, 1));
  font-weight: 700; cursor: pointer; transition: opacity .15s; font-family: var(--font);
}
.feedback-submit:hover { opacity: .85; }
.feedback-submit:disabled { opacity: .5; cursor: not-allowed; }
.feedback-status { font-size:calc(12.5px * var(--ah-yazi, 1)); margin-top: 6px; min-height: 18px; }

/* ── AKILLI KART (X KAPATMA BUTONU) ── */
.grid2, .grid3, .drug-grid, .cards, .mode-grid { align-items: start !important; }
.card.open, .drug-card.open { grid-column: 1 / -1 !important; border-color: var(--accent) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important; transition: all 0.25s ease; }
.close-x-btn { display: none; background: var(--red, #cc2222); color: #fff; border: none; width: 24px; height: 24px; border-radius: 50%; font-size:calc(12px * var(--ah-yazi, 1)); font-weight:700; cursor: pointer; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; transition: transform 0.15s, background 0.15s; }
.card.open .close-x-btn, .drug-card.open .close-x-btn { display: flex !important; }
.close-x-btn:hover { transform: scale(1.1); background: #ff0000; }

/* =========================================================
   v2 — GENEL YAZI ÖLÇEĞİ (KÜÇÜLTME)
   Bu blok en sonda durmalı; sayfa içi <style> bloklarını ezmek için
   !important kullanılıyor. Punto değiştirmek isterseniz sadece
   buradaki px değerlerini değiştirin, başka yere dokunmayın.
========================================================= */
/* =========================================================
   GÖVDE YAZI TİPİ — SÜRÜM 8.4'te DÜZELTİLDİ

   HATA: --font değişkeni tanımlıydı ve data-yazitipi ile
   değişiyordu, ama HİÇBİR YERDE gövdeye uygulanmıyordu.
   Yalnızca 6 dağınık öğe font-family:var(--font) kullanıyordu.
   Sonuç: ayarlardan yazı tipi seçmek görünürde hiçbir şey
   değiştirmiyordu.

   Aşağıdaki kural zinciri --font'u gerçekten uygular. Form
   öğeleri (input/select/button/textarea) tarayıcı varsayılanını
   kullanır ve inherit etmez; onları ayrıca bağlamak gerekir.
========================================================= */
/* =========================================================
   ZEMİN VE METİN — SÜRÜM 8.4'te DÜZELTİLDİ

   ŞİKÂYET: "Koyu temalarda koyuluk sadece bazı kısımlara
   uygulanıp büyük kısmına uygulanmıyor."

   SEBEP: 29 sayfanın 8'i kendi <style> bloğunda
   body{background:var(--bg)} yazmayı unutmuştu. O sayfalarda
   yalnızca kartların ve kutuların zemini koyuydu; aralarındaki
   BÜYÜK boşluk tarayıcı varsayılanı olan beyaz kalıyordu.

   Artık zemin ve metin rengi burada, tek yerden veriliyor.
   Sayfaların kendi kuralları bunu ezebilir (aynı özgüllük,
   sonra gelen kazanır) ama unutulduğunda doğru davranış olur.
========================================================= */
body {
  font-size: calc(13px * var(--ah-yazi, 1));
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}
/* Tarayıcı arayüz öğeleri de temaya uysun (kaydırma çubuğu,
   form denetimleri, adres çubuğu rengi). */
html { color-scheme: light; }
html[data-theme="los"], html[data-theme="dark"] { color-scheme: dark; }
input, select, textarea, button { font-family: inherit; }

/* Başlıklar kendi yazı tipini kullanır; --font-heading de
   data-yazitipi ile birlikte değişir. */
h1, h2, h3, h4, h5, h6,
.page-title, .sec-title, .card-title, .kart-ad,
.hs-baslik, .alt-bas, .drug-calc-title, .calc-title {
  font-family: var(--font-heading);
}

/* Sayısal/teknik alanlar okunaklı kalsın diye monospace kalır —
   yazı tipi seçiminden etkilenmez, bu bilinçlidir. */
code, kbd, samp, pre, .mono, .val, .dose-row-val { font-family: var(--font-mono); }

/* Başlıklar: dar ekranda taşmasın, kelime ortadan bölünmesin.
   clamp(en küçük, ekranla ölçekli, en büyük) */
.page-title      { font-size: clamp(16px, 4.4vw, 19px) !important; }
.page-subtitle   { font-size:calc(12px * var(--ah-yazi, 1)) !important; }
.section-title   { font-size:calc(13px * var(--ah-yazi, 1)) !important; }

h1, h2, h3, h4, .page-title, .page-subtitle, .card-title, .hdr-title, .sec-title {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  min-width: 0;
  line-height: 1.25;
}

.card-title, .drug-title, .mode-name, .formula-title,
.s-result-title, .nmb-level-title, .calc-title { font-size:calc(12.5px * var(--ah-yazi, 1)) !important; }

.card-desc, .mode-desc, .s-result-text, .formula-note,
.nmb-level-desc, .mode-full, .feedback-sub { font-size:calc(11px * var(--ah-yazi, 1)) !important; }

.dlist li, .dl li, .check-text, .data-table,
table td, table th, .hl { font-size:calc(11.5px * var(--ah-yazi, 1)) !important; }

.badge, .check-pri, .s-result-section,
.calc-result-label, .prog-label { font-size:calc(9.5px * var(--ah-yazi, 1)) !important; }

.calc-result-val, .prog-pct { font-size:calc(17px * var(--ah-yazi, 1)) !important; }
.calc-field, .brand-info    { font-size:calc(11.5px * var(--ah-yazi, 1)) !important; }
.nav-link                   { font-size:calc(12.5px * var(--ah-yazi, 1)) !important; }
.logo-name                  { font-size:calc(16px * var(--ah-yazi, 1)) !important; }

/* =========================================================
   v2 — ALT BAŞLIK / AÇIKLAMA DÜZENİ
   Eskiden: "› Başlık:  açıklama" aynı satırda → açıklamalar
   her satırda farklı yerden başlıyordu (hizasız görünüm).
   Şimdi:   "› Başlık:"
            "  açıklama"  → hepsi aynı hizadan başlar.
========================================================= */
.dlist li, .dl li {
  display: block !important;
  position: relative;
  padding-left: 15px !important;
}
.dlist li::before, .dl li::before {
  position: absolute;
  left: 0;
  top: 5px;
  margin: 0 !important;
}
.dlist li strong, .dl li strong {
  display: block;
  margin-bottom: 2px;
  line-height: 1.35;
}
/* Başlığın hemen ardındaki açıklama metni biraz daha küçük ve soluk */
.dlist li, .dl li { line-height: 1.55 !important; }

/* =========================================================
   v3 — MAPLESON ŞEMALARI
   Tablo içinde küçük devre çizimleri. Sistemleri ayıran tek
   şey bileşenlerin hastaya göre konumu olduğu için görsel
   karşılaştırma metinden çok daha anlaşılırdır.
========================================================= */
.mp-h { padding: 4px 6px !important; }
.mp-sema { display: block; max-width: 100%; height: auto; }
.mp-ac {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 12px; font-size:calc(10.5px * var(--ah-yazi, 1)); white-space: nowrap;
}
/* Açıklama simgeleri şemadaki çizimin birebir küçültülmüş hâlidir —
   kutucuk yerine gerçek şekil kullanılır ki karşılaştırma doğru olsun. */
.mp-sim { flex-shrink: 0; vertical-align: middle; }

/* Dar ekranda şema kolonu tabloyu zorlamasın */
@media (max-width: 640px) {
  .mp-sema { width: 132px; height: 36px; }
}

/* =========================================================
   v3 — GÖMÜLÜ MODÜL BÖLÜMLERİNDE KOMPAKT BAŞLIK
   Bu bölümlerin gövdesi bir iframe olduğu için başlık bloğu
   ne kadar yer kaplarsa asıl içerik o kadar aşağı iniyor.
   Bu yüzden yalnızca bu bölümlerde başlık sıkıştırılır.
========================================================= */
.gomulu-bolum .page-title {
  font-size: clamp(15px, 3.8vw, 17px) !important;
  margin-bottom: 1px;
}
.gomulu-bolum .page-subtitle {
  font-size:calc(11px * var(--ah-yazi, 1)) !important;
  margin-bottom: 8px !important;
  line-height: 1.45;
}
.tam-ekran {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 4px;
}
.tam-ekran:hover { text-decoration: underline; }

/* Ana içerik alanının üst boşluğu da bu bölümlerde azaltılır */
.gomulu-bolum { margin-top: -8px; }

/* =========================================================
   v3 — İKON SETİ
   SVG ikonlar currentColor kullanır: bulundukları yerin
   rengini alır, altı temanın hepsinde uyumlu görünürler.
========================================================= */
.ah-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
}
.ah-ikon svg { display: block; }

/* İkonlar kendi anlamlı renklerini taşır; kapsayıcı renk dayatmaz */
.hs-k-i { line-height: 0; }
.hs-a-i { display: block; line-height: 0; margin-bottom: 2px; }

/* Sidebar ikonları — emoji yerine SVG geldiği için hizayı sabitle */
.nav-icon.ah-ikon { width: 20px; height: 20px; }
.nav-link.nav-sub .nav-icon.ah-ikon { width: 17px; height: 17px; }
.nav-link.nav-sub .nav-icon.ah-ikon svg { width: 17px; height: 17px; }


/* Favori satırındaki küçük ikon */
.fav-item .nav-icon svg { width: 16px; height: 16px; }

/* Sekme düğmeleri: ikon + metin yan yana ve dikey ortalı */
.tab-btn, .kv-tab, .rs-tab, .hs-tab, .guv-tab, .g-cat, .cat-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.tab-btn .ah-ikon svg, .kv-tab .ah-ikon svg, .rs-tab .ah-ikon svg,
.hs-tab .ah-ikon svg, .guv-tab .ah-ikon svg, .g-cat .ah-ikon svg {
  width: 15px; height: 15px;
}

/* Kart başlığı ikonları */
.hk-ico .ah-ikon svg { width: 17px; height: 17px; }

/* Yuvarlak zeminli kart ikonları (ör. genel bakış kartları) */
.card-icon .ah-ikon svg { width: 18px; height: 18px; }
.card-icon { display: flex; align-items: center; justify-content: center; }

/* Ana sayfa acil erişim ve kutucuk ikonları */
.hs-a-i .ah-ikon svg { width: 19px; height: 19px; }

/* Bölüm başlıklarında ikon + metin hizası */
.sec-title, .hs-baslik, .drug-calc-title, .g-title, .kart-ad,
.card-title, .calc-title, .nav-group-label, .feedback-title, .alt-bas {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sec-title .ah-ikon svg, .drug-calc-title .ah-ikon svg,
.card-title .ah-ikon svg, .calc-title .ah-ikon svg,
.kart-ad .ah-ikon svg, .alt-bas .ah-ikon svg { width: 15px; height: 15px; }
.hs-baslik .ah-ikon svg, .nav-group-label .ah-ikon svg { width: 13px; height: 13px; }
.g-title .ah-ikon svg { width: 18px; height: 18px; }

/* .hs-baslik'in sağa uzanan çizgisi ikon eklendikten sonra da çalışsın */
.hs-baslik::after { flex: 1; }


/* Yazdırma çıktısında ikonlar siyah çizgi olarak çıksın */
@media print {
  .ah-ikon .ah-dolgu { display: none !important; }
  .ah-ikon .ah-cizgi { stroke: #000 !important; }
}

/* =========================================================
   v3 — ORTAK YAZDIRMA DÜZENİ (A4)
   Amaç: ameliyathane duvarına asılabilir, okunaklı siyah-beyaz çıktı.
   Ekran arayüzü (sekmeler, düğmeler, menüler) çıktıda görünmez;
   sekmeli modüllerde SADECE açık olan sekme yazdırılır.
   Bir sayfaya "tümünü yazdır" gerekiyorsa .yaz-hepsi sınıfı eklenir.
========================================================= */
@media print {
  /* Sayfa kurulumu.
     @page kenar boşluğu SIFIR bırakılıyor; çünkü tarayıcılar kenar boşluğu
     olmayan sayfaya kendi üstbilgi/altbilgisini (dosya yolu, URL, tarih,
     sayfa numarası) BASMAZ. Gerçek kenar boşluğunu body'ye veriyoruz.
     Not: Yazdırma penceresinde "Üstbilgi ve altbilgi" seçeneği elle
     işaretlenirse tarayıcı yine de basar — o ayar sayfanın denetiminde değildir. */
  @page { size: A4; margin: 0; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 9.5pt !important;
    line-height: 1.45 !important;
  }
  body { padding: 13mm 14mm !important; }

  /* Ekrana özgü bileşenleri gizle */
  header, aside, nav, footer,
  .hdr, .sidebar, .sb-toggle, .nav-toggle, .theme-picker, .overlay,
  .feedback-widget, .gs-btn, .gs-tam, .hs-ara, .hs-sonuc, .hs-acil,
  .cl-toolbar, .cl-modes, .fav-btn, .close-x-btn, .card-toggle,
  .kv-tabs, .rs-tabs, .hs-tabs, .g-search-wrap, .guv-tabs,
  .hesap-btn, .calc-btn, .hb, .tools, #hint, #zoomlbl,
  .hs-surum, .tab-btn, .cat-btn {
    display: none !important;
  }

  /* Sekmeli modüllerde yalnızca AÇIK sekme yazdırılır */
  .kv-pane:not(.on), .rs-pane:not(.on), .hs-pane:not(.on),
  .guv-panel:not(.active) { display: none !important; }
  .kv-pane.on, .rs-pane.on, .hs-pane.on, .guv-panel.active { display: block !important; }

  /* Ana uygulamada yalnızca açık bölüm */
  .section { display: none !important; }
  .section.active { display: block !important; }

  /* Kapalı akordiyonlar çıktıda açılır — bilgi kaybolmasın */
  .card-body, .drug-body, .alt-icerik { display: block !important; }
  .alt-blok .alt-bas::after { content: '' !important; }

  /* Genişlik ve kutu görünümü */
  main, .wrap, .layout, .main { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .app { display: block !important; }

  .kart, .hk, .fk, .kutu, .hht-k, .not, .hl, .card, .drug-card, .ozet-h, .pk-h {
    border: 1px solid #999 !important;
    background: #fff !important;
    box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Renkli vurgular gri tonlamada da ayırt edilsin */
  .not.tehlike, .kutu.acil, .msj.r { border-left: 4px solid #000 !important; }
  .not.uyari,   .msj.u            { border-left: 4px solid #666 !important; }
  * { color: #000 !important; }
  .kutu-v, .ozet-v, .ck-v, .pk-v, td.m { font-weight: 700 !important; }

  /* Tablolar bölünmesin, taşma kaydırması kalksın */
  .tblwrap, .table-responsive, .data-table-wrap, .card-body { overflow: visible !important; }
  table { width: 100% !important; min-width: 0 !important; border-collapse: collapse !important; }
  table th, table td { border: 1px solid #999 !important; padding: 4px 6px !important; font-size: 8.5pt !important; }
  table thead { display: table-header-group; }     /* başlık her sayfada tekrarlansın */
  table tr { break-inside: avoid; page-break-inside: avoid; }

  /* Başlıklar tek başına sayfa sonunda kalmasın */
  h1, h2, h3, .sec-title, .kart-ad, .page-title, .g-letter, .hs-baslik {
    break-after: avoid; page-break-after: avoid;
  }

  /* Bağlantı adresleri basılmasın (ekran içi gezinme bağlantıları) */
  a[href^="#"]::after, a[href^="javascript"]::after { content: '' !important; }

  /* Çıktıya kimlik ve tarih şeridi */
  }

/* Yazdırma başlığı yalnızca çıktıda görünür */
/* =========================================================
   v3 — GÖMÜLÜ MODÜLLERDE BAŞLIK YİNELENMESİNİ ÖNLE
   Alt modüller ana sayfada iframe içinde açıldığında, ana
   sayfa zaten bölüm başlığını gösteriyor. Modülün kendi
   başlık çubuğundaki aynı başlık gereksiz yer kaplıyordu.
   Tam ekran açıldığında (tek başına) başlık geri gelir.
========================================================= */
body.gomulu .hdr-title { display: none; }

/* Modülün KENDİ üst başlık bloğu gömülüyken tümüyle gizlenir.
   Ana sayfa zaten bölüm başlığını gösteriyor; ikinci başlık hem
   yineleme hem de boşuna dikey yer kaybıydı. */
body.gomulu > header,
body.gomulu .g-head,
body.gomulu .wrap > .header { display: none !important; }

/* Bazı modüller başlığını <header> ya da .header ile değil, doğrudan
   .page-title / .page-subtitle ile yazıyor (pacu.html, refleksler.html).
   Yukarıdaki kural onları yakalamadığı için ana sayfadaki başlıkla
   birlikte AYNI başlık iki kez görünüyordu.

   Yalnızca .wrap'ın DOĞRUDAN çocuğu olanlar gizlenir: modül içindeki
   bölüm başlıkları (örneğin cihaz.html'de "Gaz Sistemleri", "Ventilatör")
   bir sekme panelinin içinde durur, doğrudan çocuk değildir ve
   etkilenmez. Alt seçici (boşluk) kullanılsaydı onlar da kaybolurdu. */
body.gomulu .wrap > .page-title,
body.gomulu .wrap > .page-subtitle { display: none !important; }

/* Başlık gidince üstteki boşluğu da topla */
body.gomulu .wrap { padding-top: 6px !important; }
body.gomulu .g-search-wrap { padding-top: 4px; }
body.gomulu .hdr {
  min-height: 0;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  justify-content: flex-end;
}
/* Başlıktan başka denetimi olmayan çubuğu tamamen gizle
   (.hdr-yalniz-baslik sınıfı sayfa yüklenirken app.js tarafından eklenir;
    :has() desteklemeyen eski tarayıcılarda da çalışsın diye) */
body.gomulu .hdr.hdr-yalniz-baslik { display: none; }
/* Gömülüyken "Ana Sayfa" düğmesi anlamsız */
body.gomulu .hdr-btn[onclick*="index.html"] { display: none; }

/* =========================================================
   v3 — FAVORİ SİSTEMİ
   Yıldız butonu; ilaç kartlarında, bölümlerde ve
   hesaplayıcılarda aynı görünümü kullanır.
========================================================= */
.fav-btn {
  background: transparent; border: none; cursor: pointer;
  font-size:calc(15px * var(--ah-yazi, 1)); line-height: 1; padding: 2px 4px;
  border-radius: 6px; flex-shrink: 0;
  filter: grayscale(1); opacity: .38;
  transition: opacity .15s, filter .15s, transform .15s;
}
.fav-btn:hover { opacity: 1; filter: grayscale(0); transform: scale(1.15); }
.fav-btn.on { opacity: 1; filter: grayscale(0); }
.fav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Sidebar'daki "Favorilerim" bölümü */
.fav-nav-empty {
  font-size:calc(10.5px * var(--ah-yazi, 1)); color: var(--text3); padding: 4px 18px 8px;
  line-height: 1.5; font-style: italic;
}
.nav-link.fav-item { padding-left: 30px; font-size:calc(12px * var(--ah-yazi, 1)); }
.nav-link.fav-item .fav-x {
  margin-left: auto; opacity: .4; font-size:calc(13px * var(--ah-yazi, 1));
  padding: 0 2px; border-radius: 6px;
}
.nav-link.fav-item .fav-x:hover { opacity: 1; color: var(--red); }

/* =========================================================
   v2 — ÜST ŞERİT (HEADER) TAŞMA DÜZELTMESİ
   Alt sayfaların .hdr çubuğu sabit 52px yükseklikteydi; dar
   ekranda başlık ve butonlar yan yana sığmayıp taşıyordu.
========================================================= */
.hdr {
  height: auto !important;
  min-height: 52px;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
.hdr-title { flex: 1 1 auto; }
.hdr-right, .hdr-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Rejyonal sayfasının ortalanmış başlığı */
.header h1 { font-size: clamp(16px, 4.6vw, 22px) !important; }

@media (max-width: 480px) {
  .card-title      { font-size:calc(12px * var(--ah-yazi, 1)) !important; }
  .dlist li, .dl li, table td, table th { font-size:calc(11px * var(--ah-yazi, 1)) !important; }
  .hdr-title       { font-size:calc(13px * var(--ah-yazi, 1)) !important; }
}
/* =========================================================
   v3.2 — ARAMA SONUCUNU VURGULAMA
   Arama sonucuna tıklandığında yalnızca bölüme gitmek yeterli
   değildi; kullanıcı aradığı satırı gözüyle tekrar aramak
   zorunda kalıyordu. Artık hedef öğe ekrana getirilir ve
   üç kez yanıp sönerek kendini gösterir.
========================================================= */
.ah-vurgu {
  animation: ah-vurgu-yanip 2.6s ease-in-out 1;
  border-radius: 6px;
  outline: 2px solid transparent;
  outline-offset: 3px;
  scroll-margin-top: 78px;
  scroll-margin-bottom: 40px;
}
@keyframes ah-vurgu-yanip {
  0%   { background: var(--ybg); outline-color: var(--yellow); }
  17%  { background: transparent; outline-color: transparent; }
  34%  { background: var(--ybg); outline-color: var(--yellow); }
  51%  { background: transparent; outline-color: transparent; }
  68%  { background: var(--ybg); outline-color: var(--yellow); }
  100% { background: transparent; outline-color: transparent; }
}
/* Hareket azaltma tercihi açıksa yanıp sönme yerine sabit çerçeve */
@media (prefers-reduced-motion: reduce) {
  .ah-vurgu { animation: none; outline-color: var(--yellow); background: var(--ybg); }
}
/* Arama kutusu odağı sayfayı zıplatmasın */
.ah-vurgu:focus { outline-color: var(--accent); }

/* =========================================================
   v3.8 — KISA BİLDİRİM ŞERİDİ
   Favori eklenip çıkarıldığında ekranın altında kısa bir onay.
   (Uzun basma menüsü kaldırıldı; başlıklarda metin seçimini
    engelleyen kural da kalktı, metinler yeniden seçilebilir.)
========================================================= */
.ah-bildirim {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 10000; max-width: min(340px, calc(100vw - 28px));
  background: var(--bg2); border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 15px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font); font-size:calc(12.5px * var(--ah-yazi, 1)); font-weight: 700; color: var(--text);
  animation: ah-bildirim-gir .18s ease-out;
}
@keyframes ah-bildirim-gir { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media print { .ah-bildirim { display: none !important; } }

/* =========================================================
   YAZI BOYUTU (sürüm 5.2)
   Tüm font-size kuralları calc(Npx * var(--ah-yazi, 1))
   biçimindedir. Değeri app.js ayarlar; burada yalnızca
   varsayılanı tanımlıyoruz ki değişken hiç kurulmasa bile
   sayfa normal boyutta açılsın.

   YENİ KURAL EKLERKEN: font-size'ı düz px yazmayın, bu kalıbı
   kullanın — yoksa o metin kullanıcı yazıyı büyütünce büyümez.
   (t44 testi bunu denetliyor.)
========================================================= */
:root { --ah-yazi: 1; }


/* ═══════════ ALT BİLGİ (index.html) ═══════════
   Modüllere giden gerçek <a href> bağlantılarını taşır; arama
   motorlarının içeriği bulabilmesi için gereklidir. */
.ah-altbilgi { border-top:1px solid var(--border); background:var(--bg2);
  margin-top:44px; padding:26px 0 34px; }
.ah-altbilgi-ic { max-width:1100px; margin:0 auto; padding:0 20px; }
.ah-ab-bas { font-size:calc(10px * var(--ah-yazi, 1)); font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--text3); margin-bottom:9px; }
.ah-ab-bag { font-size:calc(12px * var(--ah-yazi, 1)); line-height:2; color:var(--text3); }
.ah-ab-bag a { color:var(--text2); text-decoration:none; }
.ah-ab-bag a:hover { color:var(--accent); text-decoration:underline; }
.ah-ab-alt { margin-top:16px; font-size:calc(12px * var(--ah-yazi, 1)); color:var(--text3);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ah-ab-alt a { color:var(--accent); text-decoration:none; font-weight:600; }
.ah-ab-alt a:hover { text-decoration:underline; }
.ah-paylas-btn { margin-left:auto; font-family:inherit;
  font-size:calc(12px * var(--ah-yazi, 1)); font-weight:700; cursor:pointer;
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:8px 16px; min-height:38px; }
.ah-paylas-btn:hover { opacity:.9; }
.ah-ab-cekince { margin-top:16px; font-size:calc(11px * var(--ah-yazi, 1));
  color:var(--text3); line-height:1.7; max-width:760px; }
@media (max-width:600px) {
  .ah-paylas-btn { margin-left:0; width:100%; }
}


/* ═══════════ YAN MENÜ — AÇILIR KAPANIR GRUPLAR ═══════════
   Menü 30'dan fazla düz bağlantı içeriyordu ve kalabalıktı.
   Artık konu grupları hâlinde; hangi grubun açık olduğu
   localStorage'da (ah-menu-gruplar) saklanır. */
.nav-grup { border-bottom:1px solid var(--border); }
.nav-grup:last-child { border-bottom:none; }
button.nav-group-label {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;
  padding:11px 16px; color:var(--text3); font-weight:700; letter-spacing:.5px;
  font-size:calc(10px * var(--ah-yazi, 1)); text-transform:uppercase; min-height:42px;
}
button.nav-group-label:hover { color:var(--accent); }
button.nav-group-label::after {
  content:'▾'; font-size:calc(11px * var(--ah-yazi, 1));
  transition:transform .18s; color:var(--text3); flex-shrink:0; margin-left:8px;
}
.nav-grup.acik button.nav-group-label::after { transform:rotate(180deg); }
.nav-grup.acik button.nav-group-label { color:var(--accent); }
.nav-ic { display:none; padding-bottom:6px; }
.nav-grup.acik .nav-ic { display:block; }
/* İçinde etkin bağlantı varsa grup kapalı olsa bile belli olsun */
.nav-grup.icinde-aktif button.nav-group-label { color:var(--accent); }


/* ═══════════ OKUMA GENİŞLİĞİ ═══════════
   Modüllerin .wrap kapsayıcısı 1000–1100 px idi; bu, gövde
   metninde satır başına 121–134 karakter demekti. Okuma
   araştırmalarında önerilen aralık 50–75 karakter; uzun satırda
   göz her satır sonunda büyük bir sıçrama yapmak zorunda kalır
   ve yorulur.

   Çözüm: METİN dar, TABLO ve ŞEMA geniş. Kapsayıcı geniş kalır,
   yalnızca okunan öğeler sınırlanır — böylece tablolar sıkışmaz.
   Yeni modül eklerken paragraf ve listeleri .wrap içine koymanız
   yeterli; sınır kendiliğinden uygulanır. */
.wrap > p,
.wrap > ul, .wrap > ol,
.sec-sub, .kd-alt, .kt-alt,
.en-pane > p, .tk-pane > p, .ag-pane > p, .po-pane > p, .gr-pane > p, .cz-pane > p,
.en-pane > ul, .tk-pane > ul, .ag-pane > ul, .po-pane > ul,
.gr-pane > ul, .cz-pane > ul,
.en-pane ul.dl, .tk-pane ul.dl, .ag-pane ul.dl, .po-pane ul.dl, .gr-pane ul.dl,
.not, .hl, .msj, .kaynak, .cz-pane .dlist {
  max-width: 76ch;
}
/* Tablolar, şemalar, ızgaralar ve hesaplayıcılar tam genişlik kalır */
.tblwrap, .table-wrap, table, .kutular, .arac, .cikti,
.kk-liste, .kt-liste, .az-serit, .cards, .grid, .g2, .g3 {
  max-width: none;
}

/* Satır uzunluğu sınırı yalnızca geniş ekranda anlamlı */
@media (max-width: 900px) {
  .wrap > p, .wrap > ul, .wrap > ol, .sec-sub,
  .en-pane > p, .tk-pane > p, .ag-pane > p, .po-pane > p, .gr-pane > p, .cz-pane > p,
  .not, .hl, .msj, .kaynak { max-width: none; }
}


/* ═══════════════════════════════════════════════════════
   OKUNABİLİRLİK KATMANI

   Rejyonal Tercihi sayfasının tipografisi örnek alındı:
   o sayfada hiç 800 ağırlık yok, gövde 14 px, satır yüksekliği
   1,6–1,7 ve tablo hücreleri geniş. Diğer modüllerde gövde
   12,5 px, ağırlıklar 800'e kadar çıkıyor ve satırlar sıkışıktı.

   Aşağıdaki kurallar bu farkı tüm uygulamaya taşır. Sayfaların
   kendi <style> bloğundan SONRA geldiği için değil, seçici
   özgüllüğü daha düşük olduğu için yalnızca tanımlanmamış
   yerlerde etkir; modüllerin kendi 800'leri ayrıca 700'e
   çevrilmiştir.
   ═══════════════════════════════════════════════════════ */

/* Gövde metni — tüm modül panellerinde ortak taban */
.en-pane, .tk-pane, .ag-pane, .po-pane, .gr-pane, .cz-pane,
.wrap, .kk-liste {
  font-size: calc(14px * var(--ah-yazi, 1));
  line-height: 1.7;
}
.en-pane p, .tk-pane p, .ag-pane p, .po-pane p, .gr-pane p, .cz-pane p,
.en-pane li, .tk-pane li, .ag-pane li, .po-pane li, .gr-pane li, .cz-pane li {
  line-height: 1.7;
}
.en-pane p, .tk-pane p, .ag-pane p, .po-pane p, .gr-pane p, .cz-pane p {
  margin-bottom: 13px;
}

/* Tablo hücreleri — rejyonal tercihindeki gibi ferah */
.tblwrap table td, .table-wrap table td, table.t td, table.spec td {
  padding: 11px 13px;
  line-height: 1.65;
}
.tblwrap table th, .table-wrap table th, table.t th, table.spec th {
  padding: 10px 13px;
  font-weight: 600;
  letter-spacing: .3px;
}

/* Ağırlık tavanı: başlıklarda 700, satır içi vurguda 600.
   800 gözü yoruyordu ve her yerde kullanılıyordu. */
.en-pane b, .tk-pane b, .ag-pane b, .po-pane b, .gr-pane b, .cz-pane b,
.en-pane strong, .tk-pane strong, .ag-pane strong, .po-pane strong,
.gr-pane strong, .cz-pane strong,
.kk-metin b, .az-ad, .kk-metin strong {
  font-weight: 600;
}
.sec-title, .card-head, .arac-b, .kk-b, .cz-pane h3, .cz-pane h4 {
  font-weight: 700;
}

/* Uyarı ve bilgi kutuları — biraz daha ferah */
.not, .hl, .msj { line-height: 1.72; }

/* ═══════════════════════════════════════════════════════════════
   NOT KUTULARI — ORTAK TANIM
   Bu aile 14 modülün kendi <style> bloğunda ayrı ayrı tanımlıydı;
   elektrolit.html'de (17 kutu) ve index.html'de HİÇ TANIMLI DEĞİLDİ,
   dolayısıyla o kutular düz metin gibi görünüyordu — aralarında
   "konsantre potasyum asla doğrudan IV itilmez" uyarısı da vardı.
   Tanım buraya alındı. Modül içi <style> blokları bu dosyadan sonra
   geldiği için onları EZMEZ; yalnızca eksik olanı tamamlar.

   Dört basamak vardır ve anlamları ayrıdır:
     tehlike (kırmızı) — yanlış yapılırsa hasta ölür ya da kalıcı zarar görür
     uyari   (sarı)    — yanlış yapılırsa ciddi zarar doğar
     bilgi   (mavi)    — işe yarar ek bilgi
     sade    (sessiz)  — nüans, yöntem sınırı, bağlam
   ═══════════════════════════════════════════════════════════════ */
.not { border-radius:8px; padding:11px 13px; margin:12px 0;
  font-size:calc(13.5px * var(--ah-yazi, 1)); line-height:1.7; }
.not.uyari   { background:var(--ybg); border:1px solid var(--yellow); }
.not.tehlike { background:var(--rbg); border:1.5px solid var(--red); }
.not.bilgi   { background:var(--bbg); border:1px solid var(--blue); }
.not .b { display:block; margin-bottom:3px; font-weight:700; color:var(--text); }
.not.sade { background:none; border:none; border-left:3px solid var(--border);
  border-radius:0; padding:2px 0 2px 14px; margin:12px 0; color:var(--text2); }
.not.sade .b { color:var(--text2); }



/* =========================================================
   v6.7 — KENAR BOŞLUĞU TABANI

   Sorun: modüller tek başına açıldığında (Tam ekran bağlantısı,
   yer imi, arama motorundan giriş) tek kenar boşluğu modülün
   kendi .wrap kuralıydı; bu 10-14px'e kadar iniyor ve metin
   ekranın soluna yapışık görünüyordu. Modül dosyalarındaki
   taban 18px (geniş) / 15px (dar) olarak yükseltildi.

   Buradaki kurallar o düzenlemeyi tamamlar. Modülün kendi
   satır içi <style> bloğu bu dosyadan SONRA yüklendiği için
   kısa yol yazımı (padding: 12px 18px 60px) aynı özgüllükte
   bir kuralı ezer. Bu yüzden seçiciler bilerek daha özgül
   yazılmıştır (body:not(.gomulu) .wrap = 0,2,1).
========================================================= */

/* 1) Çentikli telefon yatay çevrildiğinde metin çentiğin altına
      girmesin — güvenli alan payı tabanı */
body:not(.gomulu) .wrap {
  padding-left:  max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
body:not(.gomulu) .main {
  padding-left:  max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}
@media (max-width: 700px) {
  body:not(.gomulu) .wrap,
  body:not(.gomulu) .main {
    padding-left:  max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}

/* Tek başına açılan modüllerde eski 50–60 px alt pay, kısa sayfalarda
   içerikten büyük bir boşluk gibi görünüyordu. Yüzen "yukarı çık"
   düğmesini örtecek kadar kısmadan daha dengeli bir tabana indirildi. */
body:not(.gomulu) .wrap,
body:not(.gomulu) .main {
  padding-bottom: 34px !important;
}
@media (max-width: 700px) {
  body:not(.gomulu) .wrap,
  body:not(.gomulu) .main { padding-bottom: 24px !important; }
}

/* 2) Gömülü (iframe) modda ana sayfanın main boşluğu (36/16px)
      zaten var; modülün kendi boşluğu üstüne binince dar ekranda
      içerik gereksiz daralıyordu. Gömülüyken 11px'e çekilir. */
body.gomulu .wrap,
body.gomulu .main {
  padding-left:  11px;
  padding-right: 11px;
}

/* Sürüm 8.1 — ALT BOŞLUK.
   Modüllerin .wrap ve .main kaplarında 60 piksellik alt boşluk var.
   Bu boşluk, modül tek başına açıldığında son satırın "yukarı çık"
   düğmesinin altında kalmaması için konulmuştu ve çerçeve içinde
   kayarken hiç görünmüyordu. Çerçeve artık içerik boyunda olduğu
   için o 60 piksel doğrudan ekranda duruyor; ana sayfanın kendi alt
   boşluğuyla üst üste binince modül ile "Modüller" başlığı arasında
   büyük bir boşluk oluşuyordu (en belirgin olarak resüsitasyon
   modülünde). Gömülüyken 12 piksele indirilir. */
body.gomulu .wrap,
body.gomulu .main {
  padding-bottom: 12px !important;
}
/* Modül içindeki son öğenin kendi alt boşluğu da eklenmesin */
body.gomulu .wrap > *:last-child,
body.gomulu .main > *:last-child { margin-bottom: 0 !important; }

/* 3) Kenar çubuklu modüllerde (ilaç, nöromonitör, vaporizatör)
      metin .wrap içinde değil .main içinde; satır uzunluğu sınırı
      oraya da uygulanmazsa geniş ekranda satırlar 1800px'e kadar
      uzuyor ve göz satır başını kaybediyordu. */
.main > p, .main > ul, .main > ol, .main > .sec-sub { max-width: 76ch; }
@media (max-width: 900px) {
  .main > p, .main > ul, .main > ol, .main > .sec-sub { max-width: none; }
}


/* =========================================================
   v6.7 — TABLO OKUNABİLİRLİĞİ (rejyonal tercihi görünümü)

   Rejyonal tercihi sayfası uygulamanın geri kalanından ayrı
   yazılmıştı ve tabloları iki şey yüzünden belirgin biçimde
   daha okunaklıydı:
     1. Her hücrede tam çerçeve (yalnız alt çizgi değil)
     2. Çift sıra numaralı satırlarda hafif zemin (zebra)
   Geniş bir tabloda göz satır başını kaybetmiyor. Bu katman
   o iki özelliği 114 tablonun tamamına taşır.

   ÖZGÜLLÜK NOTU: modüllerin kendi <style> bloğu bu dosyadan
   SONRA yüklenir. Modüldeki ".tbl td { border-bottom }" kuralı
   (0,1,1) ezilsin diye seçicilere fazladan bir öğe eklendi
   ("table.tbl tr td" = 0,1,3). Aynı sebeple :hover kuralı da
   burada yeniden yazıldı; yoksa zebra hover geri bildirimini
   yutuyordu.

   ZEBRA TONU: --text renginin %4'ü saydam üzerine karıştırılır.
   Ölçüm: satırlar arası fark 1.07-1.11:1 (ayırt edilebilir),
   ikincil metnin kontrast kaybı en fazla 5.92 → 5.47:1 (AA korunur).
   %6 ve üzeri metni okunmaz hale getirmeye başlıyordu.
========================================================= */

.tblwrap table, .data-table-wrap table, .table-wrap table,
table.t, table.tbl, table.spec, table.data-table,
table.rs, table.kv, table.kg, table.main, table.guv {
  border-collapse: collapse;
}

/* 1) Tam hücre çerçevesi */
.tblwrap table tr td, .tblwrap table tr th,
.data-table-wrap table tr td, .data-table-wrap table tr th,
.table-wrap table tr td, .table-wrap table tr th,
table.t tr td, table.t tr th,
table.tbl tr td, table.tbl tr th,
table.spec tr td, table.spec tr th,
table.data-table tr td, table.data-table tr th,
table.rs tr td, table.rs tr th,
table.kv tr td, table.kv tr th,
table.kg tr td, table.kg tr th {
  border: 1px solid var(--border);
}

/* 2) Zebra — yalnız gövde satırlarında, başlık satırı hariç */
.tblwrap table tbody tr:nth-child(even) td,
.data-table-wrap table tbody tr:nth-child(even) td,
.table-wrap table tbody tr:nth-child(even) td,
table.t tbody tr:nth-child(even) td,
table.tbl tbody tr:nth-child(even) td,
table.spec tbody tr:nth-child(even) td,
table.data-table tbody tr:nth-child(even) td,
table.rs tbody tr:nth-child(even) td,
table.kv tbody tr:nth-child(even) td,
table.kg tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* 3) Hover zebradan sonra gelmeli, yoksa çift satırlarda kayboluyor */
.tblwrap table tbody tr:hover td,
.data-table-wrap table tbody tr:hover td,
.table-wrap table tbody tr:hover td,
table.t tbody tr:hover td,
table.tbl tbody tr:hover td,
table.spec tbody tr:hover td,
table.data-table tbody tr:hover td,
table.rs tbody tr:hover td,
table.kv tbody tr:hover td,
table.kg tbody tr:hover td {
  background: var(--abg);
}

/* 4) Yazdırırken zebra mürekkep yakıyor ve gri fotokopide okunmuyor */
@media print {
  table tbody tr:nth-child(even) td { background: transparent !important; }
}

/* 5) color-mix desteklemeyen eski tarayıcılar için yedek zemin */
@supports not (background: color-mix(in srgb, red 4%, transparent)) {
  .tblwrap table tbody tr:nth-child(even) td,
  .data-table-wrap table tbody tr:nth-child(even) td,
  table.t tbody tr:nth-child(even) td,
  table.tbl tbody tr:nth-child(even) td,
  table.data-table tbody tr:nth-child(even) td {
    background: var(--bg4, var(--bg3));
  }
}


/* =========================================================
   v6.8 — KOMPAKT KATMAN

   Şikâyet: kutucuklar çok yer kaplıyor, yana kaydırarak okumak
   gerekiyor. İki ayrı iş yapıldı:

   1. Modül dosyalarında tablo min-width değerleri %22, ızgara
      sütun minimumları %15 düşürüldü (29 değer). Tablolar artık
      400 piksel civarında başlıyor; 360 piksellik bir telefonda
      kaydırma payı 160 pikselden 40 piksele indi.

   2. Buradaki katman hücre ve kart iç boşluklarını dar ekranda
      kısıyor ve hücre metninin ALT SATIRA GEÇMESİNİ serbest
      bırakıyor. Yana kaydırmak yerine bir satır daha uzamak
      okuma açısından daha az yorucu.

   Yazı boyutu bu katmandan bağımsızdır; --ah-yazi ölçeği ayrı
   çalışır ve kullanıcı XS'e indirirse her şey birlikte küçülür.
========================================================= */

/* Hücre metni sığmıyorsa alt satıra geçsin — tablo genişlemesin */
.tblwrap table td, .data-table-wrap table td, .table-wrap table td,
table.t td, table.tbl td, table.spec td, table.rs td,
table.kv td, table.kg td, table.guv td {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Dar ekran: iç boşluklar kısılır, satır aralığı korunur */
@media (max-width: 700px) {
  .tblwrap table td, .data-table-wrap table td, .table-wrap table td,
  table.t td, table.tbl td, table.spec td, table.rs td,
  table.kv td, table.kg td, table.guv td {
    padding: 7px 8px;
    line-height: 1.5;
  }
  .tblwrap table th, .data-table-wrap table th, .table-wrap table th,
  table.t th, table.tbl th, table.spec th, table.rs th,
  table.kv th, table.kg th, table.guv th {
    padding: 6px 8px;
    letter-spacing: 0;
  }

  /* Kartlar ve kutular */
  .card-body, .kutu, .box, .hl, .not, .msj, .guv-box, .lipid-kutu {
    padding: 9px 11px;
  }
  .cards, .grid, .g2, .g3, .kutular, .kv-grid, .drug-grid,
  .kk-liste, .kt-liste, .mode-grid { gap: 8px; }

  /* Bölüm başlıkları arası dikey boşluk */
  h2, h3, .sec-title, .page-title { margin-top: 16px; margin-bottom: 6px; }
  .sec-sub, .page-subtitle { margin-bottom: 10px; }
}

/* Çok dar ekran (küçük telefon): bir kademe daha */
@media (max-width: 400px) {
  .tblwrap table td, .data-table-wrap table td,
  table.t td, table.tbl td, table.spec td, table.rs td,
  table.kv td, table.kg td { padding: 6px 6px; }
  .cards, .grid, .g2, .g3, .kutular { gap: 6px; }
}

/* =========================================================
   v6.8 — ALTBİLGİ SIKIŞTIRILDI
   Bağlantılar görünür kalır (arama motoru iç bağlantıları
   sayar), yalnızca yazı boyutu ve satır aralığı kısıldı.
========================================================= */
.ah-altbilgi { padding-top: 18px; padding-bottom: 14px; }
.ah-ab-bas { font-size: calc(10px * var(--ah-yazi, 1)); margin-bottom: 5px; }
.ah-ab-bag { font-size: calc(10.5px * var(--ah-yazi, 1)); line-height: 1.75; }
.ah-ab-alt { font-size: calc(10.5px * var(--ah-yazi, 1)); margin-top: 9px; gap: 6px; }
.ah-ab-cekince { font-size: calc(9.5px * var(--ah-yazi, 1)); line-height: 1.55; margin-top: 9px; }

/* =========================================================
   ATKINSON HYPERLEGIBLE — sürüm 6.9'da eklendi

   Braille Institute of America tarafından DÜŞÜK GÖRME için
   tasarlandı. Birbirine benzeyen karakterleri kasıtlı olarak
   ayırır: büyük I, küçük l ve rakam 1 · büyük O ve sıfır ·
   b ile d, p ile q. Doz okurken karıştırılması en tehlikeli
   olan karakterler bunlardır.

   Lisans: SIL Open Font License 1.1 — gömmeye ve dağıtmaya
   izin verir. Telif ve lisans metni fonts/ATKINSON-LISANS.txt
   dosyasındadır; OFL bunun pakete dahil edilmesini şart koşar.

   Yalnızca 400 ve 700 ağırlıkları, italik olmadan alındı
   (4 dosya, toplam 52 KB). Türkçe karakterler (ğ ş İ ı Ğ Ş)
   latin-ext alt kümesindedir; o dosya olmadan yazı bozulur.
========================================================= */
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/atkinson-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/atkinson-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/atkinson-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/atkinson-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* =========================================================
   YAZI TİPİ SEÇİMİ

   --font değişkeni gövde metnini belirler. Seçim <html>
   üzerindeki data-yazitipi ile yapılır; tüm modüller
   font-family:var(--font) kullandığı için tek noktadan değişir.

   Sistem ve serif seçenekleri hiçbir dosya indirmez: cihazın
   kendi yazı tipini kullanır. Bu hem en hızlı yüklenen hem de
   kullanıcının cihazında zaten alışkın olduğu yazı tipidir.
========================================================= */
/* İki nitelikli seçici bilinçlidir: stiller.css daha sonra yüklense
   bile kullanıcının yazı tipi seçimi arayüz stilinden öncelikli kalır. */
html[data-yazitipi][data-yazitipi="inter"] {
  --font: 'Inter', 'Nunito', 'Calibri', sans-serif;
  --font-heading: 'Montserrat', 'Arial Black', sans-serif;
}
html[data-yazitipi][data-yazitipi="sistem"] {
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* "Sistem" seçeneğinin sözü cihazın kendi yazı tipini kullanmaktır;
     sayısal alanlar da cihazın kendi tek aralıklı yazı tipine geçer. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
html[data-yazitipi][data-yazitipi="serif"] {
  --font: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --font-heading: Georgia, 'Times New Roman', serif;
  /* Serif'te --mono BİLEREK değiştirilmedi: serif bir tek aralıklı
     yazı tipi yaygın değil, zorlanırsa doz alanları okunaksızlaşır.
     JetBrains Mono nötr kalır. */
}
html[data-yazitipi][data-yazitipi="atkinson"] {
  --font: 'Atkinson Hyperlegible', 'Inter', sans-serif;
  --font-heading: 'Atkinson Hyperlegible', 'Inter', sans-serif;
  /* ASIL KAZANÇ BURADA. Hyperlegible özellikle I l 1 ve O 0
     ayrımı için tasarlandı; bu karakterlerin karışması en çok
     DOZ ve HESAP alanlarında tehlikelidir. Oysa o alanlar
     var(--mono) kullanıyor ve seçim oraya hiç işlemiyordu:
     düşük görme için Hyperlegible seçen kullanıcı, tam da en
     kritik sayıları eski yazı tipiyle okumayı sürdürüyordu.
     JetBrains Mono yedekte kalır. */
  --mono: 'Atkinson Hyperlegible', 'JetBrains Mono', 'Consolas', monospace;
  --font-mono: 'Atkinson Hyperlegible', 'JetBrains Mono', 'Consolas', monospace;
}

/* Tek aralıklı yazı tipinin sessiz görevi sayıları alt alta
   hizalamaktı. Yukarıda iki seçenekte oransal bir yazı tipine
   geçildiği için hizalama artık rakam genişliğine bırakılamaz;
   tablo hücrelerinde ve sayı kutularında tabular rakamlar açıkça
   isteniyor. Destelemeyen yazı tipinde kural sessizce yok sayılır,
   bir şey bozulmaz. */
table td, table th,
input[type="number"],
[class*="sayi"], [class*="doz"], [class*="deger"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}


/* =========================================================
   v6.9 — AYARLAR PANELİ

   Tema, yazı tipi ve yazı boyutu tek bir yerde toplandı.
   Eskiden tema açılır listesi başlıkta duruyordu; 7 tema ve
   5 boyut düğmesiyle zaten ~300 piksel yüksekliğindeydi,
   yazı tipi de eklenince 430 pikseli aşacaktı — 700 piksellik
   bir telefonda ekranın çoğu.

   Sağdan kayan panel seçildi: uzun listeler rahat sığar,
   kendi içinde kaydırılır, dışarı dokununca kapanır.
========================================================= */
.ay-btn {
  height: 32px; width: 32px; padding: 0; border-radius: 6px;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.ay-btn:hover { border-color: var(--accent); color: var(--accent); }
.ay-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ay-perde {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.42); opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.ay-perde.acik { opacity: 1; pointer-events: auto; }

.ay-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 901;
  width: min(330px, 88vw);
  background: var(--bg2); border-left: 1px solid var(--border);
  box-shadow: -6px 0 24px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.ay-panel.acik { transform: translateX(0); }

.ay-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  padding-top: calc(13px + env(safe-area-inset-top));
}
.ay-baslik { font-family: var(--font-heading); font-weight: 700;
             font-size: calc(15px * var(--ah-yazi, 1)); }
.ay-kapat {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
}
.ay-kapat:hover { border-color: var(--red); color: var(--red); }

.ay-govde { overflow-y: auto; overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch; padding: 4px 0 18px; flex: 1; }

.ay-grup { padding: 13px 15px 4px; }
.ay-grup-bas {
  font-size: calc(10px * var(--ah-yazi, 1)); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text3);
  margin-bottom: 7px;
}

/* =========================================================
   AYARLAR PANELİ — AÇILIR KAPANIR BÖLÜMLER (sürüm 8.3)

   Panelde dört bölüm var (Arayüz stili, Tema, Yazı tipi,
   Yazı boyutu) ve hepsi aynı anda açıkken telefonda uzun bir
   kaydırma listesi oluşuyordu. Artık başlıklar birer düğme:
   dokununca o bölüm açılır, diğerini açınca bu kapanır.

   Açık/kapalı durumu 'ah-ay-acik' anahtarında saklanır, yani
   paneli her açtığınızda son baktığınız bölüm açık gelir.
========================================================= */
button.ay-grup-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-bottom: 0; padding: 9px 0;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; text-align: left;
  color: var(--text2);
  transition: color .15s ease;
}
button.ay-grup-bas:hover { color: var(--text); }
button.ay-grup-bas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.ay-grup-bas[aria-expanded="true"] { color: var(--accent); }

/* Sağdaki ok — açıkken aşağı, kapalıyken sağa bakar. */
.ay-ok {
  flex: 0 0 auto; width: 9px; height: 9px; margin-right: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transform-origin: center;
  transition: transform .18s ease;
}
button.ay-grup-bas[aria-expanded="true"] .ay-ok { transform: rotate(45deg); }

/* Seçili değerin başlıkta özeti — bölüm kapalıyken de görünür. */
.ay-ozet {
  margin-left: auto; font-size: calc(10px * var(--ah-yazi, 1));
  font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 11ch;
}
button.ay-grup-bas[aria-expanded="true"] .ay-ozet { opacity: 0; }

.ay-icerik { padding-top: 4px; padding-bottom: 6px; }
.ay-icerik[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ay-ok { transition: none; }
}

/* Tema ve yazı tipi satırları */
.ay-secenek {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid transparent; text-align: left;
  font-family: var(--font); color: var(--text2);
  font-size: calc(12.5px * var(--ah-yazi, 1)); font-weight: 700;
  transition: all .15s;
}
.ay-secenek:hover { background: var(--abg); color: var(--text); }
.ay-secenek.active { background: var(--abg); color: var(--accent); border-color: var(--accent); }
.ay-secenek:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ay-nokta { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
            border: 1.5px solid rgba(255,255,255,.14); }
.ay-metin { flex: 1; min-width: 0; }
.ay-alt { display: block; font-weight: 400; color: var(--text3);
          font-size: calc(10.5px * var(--ah-yazi, 1)); margin-top: 1px; line-height: 1.45; }
.ay-tik { color: var(--accent); flex-shrink: 0; opacity: 0; }
.ay-secenek.active .ay-tik { opacity: 1; }

/* Yazı tipi örnekleri kendi yazı tipiyle gösterilir */
.ay-ornek { font-size: calc(12px * var(--ah-yazi, 1)); color: var(--text3); }
.ay-secenek[data-yazitipi-opt="inter"] .ay-metin { font-family: 'Inter', sans-serif; }
.ay-secenek[data-yazitipi-opt="sistem"] .ay-metin { font-family: system-ui, sans-serif; }
.ay-secenek[data-yazitipi-opt="serif"] .ay-metin { font-family: Georgia, serif; }
.ay-secenek[data-yazitipi-opt="atkinson"] .ay-metin { font-family: 'Atkinson Hyperlegible', sans-serif; }

/* Yazı boyutu — beş düğme yan yana */
.ay-boyut { display: flex; gap: 4px; padding: 0 15px; }
.ay-boyut button {
  flex: 1; min-width: 0; padding: 9px 0; border-radius: 7px;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  font-family: var(--mono); font-weight: 700; cursor: pointer;
  font-size: calc(11px * var(--ah-yazi, 1)); transition: all .15s;
}
.ay-boyut button:hover { border-color: var(--accent); color: var(--accent); }
.ay-boyut button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ay-ipucu { padding: 7px 15px 0; font-size: calc(11px * var(--ah-yazi, 1));
            color: var(--text3); line-height: 1.5; }

@media (max-width: 400px) { .ay-panel { width: 92vw; } }


/* =========================================================
   v7.1 — GÖMÜLÜ MODÜLDE YİNELENEN GEZİNME KALDIRILDI

   Yan menüde "Gebelik", "Travma", "Nöroşirurji", "Torasik" ve
   "Kardiyak" ayrı satırlar. Modül iframe içinde açılınca KENDİ
   sekme çubuğu da aynı beş başlığı gösteriyordu. Kullanıcı
   "Gebelik" bölümünde Travma ve Kardiyak yazan düğmeler görüp
   bunları o bölümün alt başlıkları sanıyordu.

   Gömülü modda sekme çubuğu gizlenir; gezinme yalnızca yan
   menüden yapılır ve her başlık ayrı bir bölüm gibi davranır.
   Modül TEK BAŞINA açıldığında (Tam ekran ↗, yer imi, arama
   motoru) çubuk yerinde durur — orada yan menü yoktur.

   Yalnızca yan menünün sekmelerin TAMAMINI yansıttığı üç modül:
     · ozellikli.html — 5 sekme, menüde 5
     · geriatri.html  — 4 sekme, menüde 4
     · cihaz.html     — 8 sekme, menüde 8 (Genel Bakış dahil)
   resusitasyon.html'in 13 sekmesinin yalnız 5'i menüde olduğu
   için orada çubuk KORUNUR; gizlenirse 8 sekmeye ulaşılamaz.
========================================================= */
body.gomulu .oz-tabs,
body.gomulu .gr-tabs,
body.gomulu .cz-tabs { display: none !important; }

/* Çubuk gidince panelin üstünde boşluk kalmasın */
body.gomulu .oz-pane > .sec-title:first-child,
body.gomulu .gr-pane > .sec-title:first-child,
body.gomulu .cz-pane > .sec-title:first-child { margin-top: 0; }


/* =========================================================
   v8.0 — YATAY EKRAN (LANDSCAPE) DÜZENİ

   manifest.json'da "orientation": "portrait-primary" vardı ve
   kurulu uygulamayı dikeye KİLİTLİYORDU. Telefon yatay
   çevrildiğinde ekran dönmüyor, cihaz şemalarının yatay tam
   ekran özelliği hiç çalışamıyordu. Kilit kaldırıldı.

   Yatay tutulan bir telefonda kullanılabilir yükseklik 320-420
   piksele iner. Dikey için ayarlanmış ölçüler orada ekranın
   çoğunu yiyor. Bu katman yalnızca DAR YÜKSEKLİKTE devreye
   girer; masaüstünde ve tablette hiçbir şey değişmez.

   Ölçüt olarak (max-height: 500px) kullanıldı — yönden değil
   gerçek kullanılabilir yükseklikten karar verir; klavye açık
   dikey ekranda da doğru davranır.
========================================================= */
@media (max-height: 500px) {

  /* Başlık: 56 → 44 piksel. Yatayda ekranın %15'ini yiyordu. */
  header { height: 44px; padding: 0 12px; }
  .logo-name { font-size: calc(15px * var(--ah-yazi, 1)); }
  .logo-mark img, .logo-mark { width: 28px !important; height: 28px !important; }
  .nav-toggle, .geri-btn, .ay-btn { width: 30px; height: 30px; }

  /* Kendi içinde kayan modüller (ilaç kütüphanesi) boy bildirmez,
     bu yüzden çerçeveleri satır içi 600px alt sınırıyla kalır ve
     yatayda ekranı aşar. Yalnızca ONLAR için kilit geri konuyor. */
  .gomulu-bolum iframe:not([data-oto-boy]) {
    min-height: 0 !important;
    height: calc(100dvh - 104px) !important;
  }

  /* Sürüm 8.1: boy bildiren çerçevelerde yükseklik kilidi KALDIRILDI.
     Çerçeve artık kendi içeriği kadar uzun (bkz. TEK SAYFA
     KAYDIRMA katmanı). Sabit bir yükseklik yazmak, içeride
     yeniden kaydırma alanı doğurur ve düzeltilen sorunu geri
     getirirdi. Yalnız tek başına açılan modülde .layout
     yüksekliği anlamlıdır. */
  body:not(.gomulu) .layout { height: calc(100dvh - 44px); }

  /* Dikey boşlukları kıs */
  main { padding-top: 10px; padding-bottom: 30px; }
  .wrap { padding-top: 8px; padding-bottom: 30px; }
  .page-title { font-size: clamp(14px, 3.4vw, 16px) !important; margin-bottom: 1px; }
  .page-subtitle { margin-bottom: 6px !important; }
  .hs-hos { margin-bottom: 6px; }
  .sec-title { margin-top: 14px; margin-bottom: 3px; }

  /* Sekme çubukları tek satırda kalsın, kaydırılabilir olsun */
  .oz-tabs, .gr-tabs, .cz-tabs, .en-tabs, .rs-tabs, .hs-tabs,
  .kv-tabs, .kg-tabs, .po-tabs, .pr-tabs, .is-tabs, .ag-tabs, .tk-tabs {
    flex-wrap: nowrap; overflow-x: auto; padding: 6px 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .oz-tabs::-webkit-scrollbar, .gr-tabs::-webkit-scrollbar,
  .cz-tabs::-webkit-scrollbar, .en-tabs::-webkit-scrollbar,
  .rs-tabs::-webkit-scrollbar { display: none; }

  /* Ayarlar paneli: dar yükseklikte başlık ve ipucu yer yemesin */
  .ay-ust { padding: 9px 15px; }
  .ay-grup { padding: 9px 15px 2px; }
  .ay-secenek { padding: 6px 11px; }
  .ay-alt { display: none; }   /* açıklama satırları gizlenir */

  /* Yan menü: yatayda tam yükseklik kaplayıp kaydırılabilir kalsın */
  #sidebar { padding-top: 6px; }
  .nav-link { padding-top: 5px; padding-bottom: 5px; }
  .nav-group-label { min-height: 24px; padding: 4px 12px; }
}

/* Çok dar yükseklik (küçük telefon yatay) — bir kademe daha */
@media (max-height: 400px) {
  header { height: 40px; }
  .gomulu-bolum iframe:not([data-oto-boy]) { height: calc(100dvh - 92px) !important; }
  body:not(.gomulu) .layout { height: calc(100dvh - 40px); }
  .page-subtitle { display: none; }   /* alt başlık gizlenir */
}


/* =========================================================
   TEK SAYFA KAYDIRMA — GÖMÜLÜ MODÜL DÜZENİ
   Sürüm 8.1

   SORUN
   Modüller ana sayfada sabit yükseklikli bir çerçeveye
   konuyordu ve içerik o çerçevenin İÇİNDE kayıyordu. Üstelik
   üç modül (ilaç kütüphanesi, nöromonitörizasyon, vaporizatör)
   kendi içinde de ekran yüksekliğine kilitliydi:

       .layout { height: calc(100vh - 52px); overflow: hidden; }
       .sidebar, .main { overflow-y: auto; }

   Yani tek bir ekranda üst üste ÜÇ kaydırma alanı vardı.
   Parmak hareketi sınırlara geldiğinde yutuluyordu.

   ÇÖZÜM
   Gömülüyken bütün iç kilitler açılır; sayfa doğal boyunda
   uzar, çerçeve de app.js'in bildirdiği boya açılır. Geriye
   tek bir kaydırma alanı kalır: ana sayfanın kendisi.

   Bu kurallar yalnızca body.gomulu (iframe içi) durumunda
   geçerlidir. Modül tam ekran, tek başına açıldığında eski
   ekran-yüksekliğine-oturan düzen korunur.
========================================================= */

html.gomulu-html:not([data-kaydirma="ic"]),
html.gomulu-html:not([data-kaydirma="ic"]) body {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* İKİ KEZ DOKUNMA — bkz. app.js açıklaması.
   Boy bildirimi yerleştikten sonra belge açıkça kaydırılamaz olur;
   dokunma hareketi iç belgeye takılmadan ana sayfaya geçer.
   Sınıf ancak ilk ölçüm başarıyla bildirildikten sonra ekleniyor,
   bu yüzden içerik kırpılmaz. */
html.ah-oto-boy,
html.ah-oto-boy body {
  overflow: hidden !important;
  /* overscroll-behavior BURAYA YAZILAMAZ.
     Sürüm 8.2'de "overscroll-behavior: none" eklenmişti ve KAYDIRMAYI
     TAMAMEN DURDURDU. Bu özellik, kaydırma hareketinin bir kaptan
     dışındakine geçmesini (scroll chaining) engeller. Çerçeve zaten
     kaymadığı için hareketin ana sayfaya GEÇMESİ gerekiyor; "none"
     tam olarak bunu yasakladı ve sayfa hiç kaymaz oldu.
     Varsayılan (auto) davranış korunmalıdır. */
}

/* overflow:clip destekleyen tarayıcıda belge bir scroll container olmaz.
   hidden yedek olarak yukarıda kalır; clip, gömülü modülde ilk dikey
   hareketin boş bir iç kaydırma alanına kilitlenmesini önler. */
@supports (overflow: clip) {
  html.ah-oto-boy,
  html.ah-oto-boy body { overflow: clip !important; }
}

html:not([data-kaydirma="ic"]) body.gomulu .layout {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-items: flex-start;          /* kenar çubuğu ana sütunla birlikte uzamasın */
}
html:not([data-kaydirma="ic"]) body.gomulu .sidebar,
html:not([data-kaydirma="ic"]) body.gomulu .main {
  overflow: visible !important;
  max-height: none !important;
}

/* Modülün kendi üst çubuğu gömülüyken sabitlenmemeli: sabitleme
   artık işlemez (çerçeve kaymıyor) ama z-index'i yüzünden içeriğin
   üstüne binebilir. */
html:not([data-kaydirma="ic"]) body.gomulu .hdr { position: static !important; }

/* Modül içindeki yapışkan sekme çubukları gömülüyken kendiliğinden
   ETKİSİZ kalır — yapışacakları bir kaydırma alanı kalmadı. Kural
   olarak da statik yapılır; böylece eski tarayıcılarda beklenmedik
   üst üste binme olmaz. */
body.gomulu .oz-tabs, body.gomulu .gr-tabs, body.gomulu .cz-tabs,
body.gomulu .en-tabs, body.gomulu .rs-tabs, body.gomulu .hs-tabs,
body.gomulu .kv-tabs, body.gomulu .kg-tabs, body.gomulu .po-tabs,
body.gomulu .pr-tabs, body.gomulu .is-tabs, body.gomulu .ag-tabs,
body.gomulu .tk-tabs, body.gomulu .g-search-wrap {
  position: static !important;
}
/* .search-wrap ve .sb-toggle bilerek DIŞARIDA: bunlar yalnızca
   kendi içinde kayan modüllerde (ilaç kütüphanesi) kullanılıyor ve
   orada yapışkan kalmaları gerekiyor. */

/* Çerçevenin kendisi: yüksekliği app.js/index.html yönetir.
   Buraya sabit bir değer YAZILMAMALIDIR. */
.gomulu-bolum iframe[data-oto-boy] {
  min-height: 0 !important;
  transition: height .18s ease;
}


/* =========================================================
   TABLO TAŞMA KABI — TABAN   (sürüm 8.1)

   SORUN
   .tblwrap yalnız bazı modüllerin kendi <style> bloğunda
   tanımlıydı; ortak dosyada TABAN tanımı yoktu. Sarmalayıcısı
   olmayan tablolar dar ekranda kabına sığmıyordu. Tablo kendi
   en-küçük içerik genişliğinin altına inemez ("Sıcaklık
   Kompanzasyonu" gibi başlıklar bu sınırı yükseltir), bu yüzden
   sütunlar ekranın dışına taşıyordu. Ana sayfada main için
   overflow-x: hidden tanımlı olduğundan taşan kısım KIRPILIYOR,
   yani kullanıcı yana kaydırıp göremiyordu bile.
========================================================= */
.tblwrap, .table-wrap, .table-responsive, .data-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
/* Kaba alınmamış tablolar için son güvenlik: en azından kabı
   aşmasınlar. Sütunlar sıkışır ama metin ekran dışına çıkmaz. */
.wrap table, .main table { max-width: 100%; }

/* Dokunmatik tarayıcılar artık yatay taşma alanlarında da varsayılan momentum
   davranışını sağlıyor. Eski -webkit-overflow-scrolling:touch ayrı bir
   kaydırma katmanı oluşturup iframe içinde ilk dikey sürüklemeyi yutabiliyor.
   Modüllerin satır içi kurallarını da geçersiz kılmak için coarse pointer'da
   açıkça auto kullanılır. */
@media (pointer: coarse) {
  .tblwrap, .table-wrap, .table-responsive, .data-table-wrap,
  .card-body:has(table) {
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior-y: auto;
  }
}

/* =========================================================
   TABLOLAR NEDEN KAYMIYORDU  (sürüm 8.2)

   SORUN
   Kaplara overflow-x: auto verilmişti, ama 1600. satırdaki
   ".wrap table, .main table { max-width: 100% }" kuralı tablonun
   kabından GENİŞ olmasını engelliyordu. Bir kap ancak içindeki
   içerik kendisinden genişse kayar; tablo hiçbir zaman taşmadığı
   için kap hiçbir zaman kaymadı. Sonuç: sütunlar hücre başına
   tek kelime kalana dek sıkışıyor, kullanıcı kaydıramıyordu.
   Kullanıcı bildirimi: "uygulamanın içindeki hiçbir tablo kaymıyor".

   ÇÖZÜM — iki kural, birlikte çalışır
   1) Kaba alınmış tablodan max-width sınırı kalkar; tablo artık
      kabını aşabilir.
   2) Hücrelere taban genişlik verilir. Bu, sütun sayısıyla
      kendiliğinden ölçeklenir:
        2 sütunlu kısa tablo  ≈ 17rem → telefona sığar, kaymaz
        3 sütunlu tablo       ≈ 25rem → taşar, kap kayar
        4 sütunlu tablo       ≈ 34rem → taşar, kap kayar
      Böylece zaten sığan tablolar bozulmaz, yalnız sıkışanlar
      kaydırılabilir olur. Sabit bir min-width verilseydi kısa
      tablolar da gereksiz yere kaydırmalı olurdu.

   Yazdırmada 601-606. satırlardaki kurallar bunları sıfırlar.
========================================================= */
.tblwrap table, .table-wrap table, .table-responsive table,
.data-table-wrap table, .card-body table {
  max-width: none;
}
.tblwrap table td,        .tblwrap table th,
.table-wrap table td,     .table-wrap table th,
.table-responsive table td, .table-responsive table th,
.data-table-wrap table td,  .data-table-wrap table th,
.card-body table td,      .card-body table th {
  min-width: 8.5rem;
}

/* ── SÜTUN SAYISINA GÖRE TABAN GENİŞLİK (sürüm 8.3) ──────────
   ÖLÇÜM: "Gebelikte fizyolojik değişiklikler" tablosu 375 px'lik
   telefonda kap 317 px, içerik 409 px — yani kayıyordu, ama
   yalnızca 92 px. Kullanıcı bunu "kaymıyor, sabit duruyor" diye
   algılıyordu. Asıl sorun buydu: 3 sütun × 136 px tabanla 440
   karakterlik bir hücrede satır başına ~18 karakter düşüyor,
   sütun okunmaz hâle geliyordu.

   Çözüm sütun sayısıyla ölçeklemek:
     2 sütun  → 8.5rem  · 17rem toplam, telefona sığar, kaymaz
     3–4 sütun → 10.5rem · sütun okunur, anlamlı kaydırma olur
     5+ sütun  →  9rem   · toplam genişlik aşırı büyümesin

   Seçici thead yerine "tr > *" kullanır: 9 tablonun başlık
   satırı yok, thead'e bakan bir seçici onları atlardı. */
.tblwrap table:has(tr > *:nth-child(3)) td,
.tblwrap table:has(tr > *:nth-child(3)) th,
.table-wrap table:has(tr > *:nth-child(3)) td,
.table-wrap table:has(tr > *:nth-child(3)) th,
.data-table-wrap table:has(tr > *:nth-child(3)) td,
.data-table-wrap table:has(tr > *:nth-child(3)) th,
.card-body table:has(tr > *:nth-child(3)) td,
.card-body table:has(tr > *:nth-child(3)) th {
  min-width: 10.5rem;
}
.tblwrap table:has(tr > *:nth-child(5)) td,
.tblwrap table:has(tr > *:nth-child(5)) th,
.table-wrap table:has(tr > *:nth-child(5)) td,
.table-wrap table:has(tr > *:nth-child(5)) th,
.data-table-wrap table:has(tr > *:nth-child(5)) td,
.data-table-wrap table:has(tr > *:nth-child(5)) th,
.card-body table:has(tr > *:nth-child(5)) td,
.card-body table:has(tr > *:nth-child(5)) th {
  min-width: 9rem;
}

/* Yalnız sayı/kısa etiket taşıyan sütunlar bu tabana uymak
   zorunda değil — ilgili modüller .dar sınıfını verebilir.
   !important, yukarıdaki :has() kurallarının özgüllüğünü
   aşmak için gerekli: .dar açık bir devre dışı bırakmadır. */
.tblwrap table td.dar, .tblwrap table th.dar,
.table-wrap table td.dar, .table-wrap table th.dar,
.data-table-wrap table td.dar, .data-table-wrap table th.dar,
.card-body table td.dar, .card-body table th.dar { min-width: 0 !important; }

/* Kaydırılabildiği görünsün: dokunmatik cihazlarda kaydırma çubuğu
   normalde gizlidir, burada ince ve kalıcı olarak gösterilir.

   NOT (sürüm 8.3): scrollbar-width tanımlanınca Chrome 121+ sürümleri
   ::-webkit-scrollbar kurallarını YOK SAYIYOR. Standart özellik yalnız
   webkit desteği olmayan tarayıcılarda (Firefox) verilir; böylece
   Chrome'da aşağıdaki kalıcı çubuk çalışır. */
@supports not selector(::-webkit-scrollbar) {
  .tblwrap, .table-wrap, .table-responsive, .data-table-wrap,
  .card-body:has(table) {
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }
}
.tblwrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.data-table-wrap::-webkit-scrollbar,
.card-body::-webkit-scrollbar {
  height: 7px;
  -webkit-appearance: none;
}
.tblwrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.data-table-wrap::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}
.tblwrap::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.data-table-wrap::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track {
  background: transparent;
}


/* =========================================================
   MODÜL SONU İLE "MODÜLLER" BAŞLIĞI ARASINDAKİ BOŞLUK
   Sürüm 8.3

   ÖLÇÜM. Boşluk üç kaynaktan toplanıyordu:
     modülün kendi alt boşluğu        60 px  (8.1'de 12 px'e indi)
     main'in alt boşluğu              60 px
     alt bilginin üst boşluğu         44 px
   Toplam 164 px, 8.1 düzeltmesinden sonra hâlâ 116 px. Çerçeve
   kaydığı dönemde bunların hiçbiri görünmüyordu; çerçeve içerik
   boyunda olunca üçü de doğrudan ekranda üst üste bindi.

   İlk denemede .gomulu-bolum'a negatif alt kenar boşluğu verilmişti;
   yalnız son çocuk olduğunda çalıştığı için güvenilir değildi ve
   kaldırıldı. Ölçüler kaynağında düşürüldü.
========================================================= */
main { padding-bottom: 24px; }
.ah-altbilgi { margin-top: 20px; }

@media (max-width: 700px) {
  main { padding-bottom: 18px; }
  .ah-altbilgi { margin-top: 14px; }
}

/* Gömülü bir modül açıkken içerik zaten kendi kenarında bitiyor;
   fazladan boşluğa hiç gerek yok. :has() desteklenmeyen tarayıcıda
   yukarıdaki taban değerler geçerli kalır. */
body:has(.section.active.gomulu-bolum) main { padding-bottom: 10px; }
body:has(.section.active.gomulu-bolum) .ah-altbilgi { margin-top: 10px; }
/* 8.8.1 — burada sahipsiz bir "}" duruyordu (8.3 düzenlemesinden
   artakalmış). Tarayıcı onu atlarken HEMEN ARDINDAKİ kuralı da
   yutuyordu; bu yüzden ".kartlar > *, .grid > * … { min-width: 0 }"
   kuralı hiç uygulanmıyordu ve ızgara içindeki tablolar sayfayı
   dışarı taşırıyordu. Ölçüm: pediatri.html 390 px ekranda 522 px. */

/* =========================================================
   IZGARA ÖĞESİ KÜÇÜLEBİLMELİ   (sürüm 8.4)

   ÖLÇÜM: hesaplayıcılarda "İlaç ve İnfüzyon" sekmesinde kart
   703 px, belge 341 px görünür alana karşılık 714 px genişti.
   Tablo kabı (.tblwrap) 673 px'ti ve HİÇ KAYMIYORDU.

   NEDEN: ızgara ve esnek kutu öğelerinde min-width varsayılan
   değeri 'auto'dur — öğe, içeriğinin en-küçük genişliğinin
   ALTINA İNEMEZ. Dört sütunlu bir tablo kartı zorla genişletiyor,
   kap daralmadığı için taşma da oluşmuyor ve kaydırma hiç
   devreye girmiyordu. Kullanıcı bildirimi: "tablolar dışarı
   taşıyor ve hareket etmiyor".

   min-width:0 öğenin küçülmesine izin verir; tablo kabı daralır,
   tablo taşar ve kap kayar. Aynı ölçüm düzeltmeden sonra:
   kart 319 px, belge taşması yok, kap 289 px / içerik 673 px.
========================================================= */
/* 8.8.1 — listeye ".grid2 > *" ve ".grid3 > *" eklendi. Kural
   yazıldığında ".grid2" adı gözden kaçmıştı; pediatri.html'de
   ".grid2" içindeki tablo kabı küçülemediği için sayfa 390 px
   ekranda 522 px'e taşıyordu (ölçüldü). Aynı sorunun ".grid3"te
   de çıkmaması için o da eklendi. */
.kartlar > *, .cards > *, .grid > *, .g2 > *, .g3 > *,
.grid2 > *, .grid3 > *,
.kutular > *, .hk, .fk, .sk-kart { min-width: 0; }

/* =========================================================
   GÖMÜLÜ MODDA YAPIŞKAN SEKME ŞERİDİ KAPATILIR   (sürüm 8.8)

   Sekme şeritleri "position:sticky; top:0" taşır. Modül TEK BAŞINA
   açıldığında bu doğrudur: sayfa kayarken şerit tepede kalır.

   Çerçeve olarak gömüldüğünde ise yanlış olur. Çerçeve içerik
   boyunda açıldığı için (app.js boy bildirimi) çerçevenin içinde
   kayan bir kap yoktur; şerit kendi belgesinin tepesine yapışır ve
   ana sayfa kaydıkça içerikle birlikte ekrandan çıkar. Yapışkanlık
   hiçbir işe yaramadan bir katman (z-index 40–200) oluşturur; bu
   katman modülün kendi başlığı ya da açılır panelleriyle üst üste
   binebiliyordu.

   Şerit gömülüyken normal akışa döner: içeriğin başında durur,
   içerikle birlikte kayar, katman oluşturmaz. */
body.gomulu .cs-sekmeler,
body.gomulu .oz-tabs, body.gomulu .el-tabs, body.gomulu .sk-tabs,
body.gomulu .hs-tabs, body.gomulu .po-tabs, body.gomulu .kg-tabs,
body.gomulu .ag-tabs, body.gomulu .cz-tabs, body.gomulu .en-tabs,
body.gomulu .gr-tabs, body.gomulu .guv-tabs, body.gomulu .is-tabs,
body.gomulu .kv-tabs, body.gomulu .pc-tabs, body.gomulu .pr-tabs,
body.gomulu .rf-tabs, body.gomulu .rs-tabs, body.gomulu .tk-tabs,
/* 8.8.1 — .sb-toggle (alt sayfa yan çubuk katlama düğmesi;
   vaporizer.html, neuromonitoring.html ve diğer alt modüller)
   de "position:sticky; top:0; z-index:120" taşıyordu ve ilk
   listede unutulmuştu. Gömülüyken aynı sorunu üretiyordu. */
body.gomulu .sb-toggle {
  position: static !important;
  z-index: auto !important;
}

/* =========================================================
   MODÜL SEKME ŞERİDİ — DAR EKRANDA SATIR ATLAR   (sürüm 8.6)

   SORUN
   Modüllerin sekme şeridi (.oz-tabs, .el-tabs, .sk-tabs …)
   flex-wrap:nowrap + overflow-x:auto ile yatay kaydırılıyordu.
   Kaydırma çubuğu da bilerek gizlendiği için (scrollbar-width:none)
   dar ekranda sağdaki sekmelerin VARLIĞI görünmüyordu.

   Ölçüm — Özellikli Durumlar modülü, 375 piksel genişlik:
     görünür genişlik   345 px
     içerik genişliği  1143 px
     ekran dışında     798 px  →  11 sekmenin yalnız 4'ü görünüyor

   Kullanıcı bildirimi: "web'de yan yana başlıklar çıkıyor ama
   mobilde çıkmıyor, sol menüden tek tek tıklamak lazım." Şerit
   aslında oradaydı; yedi sekme sağda gizliydi.

   ÇÖZÜM
   Dar ekranda şerit satır atlar. Böylece gizli içerik kalmaz —
   ok ya da gölge gibi bir ipucuna da gerek kalmaz, çünkü
   gösterilecek gizli bir şey yoktur.

   Yapışkanlık dar ekranda kaldırılır: üç-dört satırlık bir blok
   ekranın tepesine yapışırsa okunacak alan kalmaz.

   Sekmeler küçültülür ve simgeler gizlenir; 11 sekme böylece
   üç satıra sığar.
========================================================= */
@media (max-width: 700px) {
  .cs-sekmeler,
  .oz-tabs, .el-tabs, .sk-tabs, .hs-tabs, .po-tabs, .kg-tabs,
  .ag-tabs, .cz-tabs, .en-tabs, .gr-tabs, .guv-tabs, .is-tabs,
  .kv-tabs, .pc-tabs, .pr-tabs, .rf-tabs, .rs-tabs, .tk-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    position: static !important;
    row-gap: 5px;
    padding-top: 8px;
    padding-bottom: 10px;
  }
  .cs-sekme,
  .oz-tab, .el-tab, .sk-tab, .hs-tab, .po-tab, .kg-tab,
  .ag-tab, .cz-tab, .en-tab, .gr-tab, .guv-tab, .is-tab,
  .kv-tab, .pc-tab, .pr-tab, .rf-tab, .rs-tab, .tk-tab {
    padding: 6px 10px;
    font-size: calc(11.5px * var(--ah-yazi, 1));
    gap: 5px;
    /* 8.14: satır atlayan şeritte sekme genişliği sınırlı; uzun ad
       (İngilizce, büyük yazı) düğmeden taşıyordu. Ad iki satıra iner. */
    white-space: normal !important;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
    line-height: 1.25;
  }
  /* Simge dar ekranda yer kaplıyor, ayırt ediciliği ise düşük:
     aynı simge birkaç sekmede tekrar ediyor (üç sekmede beyin).
     Metin tek başına daha ayırt edici. */
  .oz-tab .ah-ikon, .el-tab .ah-ikon, .sk-tab .ah-ikon,
  .hs-tab .ah-ikon, .po-tab .ah-ikon, .kg-tab .ah-ikon,
  .ag-tab .ah-ikon, .cz-tab .ah-ikon, .en-tab .ah-ikon,
  .gr-tab .ah-ikon, .guv-tab .ah-ikon, .is-tab .ah-ikon,
  .kv-tab .ah-ikon, .pc-tab .ah-ikon, .pr-tab .ah-ikon,
  .rf-tab .ah-ikon, .rs-tab .ah-ikon, .tk-tab .ah-ikon {
    display: none;
  }
}

/* Geniş ekranda şerit yatay kayar; menüden ya da aramadan gelen
   sekme görünür alanın dışında kalabilir. app.js içindeki
   ahSekmeGorunureGetir() seçili sekmeyi kaydırarak ortalar. */

/* =========================================================
   v8.8 — GÖRSEL DERİNLİK VE ETKİLEŞİM KATMANI

   NEDEN BURADA VE NEDEN !important YOK
   Bu blok uygulamanın VARSAYILAN görünümünü iyileştirir.
   stiller.css bu dosyadan SONRA yüklenir; bir biçim stili
   (Clinical, Editorial…) seçildiğinde oradaki kurallar buradakileri
   doğal kaskad sırasıyla ezer. Buraya !important yazılırsa
   stiller.css'teki 80'den fazla gölge/köşe/harf aralığı kuralı
   çalışmaz ve dört stil seçeneği görsel olarak ölür.

   GÖLGE RENGİ NEDEN SABİT DEĞİL
   rgba(0,0,0,…) gölgeler yalnızca açık temada işe yarar; Alaca ve
   Gece temalarında siyah üstüne siyah görünmez. Gölge metin
   renginden türetiliyor: açık temada koyu gölge, koyu temada
   hafif aydınlık bir hale oluşuyor. color-mix desteklemeyen eski
   tarayıcılar için altta yedek tanım var.
========================================================= */

/* ── 1. FORM ODAĞI ────────────────────────────────────────
   Odak halkası :focus-visible ile verilir — fareyle tıklandığında
   çıkmaz, yalnızca klavyeyle gezildiğinde görünür. outline
   kaldırılmaz, saydam bırakılır: Windows Yüksek Kontrast kipinde
   box-shadow çizilmez, outline ise çizilir. Kaldırılsaydı klavye
   kullanıcısı o kipte odağı tamamen kaybederdi. */
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
input[type="time"]:focus-visible,
input[type="date"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--abg);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ── 2. KART DERİNLİĞİ ────────────────────────────────────
   İki katmanlı gölge: yakın ve keskin olan kenarı tanımlar,
   uzak ve yayvan olan yüzeyden ayırır. Tek katmanlı gölge
   yüzeyi çamurlu gösterir. */
.hs-k,
.ks-card {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 7%, transparent),
              0 4px 12px color-mix(in srgb, var(--text) 4%, transparent);
  transition: box-shadow .25s ease, border-color .25s ease,
              transform .25s cubic-bezier(.2,.8,.2,1);
}

/* Yalnızca gerçek işaretçisi olan cihazlarda; dokunmatikte
   :hover parmak kalkınca "takılı" kalır. */
@media (hover: hover) and (pointer: fine) {
  .hs-k:hover,
  .ks-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--text) 8%, transparent),
                0 10px 24px color-mix(in srgb, var(--text) 7%, transparent);
    border-color: var(--accent-border, var(--accent));
  }
}

/* ── 3. BASMA HİSSİ ───────────────────────────────────────
   transform layout'u değil yalnız bileşim katmanını etkiler;
   iframe yükseklik ölçümünü bozmaz. */
.hm-item:active,
.hs-k:active,
.ks-btn:active,
.btn:active {
  transform: scale(.97);
}

/* ── 4. BAŞLIK DİZGİSİ ────────────────────────────────────
   Büyük puntolu başlıklarda harfler arası boşluk optik olarak
   fazla görünür; hafif negatif değer dizgiyi toparlar.
   Küçük ve büyük harfli etiketlerin aralığı zaten tanımlı,
   onlara dokunulmuyor. */
.page-title {
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* ── 5. HAREKET TERCİHİ ───────────────────────────────────
   Sistemde "hareketi azalt" açıksa büyüme ve kalkış kapanır;
   gölge ve odak halkası kalır. */
@media (prefers-reduced-motion: reduce) {
  .hs-k, .ks-card,
  .hm-item, .ks-btn, .btn {
    transition: box-shadow .25s ease, border-color .25s ease;
  }
  .hs-k:hover, .ks-card:hover,
  .hm-item:active, .hs-k:active, .ks-btn:active, .btn:active {
    transform: none;
  }
}

/* ── 6. ESKİ TARAYICI YEDEĞİ ──────────────────────────────
   color-mix yoksa gölgeler tümüyle kaybolmasın diye sabit
   değerli, düşük opaklıkta bir karşılık. */
@supports not (box-shadow: 0 0 0 color-mix(in srgb, red 5%, transparent)) {
  .hs-k, .ks-card {
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  }
}


/* =========================================================
   DOKUNMA HEDEFİ EN AZ 44 PİKSEL   (sürüm 8.8.1)

   ÖLÇÜM — 390 piksel genişlikte, 30 sayfa tarandı. 32 pikselden
   küçük dokunma hedefi taşıyan öğeler:
     modül sekmeleri (.oz-tab, .rs-tab, .is-tab … 20 ayrı sınıf)
     yaklaşık 130 adet — yükseklikleri 7+7 px dolgu ile ~30 px
     küçük simge düğmeleri (.hb, .ay-kapat, .geri, .sb-toggle …)
     yaklaşık 25 adet

   WCAG 2.2 ölçütü 2.5.8 asgari 24 pikseli şart koşar; 2.5.5
   önerilen değer 44 pikseldir. Eldivenli parmakla kullanılan bir
   uygulamada 30 piksel azdır.

   İKİ AYRI YÖNTEM
   1) Sekmeler GÖRÜNÜR olarak büyür. Sekme şeridi zaten kendi
      satırındadır; yükseklik artışı düzeni bozmaz. Yalnızca
      dokunmatik cihazlarda uygulanır — fare kullanıcısında
      arayüz gereksiz yere şişmesin.
   2) Simge düğmeleri GÖRÜNÜR olarak büyümez. Görünmez bir
      ::after katmanı düğmeyi ortalayarak 44 px'e tamamlar.
      Düzen değişmez, yalnızca basılabilir alan genişler.
      ("content" verilmeden ::after çizilmez; bu yüzden
      content:'' şarttır.)

   NOT — cümle içindeki metin bağlantıları (<a> içi yazı) bu
   kuralların dışındadır: WCAG 2.5.8 satır içi bağlantıları zaten
   muaf tutar ve büyütülmeleri metin akışını bozar.
========================================================= */
@media (pointer: coarse) {
  .ag-tab, .cs-sekme, .cz-tab, .el-tab, .en-tab, .gr-tab, .guv-tab,
  .hs-tab, .is-tab, .kg-tab, .kv-tab, .oz-tab, .pc-tab, .po-tab,
  .pr-tab, .rf-tab, .rs-tab, .sk-tab, .tk-tab, .g-cat, .ay-grup-bas {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Görünmez dokunma alanı genişletmesi — görsel boyut değişmez. */
.hb, .ay-kapat, .geri, .hdr-btn, .sb-toggle, .sk-sifirla,
.clear-intake, .kd-don, .close-x-btn, .feedback-toggle, .fav-btn {
  position: relative;
}
.hb::after, .ay-kapat::after, .geri::after, .hdr-btn::after,
.sb-toggle::after, .sk-sifirla::after, .clear-intake::after,
.kd-don::after, .close-x-btn::after, .feedback-toggle::after,
.fav-btn::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
  /* Yalnızca dokunma/tıklama alanı; hiçbir şey çizmez ve
     üstündeki metni seçilemez hâle getirmez. */
  pointer-events: auto;
}


/* =========================================================
   YATAY KAYDIRILABİLİR TABLOLARDA İPUCU   (sürüm 8.9.3)

   ŞİKÂYET: "model karşılaştırması, ajan tablosu gibi bazı
   tablolar kaymıyor."

   ÖLÇÜM — vaporizer.html "Vaporizatör Model Karşılaştırması",
   390 piksel ekran:
     tablo genişliği      1 009 px
     kap görünen genişlik   358 px
     kap scrollWidth      1 009 px   → KAYIYOR
     overflow-x             auto

   Yani tablo teknik olarak kayıyordu. Sorun başkaydı: kaydığına
   dair HİÇBİR görsel ipucu yoktu. Kaydırma çubuğu gizli
   (scrollbar-width:none), tablo sağ kenarda temiz bir çizgiyle
   kesiliyor ve yuvarlatılmış kart çerçevesi içinde BİTMİŞ gibi
   duruyordu. Yedi sütunun dördü görünmüyor, kullanıcı varlığını
   bilmiyordu.

   Bu, 8.6'da SEKME ŞERİTLERİ için çözülen sorunun aynısıdır
   (bkz. "MODÜL SEKME ŞERİDİ — DAR EKRANDA SATIR ATLAR"); o
   düzeltme tablolara uygulanmamıştı.

   ÇÖZÜM — iki katman
   1. Sağ kenarda solma (mask-image). Maske öğenin KUTUSUNA
      sabitlidir, içerikle kaymaz; bu yüzden "devamı var"
      hissini sürekli verir. Sona gelindiğinde app.js
      ".ah-sonda" ekler ve solma kalkar.
   2. İnce ama GÖRÜNÜR kaydırma çubuğu. Mobil tarayıcıda çubuk
      yalnız kaydırırken belirir; gizlenince tek kalıcı ipucu da
      yok oluyordu.

   Sınıflar app.js içindeki ahTabloKaydirmaIpucu() tarafından
   yalnızca GERÇEKTEN taşan kaplara eklenir; taşmayan tablo
   etkilenmez.
========================================================= */
.ah-tasiyor {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
.ah-tasiyor.ah-sonda {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Kaydırma çubuğu görünür olsun — ince ve temaya uyumlu. */
.ah-tasiyor { scrollbar-width: thin; scrollbar-color: var(--border2, #9aa) transparent; }
.ah-tasiyor::-webkit-scrollbar { height: 6px; display: block; }
.ah-tasiyor::-webkit-scrollbar-track { background: transparent; }
.ah-tasiyor::-webkit-scrollbar-thumb {
  background: var(--border2, #9aa); border-radius: 3px;
}

/* Dokunmatik kaydırma akıcı olsun.

   "touch-action" BİLEREK YAZILMIYOR. 8.9.3'te buraya
   "touch-action: pan-x pan-y" konmuştu; bu, daha önce tam olarak
   bu değer yüzünden düzeltilmiş bir hatayı geri getiriyordu:

     "Tablo alanında touch-action: pan-x pan-y tanımlıydı; bu değer
      çimdikleme yakınlaştırmasını kapattığı için tarayıcı tablo
      üzerinden başlayan tek parmak hareketini sınırda yutuyordu —
      kullanıcı tablo dışında kaydırabiliyor, tablonun üzerinde
      kaydıramıyordu. Değer auto yapıldı."

   Varsayılan "auto" hem yatay kaydırmayı hem çimdiklemeyi
   çalıştırır; buraya dokunmayın. */
.ah-tasiyor { -webkit-overflow-scrolling: touch; }

/* Sekme ve gezinme şeritlerinde maske biraz daha dar olsun —
   30 piksel, bir sekme etiketinin yarısını yutabiliyordu. */
.tabs.ah-tasiyor, .ah-serit.ah-tasiyor, .age-bar.ah-tasiyor,
.g-cats.ah-tasiyor, .regional-nav.ah-tasiyor, .filters.ah-tasiyor {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}

/* Yazdırmada maske ve çubuk anlamsız. */
@media print {
  .ah-tasiyor { -webkit-mask-image: none !important; mask-image: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ERİŞİLEBİLİRLİK — ekran okuyucu yardımcıları            v8.10
   ═══════════════════════════════════════════════════════════ */

/* Görsel olarak gizli ama ekran okuyucuya açık.
   Sayfa başlıkları (h1) bunun içinde durur: modüller iframe
   içinde açıldığı için başlık zaten üst çerçevede görünüyor,
   ikinci kez basmak istemiyoruz. display:none KULLANMAYIN —
   ekran okuyucu da görmez. */
.ah-gorsel-gizli {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "İçeriğe atla" bağlantısı: klavyeyle Tab'a basılınca görünür. */
/* v8.13 — Açılışta bir an görünüyordu. Artık:
   1) Varsayılan hâli ekran okuyucuya açık görsel gizleme (kırpma);
      kaydırmalı "top:-100px" ve geçiş animasyonu yok.
   2) Yalnızca kullanıcı gerçekten Tab'a bastıktan sonra (html.ah-klavye,
      index.html'deki tek satırlık dinleyici) odakta görünür. Açılışta
      tarayıcının ya da bir betiğin verdiği odak onu göstermez.
   3) Aynı gizleme kuralı index.html <head> içinde satır içi de var;
      style.css geç uygulansa bile bağlantı görünmez. */
.ah-atla {
  position: absolute;
  left: 8px; top: 8px;
  z-index: 9999;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
html.ah-klavye .ah-atla:focus {
  width: auto; height: auto;
  margin: 0; padding: 10px 16px;
  overflow: visible;
  clip: auto; clip-path: none;
  border-radius: 8px;
  background: var(--accent, #2563eb);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  outline: 3px solid var(--accent, #2563eb);
  outline-offset: 2px;
}


/* =========================================================
   SÜRÜM 8.15 — RENKLİ İKON KUTUCUKLARI (bütün modüller)
   İkonun anlam rengi icons.js tarafından --ik / --ik2 olarak
   ikonun üzerine yazılır. Kart ikonları soluk zemin yerine
   bu renkle dolu kutucukta beyaz çizgiyle durur; bölüm
   başlıklarındaki ikonlar aynı rengin açık tonunda kapsüle
   alınır. Yazdırmada (aşağıdaki @media print) siyah çizgiye döner.
========================================================= */
.card-icon, .age-icon { background:none !important; }
.age-icon > .ah-ikon { width:100%; height:100%; }
.age-icon .ah-cizgi { stroke:#fff; }
.age-icon .ah-dolgu { fill:rgba(255,255,255,.28); }
.card-icon > .ah-ikon,
.age-icon > .ah-ikon,
.hk-ico > .ah-ikon {
  display:grid; place-items:center; border-radius:inherit;
  background:linear-gradient(145deg, var(--ik, var(--accent)), var(--ik2, var(--ik, var(--accent))));
  box-shadow:0 3px 8px color-mix(in srgb, var(--ik, var(--accent)) 28%, transparent),
             inset 0 1px 0 rgba(255,255,255,.25);
}
.card-icon > .ah-ikon { width:100%; height:100%; }
.hk-ico > .ah-ikon { width:26px; height:26px; border-radius:8px; }
.hk-ico > .ah-ikon svg { width:16px; height:16px; }
.card-icon .ah-cizgi, .hk-ico .ah-cizgi { stroke:#fff; }
.card-icon .ah-dolgu, .hk-ico .ah-dolgu { fill:rgba(255,255,255,.28); }

.sec-title > .ah-ikon {
  display:inline-grid; place-items:center; flex-shrink:0;
  width:1.75em; height:1.75em; border-radius:.5em;
  background:color-mix(in srgb, var(--ik, var(--accent)) 15%, transparent);
}
@media print {
  .card-icon > .ah-ikon, .hk-ico > .ah-ikon, .sec-title > .ah-ikon { background:none !important; box-shadow:none !important; }
}

/* =========================================================
   SÜRÜM 8.15 — KOYU TEMALARDA VURGU DOLGUSU ÜZERİNDE YAZI
   Modüllerin seçili sekme ve birincil düğmeleri vurgu rengini
   zemin, beyazı yazı olarak kullanıyordu. Gece/Alaca temalarında
   vurgu açık bir ton olduğundan beyaz yazı 2–2,5:1 kontrastta
   kalıyordu (8.15 öncesinden beri). Bu temalarda yazı koyu
   laciverte çekilir (≥8:1).
========================================================= */
:is(html[data-theme="dark"], html[data-theme="los"]) :is(
  .ag-tab.on, .ay-boyut button.active, .btn.primary, .cs-cip.on, .cs-kopyala,
  .cs-secenek.on, .cs-sekme.on, .cz-tab.on, .el-tab.on, .en-tab.on, .g-cat.on,
  .g-go:hover, .gr-tab.on, .hs-tab.on, .is-tab.on, .kg-no.ok, .kg-tab.on,
  .kk-adim.bitti .kk-kutucuk, .kv-tab.on, .oz-tab.on, .pc-tab.on, .po-tab.on,
  .pr-tab.on, .rf-tab.on, .rs-tab.on, .sec-kutu.sec .sec-kutu-k, .sec-s.on,
  .sk-tab.on, .sv-d.birincil, .sv-devam-et, .sv-sec-btn.on, .tk-tab.on,
  button.primary, nav button.on, nav.tabs [role="tab"][aria-selected="true"], .hb
) { color:#0d1218; }
:is(html[data-theme="dark"], html[data-theme="los"]) :is(.rs-tab.on, .ag-tab.on, .tk-tab.on, .en-tab.on, .hb) .ah-cizgi { stroke:#0d1218; }

/* 8.15: Seçili (dolu) sekmede ikon, sekme yazısının rengini alır.
   Önceden ikon kendi rengini koruyordu; kırmızı sekmede kırmızı
   ikon gibi zeminde kaybolan bir leke oluşuyordu. */
:is([class*="-tab"].on, .tab-btn.active, .cat-btn.active, .g-cat.on, nav button.on) .ah-cizgi { stroke:currentColor; }
:is([class*="-tab"].on, .tab-btn.active, .cat-btn.active, .g-cat.on, nav button.on) .ah-dolgu { fill:currentColor; fill-opacity:.22; }

/* 8.15 — modül künyesi (app.js) */
.ah-kunye { margin:28px 0 8px; padding:12px 14px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap;
  gap:10px 16px; align-items:center; justify-content:space-between; font-size:calc(11px * var(--ah-yazi, 1)); color:var(--text3); line-height:1.5; }
.ah-kunye-m { display:flex; flex-wrap:wrap; gap:4px 14px; min-width:0; }
.ah-kunye-m b { color:var(--text2); font-weight:700; }
.ah-kunye-m a { color:var(--accent); font-weight:600; }
.ah-kunye-b { min-height:40px; padding:0 14px; border-radius:10px; border:1px dashed var(--aborder); background:var(--abg);
  color:var(--accent); font:inherit; font-weight:700; cursor:pointer; }
.ah-kunye-b:hover { background:color-mix(in srgb, var(--accent) 16%, transparent); }
@media print { .ah-kunye { display:none; } }