/* =========================================================
   ANESTHUB — RENK KATMANI (sürüm 8.15)

   NEDEN
   Kullanıcı geri bildirimi: "Uygulama çok soluk, bir iki renk
   var; kırmızı, sarı, turuncu gibi canlı renkler yok denecek
   kadar az." Arayüz bütünüyle yeşil-gri tek vurgu üzerine
   kuruluydu; menü başlıkları ve kartlar birbirinin aynısıydı.

   NE YAPAR
   1) Her konu grubuna kalıcı bir RENK KİMLİĞİ verir. Aynı renk
      yan menüde, ana sayfa bölüm başlığında ve kartlarda
      tekrarlanır; kullanıcı "kırmızı = acil, mavi = cihaz"
      eşlemesini kısa sürede öğrenir ve aradığını rengiyle bulur.
   2) Ana sayfa ve hızlı menü ikonlarını, ikonun kendi anlam
      rengiyle dolu renkli kutucuklara koyar (beyaz ikon).
   3) Üst başlığın altına ince bir renk şeridi ekler.

   KURALLAR
   · Metin olarak kullanılan renk her zaman "-m" (mürekkep)
     tonudur; kart zemininde ≥5:1 kontrast ölçüldü.
   · Dolgu üzerindeki yazı rengi --g-on ile verilir: açık
     temalarda beyaz (mürekkep tonları ≥5:1), koyu temalarda
     koyu lacivert.
   · Renk tek başına anlam taşımaz; her grubun adı yazılıdır.
   · Yalnızca index.html'de yüklenir (menü, ana sayfa, hızlı
     menü orada). Modüllerin renkleri style.css değişkenlerinden
     gelir ve onlar da bu sürümde canlandırıldı.
========================================================= */

/* ── 1 · KATEGORİ RENKLERİ: style.css'te tanımlı (--k-*), bütün sayfalar kullanır ── */

/* Grup → renk eşlemesi. --g: canlı ton (çizgi, nokta, dolgu)
   --gm: mürekkep ton (yazı, açık grup başlığı zemini). */
.nav-grup[data-grup="acil"]            { --g:var(--k-acil);     --gm:var(--k-acil-m); }
.nav-grup[data-grup="cihaz"]           { --g:var(--k-cihaz);    --gm:var(--k-cihaz-m); }
.nav-grup[data-grup="perioperatif"]    { --g:var(--k-periop);   --gm:var(--k-periop-m); }
.nav-grup[data-grup="hasta-gruplari"]  { --g:var(--k-hasta);    --gm:var(--k-hasta-m); }
.nav-grup[data-grup="cerrahi-klinik"]  { --g:var(--k-cerrahi);  --gm:var(--k-cerrahi-m); }
.nav-grup[data-grup="rejyonal"]        { --g:var(--k-rejyonal); --gm:var(--k-rejyonal-m); }
.nav-grup[data-grup="arac"]            { --g:var(--k-arac);     --gm:var(--k-arac-m); }
.nav-grup[data-grup="egitim"]          { --g:var(--k-egitim);   --gm:var(--k-egitim-m); }

/* ── 2 · ÜST BAŞLIK: İNCE RENK ŞERİDİ ──────────────────── */
header { position:sticky; }
header::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:var(--serit); pointer-events:none;
}
html[data-theme] .logo-name { letter-spacing:-.02em; }

/* ── 3 · YAN MENÜ ───────────────────────────────────────
   Gruplar kapalı başlar; yalnız biri açık durur (index.html →
   ahMenuGrup). Kapalı başlık: renkli zemin + sol renk çubuğu.
   Açık başlık: dolu renk. Alt bağlantılar grubun rengiyle
   işaretlenir; böylece hangi bölümde olunduğu kaybolmaz. */
