/* =====================================================================
   RENK VE YUZEY KATMANI

   Once her sey tek bir gri zeminde, sac teli kalinliginda cerceveyle
   duruyordu: kart da, zemin de, ust bar da ayni duzlemdeydi ve ekran
   "bitmemis" gorunuyordu. Artik UC yuzey kademesi var —

     --bg     ekranin zemini (kartlar bunun UZERINDE durur)
     --panel  ust bar, yan menu, pencere gibi tasiyici yuzeyler
     --card   listedeki kart; zeminden hem rengi hem golgesiyle ayrilir

   `--card` ve `--card-alt` daha once KULLANILIYOR ama hicbir yerde
   TANIMLI DEGILDI (ayar kartlari, cihaz kutulari, ham veri satirlari).
   Tanimsiz degisken sessizce "transparent" olur: o kartlarin zemini
   hic boyanmiyordu. 2026-08-26'da fark edildi.
   ===================================================================== */
:root {
  --bg: #eef2f6;
  --panel: #ffffff;
  --card: #ffffff;
  --card-alt: #f5f8fa;
  --line: #dde3ea;
  --line-soft: #eaeff4;

  --ink: #0f151c;
  --ink-2: #3b4652;
  --muted: #68737f;

  --accent: #0f766e;
  --accent-2: #0b5c56;            /* uzerine gelince / basiliyken */
  --accent-soft: #e0f0ee;
  /* Vurgu renginin UZERINE yazilan yazi. Sabit `#fff` yazmak karanlik
     temada patliyordu: orada vurgu acik turkuaz (#2dd4bf) ve uzerine
     beyaz yazi neredeyse okunmuyordu. */
  --accent-ink: #ffffff;

  --high: #b42318;
  --high-bg: #fef3f2;
  /* Uyari — hatadan AYRI: gunlukte WARNING ile ERROR ayni
     gorunmemeli. */
  --warn: #9a5b06;
  /* Kirmizinin UZERINE yazilan yazi — `--accent-ink` ile ayni gerekce.
     Sabit `#fff` yaziliyordu ve karanlik temada patliyordu: orada
     `--high` acik kirmizi (#ff7b72) ve beyaz yazinin kontrasti 2,53
     olcüldü (asgari 4,5). Alti ayri yerde ayni hata vardi. */
  --high-ink: #ffffff;
  --low: #1d4ed8;
  --low-bg: #eff4ff;
  --ok: #027a48;
  --ok-bg: #ecfdf3;
  /* Onay bekleyen sonuc icin: dikkat cekmeli ama "anormal deger" kadar
     alarm vermemeli — ikisi farkli seylerdir. */
  --uyari: #b54708;
  --uyari-bg: #fffaeb;

  /* Kose yaricaplari 04.09.2026'da bir kademe yumusatildi (12/9/16 ->
     14/10/20). Kare koseli kutu "form" gibi duruyordu; yumusak kose
     ayni bilgiyi daha az sert gosteriyor. */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  /* Golgeler 04.09.2026'da yeniden yazildi. Oncekiler KISA ve KOYUYDU
     (1-3px yayilim, .08 koyuluk): kart zeminden "kesilmis kagit" gibi
     ayriliyordu. Gercek golge genis ve soluk olur. Her kademe iki
     katman: yakin ve keskin olan sekli belli eder, uzak ve genis olan
     derinligi verir. */
  --shadow:
    0 1px 2px rgba(16,24,40,.04),
    0 2px 8px -2px rgba(16,24,40,.07);
  --shadow-2:
    0 2px 4px rgba(16,24,40,.04),
    0 10px 24px -6px rgba(16,24,40,.11);
  --shadow-3:
    0 4px 10px rgba(16,24,40,.05),
    0 20px 48px -14px rgba(16,24,40,.20);

  --yan-genislik: 232px;          /* yan menu — tek yerden degistirilir */
  /* Ust barin yuksekligi. Yan menu buradan asagi baslar. Burada bir
     baslangic degeri duruyor; gercek deger app.js `ustBariOlc()` ile
     olculup ayni degiskene yaziliyor — klinik adi uzun olup ust bar
     ikinci satira tastiginda menu de asagi kaysin diye. */
  --ustbar-yuksekligi: 58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1015;
    --panel: #141920;
    --card: #171d25;
    --card-alt: #1c232c;
    --line: #29313c;
    --line-soft: #212832;

    --ink: #e9edf2;
    --ink-2: #b9c2cd;
    --muted: #94a0ae;

    --accent: #2dd4bf;
    --accent-2: #5ee7d6;
    --accent-soft: #10312e;
    --accent-ink: #04211f;        /* acik turkuazin uzerinde KOYU yazi */

    --high: #ff7b72;
    --high-bg: #2d1614;
    --warn: #fbbf24;
    --high-ink: #2a100d;          /* acik kirmizinin uzerinde KOYU yazi */
    --low: #79a8ff;
    --low-bg: #131f38;
    --ok: #3fcf8e;
    --ok-bg: #10261c;
    --uyari: #fdb022;
    --uyari-bg: #2b1f08;

    --shadow: 0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 4px 14px rgba(0,0,0,.5);
    --shadow-3: 0 16px 40px rgba(0,0,0,.62);
  }
}

* { box-sizing: border-box; }

/* `hidden` her zaman gizlesin.
   Tarayicinin varsayilan [hidden]{display:none} kurali, yazdigimiz herhangi
   bir sinif kuralindan (.giris-ekran{display:grid} gibi) daha zayiftir; o
   yuzden hidden isaretlenen ogeler ekranda kalabiliyordu. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI Variable Text",
        "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
/* Sayilar tabloda ve kartlarda alt alta HIZALI dussun. Laboratuvar
   ekraninda goz once sayiyi tariyor; degisken genislikli rakam bu
   taramayi bozuyor. */
.stat b, .results td.num, .denetim td, .kart-sayi { font-variant-numeric: tabular-nums; }

h1, h2, h3 { letter-spacing: -.018em; }

/* Klavyeyle gezenler icin gorunur odak. Tarayicinin varsayilan ince
   noktali cercevesi koyu temada neredeyse gorunmuyordu. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- ust bar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1.1rem;
  padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
/* Marka isareti: duz emoji yerine renkli bir madalyon. Ust barin sol
   ucu artik bir "logo" gibi duruyor, kacak bir karakter gibi degil. */
.logo {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow);
}
.topbar h1 {
  margin: 0; font-size: 1.02rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub {
  margin: 0; font-size: .76rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.live {
  display: flex; align-items: center; gap: .4rem;
  font-size: .76rem; color: var(--muted);
  padding: .28rem .65rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card-alt);
  white-space: nowrap;
}
.live .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.live.on .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.live.off .dot { background: var(--high); box-shadow: 0 0 0 3px var(--high-bg); }

/* --------------------------------------------------------------- ozet */
/* Ozette ALTI kutu var. En kucuk genislik bilerek 112px: boylece bir
   satira 6, 3 ya da 2 kutu siger — ucu de altiyi tam boler, yani hicbir
   ekran genisliginde tek basina asagi sarkan bir kutu kalmaz. 124px'te
   genis ekranda 5+1 diziliyordu ve o yalniz kutu ozeti dagitiyordu. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .6rem; padding: 1.1rem 1rem 0; max-width: 1100px; margin: 0 auto;
}
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .85rem;
  box-shadow: var(--shadow);
}
.stat b {
  display: block; font-size: 1.5rem; line-height: 1.15;
  font-weight: 650; letter-spacing: -.02em;
}
.stat span {
  display: block; margin-top: .1rem;
  font-size: .74rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .045em; font-weight: 600;
}
.stat.warn b { color: var(--high); }
/* Dikkat isteyen ozet kutusu, sayinin renginden BASKA bir isaret de
   tasisin: renk korlugu olan bir hekim icin kirmizi tek basina yeterli
   bir sinyal degil. */
.stat.warn { border-color: var(--high); background: var(--high-bg); }

/* ------------------------------------------------------------- cihazlar */
.devices {
  display: flex; gap: .45rem; overflow-x: auto; padding: .9rem 1rem .25rem;
  max-width: 1100px; margin: 0 auto; scrollbar-width: thin;
}
.device {
  flex: none; display: flex; align-items: center; gap: .45rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .35rem .8rem; font-size: .79rem;
  white-space: nowrap; box-shadow: var(--shadow);
}
.device .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.device[data-status="bagli"] .dot { background: var(--ok); }
.device[data-status="bekliyor"] .dot { background: #f59e0b; }
.device[data-status="hata"] .dot,
.device[data-status="kapali"] .dot { background: var(--high); }
.device small { color: var(--muted); }

/* --------------------------------------------------------------- araclar */
.toolbar {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding: 1rem 1rem .35rem; max-width: 1100px; margin: 0 auto;
}
.toolbar input[type="search"], .toolbar select {
  /* Dokunma hedefi kurali (A7): olculdu, 42–43px'te kaliyorlardi. */
  font: inherit; padding: .55rem .8rem; min-height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  box-shadow: var(--shadow);
}
.toolbar input[type="search"]:focus, .toolbar select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.toolbar input[type="search"] { flex: 1 1 240px; min-width: 0; }
/* Suzgec tiki bir dugme gibi gorunsun: ciplak kare + yazi, iki secenegin
   hangisinin acik oldugunu goz ucuyla okumayi zorlastiriyordu. */
.chk {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--ink-2); cursor: pointer;
  padding: .45rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow); user-select: none;
}
.chk:hover { border-color: var(--accent); }
.chk:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
.chk input { accent-color: var(--accent); }
/* `:has()` desteklemeyen eski WebView'da yukaridaki kural sessizce
   dusuyor; tik yine gorunur, yalniz vurgu olmaz. Bilincli. */

/* -------------------------------------------------------------- liste */
main { max-width: 1100px; margin: 0 auto; padding: 0 1rem 3rem; }
.samples { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }

.sample {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .8rem .95rem; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem;
  align-items: center;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.sample:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
/* Dokunmatik ekranda "uzerine gelme" diye bir sey yok; orada kaldirma
   efekti parmagin altinda titremeye benziyordu. */
@media (hover: none) { .sample:hover { transform: none; box-shadow: var(--shadow); } }
.sample:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sample.yeni { animation: flash 1.6s ease-out; }
@keyframes flash {
  from { background: var(--accent-soft); border-color: var(--accent); }
  to   { background: var(--panel); }
}
/* Kart duzeni: solda hayvanin adi ve ayrintilari, sagda saat.
 *
 * `.right` icin `grid-column: 2` YAZMAK ZORUNLU — ve eksikti (2026-08-26).
 * Izgara yerlestirme algoritmasi once SATIRI belli olan ogeleri koyar:
 * `.right`in satiri belliydi (`1 / span 2`), sutunu degildi, bu yuzden
 * ilk bos sutuna — yani 1. sutuna — oturuyordu. Adi tasiyan `.who` ise
 * ondan SONRA yerlestiginden 2. sutuna dusuyordu.
 *
 * Sonuc: her numune kartinda SAAT genis sol sutunu kapliyor, hayvanin
 * adi sagda dar bir seride sikisiyordu. Uzun bir ad ("Boncuk Yildirim")
 * orada satir satir kiriliyordu. Ekranin en cok bakilan yeri burasi.
 */
.sample .who { grid-column: 1; font-weight: 650; font-size: 1.02rem; }
.sample .meta {
  grid-column: 1; font-size: .78rem; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .1rem;
}
.sample .right {
  grid-column: 2; grid-row: 1 / span 2;
  text-align: right; font-size: .78rem; color: var(--muted);
  white-space: nowrap; align-self: start;
}
.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600;
}
.badge.abn { background: var(--high-bg); color: var(--high); }
.badge.norm { background: var(--ok-bg); color: var(--ok); }
.badge.new { background: var(--accent-soft); color: var(--accent); }
.badge.onaysiz { background: var(--uyari-bg); color: var(--uyari); }
/* Hasta ID'si — cihaza girilecek numara oldugu icin okunakli olmali. */
.hasta-id {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700; letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent);
  padding: .05rem .4rem; border-radius: 6px;
}
.onay-kutu {
  margin: .6rem 0; padding: .55rem .7rem; border-radius: var(--radius);
  background: var(--uyari-bg); color: var(--uyari); font-size: .88rem;
}
.onay-kutu.tamam { background: var(--ok-bg); color: var(--ok); }

/* ===================================================== YAZDIRMA (A4)
   Ekranda gizli duran #baski, baskida tek gorunen ogedir. Boylece yeni
   pencere acmaya gerek kalmaz (acilir pencere engelleyicileri sorun
   cikariyordu) ve rapor ekrandaki arayuzden tamamen bagimsiz kalir. */
/* Teknik ayrinti gizleme.
   Cihaz seri numarasi, reaktif lot no, test kodu, numune no, ham mesaj, dosya
   boyutu… Bunlar ariza ararken gerekli ama gunluk kullanimda ekrani doldurup
   asil bilgiyi (hasta, sonuc, deger) gorunmez kiliyordu.

   Veri SILINMIYOR: veritabaninda ve ham mesajda duruyor, CSV'ye ve Canli
   ekranina da giriyor — yalnizca gunluk ekranlarda gosterilmiyor. */
.teknik { display: none !important; }

/* Havuz icindeki alt secim: laboratuvar sonuclari / rontgen-ultrason.
   Bolum menusu artik solda (ya da altta) durdugu icin bunun onunla
   karisma tehlikesi kalmadi; ikisi arasinda gecis yapilan bir SECIM
   dugmesi olarak, tek bir cerceve icinde iki yarim. */