html[data-theme] aside { padding:10px 0 18px; }
html[data-theme] .nav-grup { border-bottom:0; margin:5px 10px; }
html[data-theme] button.nav-group-label {
  position:relative;
  min-height:42px; padding:10px 12px 10px 16px;
  border-radius:11px;
  background:color-mix(in srgb, var(--g) 11%, var(--bg2));
  color:var(--gm);
  font-size:calc(10.5px * var(--ah-yazi, 1));
  letter-spacing:.06em; font-weight:800;
  box-shadow:inset 4px 0 0 var(--g);
  transition:background .15s, color .15s, box-shadow .15s;
}
html[data-theme] button.nav-group-label::after { color:currentColor; opacity:.8; }
html[data-theme] button.nav-group-label:hover {
  background:color-mix(in srgb, var(--g) 19%, var(--bg2));
  color:var(--gm);
}
html[data-theme] .nav-grup.acik button.nav-group-label,
html[data-theme] .nav-grup.acik button.nav-group-label:hover {
  background:var(--gm); color:var(--g-on);
  box-shadow:0 4px 12px color-mix(in srgb, var(--g) 30%, transparent);
}
html[data-theme] .nav-grup.icinde-aktif:not(.acik) button.nav-group-label { color:var(--gm); }
/* İçinde etkin sayfa olan kapalı grup: sağda renkli nokta */
html[data-theme] .nav-grup.icinde-aktif:not(.acik) button.nav-group-label::before {
  content:''; position:absolute; right:30px; top:50%; width:7px; height:7px;
  margin-top:-3.5px; border-radius:50%; background:var(--g);
}
html[data-theme] button.nav-group-label:focus-visible { outline:2px solid var(--g); outline-offset:2px; }

html[data-theme] .nav-grup .nav-ic {
  margin:6px 0 4px 10px; padding:2px 0 2px 4px;
  border-left:2px solid color-mix(in srgb, var(--g) 40%, transparent);
}
html[data-theme] .nav-grup .nav-link.nav-sub {
  margin:1px 0 1px 4px; padding-left:12px; border-radius:9px; border-left:0;
}
html[data-theme] .nav-grup .nav-link.nav-sub2 { padding-left:22px; }
html[data-theme] .nav-grup .nav-link:hover {
  background:color-mix(in srgb, var(--g) 10%, transparent); color:var(--text);
}
html[data-theme] .nav-grup .nav-link.active {
  background:color-mix(in srgb, var(--g) 15%, transparent);
  color:var(--gm); font-weight:700;
  box-shadow:inset 3px 0 0 var(--g);
}

/* Ana Sayfa ve Favorilerim satırları */
html[data-theme] aside > .nav-link { margin:2px 10px; border-radius:10px; border-left:0; }
html[data-theme] aside > .nav-link.active {
  background:var(--abg); color:var(--accent); box-shadow:inset 3px 0 0 var(--accent);
}

/* ── 4 · HIZLI MENÜ ─────────────────────────────────────
   Her araç kendi ikon rengini taşır (--ik, icons.js yazar). */
html[data-theme] .hm-item { color:var(--text2); border-radius:10px; }
html[data-theme] .hm-item:hover,
html[data-theme] .hm-item:focus-visible {
  background:color-mix(in srgb, var(--ik, var(--accent)) 12%, transparent);
  border-color:color-mix(in srgb, var(--ik, var(--accent)) 35%, transparent);
  color:var(--text);
}
html[data-theme] .hm-item .ah-ikon {
  width:26px; height:26px; border-radius:8px;
  align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ik, var(--accent)) 15%, transparent);
}
html[data-theme] .hm-item .ah-ikon svg { width:17px; height:17px; }
html[data-theme] .hm-sivi { color:var(--red); }

/* ── 5 · ANA SAYFA ─────────────────────────────────────── */

/* Renkli ikon kutucuğu: ikonun kendi rengiyle dolu, beyaz çizgi */
html[data-theme] .hs-k-i,
html[data-theme] .hs-a-i {
  background:none !important; padding:0;
}
html[data-theme] .hs-k-i > .ah-ikon,
html[data-theme] .hs-a-i > .ah-ikon {
  width:100%; height:100%; 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)) 30%, transparent),
             inset 0 1px 0 rgba(255,255,255,.25);
}
html[data-theme] .hs-k-i .ah-cizgi,
html[data-theme] .hs-a-i .ah-cizgi { stroke:#fff; }
html[data-theme] .hs-k-i .ah-dolgu,
html[data-theme] .hs-a-i .ah-dolgu { fill:rgba(255,255,255,.28); }
/* Koyu temalarda beyaz çizgi parlak zeminde kaybolmasın */
html[data-theme="dark"] .hs-k-i .ah-cizgi, html[data-theme="los"] .hs-k-i .ah-cizgi,
html[data-theme="dark"] .hs-a-i .ah-cizgi, html[data-theme="los"] .hs-a-i .ah-cizgi { stroke:#fff; }
html[data-theme="dark"] .hs-k-i > .ah-ikon, html[data-theme="los"] .hs-k-i > .ah-ikon,
html[data-theme="dark"] .hs-a-i > .ah-ikon, html[data-theme="los"] .hs-a-i > .ah-ikon {
  background:linear-gradient(145deg, var(--ik2, var(--ik)), color-mix(in srgb, var(--ik2, var(--ik)) 70%, #000));
}

/* Kartlar: daha temiz yüzey, renkli üst çizgi yerine sol vurgu */
html[data-theme] .hs-k,
html[data-theme] .hs-a {
  border-color:color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow:var(--shadow);
}
html[data-theme] .hs-k:hover,
html[data-theme] .hs-a:hover {
  border-color:color-mix(in srgb, var(--ik, var(--accent)) 45%, var(--border));
  background:color-mix(in srgb, var(--ik, var(--accent)) 5%, var(--bg2));
  box-shadow:0 8px 22px color-mix(in srgb, var(--ik, var(--accent)) 16%, transparent);
}
/* Acil kartları: kırmızı sol şerit — "burada acil var" tek bakışta */
html[data-theme] .hs-a { box-shadow:inset 4px 0 0 var(--k-acil), var(--shadow); }
html[data-theme] .hs-a:hover { box-shadow:inset 4px 0 0 var(--k-acil), 0 8px 22px color-mix(in srgb, var(--k-acil) 16%, transparent); }

/* Bölüm başlıkları: ikon renkli kapsülde */
html[data-theme] .hs-baslik .ah-ikon {
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px;
  background:color-mix(in srgb, var(--ik, var(--accent)) 16%, transparent);
}
html[data-theme] .hs-baslik .ah-ikon svg { width:15px; height:15px; }

/* "Biliyor muydunuz?" — sarı */
html[data-theme] .hs-ipucu {
  background:linear-gradient(135deg, color-mix(in srgb, var(--k-arac) 13%, var(--bg2)), var(--bg2) 70%);
  border-color:color-mix(in srgb, var(--k-arac) 40%, var(--border));
  border-left:4px solid var(--k-arac);
}
html[data-theme] .hs-ipucu-t { color:var(--k-arac-m); }
html[data-theme] .hs-ipucu-i .ah-ikon {
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--k-arac);
}
html[data-theme] .hs-ipucu-i .ah-cizgi { stroke:#3a2600; }
html[data-theme] .hs-ipucu-i .ah-dolgu { fill:rgba(255,255,255,.35); }

/* "Günün sorusu" — mor */
html[data-theme] .hs-gunluk {
  background:linear-gradient(135deg, color-mix(in srgb, var(--k-hasta) 12%, var(--bg2)), var(--bg2) 70%);
  border-color:color-mix(in srgb, var(--k-hasta) 35%, var(--border));
  border-left:4px solid var(--k-hasta);
}

/* Arama kutusu: odakta renkli halka */
html[data-theme] .hs-ara:focus-within {
  border-color:var(--k-cihaz);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--k-cihaz) 18%, transparent);
}

/* Birincil düğmeler: düz yerine hafif geçişli */
html[data-theme] .hs-ipucu-b.ana,
html[data-theme] .ah-paylas-btn {
  background:linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #000));
  color:#fff; border-color:transparent;
}
html[data-theme="dark"] .hs-ipucu-b.ana, html[data-theme="los"] .hs-ipucu-b.ana,
html[data-theme="dark"] .ah-paylas-btn, html[data-theme="los"] .ah-paylas-btn { color:#0d1218; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme] button.nav-group-label, html[data-theme] .hm-item { transition:none; }
}
@media print {
  header::after { display:none; }
}

/* ── 6 · DAR EKRAN (≤620 px) ─────────────────────────────
   Hızlı menüde simge üstte, ad altta. Renkli simge kutusu biraz
   küçülür; "Ayarlar" gibi alt uzantılı harfler kesilmesin diye
   satır yüksekliği açılır. Sıvı-Kanama kırmızı kapsülde durur. */
@media (max-width:620px) {
  html[data-theme] .hm-item .ah-ikon { width:22px; height:22px; border-radius:7px; transform:none; }
  html[data-theme] .hm-item .ah-ikon svg { width:15px; height:15px; }
  html[data-theme] .hm-metin { line-height:1.22; padding-bottom:1px; }
  html[data-theme] .hm-sivi {
    background:var(--rbg); border-color:color-mix(in srgb, var(--red) 30%, transparent);
    margin:3px 2px; height:auto;
  }
  html[data-theme] .nav-grup { margin:5px 8px; }
}

/* ── 7 · KRİZ MODU (kriz.js) ─────────────────────────────
   Tam ekran, büyük yazı; yazı boyutu tercihinden BAĞIMSIZ
   (en küçük yazı seçili olsa bile kriz ekranı okunur kalır). */
.kriz-katman { position:fixed; inset:0; z-index:5000; display:none; flex-direction:column;
  background:var(--bg); color:var(--text); font-size:15px; }
.kriz-katman.acik { display:flex; }
html.kriz-acik, html.kriz-acik body { overflow:hidden; }
.kriz-ust { display:flex; align-items:center; gap:10px; padding:10px 12px; padding-top:max(10px, env(safe-area-inset-top));
  background:var(--kr, #c42029); color:#fff; flex-shrink:0; }
.kriz-baslik { flex:1; min-width:0; font-weight:800; font-size:17px; line-height:1.2; }
.kriz-saat { font-family:var(--mono); font-weight:800; font-size:20px; letter-spacing:.02em; }
.kriz-ust button { width:44px; height:44px; border-radius:12px; border:0; background:rgba(255,255,255,.18); color:#fff;
  font-size:22px; font-weight:700; cursor:pointer; flex-shrink:0; }
.kriz-ust button:hover { background:rgba(255,255,255,.3); }
.kriz-govde { flex:1; overflow-y:auto; padding:12px; padding-bottom:max(18px, env(safe-area-inset-bottom));
  max-width:760px; width:100%; margin:0 auto; -webkit-overflow-scrolling:touch; }
.kriz-secim { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:6px 0 14px; }
.kriz-sen { min-height:84px; border-radius:14px; border:0; color:#fff; font-size:17px; font-weight:800; text-align:left;
  padding:14px 16px; cursor:pointer; background:linear-gradient(145deg, var(--kr), color-mix(in srgb, var(--kr) 72%, #000));
  box-shadow:0 6px 16px color-mix(in srgb, var(--kr) 30%, transparent); }
.kriz-kg { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px; line-height:1.6; }
.kriz-kg-gir { display:inline-flex; align-items:center; gap:6px; margin-left:4px; }
.kriz-kg-gir input { width:90px; min-height:40px; font-size:16px; padding:4px 8px; border-radius:8px; border:1px solid var(--border2);
  background:var(--bg); color:var(--text); }
.kriz-not { color:var(--text3); font-size:13px; margin-top:12px; line-height:1.5; }
.kriz-dongu { display:flex; align-items:center; gap:10px; background:var(--bg2); border:2px solid var(--border); border-radius:14px;
  padding:10px 12px; margin-bottom:10px; }
.kriz-dongu span { flex:1; font-weight:700; color:var(--text2); }
.kriz-dongu b { font-family:var(--mono); font-size:28px; }
.kriz-dongu.yakin { border-color:var(--red); background:var(--rbg); }
.kriz-dongu.yakin b { color:var(--red); }
.kriz-dongu button, .kriz-alt button { min-height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--border2);
  background:var(--bg); color:var(--text); font-weight:700; font-size:14px; cursor:pointer; }
.kriz-olaylar { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.kriz-olay { min-height:58px; border-radius:12px; border:2px solid var(--border); background:var(--bg2); color:var(--text);
  font-size:15px; font-weight:700; padding:8px 10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:3px; cursor:pointer; text-align:left; }
.kriz-olay:active { transform:scale(.98); }
.kriz-olay b { color:var(--red); }
.kriz-sayac { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text3); }
.kriz-sayac.hazir { color:#fff; background:var(--red); border-radius:6px; padding:1px 6px; }
.kriz-sayac.asim { color:var(--red); }
.kriz-bolum { margin:16px 0 6px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }
.kriz-adim { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.kriz-adim li { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:var(--bg2);
  border:1px solid var(--border); font-size:15.5px; line-height:1.45; cursor:pointer; min-height:48px; }
.kriz-adim li:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.kriz-kutu { flex-shrink:0; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:800;
  background:var(--bg3); color:var(--text2); font-size:14px; }
.kriz-adim li.tamam { background:var(--abg); border-color:var(--aborder); color:var(--text2); }
.kriz-adim li.tamam .kriz-kutu { background:var(--accent); color:#fff; }
.kriz-adim small { color:var(--text3); font-family:var(--mono); font-size:12px; margin-left:4px; }
.kriz-doz { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px; }
.kriz-doz > div { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:9px 11px; display:flex; flex-direction:column; gap:2px; }
.kriz-doz span { font-size:12.5px; font-weight:700; color:var(--text2); }
.kriz-doz b { font-family:var(--mono); font-size:19px; color:var(--text); }
.kriz-doz small { font-size:12px; color:var(--text3); line-height:1.35; }
.kriz-kayit { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:8px 10px; max-height:240px; overflow-y:auto;
  font-size:13.5px; line-height:1.6; }
.kriz-kayit time { font-family:var(--mono); font-weight:700; }
.kriz-kayit span { font-family:var(--mono); color:var(--text3); }
.kriz-kayit .bos { color:var(--text3); }
.kriz-alt { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
html[data-theme="dark"] .kriz-adim li.tamam .kriz-kutu, html[data-theme="los"] .kriz-adim li.tamam .kriz-kutu { color:#0d1218; }

/* Ana sayfa ve menüdeki kriz girişi */
.hs-kriz-btn { display:flex; align-items:center; gap:12px; width:100%; margin:0 0 10px; padding:12px 14px; border:0; border-radius:14px;
  cursor:pointer; text-align:left; color:#fff; font:inherit;
  background:linear-gradient(135deg, #d9262e, #a3151c); box-shadow:0 6px 16px rgba(196,32,41,.28); min-height:56px; }
.hs-kriz-btn b { display:block; font-size:calc(15px * max(var(--ah-yazi,1), .9)); letter-spacing:.01em; }
.hs-kriz-btn small { display:block; font-size:calc(11.5px * max(var(--ah-yazi,1), .9)); opacity:.9; line-height:1.35; }
.hs-kriz-btn .hs-kriz-i { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.2); display:grid; place-items:center;
  font-size:20px; flex-shrink:0; }
.hs-kriz-btn:hover { filter:brightness(1.06); }
@media print { .kriz-katman { display:none !important; } }

/* ── 8 · "BU SÜRÜMDE YENİ" KARTI ── */
.hs-yeni { margin:0 0 12px; padding:12px 14px 10px; border-radius:14px; border:1px solid color-mix(in srgb, var(--k-cihaz) 35%, var(--border));
  border-left:4px solid var(--k-cihaz); background:linear-gradient(135deg, color-mix(in srgb, var(--k-cihaz) 10%, var(--bg2)), var(--bg2) 70%); }
.hs-yeni[hidden] { display:none; }
.hs-yeni-ust { display:flex; align-items:center; gap:8px; }
.hs-yeni-ust b { color:var(--k-cihaz-m); font-size:calc(13px * max(var(--ah-yazi,1), .9)); }
.hs-yeni-s { font-family:var(--mono); font-size:calc(11px * max(var(--ah-yazi,1), .9)); color:var(--text3); flex:1; }
.hs-yeni-k { width:36px; height:36px; border-radius:9px; border:0; background:transparent; color:var(--text3); font-size:16px; cursor:pointer; }
.hs-yeni-k:hover { background:var(--bg3); }
.hs-yeni-l { margin:6px 0 0; padding-left:18px; font-size:calc(12px * max(var(--ah-yazi,1), .9)); line-height:1.55; color:var(--text2); }
.hs-yeni-l b { color:var(--text); }