.alt-sekmeler {
  display: inline-flex; gap: .2rem; margin: .2rem 0 1rem;
  padding: .25rem;
  background: var(--card-alt); border: 1px solid var(--line);
  border-radius: 11px; max-width: 100%; overflow-x: auto;
}
.alt-sekme {
  /* Telefonda ana gezinti; olculdu, 35px'ti. */
  font: inherit; font-size: .87rem; cursor: pointer; padding: .42rem .85rem;
  min-height: 44px;
  background: none; border: none; border-radius: 8px;
  color: var(--muted); display: flex; align-items: center; gap: .45rem;
  white-space: nowrap;
}
.alt-sekme:hover { color: var(--ink); }
.alt-sekme.etkin {
  color: var(--accent); font-weight: 650;
  background: var(--panel); box-shadow: var(--shadow);
}
.alt-rozet {
  min-width: 1.3rem; padding: .05rem .35rem; border-radius: 999px;
  background: var(--line); color: var(--ink-2);
  font-size: .72rem; font-weight: 700; text-align: center;
}
.alt-sekme.etkin .alt-rozet { background: var(--accent-soft); color: var(--accent); }

/* Cihaz tanimindaki panel secimi — cok modullu cihazda birden fazla secilir. */
.panel-kutulari { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.panel-kutulari .onay { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.panel-kutulari .onay input[type="checkbox"] { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------- cok araliklı degerlendirme
   Immunoassay testlerinde cihaz Normal/Şüpheli/Anormal basamaklari yollar
   (HL7 OBX-9). Rozet sonucun yanina, basamaklarin tamami tablonun altindaki
   nota yazilir — hekim hangi esige gore karar verildigini gorebilsin. */
.kademe {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  border-radius: 999px; font-size: .72rem; font-weight: 600;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.kademe.iyi  { color: var(--ok);    background: var(--ok-bg);    border-color: transparent; }
.kademe.orta { color: var(--uyari); background: var(--uyari-bg); border-color: transparent; }
.kademe.kot  { color: var(--high);  background: var(--high-bg);  border-color: transparent; }

.kademe-not {
  margin-top: .7rem; padding: .6rem .7rem; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--panel); font-size: .82rem;
}
.kademe-satir { margin-top: .5rem; }
.kademe-test { font-weight: 600; }
.kademe-liste { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.kademe-adim {
  padding: .1rem .4rem; border: 1px solid var(--line); border-radius: 6px;
  font-size: .74rem; color: var(--muted);
}
/* Degerin dustugu basamak: renksiz yazicida da ayirt edilsin diye kalin. */
.kademe-adim.secili {
  border-color: var(--accent); color: var(--ink); font-weight: 700;
  background: var(--accent-soft);
}

/* ------------------------------------------------------------- goruntuler
   Onizlemeler yatay serit halinde; tiklaninca buyuk gosterim acilir.
   Tam cozunurluklu DICOM tarayicida acilamaz, indirilir. */
/* =====================================================================
   GORUNTU KUCUKRESIMLERI  (2026-08-26'da yeniden duzenlendi)

   Onceki hali olculdu: kutu 150×230 piksel, ama goruntu alani yalnizca
   130 piksel — geri kalani yazi ve bosluktu. Uc ayri sorun:

     * `flex-wrap` + sabit 150px  -> satir sonlari tirtikli, saga dogru
       duzensiz bosluklar kaliyordu
     * 130px yuksekliginde bir kutuda `contain`  -> kare bir rontgen
       (480×480) yanlardan kalin siyah bant birakiyordu; goruntu kutunun
       icinde yuzuyor gibi duruyordu
     * altyazi modality + tanim + saat + teknik ayrinti tasiyordu ve
       `<br>` ile satirlara boluenuyordu

   Simdi: esit sutunlu izgara, 4:3 karo, modality goruntunun KOSESINDE
   rozet olarak (gercek goruntuleme programlarindaki gibi), altyazi tek
   guclu satir + tek soluk satir.
   ===================================================================== */
.goruntu-serit {
  display: grid;
  /* `min(158px, 47%)` — telefonda 47% kuraliyla HER ZAMAN iki sutun
     cikiyor, genis ekranda 158px kuraliyla sigdigi kadar. Duz
     `minmax(158px, 1fr)` yazilinca 294px genisliginde tek sutun kaliyor
     ve karolar 294px'e sisip "cok acik" goruntu veriyordu. */
  grid-template-columns: repeat(auto-fill, minmax(min(158px, 47%), 1fr));
  gap: .6rem; margin-top: .4rem;
  align-items: start;
}
.goruntu-kutu {
  margin: 0; cursor: pointer; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--card); box-shadow: var(--shadow);
  transition: border-color .12s, box-shadow .12s;
}
.goruntu-kutu:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
/* Goruntuler sekmesindeki liste: hasta durumu da sigacagi icin biraz genis */
.goruntu-serit.genis-liste {
  grid-template-columns: repeat(auto-fill, minmax(min(196px, 47%), 1fr));
}
/* Tam cozunurluk gosterilince buyuk alan gerekir; ekrana sigdirilir. */
.goruntu-buyuk.tam { max-height: 78vh; width: auto; image-rendering: auto; }

/* ------------------------------------------------------------ tam ekran
   Rontgen degerlendirmesi ekranin tamamini ister. Tam ekranda yalnizca
   GORUNTU ve DUZENLEME MENUSU kaliyor; hasta baglama formu, bilgi listesi
   ve dipnotlar gizleniyor -- oradaki tek is bakmak. (17.09.2026) */
dialog.modal:fullscreen {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: #000;
  display: flex; flex-direction: column;
}
dialog.modal:fullscreen .goruntu-cerceve {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #000;
}
dialog.modal:fullscreen .goruntu-buyuk,
dialog.modal:fullscreen .goruntu-buyuk.tam {
  max-height: 100%; max-width: 100%; width: auto; border-radius: 0;
}
/* Menu ustte, goruntunun uzerinde -- yer kaplamasin ama hep erisilir olsun */
dialog.modal:fullscreen #gKontrol {
  order: -1; background: rgba(20, 20, 22, .92); color: #fff;
  padding: .4rem .6rem; margin: 0; border-radius: 0;
}
dialog.modal:fullscreen #gKontrol label { color: #ddd; }
/* Bakmaya ait olmayan her sey gizleniyor */
dialog.modal:fullscreen dl,
dialog.modal:fullscreen #goruntuNot,
dialog.modal:fullscreen .alan,
dialog.modal:fullscreen details,
dialog.modal:fullscreen h3 { display: none; }
dialog.modal:fullscreen .actions {
  background: rgba(20, 20, 22, .92); padding: .4rem .6rem; margin: 0;
}
.goruntu-kutu img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: #000;                      /* rontgen kenarlari siyahta oturur */
}
/* Kirpma YOK (`contain`): bir rontgende kenar da bulgudur. Karo orani
   4:3 secildi — cogu rontgenin orani buna yakin, boylece siyah bant
   kaliyorsa da ince kaliyor. */
.goruntu-yok {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .78rem; background: var(--card-alt);
}
/* Modality (DX / CR / US) goruntunun ustunde rozet. Altyazidan cikarildi:
   orayi tanim icin bosaltiyor ve goruntuleme programlarindaki yerlesime
   uyuyor. */
.goruntu-tur {
  position: absolute; top: .4rem; left: .4rem;
  padding: .1rem .4rem; border-radius: 5px;
  background: rgba(0,0,0,.62); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
}
.goruntu-kutu figcaption {
  padding: .45rem .55rem .5rem; font-size: .78rem; line-height: 1.35;
  /* Bir karonun altyazisi ikinci satira tasinca o karo digerlerinden
     uzun kaliyor ve satir tirtikli goruniyordu. Altyazi alani sabit. */
  min-height: 3.05rem;
}
.goruntu-ad {
  display: block; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.goruntu-zaman { display: block; color: var(--muted); font-size: .74rem; margin-top: .1rem; }
.goruntu-buyuk {
  display: block; max-width: 100%; max-height: 70vh; margin: 0 auto;
  background: #000; border-radius: var(--radius);
}

/* KLINIK YONETICISINE SADE CIHAZ FORMU (17.09.2026)
   Klinikte degisen tek sey cihazin ADRESI. Protokol, port, ACK, panel
   gibi alanlar kurulum kararlari; ekranda durmalari hem yaniltiyor hem
   de yanlislikla degistirilince cihaz sessizce susuyor. Kullanici:
   "bunu bir veteriner hekim kullaniyor, ona yetecek kadar aciklama
   olsun ya da olmasin."

   `!important` gerekli: `alanlariGuncelle()` ayni bolumlerin `hidden`
   ozelligini baglanti turune gore kendi ayarliyor. Alanlar DOM'DA
   DURUYOR -- kaydetme kodu hepsini okuyor, silinseydi var olan degerler
   kaydederken kaybolurdu. */
#cihazForm.sade .uretici-alani { display: none !important; }

#baski { display: none; }

/* RAPOR BICIMI -- BASKI KIPINDE DEGIL, `#baski` ALTINDA (17.09.2026)

   Bu kurallar `@media print` icindeydi ve bu, tek sayfaya sigdirma
   olcumunu SESSIZCE ISLEVSIZ birakiyordu: olcum ekranda yapiliyor,
   ekranda ise bu kurallarin HICBIRI uygulanmiyordu. `sik` sinifi
   eklenince yukseklik degismiyor, kod da "sigmadi" deyip sinifi
   geri aliyordu -- yani sikistirma hic calismadi. Kullanici uc kez
   bildirdi: "yazdirma kismi yine 2 sayfa."

   `#baski` ekranda zaten `display:none`; kurallarin burada durmasi
   ekrani etkilemiyor, ama OLCUM artik kagitta ne olacaksa onu
   olcuyor. Sayfa/gizleme kurallari `@media print` icinde kaldi. */
#baski {
  font-size: 10.5pt; line-height: 1.35; color: #000; background: #fff;
}
#baski .r-ust { display: flex; align-items: flex-start; gap: 8mm;
                border-bottom: 1.5pt solid #000; padding-bottom: 2.5mm; }
#baski .r-logo { max-height: 22mm; max-width: 45mm; object-fit: contain; }
#baski .r-klinik { font-size: 15pt; font-weight: 700; }
#baski .r-alt { font-size: 9pt; color: #333; white-space: pre-line; }
#baski .r-baslik { margin-left: auto; text-align: right; font-size: 9pt; }
#baski .r-baslik b { display: block; font-size: 12pt; }

/* Hasta bilgisi iki sutuna dizilir: tek sutunda alt alta gitmesi sayfanin
   ustunde gereksiz yer kapliyordu. */
#baski .r-hasta { width: 100%; border-collapse: collapse; margin: 3mm 0 1mm; }
#baski .r-hasta td { padding: .7mm 2mm; font-size: 10pt; vertical-align: top; }
#baski .r-hasta td.e { color: #444; width: 22mm; }

/* Panelin tamamini bir arada tutmak (break-inside: avoid) sayfa sonunda
   kocaman bosluklar birakiyordu: panel sigmayinca butun bloguyla sonraki
   sayfaya atliyordu. Artik tablolar sayfa sinirinda BOLUNEBILIYOR; yalniz
   baslik ile ilk satirlarin ayrilmasi ve bir satirin ikiye bolunmesi
   engelleniyor. */
#baski .r-panel { margin-top: 4mm; }
#baski .r-panel h3 {
    margin: 0 0 1.2mm; font-size: 11pt;
    border-bottom: .5pt solid #666; padding-bottom: 1mm;
    break-after: avoid;                 /* baslik sayfa sonunda yalniz kalmasin */
  }
#baski .r-panel .r-meta {
    font-size: 8.5pt; color: #444; margin: 0 0 1.2mm;
    break-after: avoid;
  }

#baski .r-tablo { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
/* Tablo sayfa asarsa baslik satiri her sayfada tekrarlansin */
#baski .r-tablo thead { display: table-header-group; }
#baski .r-tablo tbody { orphans: 3; widows: 3; }   /* tek satir yalniz kalmasin */
#baski .r-tablo tr { break-inside: avoid; }
#baski .r-tablo th {
    text-align: left; border-bottom: .8pt solid #000;
    padding: 1.2mm 1.5mm; font-size: 9pt;
  }
#baski .r-tablo td { padding: 1.1mm 1.5mm; border-bottom: .2pt solid #ccc; }
#baski .r-tablo .sag { text-align: right; }
/* Anormal degerler renksiz yazicida da ayirt edilebilmeli */
#baski .r-tablo .anormal td { font-weight: 700; }
#baski .r-tablo .anormal td:first-child::before { content: "» "; }

#baski .r-uyari {
    border: .8pt solid #000; padding: 1.6mm 2mm; margin: 2.5mm 0; font-size: 9pt;
  }
/* Hekimin cumlesi TABLODAN ONCE basiliyor: kagidi eline alan once onu
   okumali. Kalin cerceve ve biraz buyuk punto bilerek. */
#baski .r-yorum {
    border-left: 2.2pt solid #000; padding: 1.6mm 0 1.6mm 2.5mm;
    margin: 2.5mm 0; font-size: 10pt; break-inside: avoid;
  }
#baski .r-yorum .r-yorum-imza { display: block; font-size: 8.5pt; color: #444; }
/* Imza sabit 12mm bosluktan sonra geliyordu ve sayfa sonuna denk gelince
   tek basina yeni sayfaya dusuyordu. */
#baski .r-ek { break-inside: avoid; margin: 3mm 0 0; }
#baski .r-ek img { max-height: 55mm; max-width: 100%; }
#baski .r-ek figcaption { font-size: 8pt; color: #444; }
#baski .r-imza { margin-top: 7mm; break-inside: avoid; text-align: right; }
#baski .r-imza .cizgi {
    display: inline-block; width: 60mm; border-top: .5pt solid #000;
    padding-top: 1.5mm; font-size: 9.5pt;
  }

/* SIKISTIRILMIS RAPOR (`baskiyiSayfayaSigdir` ekler).
   Bir sayfayi az bir farkla asan raporlar ikinci sayfaya tasmasin diye
   bir kademe kucultulur. Olculmeden uygulanmaz: siga raporlar aynen
   kalir, gercekten uzun olanlar da okunakli kalsin diye kucultulmez. */
#baski.sik { font-size: 9.6pt; line-height: 1.28; }
#baski.sik .r-logo { max-height: 17mm; }
#baski.sik .r-klinik { font-size: 13.5pt; }
#baski.sik .r-hasta { margin: 2mm 0 .8mm; }
#baski.sik .r-hasta td { padding: .5mm 2mm; font-size: 9.4pt; }
#baski.sik .r-panel { margin-top: 2.6mm; }
#baski.sik .r-panel h3 { font-size: 10.2pt; }
#baski.sik .r-tablo { font-size: 8.9pt; }
#baski.sik .r-tablo th { padding: .9mm 1.2mm; }
#baski.sik .r-tablo td { padding: .75mm 1.2mm; }
#baski.sik .r-yorum { margin: 1.8mm 0; font-size: 9.4pt; }
#baski.sik .r-ek img { max-height: 42mm; }
#baski.sik .r-imza { margin-top: 4.5mm; }

/* IKINCI KADEME (17.09.2026): hemogram kil payi tasiyordu.
   `sik` yetmezse buraya dusuluyor. Daha asagi inilmiyor -- 8 punto
   altinda kagit okunmuyor; o noktadan sonra ikinci sayfa dogrusu. */
#baski.cok-sik { font-size: 8.8pt; line-height: 1.2; }
#baski.cok-sik .r-ust { gap: 5mm; padding-bottom: 1.6mm; }
#baski.cok-sik .r-logo { max-height: 13mm; max-width: 34mm; }
#baski.cok-sik .r-klinik { font-size: 12pt; }
#baski.cok-sik .r-alt { font-size: 7.6pt; }
#baski.cok-sik .r-baslik { font-size: 7.8pt; }
#baski.cok-sik .r-baslik b { font-size: 10.5pt; }
#baski.cok-sik .r-hasta { margin: 1.4mm 0 .5mm; }
#baski.cok-sik .r-hasta td { padding: .35mm 1.6mm; font-size: 8.6pt; }
#baski.cok-sik .r-panel { margin-top: 1.8mm; }
#baski.cok-sik .r-panel h3 { font-size: 9.4pt; }
#baski.cok-sik .r-tablo { font-size: 8.2pt; }
#baski.cok-sik .r-tablo th { padding: .6mm 1mm; }
#baski.cok-sik .r-tablo td { padding: .5mm 1mm; }
#baski.cok-sik .r-yorum { margin: 1.2mm 0; font-size: 8.6pt; }
#baski.cok-sik .r-ek img { max-height: 34mm; }
#baski.cok-sik .r-imza { margin-top: 3mm; }
#baski.cok-sik .r-uyari { padding: 1mm 2mm; font-size: 8.4pt; }
#baski .r-dipnot {
    margin-top: 4mm; padding-top: 2mm; border-top: .3pt solid #999;
    font-size: 8pt; color: #444;
  }

@media print {
  /* KAGITTAKI "vetarsiv / localhost / tarih" SATIRI (17.09.2026)
     Tarayici bu satirlari sayfanin KENAR BOSLUGUNA cizer. Bosluk yoksa
     cizecek yer de yoktur: `margin: 0` verildiginde Chrome ve Edge ustbilgi
     ile altbilgiyi hic basmaz -- kullanicinin yazdirma penceresinde kutu
     kapatmasi gerekmez.

     Kenar boslugunu bu kez KAGITTAN degil, kutunun kendisinden aliyoruz:
     `#baski` icine 12mm/10mm dolgu konuyor. Kagitta gorunen sonuc birebir
     ayni; olculer degismedi, bu yuzden `baskiyiSayfayaSigdir()` icindeki
     273mm x 190mm hesabi da aynen gecerli. */
  @page { size: A4; margin: 0; }

  /* Arayuzun tamami baskidan cikar */
  body > *:not(#baski) { display: none !important; }
  html, body {
    background: #fff; color: #000;
    font-size: 10.5pt; line-height: 1.35;
    margin: 0; padding: 0;
  }
  #baski { display: block; padding: 12mm 10mm; }
}

/* Hasta sayfasindaki istem kartlari: istenen her test kendi satiri, sonucu
   geldiyse tiklanabilir. */
.istem-kart {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: .5rem; overflow: hidden;
}
.istem-bas {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .7rem; background: var(--bg); font-size: .9rem;
}
.istem-bas .ref { margin-left: auto; }
.istem-test {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .7rem; border: 0; border-top: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit;
  font-size: .9rem; text-align: left;
}
button.istem-test { cursor: pointer; }
button.istem-test:hover { background: var(--accent-soft); }
.istem-test.bos { color: var(--muted); }
.istem-ad { font-weight: 600; }
.istem-test .ref { margin-left: auto; font-size: .8rem; }
.istem-ok { color: var(--accent); font-size: 1.1rem; line-height: 1; }

/* Test secim listesi: kutu ile yazi ayni satirda ve hizali dursun; tum
   satir tiklanabilir olsun — kucuk kutuyu tutturmaya calismak yorucu. */
.secim-listesi { display: flex; flex-direction: column; gap: .15rem; }
.secim-listesi label {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
  font-size: .95rem; color: var(--ink);
}
.secim-listesi label:hover { border-color: var(--accent); }
/* Not: `.alan input` kurali genislige %100 veriyor. Ayni ozgullukte oldugu
   ve dosyada sonra geldigi icin onu eziyordu — kutu satir boyu uzayip yaziyi
   sagdaki uca itiyordu. Tip secicisiyle ozgullugu artiriyoruz. */
.secim-listesi input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; flex: none; margin: 0; padding: 0;
}
.secim-listesi input:checked + span { font-weight: 600; color: var(--accent); }

/* Bos ekran, "bir sey bozuk" gibi degil "henuz sira gelmedi" gibi
   gorunmeli: cerceveli bir alan icinde, ortada. */
.empty {
  text-align: center; color: var(--muted);
  padding: 3.25rem 1.25rem; margin-top: .5rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--card-alt);
}
.empty .hint { font-size: .82rem; display: inline-block; margin-top: .3rem; }
code {
  background: var(--accent-soft); color: var(--accent);
  padding: .1rem .35rem; border-radius: 5px; font-size: .85em;
}
.more {
  display: block; margin: 1rem auto; padding: .55rem 1.2rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 10px; font: inherit; cursor: pointer;
}

/* -------------------------------------------------------------- detay */
.detail {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0; width: min(780px, 96vw);
  max-height: 92vh; background: var(--panel); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.detail::backdrop { background: rgba(8,12,18,.5); backdrop-filter: blur(3px); }
.detail-inner { padding: 1.35rem; overflow: auto; max-height: 92vh; }

.detail h2 { margin: 0 0 .15rem; font-size: 1.22rem; font-weight: 650; }
.detail .dmeta { color: var(--muted); font-size: .82rem; margin: 0 0 1rem; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem;
      font-size: .85rem; margin-bottom: 1rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.results { width: 100%; border-collapse: collapse; font-size: .88rem; }
.results th {
  text-align: left; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600;
  padding: .4rem .5rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel);
}
.results td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.results td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.results tr[data-flag="H"] td.num, .results tr[data-flag="HH"] td.num { color: var(--high); }
.results tr[data-flag="L"] td.num, .results tr[data-flag="LL"] td.num { color: var(--low); }
.results tr[data-flag="H"], .results tr[data-flag="HH"] { background: var(--high-bg); }
.results tr[data-flag="L"], .results tr[data-flag="LL"] { background: var(--low-bg); }
.results .ref { color: var(--muted); font-size: .82em; white-space: nowrap; }
.results .fl { font-weight: 700; font-size: .8em; }

/* referans araligi cubugu */
.bar { position: relative; height: 6px; background: var(--line); border-radius: 3px; min-width: 70px; }
.bar i { position: absolute; top: 0; bottom: 0; background: var(--ok-bg); border-radius: 3px; }
.bar u { position: absolute; top: -3px; width: 3px; height: 12px; border-radius: 2px;
         background: var(--ok); transform: translateX(-1px); }
.bar u.out { background: var(--high); }

.actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
}
.actions button, .actions a {
  font: inherit; font-weight: 500;
  /* Dokunma hedefi kurali: en az 44px. Olculdu — 43px'te kaliyordu. */
  padding: .55rem .95rem; min-height: 44px; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
}
/* `.tehlike` yalniz `.kart-islem` ve `.satir-liste` icinde tanimliydi;
   pencere ayaginda geri alinamaz bir islem (diger cihazlardan cikis)
   digerleriyle ayni gorunuyordu. (09.09.2026) */
.actions button.tehlike { color: var(--high); border-color: var(--high); }
.actions button.tehlike:hover:not(:disabled) {
  background: var(--high-bg); color: var(--high); border-color: var(--high);
}
.actions button:disabled { opacity: .55; cursor: not-allowed; }

.actions button:hover:not(:disabled), .actions a:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.actions .primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 650;
}
.actions .primary:hover {
  background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink);
}
.actions button:disabled { opacity: .5; cursor: default; }

details.raw { margin-top: 1rem; }
details.raw summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
details.raw pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .7rem; overflow: auto; font-size: .78rem; max-height: 260px;
  white-space: pre-wrap; word-break: break-all;
}

/* -------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 250%);
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.15rem;
  border-radius: 11px; font-size: .87rem; font-weight: 500;
  transition: transform .25s cubic-bezier(.2,.9,.3,1);
  z-index: 60; max-width: 90vw; box-shadow: var(--shadow-3);
}
.toast.show { transform: translate(-50%, 0); }
/* Telefonda alt cubuk ekranin dibinde duruyor; bildirim onun ustune
   cikmali, altinda kaybolmamali. */
@media (max-width: 979px) {
  .toast { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  .results .hide-sm { display: none; }
  .detail { width: 100vw; max-height: 100vh; border-radius: 0; }
  .detail-inner { max-height: 100vh; }
}

/* ==================================================== giriş ekranı */
.giris-ekran {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 1.5rem;
  /* Duz gri bir zeminde ortada duran beyaz bir kutu yerine, yumusak bir
     zemin. Giris ekrani programin ilk izlenimi. */
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--accent-soft), transparent 62%),
    var(--bg);
}
.giris-kart {
  width: min(408px, 100%);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  padding: 2.2rem 1.9rem 1.9rem; display: grid; gap: .3rem;
}
.giris-logo {
  width: 56px; height: 56px; margin: 0 auto;
  display: grid; place-items: center;
  font-size: 1.8rem; line-height: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-2);
}
.giris-kart h1 {
  margin: .85rem 0 0; font-size: 1.42rem; font-weight: 650; text-align: center;
}
.giris-alt {
  margin: .2rem 0 1.35rem; text-align: center;
  color: var(--muted); font-size: .85rem;
}
.giris-kart label {
  font-size: .8rem; color: var(--ink-2); margin-top: .75rem; font-weight: 600;
}
.giris-kart input {
  font: inherit; padding: .65rem .8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card-alt); color: var(--ink);
}
.giris-kart input:focus {
  outline: none; border-color: var(--accent); background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.giris-hata {
  margin: .85rem 0 0; padding: .6rem .8rem; border-radius: var(--radius-sm);
  background: var(--high-bg); color: var(--high); font-size: .85rem;
  border: 1px solid var(--high);
}
.giris-not {
  margin: .75rem 0 0; font-size: .8rem; color: var(--muted); text-align: center;
}
.birincil {
  margin-top: 1.25rem; padding: .7rem 1.1rem; font: inherit; font-weight: 650;
  border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm); cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .12s, border-color .12s;
}
.birincil:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.birincil:disabled { opacity: .55; cursor: default; }

/* ==================================================== üst bar ekleri */
.ustSag { display: flex; align-items: center; gap: .45rem; }
.ikon {
  font-size: 1.02rem; line-height: 1; padding: .45rem .6rem; cursor: pointer;
  /* Dokunma hedefi kurali (A7): olculdu, 33px'te kaliyordu. */
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--ink);
  transition: border-color .12s, background .12s;
}
.ikon:hover { border-color: var(--accent); background: var(--accent-soft); }

/* =====================================================================
   BOLUM MENUSU  (2026-08-26'da bastan yazildi)

   ONCEKI HALI: yedi tane duz yazi, altlarinda 2 piksel cizgi, yatay
   kayan bir serit. Ne oldugu ikonsuz anlasilmiyordu, telefonda
   parmakla kaydirmadan yarisi gorunmuyordu ve ekranin en ustunde
   dururken hicbir sey "program" gibi durmuyordu.

   SIMDI iki ayri bicim, ayni dugmelerle:

     genis ekran (>=980px) -> SOLDA yan menu, ikon + yazi + sayac
     dar ekran   (<980px)  -> ALTTA cubuk, ikon + kucuk yazi

   Alt cubuk bilincli olarak ALTTA: telefonu tek elle tutan bir hekimin
   basparmagi ekranin ustune yetismiyor. Ustelik iOS/Android'de
   uygulamalarin dogal yeri orasi.

   JavaScript ikisini de AYIRT ETMEZ — `.sekme` sinifi ve
   `data-gorunum` degeri her ikisinde de ayni (bkz. app.js `gorunumAc`).
   ===================================================================== */

/* Ust bar tam genislikte kalir; altinda menu + icerik yan yana. */
.kabuk { display: block; }

.yanmenu {
  display: flex; gap: .2rem;
  background: var(--panel);
}
.sekme {
  font: inherit; cursor: pointer; color: var(--muted);
  background: none; border: none;
  display: flex; align-items: center; gap: .6rem;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
}
.sekme-ikon {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px;
}
.sekme-ikon svg {
  width: 20px; height: 20px; display: block;
  /* Cizgi ikonlarin ortak ayari. `stroke`, `stroke-width`, `stroke-linecap`
     ve `stroke-linejoin` SVG'de KALITILAN ozelliklerdir, bu yuzden buradan
     verilince <use> ile cagrilan sembolun icine de iner —
     her sembolde tek tek yazmaya gerek yok. */
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.sekme-yazi { flex: 1; text-align: left; }

/* Ikon deposu ciziLMEZ, yalnizca <use> icin kaynaklik eder.
   `display:none` yerine sifir boyut: bazi eski WebView'larda gizlenmis
   bir <svg> icindeki sembol cozulemiyordu. */
.ikon-deposu {
  position: absolute; width: 0; height: 0;
  overflow: hidden; pointer-events: none;
}

/* Bekleyen is sayisi: eslesmeyen ya da onaylanmamis sonuc birikirse
   hekim sekmeye bakmadan gormeli. */
.sekme-rozet {
  flex: none;
  min-width: 1.3rem; padding: .05rem .35rem;
  border-radius: 999px; background: var(--high); color: var(--high-ink);
  font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.5;
}

/* --------------------------------------------------- genis ekran: yan menu */
@media (min-width: 980px) {
  .kabuk {
    display: grid;
    grid-template-columns: var(--yan-genislik) minmax(0, 1fr);
    align-items: start;
  }
  .yanmenu {
    position: sticky;
    /* Ust bar sabit duruyor; yan menu onun ALTINDAN baslamali. */
    top: var(--ustbar-yuksekligi);
    height: calc(100dvh - var(--ustbar-yuksekligi));
    flex-direction: column; gap: .15rem;
    padding: .9rem .7rem 1rem;
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }
  .sekme {
    width: 100%; font-size: .9rem; font-weight: 500;
    padding: .58rem .7rem;
  }
  .sekme:hover { background: var(--card-alt); color: var(--ink); }
  .sekme.etkin {
    background: var(--accent-soft); color: var(--accent); font-weight: 650;
  }
  .sekme.etkin .sekme-ikon { color: var(--accent); }

  /* Menunun icindeki grup basligi ("Yonetim"). Ustundeki cizgi ile
     gunluk isleri yonetim islerinden ayirir. */
  .menu-baslik {
    margin: .9rem .7rem .3rem; padding-top: .9rem;
    border-top: 1px solid var(--line-soft);
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
  }
  /* Ayarlar menunun DIBINE yapisir — sirali listenin bir parcasi degil,
     her zaman ayni yerde duran bir kapi. */
  .menu-dip { margin-top: auto; padding-top: .6rem; }

  .kabuk .icerik { min-width: 0; padding-bottom: 2rem; }
}

/* ------------------------------------------------- dar ekran: alt cubuk */
@media (max-width: 979px) {
  .menu-baslik { display: none; }
  .yanmenu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    gap: 0;
    padding: .3rem .25rem;
    padding-bottom: max(.3rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(16,24,40,.08);
    overflow-x: auto; scrollbar-width: none;
  }
  .yanmenu::-webkit-scrollbar { display: none; }
  .menu-dip { margin-left: 0; }
  .sekme {
    flex: 1 0 auto; min-width: 4.4rem;
    flex-direction: column; gap: .15rem;
    padding: .4rem .35rem .3rem;
    font-size: .68rem; font-weight: 500;
    position: relative;
  }
  .sekme-yazi { text-align: center; flex: none; }
  .sekme.etkin { color: var(--accent); font-weight: 650; }
  /* Alt cubukta sayac ikonun kosesine oturur; yazinin yanina sigmiyor. */
  .sekme-rozet {
    position: absolute; top: .15rem; left: 50%; margin-left: .25rem;
    min-width: 1.05rem; font-size: .62rem; padding: 0 .25rem;
  }
  /* Alt cubugun altinda kalan icerik gorunmez olmasin. */
  .icerik { padding-bottom: 4.6rem; }
}

.gorunum { display: none; }
.gorunum.etkin { display: block; }

.bolum-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem;
}
.bolum-bas h2 {
  margin: 0; font-size: 1.32rem; font-weight: 650;
}
.bolum-bas .birincil { margin-top: 0; }
/* Bolum altindaki aciklama: hekimin bir kez okuyup bir daha bakmayacagi
   metin. Okunakli olmali ama listeyi ASAGI ITMEMELI. */
.aciklama {
  color: var(--muted); font-size: .87rem; line-height: 1.5;
  margin: .45rem 0 1.1rem; max-width: 68ch;
}
.aciklama b { color: var(--ink-2); font-weight: 600; }

/* ==================================================== kart listeleri */
.kart-liste { display: grid; gap: .6rem; padding-bottom: 2rem; }
.kart {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1.05rem;
}
.kart-ust {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.kart-ad { font-weight: 600; }
.kart-alt { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
/* Bosluk .4rem (6,4px) idi -> .5rem (8px). Dokunma hedefi 44px olsa da
   BITISIK hedefler arasinda en az 8px bosluk gerekiyor; 6,4px'te parmak
   yanlis dugmeye basiyordu. `.actions` zaten .5rem kullaniyordu, yani
   dosya kendi icinde tutarsizdi. (04.09.2026) */
.kart-islem { display: flex; gap: .5rem; flex-wrap: wrap; }
.kart-islem button, .kart-islem .dugme {
  font: inherit; font-size: .82rem; font-weight: 500;
  text-decoration: none;
  /* Dokunma hedefi kurali (A7): olculdu, 35px'te kaliyorlardi.
     Havuzu telefonda eriten teknisyen bu dugmelere basiyor. */
  padding: .4rem .8rem; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--ink-2);
  transition: border-color .12s, color .12s, background .12s;
}
.kart-islem button:hover, .kart-islem .dugme:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
/* WhatsApp bagi bu kartin ASIL islemi — vurgulu duruyor. */
.kart-islem .dugme {
  border-color: var(--accent); background: var(--accent); color: var(--accent-ink);
  font-weight: 600;
}
.kart-islem .dugme:hover {
  background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink);
}
.kart-islem button.tehlike { color: var(--high); }
.kart-islem button.tehlike:hover {
  border-color: var(--high); color: var(--high); background: var(--high-bg);
}
.rozet {
  display: inline-block; padding: .16rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 650; letter-spacing: .01em;
  background: var(--accent-soft); color: var(--accent);
}
.rozet.gri { background: var(--line); color: var(--muted); }
/* Asi tekrar tarihi icin: yaklasan sari, gecmis kirmizi. Ikisi ayri
   seydir — 'yaklasti' hatirlatma, 'gecti' eksik islem. */
.rozet.orta { background: var(--uyari-bg); color: var(--uyari); }
.rozet.kotu { background: var(--high-bg); color: var(--high); }

/* ======================================================== form alanları */
.alan { display: grid; gap: .3rem; margin-bottom: .85rem; }
/* Etiket okunur olmalı: `--muted` gri, alanın ne olduğunu söyleyen tek
   şey ve formda gözün ilk gittiği yer. */
.alan label { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.alan input, .alan select {
  min-height: 44px;
}
.alan input, .alan select, .alan textarea {
  font: inherit; padding: .6rem .8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card-alt); color: var(--ink);
  width: 100%;
}
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--accent); background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.alan input:disabled, .alan select:disabled, .alan textarea:disabled {
  opacity: .6; cursor: default;
}
.alan .ipucu { font-size: .76rem; color: var(--muted); line-height: 1.45; }
.alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 460px) { .alan-ikili { grid-template-columns: 1fr; } }

/* ======================================================== denetim tablosu */
.tablo-sar { overflow-x: auto; padding-bottom: 2rem; }
.denetim { width: 100%; border-collapse: collapse; font-size: .85rem; }
.denetim th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600;
  padding: .45rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.denetim td {
  padding: .45rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.denetim td.genis { white-space: normal; }

/* ==================================================== canlı izleme */
.cihaz-tablo {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .6rem; margin-bottom: 1rem;
}
.cihaz-kutu {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius); padding: .7rem .85rem;
}
.cihaz-kutu[data-durum="bagli"]    { border-left-color: var(--ok); }
.cihaz-kutu[data-durum="bekliyor"] { border-left-color: #f59e0b; }
.cihaz-kutu[data-durum="hata"]     { border-left-color: var(--high); }
.cihaz-kutu[data-durum="kapali"]   { border-left-color: var(--muted); opacity: .65; }
.cihaz-kutu .ad { font-weight: 600; font-size: .92rem; }
.cihaz-kutu .durum { font-size: .8rem; margin-top: .15rem; }
.cihaz-kutu[data-durum="bagli"] .durum    { color: var(--ok); font-weight: 600; }
.cihaz-kutu[data-durum="bekliyor"] .durum { color: #b45309; }
.cihaz-kutu[data-durum="hata"] .durum     { color: var(--high); font-weight: 600; }
.cihaz-kutu .adres { font-size: .75rem; color: var(--muted); margin-top: .25rem; }

.erisim {
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: .7rem .85rem;
  font-size: .84rem; margin-bottom: 1rem;
}
.erisim b { color: var(--accent); }
.erisim code { background: transparent; padding: 0; font-size: 1em; }

/* olay akışı */
.olay {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: .6rem .85rem;
}
.olay[data-tip="ham"]       { border-left-color: var(--ok); }
.olay[data-tip="baglanti"]  { border-left-color: var(--accent); }
.olay[data-tip="hata"]      { border-left-color: var(--high); background: var(--high-bg); }
.olay.yeni { animation: flash 1.6s ease-out; }
.olay-ust {
  display: flex; gap: .6rem; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
}
.olay-ozet { font-size: .9rem; }
.olay-ozet b { font-weight: 600; }
.olay-zaman { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.olay details { margin-top: .45rem; }
.olay summary {
  cursor: pointer; font-size: .8rem; color: var(--accent); user-select: none;
}
.olay pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem; overflow-x: auto; font-size: .76rem; margin: .45rem 0 0;
  max-height: 240px; white-space: pre-wrap; word-break: break-all;
}
.mini-tablo { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: .45rem; }
.mini-tablo th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; padding: .25rem .4rem; border-bottom: 1px solid var(--line);
}
.mini-tablo td { padding: .25rem .4rem; border-bottom: 1px solid var(--line); }
.mini-tablo td.deg { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mini-tablo tr[data-f="H"] td.deg, .mini-tablo tr[data-f="HH"] td.deg { color: var(--high); }
.mini-tablo tr[data-f="L"] td.deg, .mini-tablo tr[data-f="LL"] td.deg { color: var(--low); }
.cozum {
  background: var(--ok-bg); border-radius: 8px; padding: .5rem .65rem;
  margin-top: .45rem; font-size: .82rem;
}

/* ==================================================== uyarı şeridi */
.uyari-serit {
  background: var(--high-bg); color: var(--high);
  border-bottom: 1px solid var(--high);
  padding: .6rem 1rem; font-size: .85rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.serit-btn {
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .28rem .7rem; border-radius: 8px; cursor: pointer;
  background: var(--high); color: var(--high-ink); border: none;
}

.kart-hata {
  margin-top: .4rem; padding: .4rem .6rem; border-radius: 8px;
  background: var(--high-bg); color: var(--high);
  font-size: .8rem; line-height: 1.4;
}

/* Islem GERCEKTEN dogrulandiginda cikar. Kirmizinin olumlu ikizi:
   "denendi ve calisti" ile "denenmedi" ayni renkte gorunmemeli. */
/* Indirme baglantisi — dugme gibi gorunmeli ama <a> olmali:
   WebView/tarayici indirmeyi ancak gercek bir baglantida baslatir. */
.dugme-benzeri {
  display: inline-block; text-decoration: none;
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .28rem .7rem; border-radius: 8px;
  background: var(--high); color: var(--high-ink); border: none;
}
.dugme-benzeri:hover { filter: brightness(1.08); }

.kart-iyi {
  margin-top: .4rem; padding: .4rem .6rem; border-radius: 8px;
  background: var(--ok-bg); color: var(--ok);
  font-size: .8rem; line-height: 1.4;
}

/* Hata degil ama dikkat isteyen durum: ucretsiz alanin dolmaya
   yaklasmasi gibi. `kart-hata` kirmizisi burada fazla alarm olurdu. */
.kart-uyari {
  margin-top: .4rem; padding: .4rem .6rem; border-radius: 8px;
  background: var(--uyari-bg); color: var(--uyari);
  font-size: .8rem; line-height: 1.4;
}

.ikon.durdur {
  background: var(--high-bg); color: var(--high);
  border-color: var(--high); font-weight: 600; font-size: .8rem;
  white-space: nowrap;
}
.ikon.durdur:hover { background: var(--high); color: var(--high-ink); }
@media (max-width: 560px) { .ikon.durdur { font-size: 0; padding: .4rem .55rem; }
  .ikon.durdur::before { content: "⏹"; font-size: 1rem; } }

/* Cihazin gonderdigi gomulu goruntuler (grafik, fotograf). Ham veri olarak
   sonuc tablosuna basilinca sayfayi bogan dev bir Base64 metnine donuyordu. */
.ek-goruntuler { display: flex; flex-wrap: wrap; gap: .6rem; margin: .7rem 0; }
.ek-goruntu { margin: 0; }
.ek-goruntu img {
  max-width: 100%; max-height: 260px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff;
}
.ek-goruntu figcaption { font-size: .78rem; color: var(--muted); margin-top: .2rem; }

/* Ayarlar: iki kart, tiklayinca pencere acilir (2026-08-19). Onceden hepsi
   tek uzun sayfada alt alttaydi. */
.ayar-kartlari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem;
}
.ayar-kart {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.15rem; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  color: inherit; font: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ayar-kart:hover {
  border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-1px);
}
@media (hover: none) { .ayar-kart:hover { transform: none; } }
/* Ikon bir madalyonun icinde: dokuz kartin ustunde ciplak duran emoji
   dizisi dagilmis gorunuyordu. */
.ayar-ikon {
  width: 40px; height: 40px; margin-bottom: .25rem;
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  border-radius: 11px; background: var(--accent-soft);
}
.ayar-ad { font-weight: 650; font-size: .98rem; }
.ayar-alt { color: var(--muted); font-size: .82rem; line-height: 1.45; }

/* Tek tek eklenip silinen liste (hekimler). */
.satir-liste { display: flex; flex-direction: column; gap: .3rem; }
.satir-liste .satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .35rem .55rem;
  background: var(--card-alt, var(--card)); border: 1px solid var(--line);
  border-radius: 6px;
}
/* Bitisik dokunma hedefleri arasi en az 8px (04.09.2026). */
.satir-ekle { display: flex; gap: .5rem; margin-top: .4rem; }
.satir-ekle input { flex: 1; }

/* Satir icindeki dugmeler icin taban kural YOKTU: tarayicinin varsayilani
   devredeydi ve olculdugunde 21px cikti (kural 44). `.bolum-bas button` ve
   `.dugme` ile AYNI hata sinifi (A7) — ucuncusu.

   Burasi ozellikle onemli: bu listelerdeki dugmelerden biri "Geri yükle" ve
   sistemin EN YIKICI islemi o — veritabanini o gunku haline dondurur, sonraki
   butun sonuclar gider. Kucuk dokunma hedefi orada yanlis basmaya davettir.
   `.satir-liste` 25 yerde kullaniliyor; kural hepsini duzeltiyor. */
.satir-liste .satir button {
  font: inherit; font-size: .86rem; font-weight: 500;
  padding: .4rem .8rem; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--ink-2);
}
.satir-liste .satir button.primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink);
}
.satir-liste .satir button.tehlike { color: var(--high); border-color: var(--high); }

/* Rapordaki rontgen cekimi. Goruntu bir sayfada bolunmemeli. */
.r-goruntu { break-inside: avoid; page-break-inside: avoid; }
.r-goruntu img {
  display: block; margin: .4rem auto 0;
  max-width: 100%; max-height: 16cm;
  border: 1px solid #ccc; background: #000;
}

/* Yazdirma penceresinde suzgecin disinda kalan satir: gizlenmez, soluklasir —
   kullanici neyin var olup da secilmedigini gormeli. */
.secim-listesi label.solgun { opacity: .45; }

/* Tedavi / protokol notu. Sonuc detayinda ve hasta kaydinda. */
/* Bolum basligindaki dugmeler (orn. "Yeniden eslestir") icin taban kural
   YOKTU: tarayicinin varsayilani devredeydi ve olculdugunde 22px cikti.
   Yorumda yazan niyet, uygulanmis kural degildir (A7). */
.bolum-bas button {
  font: inherit; font-size: .84rem; font-weight: 500;
  padding: .5rem .9rem; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--ink-2);
}
.bolum-bas button:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* ======================================= islem gecmisi sekmeleri
   Seksen kadar ayri eylem tek tabloda akiyordu. Sekmeler ayri SORULARA
   karsilik geliyor (A7o): "bir sorun mu var", "kim girdi", "hastaya ne
   yapildi"... Sayilar sekmede yaziyor ki hangisinde is oldugu ACMADAN
   gorunsun. */
.denetim-sekmeler {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 1rem;
}
.denetim-sekme {
  display: inline-flex; align-items: center; gap: .45rem;
  font: inherit; font-size: .86rem; font-weight: 500;
  padding: .45rem .8rem; min-height: 44px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-2);
  transition: border-color .12s, color .12s, background .12s;
}
.denetim-sekme:hover { border-color: var(--accent); color: var(--accent); }
.denetim-sekme.etkin {
  border-color: var(--accent); background: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}
.sekme-sayi {
  font-size: .76rem; font-variant-numeric: tabular-nums;
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--card-alt); color: var(--muted);
}
.denetim-sekme.etkin .sekme-sayi {
  background: var(--accent-ink); color: var(--accent);
}
/* Hata sekmesi dolu ise kenarindan belli olsun — renk tek basina sinyal
   degil, sayisi da yaninda duruyor (A4). */
.denetim-sekme.hatali:not(.etkin) { border-color: var(--high); color: var(--high); }
.denetim-sekme.hatali:not(.etkin) .sekme-sayi { color: var(--high); }

/* --------------------------------------------- sistem gunlugu
   Denetim tablosu neyin YAPILDIGINI yazar; gunluk neyin BOZULDUGUNU.
   Ikisi ayni ekranda ama ayri kutuda: birbirine karismasinlar. */
.gunluk-kutu {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); margin-bottom: 1.1rem; overflow: hidden;
}
.gunluk-bas {
  padding: .7rem .9rem; border-bottom: 1px solid var(--line);
  background: var(--card-alt); font-size: .9rem;
}
.gunluk-bas .ref { display: block; margin-top: .15rem; }
.gunluk-hata-sayi { color: var(--high); font-weight: 600; }
.gunluk-liste { max-height: 20rem; overflow-y: auto; }
.gunluk-satir {
  display: grid;
  grid-template-columns: 10.5rem 4.5rem 5.5rem minmax(0, 1fr);
  gap: .6rem; align-items: baseline;
  padding: .4rem .9rem; border-top: 1px solid var(--line-soft);
  font-size: .82rem;
}
.gunluk-satir:first-child { border-top: 0; }
.gunluk-satir .g-zaman { color: var(--muted); font-variant-numeric: tabular-nums; }
.gunluk-satir .g-duzey { font-weight: 600; font-size: .74rem; letter-spacing: .03em; }
.gunluk-satir.uyari .g-duzey { color: var(--warn); }
.gunluk-satir.hata  .g-duzey { color: var(--high); }
.gunluk-satir.hata { background: var(--high-bg); }
.gunluk-satir .g-kaynak { color: var(--accent); font-size: .78rem; }
.gunluk-satir .g-mesaj { color: var(--ink-2); word-break: break-word; }
@media (max-width: 760px) {
  .gunluk-satir { grid-template-columns: 1fr; gap: .15rem; }
  .gunluk-satir .g-mesaj { padding-bottom: .2rem; }
}

/* Durum ozetindeki alt satirlar — sayilar okunur kalsin. */
.ozet-satir { margin-top: .35rem; font-size: .86rem; line-height: 1.5; }
.ozet-satir.eksik { color: var(--high); font-weight: 500; }

/* HAVUZDA IKI AYRI IS.

   `istemsiz` = sistem hastayi zaten buldu, tek tiklik onay bekliyor.
   `yok`      = cihaza ID yazilmamis, elle hasta aranacak.

   Ikisi ayni rozetle durunca tek tikla bitecek uc kayit yirmi dokuz
   aramalik yigin arasinda kayboluyordu. Cozulebilir olan SOL KENARDAN
   isaretleniyor — renk tek basina sinyal degil (A4), rozetin yazisi
   ve konumu da ayri. */
.havuz-ozet {
  margin: 0 0 .8rem; padding: .7rem .9rem;
  border: 1px solid var(--accent); border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--ink);
  font-size: .9rem; line-height: 1.5;
}
.kart.cozulebilir { border-left: 3px solid var(--accent); }
.rozet.cozum {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent); font-weight: 600;
}

/* Uzun ayar pencerelerinde islem seridi ekranin altinda kaliyordu
   (asi takvimi telefonda olculdu: Kaydet gorunmuyordu). Serit pencerenin
   dibine yapisiyor — icerik kayarken dugmeler yerinde duruyor. */
.detail .actions.yapisik {
  position: sticky; bottom: 0; z-index: 3;
  margin-bottom: 0; padding: .7rem 0 .2rem;
  background: linear-gradient(to bottom, transparent, var(--panel) .5rem);
}

/* Asi takvimi ekleme satiri: uc alan + dugme, dar ekranda alt alta. */
.at-ekle {
  display: grid; gap: .6rem; margin-top: .8rem;
  /* Alti alan + dugme: asi/tur genis, sayilar dar. */
  grid-template-columns: 1fr 1fr repeat(4, 6.2rem) auto; align-items: end;
}
.at-ekle .alan { margin: 0; }
.at-ekle button {
  font: inherit; font-size: .84rem; font-weight: 600;
  padding: .55rem .95rem; min-height: 44px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-2);
}
.at-ekle button:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
@media (max-width: 1080px) {
  .at-ekle { grid-template-columns: 1fr 1fr repeat(2, 1fr); }
  .at-ekle button { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .at-ekle { grid-template-columns: 1fr 1fr; }
}

/* Hekim yorumu — sonuc ekraninda. Vurgu rengiyle cerceveli: bu alan
   sahibin okuyacagi tek serbest metin, gozden kacmamali. */
.yorum-alani {
  margin: .6rem 0 .9rem; padding: .7rem .8rem;
  border: 1px solid var(--accent); border-left-width: 3px;
  border-radius: var(--radius-sm); background: var(--accent-soft);
}
.yorum-alani .ref { margin-bottom: .4rem; }
.yorum-alani textarea {
  width: 100%; font: inherit; resize: vertical; min-height: 4.5rem;
  padding: .6rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.yorum-alani textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.yorum-metin { white-space: pre-wrap; font-size: .95rem; }
.yorum-alt {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .5rem; flex-wrap: wrap;
}
.yorum-alt .ref { margin: 0; margin-right: auto; }
.yorum-alt button {
  font: inherit; font-size: .84rem; font-weight: 600;
  padding: .5rem .9rem; min-height: 44px; cursor: pointer;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
}
.yorum-alt button:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.yorum-alt button:disabled { opacity: .55; cursor: default; }

.tedavi-alani { margin: .6rem 0; }
.tedavi-alani textarea { width: 100%; font: inherit; }
.tedavi-metin { white-space: pre-wrap; }
.gecmis-satir { margin-top: .45rem; font-size: .88rem; }
.gecmis-satir + .gecmis-satir { border-top: 1px solid var(--line); padding-top: .45rem; }

/* Olcum siniri degerinde ("<10") cubuk cizilemez — yerine kisa bir etiket. */
.bar-normal {
  font-size: .78rem; color: var(--ok, var(--muted));
  border: 1px solid var(--line); border-radius: 4px; padding: 0 .35rem;
}

/* Cihazin cizdigi grafikler (hemogram histogram / scattergram). */
.grafikler { margin: .9rem 0 .4rem; }
.bolum-etiket {
  font-weight: 600; font-size: .9rem; margin-bottom: .45rem;
}
.grafik-kutulari {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.grafik { margin: 0; text-align: center; }
.grafik img {
  width: 100%; max-width: 220px; height: auto;
  border: 1px solid var(--line); border-radius: 6px;
  background: #000; image-rendering: pixelated;
}
.grafik figcaption {
  font-size: .78rem; color: var(--muted); margin-top: .2rem;
}

/* Rapordaki cihaz grafikleri. Sayfa bolunmesin. */
.r-grafikler {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0;
  break-inside: avoid; page-break-inside: avoid;
}
.r-grafikler figure { margin: 0; text-align: center; }
.r-grafikler img {
  width: 42mm; height: auto; border: 1px solid #ccc; background: #000;
}
.r-grafikler figcaption { font-size: 7pt; color: #444; }

/* Ham veri ekrani: cihazdan geleni sistem yorumlamadan once gostermek. */
.izleme-liste { display: flex; flex-direction: column; gap: .4rem; }
.izleme-kayit {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 6px; padding: .45rem .6rem; background: var(--card);
}
.izleme-kayit.hata { border-left-color: var(--high, #c0392b); }
.izleme-kayit.ham { border-left-color: var(--accent); }
.izleme-ust {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: .9rem;
}
.izleme-ozet { color: var(--muted); flex: 1; min-width: 12rem; }
.izleme-saat { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.izleme-ham summary {
  cursor: pointer; font-size: .8rem; color: var(--muted); margin-top: .3rem;
}
.izleme-ham pre {
  margin: .35rem 0 0; padding: .5rem; max-height: 20rem; overflow: auto;
  background: var(--card-alt, rgba(127,127,127,.08));
  border-radius: 4px; font-size: .78rem; white-space: pre-wrap;
  word-break: break-all;
}

/* Nitel anormal sonuc (PCR pozitif): harf gosterilmiyor, satir yine belli
   olmali. "A" bayragi HL7'nin genel anormal kodu. */
.results tr[data-flag="A"] td.num { color: var(--high); font-weight: 600; }
.results tr[data-flag="A"] { background: var(--high-bg); }


/* PCR'da Ct degeri: sonucun yaninda, ondan daha silik. Pozitifligin
   siddetini soyler (dusuk Ct = yuksek viral yuk). */
.results .ct {
  margin-left: .45rem; font-size: .78rem; font-weight: 400;
  color: var(--muted); white-space: nowrap;
}

/* Yedek yasi: "az once" / "3 gun once". Renk, sayidan once okunur —
   kirmizi bir "5 gun once" bir sorunu bir bakista gosterir. */
.yedek-yas.iyi  { color: var(--ok); }
.yedek-yas.orta { color: var(--uyari); }
.yedek-yas.kotu { color: var(--high); }

/* Giris ekranindaki "beni hatirla" — normal alan etiketlerinden farkli
   olarak kutu ile yan yana. */
.giris-hatirla {
  display: flex; align-items: center; gap: .45rem;
  margin: .1rem 0 .3rem; font-size: .85rem; font-weight: 400;
}
.giris-hatirla input { width: auto; margin: 0; }

/* Baglanti gibi davranan indirme dugmesi: <a> olmasi gerekiyor (download
   niteligi icin) ama dugme gibi gorunmeli. */
.dugme-gibi {
  display: inline-block; padding: .42rem .8rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); text-decoration: none; font-size: .85rem;
}
.dugme-gibi:hover { border-color: var(--accent); color: var(--accent); }

/* Tedavi protokolu — tarihli gecmis listesi. */
.tedavi-form { margin-bottom: .6rem; }
.tedavi-liste { display: flex; flex-direction: column; gap: .45rem;
                max-height: 24rem; overflow-y: auto; }
/* Aşı ve tedavi kayıtları. Alt ekranların ana içeriği bunlar;
   düz kutu yerine kart yüzeyi ve gölge — üstteki listelerle aynı dil. */
.tedavi-kayit {
  padding: .7rem .85rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card);
  box-shadow: var(--shadow);
}
/* Sonuctan gelen not: salt okunur ve tiklaninca numuneye gider —
   tiklanabilir oldugu gorunsun. */
.tedavi-kayit.sonuctan { cursor: pointer; border-style: dashed; }
.tedavi-kayit.sonuctan:hover { border-color: var(--accent); }
.tedavi-ust {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .84rem; margin-bottom: .3rem;
}
/* Kaydın adı/tarihi satırın taşıyıcısı — geri kalanından ayrılmalı. */
.tedavi-ust > b { font-size: .96rem; font-weight: 650; }
.tedavi-islem { margin-left: auto; display: flex; gap: .35rem; }
/* Düğmeler `.75rem` yazı ve `.15rem` dolguyla çiziliyordu: 20 piksel
   yükseklik, parmakla isabet ettirilemez. Portaldaki hatanın aynısı,
   aynı gün bulundu. */
.tedavi-islem button {
  font-size: .78rem; padding: .35rem .7rem; min-height: 32px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--ink-2); cursor: pointer;
}
.tedavi-islem button:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.tedavi-islem button.tehlike { color: var(--high); }
.tedavi-islem button.tehlike:hover {
  border-color: var(--high); color: var(--high); background: var(--high-bg);
}
.tedavi-islem .ikon { min-height: 32px; min-width: 32px; }
.tedavi-kayit .tedavi-metin {
  font-size: .88rem; line-height: 1.45; white-space: pre-wrap;
}

/* Parametre ve referans ayari tablosu. */
.para-tablo-kutu { max-height: 24rem; overflow-y: auto; }
.para-tablo { width: 100%; border-collapse: collapse; font-size: .84rem; }
.para-tablo th {
  position: sticky; top: 0; background: var(--panel); text-align: left;
  padding: .3rem .4rem; border-bottom: 1px solid var(--line); font-size: .78rem;
}
.para-tablo td { padding: .25rem .4rem; border-bottom: 1px solid var(--line); }
.para-tablo input { width: 100%; padding: .2rem .35rem; font-size: .82rem; }
.para-tablo .para-birim { max-width: 6rem; }
.para-tablo .para-ref { max-width: 5.5rem; }
.para-kod { font-size: .72rem; margin-left: 1.5rem; }
/* Tiki kaldirilan parametre soluk gorunsun — hangilerinin gizlendigi
   listeye bakinca anlasilsin. */
.para-gizli { opacity: .45; }

/* Delta kontrolü: kısa sürede iki kattan fazla değişen değer. Bu genelde
   hastanın değil NUMUNENIN sorunudur — tüp karışmış, yanlış hastaya
   bağlanmış olabilir. Satır belli olsun ama bayrak renkleriyle
   yarışmasın; sol kenardan işaretliyoruz. */
tr.sicrama > td:first-child { box-shadow: inset 3px 0 0 var(--uyari, #b54708); }
tr.sicrama > td { background: color-mix(in srgb, var(--high-bg) 55%, transparent); }

/* Değer takibi grafiği. Kütüphane yok; SVG elle çiziliyor. */
.deger-grafik { width: 100%; height: auto; display: block; margin: .4rem 0; }
.deger-grafik .g-eksen {
  font-size: 11px; fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Görüntü kontrolleri — röntgende kontrast ve döndürme.
   Hepsi tarayıcıda; kayıtlı dosyaya dokunulmuyor. */
.goruntu-cerceve {
  overflow: hidden; background: #000; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  max-height: 60vh;
}
.goruntu-cerceve .goruntu-buyuk {
  transition: filter .12s;
  touch-action: none;      /* sürükleme sayfayı kaydırmasın */
  will-change: transform;
}
.g-kontrol {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  align-items: center; margin: .5rem 0 .2rem;
}
.g-dugmeler { display: flex; gap: .25rem; align-items: center; }
.g-dugmeler button { min-width: 2.2rem; padding: .3rem .5rem; }
.g-oran {
  font-variant-numeric: tabular-nums; font-size: .82rem;
  color: var(--muted); min-width: 3.2rem; text-align: center;
}
.g-kaydir {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--muted);
}
.g-kaydir input[type="range"] { width: 8rem; }
@media (max-width: 560px) { .g-kaydir input[type="range"] { width: 6rem; } }

/* Cihazin ILK KEZ gonderdigi parametreler. Ayar ekraninin basinda durur.
   Hata degil, karar bekleyen bir durum: `kart-uyari` sarisiyla ayni aile,
   ama kendi kutusu var cunku icinde liste ve dugme tasiyor. */
.kart-yeni-parametre {
  border-color: var(--uyari);
  background: var(--uyari-bg);
}
.kart-yeni-parametre .kart-ad { color: var(--uyari); }
.kart-yeni-parametre .kart-alt { color: var(--ink-2); }
.yeni-para-liste {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: grid; gap: .3rem;
  max-height: 15rem; overflow-y: auto;
}
.yeni-para-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .35rem .6rem; border-radius: var(--radius-sm);
  background: var(--panel); font-size: .85rem;
}
.yeni-para-liste .ref { font-size: .76rem; }

/* =====================================================================
   HASTA EKRANI — künye, bölümler, işlemler   (2026-08-26)

   Önceki hali: üstte altı satırlık düz bir tanım listesi, altta ON TANE
   düğme yan yana. Günlük iş ("istem aç") ile ayda bir yapılan iş
   ("portal hesabı aç") aynı boyda, aynı renkte, yan yanaydı; hekim
   aradığını gözle taramak zorundaydı. Düğmeler ayrıca içlerinde ne
   olduğunu söylemiyordu — "Aşılar"a basmadan kaç aşı olduğu bilinmezdi.
   ===================================================================== */

/* ----------------------------------------------------------- künye */
.kunye {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .1rem .9rem;
  margin: .2rem 0 1.1rem;
  padding: .9rem 1rem;
  background: var(--card-alt); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.kunye-alan { display: flex; flex-direction: column; padding: .4rem 0; }
.kunye-alan.genis { grid-column: 1 / -1; }
.kunye-etiket {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.kunye-deger { margin-top: .15rem; font-size: .92rem; line-height: 1.45; }
/* Boş alan GİZLENMİYOR: "sahip girilmedi" yazmak, alanın hiç olmamasından
   iyidir — hekim eksiği görür ve tamamlayabilir. */
.kunye-alan.bos .kunye-deger { color: var(--muted); }
.kunye-deger i { font-style: normal; color: var(--muted); }
/* Sürdürülen tedavi: hastaya bakarken kaçırılmaması gereken tek şey. */
.kunye-alan.vurgu {
  margin-top: .35rem; padding: .6rem .75rem;
  background: var(--uyari-bg); border-radius: var(--radius-sm);
  border-left: 3px solid var(--uyari);
}
.kunye-alan.vurgu .kunye-etiket { color: var(--uyari); }

/* Bildirim uyarısı: hasta kaydındaki telefon ile bildirimin okuduğu portal
   hesabı AYRI yerler. Numara dolu görünüp kimseye ulaşmıyorsa ekran bunu
   söylemeli (A7p).
   `.vurgu`dan ayrı bir kural: ikisi aynı anda görünebiliyor (sürdürülen
   tedavi + ulaşılamayan sahip) ve o zaman ayırt edilebilir olmaları
   gerekiyor. Ayrıca renk TEK BAŞINA sinyal değil (A4) — sol kenar
   çizgisinin yanında etikette ⚠ işareti de var. */
.kunye-alan.uyari {
  margin-top: .35rem; padding: .6rem .75rem;
  background: var(--high-bg); border-radius: var(--radius-sm);
  border-left: 3px solid var(--high);
}
.kunye-alan.uyari .kunye-etiket { color: var(--high); }

/* ------------------------------------------------ bölüm düğme grupları */
/* İlgili işler ana başlık altında toplanır; düğmeye basınca pencere açılır.
   Üç düzen denendi ve üçü de yetmedi: on düğme tek sıra (hiyerarşi yok),
   dört büyük kart (eskisinin üstüne bindi), akordeon (uzun listeler sayfayı
   üst üste bindirdi). */
.bolum-grubu {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 47%), 1fr));
  gap: .5rem; margin-bottom: .4rem;
}
.bolum-dugme {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .8rem; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .12s, box-shadow .12s;
}
.bolum-dugme:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.bd-ikon {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  border-radius: 9px; background: var(--accent-soft);
}
.bd-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bd-ad { font-weight: 650; font-size: .9rem; }
.bd-alt {
  font-size: .76rem; color: var(--muted); margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Dikkat isteyen bölüm (anormal sonuç, geçmiş aşı) açmadan görünsün. */
.bolum-dugme.uyari { border-color: var(--high); background: var(--high-bg); }
.bolum-dugme.uyari .bd-ikon { background: var(--high); }
.bolum-dugme.uyari .bd-alt { color: var(--high); font-weight: 600; }

/* --------------------------------------------------- pencere tam ekran */
/* Sonuç tablosu, röntgen listesi ve belge listesi 780 pikselelik pencereye
   sığmıyordu. Her pencerede bir ⛶ düğmesi var; seçim hatırlanıyor. */
.tam-ekran-dugme {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  /* Gorunen kutu 34px; kalan 5px seffaf kenar, parmak icin. */
  background-clip: content-box; border: 5px solid transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center; font-size: .95rem; line-height: 1;
  border-radius: var(--radius-sm);
  background: var(--card); color: var(--muted);
}
.tam-ekran-dugme:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent); background: var(--accent-soft);
}
.detail.tam-ekran {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  border-radius: 0; border: 0;
}
.detail.tam-ekran .detail-inner {
  max-height: 100dvh; height: 100dvh;
  padding: 1.35rem max(1.35rem, calc((100vw - 1100px) / 2));
}
/* Pencere başlığı ⛶ düğmesinin altına girmesin. */
.detail-inner > h2:first-child { padding-right: 2.6rem; }


/* --------------------------------------------------------- işlem şeridi */
/* "Kapat" sağa itilir: yaptığın işle onu bitirme eylemi yan yana
   durmamalı, yanlışlıkla basılıyordu. */
.hasta-islem .sag { margin-left: auto; }
@media (max-width: 560px) { .hasta-islem .sag { margin-left: 0; } }

/* Hasta ekranındaki bölüm başlıkları. Önceden her biri satır içi
   `style="margin:.9rem 0 .3rem"` taşıyordu — aynı değer üç yere
   kopyalanmıştı ve biri değişse ötekiler geride kalırdı. */
.hasta-baslik {
  display: flex; align-items: center; gap: .5rem;
  margin: 1.4rem 0 .5rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.hasta-baslik::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}
.baslik-sayi {
  font-size: .72rem; padding: .05rem .45rem; border-radius: 999px;
  background: var(--card-alt); border: 1px solid var(--line);
  color: var(--ink-2); letter-spacing: 0;
}

/* Hasta ekranındaki sonuç tablosu telefonda 378px çıkıyordu, kapsayıcı
   337px — pencerenin düzenini kırıyordu. Tablo artık KENDİ İÇİNDE
   kayıyor; sayfa yatay kaymıyor. `.tablo-sar` denetim tablosunda zaten
   bunun için vardı, burada kullanılmamıştı. */
.detail .tablo-sar { padding-bottom: .5rem; }
.detail .tablo-sar .results { min-width: 100%; }

/* Hasta ekranındaki "isteme bağlı olmayan sonuçlar". Önceden beş sütunlu
   bir <table> idi: başlıkları ("Tarih / Panel / Test") satırlardan çok
   yer kaplıyor, telefonda 378px çıkıp pencereyi taşırıyordu. Artık istem
   satırlarıyla aynı biçimde tıklanabilir satırlar. */
.sonuc-listesi {
  display: flex; flex-direction: column; gap: .4rem;
}
.sonuc-satir {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .65rem .8rem; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  transition: border-color .12s, background .12s;
}
.sonuc-satir:hover { border-color: var(--accent); background: var(--accent-soft); }
.sonuc-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sonuc-ad { font-weight: 650; font-size: .92rem; }
.sonuc-alt { font-size: .78rem; color: var(--muted); margin-top: .1rem; }


/* Tarih araligi — yalniz "Tarih aralığı…" secilince gorunur. */
.tarih-aralik { display: inline-flex; align-items: center; gap: .35rem; }
.tarih-aralik input[type="date"] {
  font: inherit; font-size: .84rem; min-height: 44px;
  padding: .4rem .55rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.tarih-aralik input[type="date"]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.tarih-aralik .tire { color: var(--muted); }

/* ================================================ seçim listesi düzenleyici
   Üç tur denendi ve üçünde de aynı sorun vardı: seçenekler AYAR EKRANINA
   diziliyordu. Beş liste ve içinde otuz ırk olan bir klinikte ayar ekranı
   metrelerce uzuyor, alttaki kartlar gözden kayboluyordu — liste büyüdükçe
   ekran da büyüyordu.

   Şimdi ayarlarda her liste TEK SATIR; içeriği kendi penceresinde,
   tikli satırlar halinde ve kendi içinde kayan bir listede. */
.liste-ozetler {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--card);
}
.liste-ozet {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .7rem .85rem; text-align: left; cursor: pointer;
  font: inherit; color: inherit; background: none;
  border: 0; border-top: 1px solid var(--line-soft); min-height: 44px;
  transition: background .12s;
}
.liste-ozet:first-child { border-top: 0; }
.liste-ozet:hover { background: var(--accent-soft); }
.lo-ad { font-weight: 600; font-size: .92rem; }
.lo-sayi { margin-left: auto; font-size: .8rem; color: var(--muted); }
.lo-ok { flex: none; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.liste-ozet:hover .lo-ok, .liste-ozet:hover .lo-sayi { color: var(--accent); }

/* ---------------------------------------------------- düzenleme penceresi */
.ld-ust { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.ld-ust input[type="search"] {
  flex: 1; min-width: 0; font: inherit;
  padding: .5rem .75rem; min-height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card-alt); color: var(--ink);
}
.ld-ust input[type="search"]:focus {
  outline: none; border-color: var(--accent); background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ld-toplam { flex: none; font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* Liste KENDI ICINDE kayar: pencere ne kadar seçenek olursa olsun
   aynı boyda kalır, "Ekle" ve "Kaydet" hep görünür yerde durur.
   Tam ekranda (⛶) daha çoğu bir arada görünür. */
.ld-liste {
  max-height: 22rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card);
}
.detail.tam-ekran .ld-liste { max-height: calc(100dvh - 24rem); }
.ld-satir {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .8rem; cursor: pointer; min-height: 44px;
  border-top: 1px solid var(--line-soft);
  transition: background .1s;
}
.ld-satir:first-child { border-top: 0; }
.ld-satir:hover { background: var(--card-alt); }
.ld-satir input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; flex: none; margin: 0;
  accent-color: var(--high);          /* tik = silinecek demek */
}
.ld-satir span { font-size: .9rem; }
/* Isaretlenen satir "gidecek" gorunsun. */
.ld-satir:has(input:checked) { background: var(--high-bg); }
.ld-satir:has(input:checked) span { color: var(--high); text-decoration: line-through; }
.ld-liste .empty { border: 0; background: none; padding: 2rem 1rem; }

.ld-ekle { display: flex; gap: .4rem; margin-top: .7rem; }
.ld-ekle input {
  flex: 1; min-width: 0; font: inherit;
  padding: .55rem .8rem; min-height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card-alt); color: var(--ink);
}
.ld-ekle input:focus {
  outline: none; border-color: var(--accent); background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ld-ekle button {
  flex: none; font: inherit; font-size: .84rem; font-weight: 600;
  padding: .55rem .95rem; min-height: 44px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-2);
}
.ld-ekle button:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.actions button.tehlike { border-color: var(--high); color: var(--high); }
.actions button.tehlike:hover:not(:disabled) {
  background: var(--high); color: var(--high-ink); border-color: var(--high);
}

/* Açılır listenin yanındaki "+" — listede olmayan bir şeyi kayıt
   sırasında eklemek için. Ayarlara gidip dönmek gerekseydi kimse
   yapmaz, alanı boş bırakırdı. */
/* Bitisik dokunma hedefleri arasi en az 8px (04.09.2026). */
.secenek-satir { display: flex; gap: .5rem; align-items: stretch; }
.secenek-satir select { flex: 1; min-width: 0; min-height: 44px; }
.secenek-ekle {
  flex: none; width: 44px; min-height: 44px; cursor: pointer;
  font: inherit; font-size: 1.1rem; line-height: 1; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-2);
}
.secenek-ekle:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* =====================================================================
   ETKİLEŞİM KATMANI — basılma, devinim, seçim (04.09.2026)

   ÖLÇÜLDÜ (bu satırlar yazılmadan önce, `style.css` üzerinde):

     :hover kuralı            36
     :active (basılma)         0   <-- açık
     prefers-reduced-motion    0   <-- açık
     @media (hover: hover)     0

   Otuz altı "üzerine gelme" durumu var, BASILMA durumu hiç yok.
   Dokunmatik ekranda üzerine gelme diye bir şey YOKTUR (A7'nin
   kaldırma kuralında zaten yazıyor). Yani havuzu tablette eriten
   teknisyen bir düğmeye bastığında ekrandan HİÇBİR karşılık
   almıyordu — bastı mı basmadı mı, ancak sonuç gelince anlıyordu.

   Bu bir süsleme değil, geri bildirim açığı.

   NEDEN AYRI KATMAN
     Mevcut 36 kuralın içine girip tek tek düzenlemek yerine, davranış
     buraya TEK YERDEN ekleniyor. Renk ya da düzen değiştirilmiyor;
     yalnız "bastım" hissi, devinim sınırı ve seçim rengi geliyor.
     Böylece bir ekranın görünümü kazara bozulmuyor.
   ===================================================================== */

/* --- basılma: her tıklanabilir şey bastığını söylesin ---------------
   1px'lik iniş + gölgenin sönmesi. Ölçü bilerek küçük: klinik
   programı zıplamaz, yalnız karşılık verir. `transform` yerine
   `translateY` seçildi — düzeni etkilemez, yalnız boyar. */
:where(
  .birincil,
  .kart-islem button, .kart-islem .dugme,
  .actions button,
  .secenek-ekle,
  .ikon
):active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

/* --- üzerine gelme YALNIZ gerçek imleçte -----------------------------
   Dokunmatikte `:hover` dokunulan öğede TAKILI kalır: teknisyen bir
   karta basıp başka yere geçtiğinde kart vurgulu görünmeye devam
   eder ve "seçili" sanılır. Aşağıdaki kaldırma etkisi bu yüzden
   yalnız `hover: hover` olan aygıtlarda açılıyor. */
@media (hover: hover) {
  .kart {
    transition: box-shadow .14s ease, border-color .14s ease;
  }
  .kart:hover {
    border-color: var(--line);
    box-shadow: var(--shadow-2);
  }
  .stat {
    transition: box-shadow .14s ease;
  }
  .stat:hover { box-shadow: var(--shadow-2); }
}

/* --- devinim tercihi -------------------------------------------------
   Dosyada 15 `transition` vardı ve hiçbiri bu tercihi sormuyordu.
   Vestibüler duyarlılığı olan bir kullanıcı için devinim rahatsız
   edicidir; işletim sisteminde "hareketi azalt" diyen herkes burada
   da azalmış olsun. Görünüm aynı kalır, yalnız geçişler anlıktır. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- seçili metin ----------------------------------------------------
   Tarayıcının varsayılan mavisi ürünün paletiyle çakışıyordu; hasta
   adı ya da numune numarası seçilince ekran bir anda yabancı bir renk
   gösteriyordu. `--accent-soft` zeminde koyu yazı: iki temada da
   okunur (karanlıkta `--accent-soft` koyu, `--ink` açık). */
::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* --- kaydırma çubuğu -------------------------------------------------
   `.devices` şeridinde `scrollbar-width: thin` zaten vardı ama yalnız
   orada. Uzun listelerde kalın gri varsayılan çubuk, elle ayarlanmış
   yüzeylerin yanında kaba duruyordu. Renk paletten geliyor, yani
   karanlık temada da kendiliğinden oturuyor. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  /* Kenardaki boşluk çubuğu inceltir; `border` şeffaf olduğu için
     altındaki zemin görünür. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--muted); }

/* =====================================================================
   GÖRSEL GEÇİŞ — 04.09.2026

   Kullanıcı üç tasarım kaynağı gösterip "UI güzelleşsin" dedi. A1b'nin
   2. yolu: dışarıdan kütüphane girmez, beğenilen görsel fikir ELLE saf
   CSS'e çevrilir. Aşağısı o çeviri.

   Neye dokunulmadı: renk anlamları (A4), dokunma hedefi 44px (A7),
   ikon dili (A6), metinler (B). Yalnız BİÇİM değişti — hangi bilginin
   nerede durduğu aynı.
   ===================================================================== */

/* --- zemin: düz gri değil, hafif derinlik -----------------------------
   Tek düz gri, ekranı "boyanmamış" gösteriyordu. Çok geniş ve çok
   soluk iki ışık kaynağı ekleniyor — fark edilmez, ama yüzeyler
   birbirinden ayrılır. */
body {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(15,118,110,.05), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(29,78,216,.04), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* --- giriş ekranı: ilk izlenim ---------------------------------------
   Logo madalyonuna ince bir halka ve daha yumuşak bir iniş verildi;
   başlık büyütülüp harf aralığı sıkıldı. Kart genişledi ve nefes
   aldı. */
.giris-kart {
  width: min(424px, 100%);
  padding: 2.6rem 2.1rem 2.1rem;
}
.giris-logo {
  width: 62px; height: 62px;
  border-radius: 19px;
  box-shadow:
    0 8px 20px -6px rgba(15,118,110,.45),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.giris-kart h1 { margin-top: 1.05rem; font-size: 1.56rem; letter-spacing: -.025em; }
.giris-alt { margin-bottom: 1.6rem; }
.giris-kart label { margin-top: .95rem; }
.giris-kart input { padding: .78rem .9rem; }

/* --- özet kutuları: sayı öne çıksın ----------------------------------
   Bu kutulardaki tek iş SAYIYI okutmak. Sayı büyütüldü, etiket
   küçültülüp soluklaştırıldı: göz önce sayıya düşsün. */
.stat { padding: .85rem .95rem; }
.stat b { font-size: 1.72rem; letter-spacing: -.03em; }
.stat span { margin-top: .25rem; font-size: .7rem; }

/* --- kartlar: sırt sırta beyaz dikdörtgen olmasın --------------------
   Kartın üst kenarına çok soluk bir ışık çizgisi (inset) kondu; alt
   alta dizilen kartlar birbirinden ayrılıyor. Aralık da açıldı. */
.kart-liste { gap: .7rem; }
.kart {
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
.kart-ad { font-size: 1.02rem; letter-spacing: -.01em; }
.kart-alt { margin-top: .3rem; }

/* --- rozet: daha okunur --------------------------------------------- */
.rozet {
  padding: .2rem .6rem;
  font-size: .715rem;
  vertical-align: .06em;
}

/* --- birincil düğme: düz dolgu yerine çok hafif eğim -----------------
   Eğim iki vurgu tonu arasında ve çok dar; "parlak düğme" değil,
   yalnız yüzeyin düz olmadığını söyleyen bir işaret. */
.birincil {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: var(--accent-2);
  box-shadow:
    0 1px 2px rgba(16,24,40,.10),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.birincil:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent-2), var(--accent-2));
}
.kart-islem .dugme {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: var(--accent-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

/* --- üst bar: içerikten ince bir katmanla ayrılsın ------------------- */
.topbar { box-shadow: 0 1px 3px rgba(16,24,40,.05); }

/* --- karanlık temada eğim ve iç ışık ters çalışır --------------------
   Yukarıdaki beyaz `inset` çizgileri koyu zeminde gri bir bulanıklık
   yapıyordu; orada iç ışık kaldırılıp gölge derinleştiriliyor. */
@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(1200px 600px at 12% -10%, rgba(45,212,191,.06), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(96,165,250,.04), transparent 55%),
      var(--bg);
  }
  .kart { box-shadow: var(--shadow); }
  .giris-logo {
    box-shadow: 0 8px 20px -6px rgba(45,212,191,.28);
  }
  .birincil, .kart-islem .dugme { box-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .topbar { box-shadow: 0 1px 3px rgba(0,0,0,.30); }
}

/* --- sınıfsız bağlantı: tarayıcı mavisi kullanılmasın ----------------
   BULUNDU (04.09.2026, karanlık temada göz ölçümüyle): `index.html`
   satır 94'teki *"Şifremi unuttum"* bağlantısının sınıfı yok ve
   dosyada genel bir `a {}` kuralı da yoktu. Yani tarayıcının
   varsayılan lacivertini kullanıyordu; koyu zeminde neredeyse
   görünmüyordu. Aydınlık temada göze batmadığı için kimse fark
   etmemiş.

   `:where()` ve `:not([class])` bilerek: özgüllük SIFIR kalıyor ve
   yalnız SINIFSIZ bağlantılar boyanıyor. Böylece `.kart-islem .dugme`
   ya da `.actions a` gibi kendi rengi olan bağlantılara dokunulmuyor. */
:where(a):not([class]) {
  color: var(--accent);
  text-underline-offset: .16em;
  text-decoration-thickness: from-font;
}
:where(a):not([class]):hover { color: var(--accent-2); }

/* =====================================================================
   YENİDEN TASARIM — 04.09.2026  (ÖNİZLEME, port 8790)

   Kullanıcı üç kez "hiçbir şey değişmemiş" dedi ve haklıydı: gölge,
   köşe, boşluk gibi ince şeyler ekranda okunmuyor. Bu katman BİLEREK
   görünür. Onaylanınca tüm sisteme geçer; onaylanmazsa bu blok silinir
   ve hiçbir şey bozulmaz — altındaki kuralların hepsi yerinde duruyor.

   Değişmeyen: bilgi mimarisi, metinler, dokunma hedefleri, renk
   ANLAMLARI (kırmızı hâlâ anormal, sarı hâlâ bekleyen).
   ===================================================================== */

/* --- bölüm kimlik renkleri -------------------------------------------
   Her şey turkuazdı; menüde hangi bölümde olduğun renkten anlaşılmıyordu.
   Altı bölüme altı renk. Bunlar SÜS değil, konum işareti. */
:root {
  --b1: #0f766e;  --b1s: #d7efec;   /* Sonuçlar   */
  --b2: #2563eb;  --b2s: #dbeafe;   /* Hastalar   */
  --b3: #b45309;  --b3s: #fef0d7;   /* Onay bekleyen */
  --b4: #be185d;  --b4s: #fce7f0;   /* Eşleşmeyen */
  --b5: #7c3aed;  --b5s: #ede9fe;   /* Cihazlar   */
  --b6: #0891b2;  --b6s: #cff4fb;   /* Ekip       */
}
@media (prefers-color-scheme: dark) {
  :root {
    --b1: #2dd4bf;  --b1s: #0e3330;
    --b2: #60a5fa;  --b2s: #12233f;
    --b3: #fbbf24;  --b3s: #33260c;
    --b4: #f472b6;  --b4s: #3a1224;
    --b5: #a78bfa;  --b5s: #251a3f;
    --b6: #22d3ee;  --b6s: #0b2b33;
  }
}

/* --- zemin: yumuşak renk sisi ---------------------------------------- */
body {
  background:
    radial-gradient(760px 420px at  8%  -6%, rgba(15,118,110,.10), transparent 62%),
    radial-gradient(680px 400px at 92%   2%, rgba(37,99,235,.08),  transparent 60%),
    radial-gradient(600px 380px at 50% 104%, rgba(124,58,237,.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* --- üst bar: camsı ve markalı --------------------------------------- */
.topbar {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.brand strong, .topbar h1 {
  background: linear-gradient(120deg, var(--b1), var(--b5));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
}

/* --- yan menü: seçili bölüm DOLU bir hap ------------------------------
   Önce soluk bir zemin farkıydı; şimdi dolu, gölgeli, beyaz yazılı.
   Nerede olduğun bir bakışta belli. */
@media (min-width: 980px) {
  .yanmenu {
    background: color-mix(in srgb, var(--panel) 60%, transparent);
    border-right: 1px solid var(--line);
    padding: 1rem .75rem 1rem;
    gap: .2rem;
  }
  .sekme {
    border-radius: 11px;
    transition: background .14s, color .14s, transform .1s;
  }
  .sekme:hover { background: var(--card-alt); transform: translateX(2px); }
  .sekme.etkin {
    background: linear-gradient(135deg, var(--b1), var(--b1));
    color: #fff; font-weight: 650;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--b1) 70%, transparent);
  }
  .sekme.etkin .sekme-ikon { color: #fff; }
  /* Menüdeki her bölüm kendi rengini taşır — seçiliyken hap o renge döner. */
  .yanmenu .sekme:nth-of-type(1) .sekme-ikon { color: var(--b1); }
  .yanmenu .sekme:nth-of-type(2) .sekme-ikon { color: var(--b2); }
  .yanmenu .sekme:nth-of-type(3) .sekme-ikon { color: var(--b3); }
  .yanmenu .sekme:nth-of-type(4) .sekme-ikon { color: var(--b4); }
  .yanmenu .sekme:nth-of-type(5) .sekme-ikon { color: var(--b5); }
  .yanmenu .sekme:nth-of-type(6) .sekme-ikon { color: var(--b6); }
  .yanmenu .sekme.etkin:nth-of-type(2) {
    background: var(--b2); box-shadow: 0 6px 16px -6px color-mix(in srgb,var(--b2) 70%,transparent); }
  .yanmenu .sekme.etkin:nth-of-type(3) {
    background: var(--b3); box-shadow: 0 6px 16px -6px color-mix(in srgb,var(--b3) 70%,transparent); }
  .yanmenu .sekme.etkin:nth-of-type(4) {
    background: var(--b4); box-shadow: 0 6px 16px -6px color-mix(in srgb,var(--b4) 70%,transparent); }
  .yanmenu .sekme.etkin:nth-of-type(5) {
    background: var(--b5); box-shadow: 0 6px 16px -6px color-mix(in srgb,var(--b5) 70%,transparent); }
  .yanmenu .sekme.etkin:nth-of-type(6) {
    background: var(--b6); box-shadow: 0 6px 16px -6px color-mix(in srgb,var(--b6) 70%,transparent); }
  .menu-baslik { letter-spacing: .1em; }
}

/* --- özet kutuları: gerçek bir gösterge paneli ------------------------ */
.stats { gap: .8rem; padding-top: 1.4rem; }
.stat {
  position: relative; overflow: hidden;
  padding: 1.05rem 1rem .95rem;
  border-radius: 16px;
}
/* Üst kenarda renkli şerit — kutular birbirinden ayrılsın. */
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--b1);
}
.stat:nth-of-type(2)::before { background: var(--b2); }
.stat:nth-of-type(3)::before { background: var(--b3); }
.stat:nth-of-type(4)::before { background: var(--b4); }
.stat:nth-of-type(5)::before { background: var(--b5); }
.stat:nth-of-type(6)::before { background: var(--b6); }
.stat b {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.035em;
  background: linear-gradient(160deg, var(--ink), var(--ink-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat span { font-size: .69rem; letter-spacing: .07em; }
.stat.warn { border-color: var(--high); }
.stat.warn::before { background: var(--high); }
.stat.warn b {
  background: none; -webkit-text-fill-color: var(--high); color: var(--high);
}

/* --- cihaz şeridi: canlı noktalar ------------------------------------ */
.device { padding: .45rem .9rem; font-weight: 500; }
.device .dot { width: 8px; height: 8px; }
.device[data-status="bagli"] .dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.device[data-status="hata"] .dot,
.device[data-status="kapali"] .dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--high) 20%, transparent);
}

/* --- kartlar: solda renk şeridi, üzerine gelince kalkış --------------- */
.kart {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 1.05rem 1.2rem 1.05rem 1.35rem;
}
.kart::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--b1); opacity: .85;
}
.kart:has(.rozet.kotu)::before  { background: var(--high); }
.kart:has(.rozet.orta)::before  { background: var(--uyari); }
.kart:has(.rozet.gri)::before   { background: var(--muted); }
@media (hover: hover) {
  .kart { transition: transform .16s ease, box-shadow .16s ease; }
  .kart:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
}
.kart-ad { font-size: 1.06rem; font-weight: 650; letter-spacing: -.015em; }

/* --- rozet: noktalı, dolu ------------------------------------------- */
.rozet {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .62rem; font-weight: 600;
}
.rozet::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* --- bölüm başlığı: daha iri ---------------------------------------- */
.bolum-bas h2 {
  font-size: 1.62rem; font-weight: 700; letter-spacing: -.03em;
}

/* --- birincil düğme: renkli gölge ------------------------------------ */
.birincil {
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent),
              inset 0 1px 0 rgba(255,255,255,.18);
}

/* =====================================================================
   TASARIM SEÇENEKLERİ — 04.09.2026 (ÖNİZLEME)

   Kullanıcı "arka plan tercihleri" istedi. Tek bir şey dayatmak yerine
   `<html>` üzerindeki veri niteliğiyle DEĞİŞEBİLİR yapıldı; beğenilen
   seçilince gerisi silinir.

     data-zemin  = sis | izgara | nokta | dalga | duz
     data-vurgu  = turkuaz | mor | mavi | okyanus
     data-yogunluk = genis | sik

   Hepsi saf CSS — desenler `radial-gradient` ve satır içi SVG ile
   çiziliyor. TEK BİR dış dosya yok (A1b): internetsiz klinikte de
   aynı görünür.
   ===================================================================== */

/* --- tipografi ölçeği -------------------------------------------------
   Boyutlar tek tek serpiştirilmişti. Akışkan bir ölçek: dar ekranda
   küçülür, geniş ekranda büyür — ara değer elle yazılmaz. */
:root {
  --y-xs: .72rem;
  --y-sm: .82rem;
  --y-md: clamp(.92rem, .89rem + .12vw, 1rem);
  --y-lg: clamp(1.05rem, 1rem + .22vw, 1.18rem);
  --y-xl: clamp(1.35rem, 1.2rem + .6vw, 1.72rem);
  --y-2xl: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --sik: -.028em;              /* baslik harf araligi */
}
h1, h2, h3, .kart-ad, .stat b { font-feature-settings: "cv01", "ss01"; }
.bolum-bas h2 { font-size: var(--y-xl); letter-spacing: var(--sik); }
.kart-ad { font-size: var(--y-lg); }
.stat b { font-size: var(--y-2xl); }
.kart-alt, .aciklama { font-size: var(--y-sm); }

/* --- ZEMİN SEÇENEKLERİ ---------------------------------------------- */
:root { --desen: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (prefers-color-scheme: dark) {
  :root { --desen: color-mix(in srgb, var(--ink) 9%, transparent); }
}

/* 1) sis — renkli ışık lekeleri (şu anki) */
html[data-zemin="sis"] body {
  background:
    radial-gradient(760px 420px at  8%  -6%, rgba(15,118,110,.10), transparent 62%),
    radial-gradient(680px 400px at 92%   2%, rgba(37,99,235,.08),  transparent 60%),
    radial-gradient(600px 380px at 50% 104%, rgba(124,58,237,.06), transparent 60%),
    var(--bg);
}
/* 2) izgara — ince kareli kağıt */
html[data-zemin="izgara"] body {
  background:
    linear-gradient(var(--desen) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--desen) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(900px 500px at 50% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
/* 3) nokta — noktalı ızgara */
html[data-zemin="nokta"] body {
  background:
    radial-gradient(var(--desen) 1.1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(900px 500px at 50% -10%, var(--accent-soft), transparent 62%),
    var(--bg);
}
/* 4) dalga — üstte yumuşak bir tepe (satır içi SVG) */
html[data-zemin="dalga"] body {
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="200" viewBox="0 0 1440 200"><path d="M0 120C240 40 480 180 720 120s480-160 720-40v120H0z" fill="%230f766e" fill-opacity="0.07"/></svg>')
      top center / 1440px 200px no-repeat,
    radial-gradient(800px 420px at 50% -8%, var(--accent-soft), transparent 62%),
    var(--bg);
}
/* 5) duz — hiç desen yok */
html[data-zemin="duz"] body { background: var(--bg); }
html body { background-attachment: fixed; }

/* --- VURGU SEÇENEKLERİ ----------------------------------------------- */
html[data-vurgu="mor"]     { --accent:#7c3aed; --accent-2:#6d28d9; --accent-soft:#ede9fe; }
html[data-vurgu="mavi"]    { --accent:#2563eb; --accent-2:#1d4ed8; --accent-soft:#dbeafe; }
html[data-vurgu="okyanus"] { --accent:#0891b2; --accent-2:#0e7490; --accent-soft:#cff4fb; }
@media (prefers-color-scheme: dark) {
  html[data-vurgu="mor"]     { --accent:#a78bfa; --accent-2:#c4b5fd; --accent-soft:#251a3f; --accent-ink:#1a1030; }
  html[data-vurgu="mavi"]    { --accent:#60a5fa; --accent-2:#93c5fd; --accent-soft:#12233f; --accent-ink:#0a1628; }
  html[data-vurgu="okyanus"] { --accent:#22d3ee; --accent-2:#67e8f9; --accent-soft:#0b2b33; --accent-ink:#062028; }
}

/* --- YOĞUNLUK -------------------------------------------------------- */
html[data-yogunluk="sik"] .kart { padding: .7rem .9rem .7rem 1.1rem; }
html[data-yogunluk="sik"] .kart-liste { gap: .45rem; }
html[data-yogunluk="sik"] .stat { padding: .75rem .8rem .7rem; }
html[data-yogunluk="sik"] .stat b { font-size: 1.6rem; }

/* --- DÜĞMELER: gerçek bir aile --------------------------------------- */
.kart-islem button, .actions button {
  font-weight: 550;
  transition: border-color .14s, color .14s, background .14s,
              box-shadow .14s, transform .1s;
}
@media (hover: hover) {
  .kart-islem button:hover, .actions button:hover:not(:disabled) {
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}
.kart-islem .dugme, .birincil {
  position: relative; overflow: hidden;
}
/* Üzerine gelince yüzeyde soldan sağa geçen çok soluk bir ışık. */
@media (hover: hover) {
  .kart-islem .dugme::after, .birincil::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%,
                rgba(255,255,255,.22) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .5s ease;
  }
  .kart-islem .dugme:hover::after, .birincil:hover:not(:disabled)::after {
    transform: translateX(120%);
  }
}

/* --- GEÇİŞLER: ekran ve kart girişi ---------------------------------- */
@keyframes ac { from { opacity: 0; transform: translateY(6px); } }
.gorunum.etkin { animation: ac .22s ease both; }
/* Kartlar sırayla düşsün — liste "birden belirmek" yerine akıyor.
   Yalnız ilk sekiz kart; uzun listede bekleme hissi yaratmasın. */
.kart-liste > .kart { animation: ac .26s ease both; }
.kart-liste > .kart:nth-child(1) { animation-delay: .02s }
.kart-liste > .kart:nth-child(2) { animation-delay: .05s }
.kart-liste > .kart:nth-child(3) { animation-delay: .08s }
.kart-liste > .kart:nth-child(4) { animation-delay: .11s }
.kart-liste > .kart:nth-child(5) { animation-delay: .14s }
.kart-liste > .kart:nth-child(6) { animation-delay: .17s }
.kart-liste > .kart:nth-child(7) { animation-delay: .20s }
.kart-liste > .kart:nth-child(8) { animation-delay: .23s }
.kart-liste > .kart:nth-child(n+9) { animation: none; }
.stat { animation: ac .3s ease both; }

/* --- FORM ALANLARI: daha okunur -------------------------------------- */
.alan input, .alan select, .alan textarea {
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.alan input:focus, .alan select:focus, .alan textarea:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- BOŞ EKRAN: sessiz değil, açıklayıcı ----------------------------- */
.bos, .kart-liste:empty::after {
  display: block; text-align: center; color: var(--muted);
  padding: 2.5rem 1rem; font-size: var(--y-md);
}

/* Devinim tercihi bu blokta da geçerli — yukarıdaki genel kural tüm
   `animation`ları .01ms'e indiriyor, ayrıca yazmaya gerek yok. */

/* --- hasta kartında tür avatarı --------------------------------------
   `portal.js` hasta sahibine zaten tür simgesi gösteriyordu; hekimin
   ekranında yoktu. Aynı liste iki yerde farklı görünmesin diye
   `app.js`'e AYNI eşleşmeler kondu (`turSimge`).

   Emoji burada İKON DEĞİL, veri işareti: türü söylüyor, bir eylemi
   değil. A6 eylem ikonlarını düzenler (yazdır, sil, ayarlar) — onlar
   hâlâ çizgi ikon. Tür simgesi hasta sahibinin dilinde bir şey ve
   sıcaklık katıyor. */
.hasta-bas { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; }
.hasta-bilgi { min-width: 0; }
.hasta-avatar {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.45rem; line-height: 1;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* --- SEÇİLEN VARSAYILAN: nokta zemin + turkuaz vurgu -----------------
   Zemin: "nokta". Izgara fazla teknik, dalga fazla dekoratif, düz
   yine cansız; nokta dokuyu veriyor ama kartların altında gürültü
   yapmıyor.

   Vurgu: TURKUAZ değişmedi. Marka rengi yalnız burada değil —
   `index.html` theme-color, `icon.svg`, Worker'daki portal ve APK
   hep bu renk. Vurguyu değiştirmek arayüzü değil MARKAYI değiştirir;
   o ayrı bir karar.

   Nitelik yazılmamış sayfada da nokta çıksın diye kural doğrudan
   `body`'ye yazıldı; `html[data-zemin="..."]` yalnız ÜSTÜNE yazar.
   Böylece `index.html`'e dokunmaya gerek kalmadı. */
body {
  background:
    radial-gradient(var(--desen) 1.1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(900px 500px at 50% -10%, var(--accent-soft), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}