/* Bileşenler: düğme, girdi, kart, liste, tablo, rozet, modal, bildirim, sayaç, grafik. */

/* ---------- Düğmeler ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2);
  min-height: 40px; padding-block: 0; padding-inline: var(--b-4);
  border: var(--kenarlik-2); border-radius: var(--r-kucuk);
  background: rgb(var(--yuzey)); color: rgb(var(--metin));
  font: inherit; font-size: var(--f-m); font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--hiz-1) var(--egri), border-color var(--hiz-1) var(--egri),
              box-shadow var(--hiz-1) var(--egri), transform var(--hiz-1) var(--egri);
}
.btn:hover:not(:disabled) { background: rgb(var(--yuzey-2)); border-color: rgb(var(--vurgu) / .45); }
/* Basılma geri bildirimi ölçülü: 1 piksel inmek yerine hafif küçülmek,
   dokunmatikte parmağın altında daha doğru hissettiriyor. */
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--birincil {
  background: linear-gradient(180deg, rgb(var(--vurgu-3)), rgb(var(--vurgu)));
  border-color: rgb(var(--vurgu-2)); color: rgb(var(--vurgu-yz));
  box-shadow: 0 1px 2px rgb(var(--cizgi) / .18);
}
.btn--birincil:hover:not(:disabled) {
  background: linear-gradient(180deg, rgb(var(--vurgu)), rgb(var(--vurgu-2)));
  border-color: rgb(var(--vurgu-2));
  box-shadow: 0 2px 10px rgb(var(--vurgu) / .3);
}
.btn--tehlike { background: rgb(var(--kirmizi)); border-color: rgb(var(--kirmizi)); color: #fff; }
.btn--tehlike:hover:not(:disabled) { filter: brightness(.93); }
.btn--sade { background: transparent; border-color: transparent; }
.btn--sade:hover:not(:disabled) { background: rgb(var(--yuzey-2)); border-color: transparent; }
.btn--kucuk { min-height: 32px; padding-inline: var(--b-3); font-size: var(--f-s); }
.btn--buyuk { min-height: 48px; padding-inline: var(--b-5); font-size: var(--f-l); }
.btn--ikon { padding-inline: var(--b-2); min-width: 40px; }
.btn--ikon.btn--kucuk { min-width: 32px; }
.btn--genis { width: 100%; }

/* ---------- Girdiler ---------- */
.input {
  inline-size: 100%; min-height: 42px;
  padding-block: var(--b-2); padding-inline: var(--b-3);
  border: var(--kenarlik-2); border-radius: var(--r-kucuk);
  background: rgb(var(--yuzey)); color: rgb(var(--metin));
  font: inherit; font-size: var(--f-m);
  transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.input:hover:not(:disabled) { border-color: rgb(var(--cizgi) / .3); }
/* Odak halkası: kutunun dışına taşan ince bir ışık. Yalnız outline
   kullanıldığında kenarlıkla çakışıyor ve ucuz duruyordu. */
.input:focus { outline: none; border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.btn:focus-visible, a:focus-visible, .sekme:focus-visible, .input:focus-visible {
  outline: 2px solid rgb(var(--vurgu)); outline-offset: 2px;
}
.input:focus:not(:focus-visible) { outline: none; }
/* Hata kenarı üzerine gelince ve odakta da kırmızı kalıyor: hover ve odak
   kuralları (düğme görünümlü hasta seçicininki dahil) onu griye ya da
   vurguya çeviriyordu, hekim fareyi alana götürdüğü anda işaret kayboluyordu. */
.input--hata, .input--hata:hover:not(:disabled) { border-color: rgb(var(--kirmizi)); }
.input--hata:focus { border-color: rgb(var(--kirmizi)); box-shadow: 0 0 0 3px rgb(var(--kirmizi) / .18); }
textarea.input { min-height: 76px; resize: vertical; }
select.input { cursor: pointer; }

.alan { display: flex; flex-direction: column; gap: var(--b-1); margin-block-end: var(--b-3); }
.alan__etiket { font-size: var(--f-s); font-weight: 600; color: rgb(var(--metin-2)); }
/* Zorunlu alan yıldızı hata kırmızısı değil, tasarımdaki parlak kırmızı
   (--yildiz): koyu kırmızı bir hata mesajıyla karışıyordu. */
.alan__yildiz { color: rgb(var(--yildiz)); font-style: normal; margin-inline-start: 2px; }
.alan__ipucu { font-size: var(--f-xs); color: rgb(var(--metin-3)); }
/* Ayarlar'da seçilen kâğıt stilinin küçük önizlemesi (boş kâğıt). Kâğıdın
   ölçeklenmemiş kutusu 733 px: taşan kısmı sayfayı yana kaydırmasın. */
.stil-onizleme { max-inline-size: 240px; margin-block-start: var(--b-2); overflow: hidden; }
.stil-onizleme .kagit-tuval { padding-block: 0; }
.alan__hata { font-size: var(--f-xs); color: rgb(var(--kirmizi)); font-weight: 600; }

.onay { display: inline-flex; align-items: center; gap: var(--b-2); cursor: pointer; font-size: var(--f-m); }
.onay input { inline-size: 18px; block-size: 18px; accent-color: rgb(var(--vurgu)); cursor: pointer; }

/* ---------- Düzen kalıpları ---------- */
.satir { display: flex; flex-wrap: wrap; gap: var(--b-2); align-items: center; }
.satir--arasi { justify-content: space-between; }
.izgara { display: grid; gap: var(--b-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.izgara--form { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Kısa sayısal alanlar (klinik ölçümler) için dar ızgara: beşi geniş ekranda
   tek satıra sığsın. Genel form ızgarasında dördü sığıp beşincisi alt satıra
   tek başına düşüyor, yanı boş kalıyordu. */
.izgara--dar { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Sayaç ızgarası dar kutularla auto-fit: dördü genişte tek satıra sığar,
   telefonda ikişerli. */
.izgara--sayac { grid-template-columns: repeat(auto-fit, minmax(166px, 1fr)); gap: var(--b-3); }

/* Panel kartları: geniş ekranda iki sütun. Kartlar kendi yüksekliklerinde
   kalsın diye align-items: start — yoksa iki satırlık kart, yanındaki altı
   satırlık kart kadar uzayıp içi boş duruyor. */
.panel-izgara { display: grid; gap: var(--b-4); align-items: start; }
.panel-izgara > .kart { margin-block-end: 0; }
@media (min-width: 1080px) { .panel-izgara { grid-template-columns: 1fr 1fr; } }

/* ---------- Kart ---------- */
.kart {
  background: rgb(var(--yuzey)); border: var(--kenarlik); border-radius: var(--r);
  padding: var(--b-4); margin-block-end: var(--b-4);
}
/* Başlık ile içerik arasında ince bir çizgi: kart içinde nerede neyin bittiği
   belli olsun. Kartın kendi dolgusu kadar iki yana taşıyor ki çizgi kartı
   boydan boya bölsün. */
.kart__bas {
  display: flex; justify-content: space-between; align-items: center; gap: var(--b-2);
  margin-block-end: var(--b-3); padding-block-end: var(--b-3);
  margin-inline: calc(var(--b-4) * -1); padding-inline: var(--b-4);
  border-block-end: var(--kenarlik);
}
.kart__bas h2 { margin: 0; font-size: var(--f-m); font-weight: 700; letter-spacing: -.005em; }
.kart__alt { font-size: var(--f-s); color: rgb(var(--metin-2)); }

/* ---------- Sayaç kutusu (panel) ---------- */
/* Simge kendi hafif zemininde bir rozet gibi duruyor; sayı büyük ve tabular.
   Kutu dar tutuldu ki dördü yan yana, telefonda ikisi yan yana sığsın. */
.sayac {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--b-3); border: var(--kenarlik); border-radius: var(--r);
  background: rgb(var(--yuzey));
  color: inherit; text-decoration: none;
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
a.sayac:hover { border-color: rgb(var(--vurgu) / .4); box-shadow: var(--golge-2); transform: translateY(-2px); }
.sayac__ust {
  display: flex; align-items: center; gap: var(--b-2);
  font-size: var(--f-s); color: rgb(var(--metin-2)); font-weight: 600;
  min-inline-size: 0; margin-block-end: var(--b-1);
}
/* Simge kutunun bitiş kenarına itiliyor: etiket bir uçta, simge öteki uçta.
   Yan yana durduklarında kutunun yarısı boş kalıyordu. */
.sayac__ust .simge {
  margin-inline-start: auto;
  inline-size: 28px; block-size: 28px; border-radius: var(--r-kucuk);
  padding: 5px; background: rgb(var(--metin-3) / .12); color: rgb(var(--metin-2));
}
.sayac__ust span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sayac__deger {
  font-size: var(--f-2xl); line-height: 1.15; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sayac__alt { font-size: var(--f-xs); line-height: 1.4; color: rgb(var(--metin-3)); }
.sayac--vurgu .sayac__ust { color: rgb(var(--vurgu)); }
.sayac--vurgu .sayac__ust .simge { background: rgb(var(--vurgu) / .12); color: rgb(var(--vurgu)); }
/* Uyarı ve hata sayaçları hafif bir zeminle de ayrılıyor: panele bakan kişi
   neye bakması gerektiğini önce görsün. */
.sayac--uyari { background: rgb(var(--sari) / .06); border-color: rgb(var(--sari) / .28); }
.sayac--uyari .sayac__ust { color: rgb(var(--sari)); }
.sayac--uyari .sayac__ust .simge { background: rgb(var(--sari) / .14); color: rgb(var(--sari)); }
.sayac--hata { background: rgb(var(--kirmizi) / .06); border-color: rgb(var(--kirmizi) / .28); }
.sayac--hata .sayac__ust { color: rgb(var(--kirmizi)); }
.sayac--hata .sayac__ust .simge { background: rgb(var(--kirmizi) / .14); color: rgb(var(--kirmizi)); }

/* ---------- Grafik (son günlerin reçeteleri) ---------- */
.grafik { display: flex; align-items: flex-end; gap: 2%; block-size: 120px; padding-block-start: var(--b-2); }
.grafik__sutun {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 6px; min-inline-size: 0; block-size: 100%;
}
.grafik__cubuk {
  inline-size: 100%; max-inline-size: 26px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, rgb(var(--vurgu-3)), rgb(var(--vurgu)));
  /* Yükseklik satır içi stille geliyor; buradan yalnız açılış animasyonu. */
  transform-origin: bottom;
  animation: cubuk-bit var(--hiz-3) var(--egri) backwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.grafik__sutun--bos .grafik__cubuk { background: rgb(var(--metin-3) / .18); }
.grafik__etiket { font-size: var(--f-xs); color: rgb(var(--metin-3)); white-space: nowrap; }
.grafik__sutun--bugun .grafik__etiket { color: rgb(var(--vurgu)); font-weight: 700; }
@keyframes cubuk-bit { from { transform: scaleY(0); opacity: 0; } }

/* ---------- Yatay çubuk listesi ---------- */
.yatay-grafik { display: flex; flex-direction: column; gap: var(--b-2); }
.yatay-grafik__satir { display: flex; align-items: center; gap: var(--b-3); }
.yatay-grafik__etiket {
  inline-size: 40%; max-inline-size: 220px; flex-shrink: 0;
  font-size: var(--f-s); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yatay-grafik__yol { flex: 1; min-inline-size: 0; block-size: 10px; border-radius: var(--r-tam); background: rgb(var(--metin-3) / .13); overflow: hidden; }
.yatay-grafik__cubuk {
  block-size: 100%; border-radius: var(--r-tam);
  background: linear-gradient(90deg, rgb(var(--vurgu-3)), rgb(var(--vurgu)));
  transform-origin: inline-start;
  animation: yatay-bit var(--hiz-3) var(--egri) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes yatay-bit { from { transform: scaleX(0); } }
.yatay-grafik__deger { inline-size: 2.5ch; text-align: end; font-size: var(--f-s); font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--metin-2)); }

/* ---------- Liste ---------- */
.liste { display: flex; flex-direction: column; border: var(--kenarlik); border-radius: var(--r); overflow: hidden; background: rgb(var(--yuzey)); }
/* Gizlenen liste (ilaç kutusunun seçiliyken kapanan gezinme listesi) boş
   bir çerçeve olarak da kalmasın. */
.liste[hidden] { display: none; }
/* Kartın içindeki liste kendi kenarlığını taşımaz — kutu içinde kutu oluyor
   ve satırlar kartın kenarına kadar uzanamıyordu. */
.kart > .liste {
  border: none; border-radius: 0; background: transparent;
  margin-inline: calc(var(--b-4) * -1); margin-block-end: calc(var(--b-4) * -1);
}
.kart > .liste > .liste__satir { padding-inline: var(--b-4); }
.kart > .liste > .liste__satir:last-child { border-block-end: none; }
.liste__satir {
  position: relative;
  display: flex; align-items: center; gap: var(--b-3); min-block-size: 56px;
  padding-block: var(--b-2); padding-inline: var(--b-3); border-block-end: var(--kenarlik);
  color: inherit; text-decoration: none;
  transition: background var(--hiz-1) var(--egri);
}
.liste__satir:last-child { border-block-end: none; }
a.liste__satir:hover, .liste__satir--tiklanir:hover { background: rgb(var(--vurgu) / .05); }
.liste__govde { flex: 1; min-inline-size: 0; }
.liste__baslik { font-weight: 600; overflow-wrap: anywhere; }
.liste__alt { font-size: var(--f-s); color: rgb(var(--metin-2)); overflow-wrap: anywhere; }
/* Liste içi bölüm başlığı: "senin sık yazdıkların" / "diğerleri". */
.liste__ayrac {
  padding-block: var(--b-2) 4px; padding-inline: var(--b-3);
  font-size: var(--f-xs); font-weight: 600; color: rgb(var(--metin-3));
  background: rgb(var(--yuzey-2)); position: sticky; inset-block-start: 0; z-index: 1;
}
.liste__son { display: flex; align-items: center; gap: var(--b-2); flex-shrink: 0; }

.avatar {
  inline-size: 38px; block-size: 38px; border-radius: var(--r-tam); flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; font-size: var(--f-s);
  background: rgb(var(--vurgu) / .12); color: rgb(var(--vurgu));
}

/* ---------- Tablo ---------- */
.tablo-kap { overflow-x: auto; border: var(--kenarlik); border-radius: var(--r); background: rgb(var(--yuzey)); }
.kart > .tablo-kap { border: none; border-radius: 0; margin-inline: calc(var(--b-4) * -1); margin-block-end: calc(var(--b-4) * -1); }
.tablo { inline-size: 100%; border-collapse: collapse; font-size: var(--f-m); }
.tablo th, .tablo td { padding: var(--b-3); text-align: start; border-block-end: var(--kenarlik); vertical-align: middle; }
.kart > .tablo-kap .tablo th:first-child, .kart > .tablo-kap .tablo td:first-child { padding-inline-start: var(--b-4); }
.kart > .tablo-kap .tablo th:last-child, .kart > .tablo-kap .tablo td:last-child { padding-inline-end: var(--b-4); }
.tablo th {
  font-size: var(--f-xs); color: rgb(var(--metin-2)); font-weight: 700; white-space: nowrap;
  background: rgb(var(--yuzey-2)); letter-spacing: .04em; padding-block: var(--b-2);
}
.tablo tbody tr:last-child td { border-block-end: none; }
.tablo tbody tr { transition: background var(--hiz-1) var(--egri); }
.tablo tbody tr:hover { background: rgb(var(--vurgu) / .05); }
.tablo .sayi { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* İlaç listesi telefonda: şekil ve rozet sütunları gizli, rozetler adın
   altında (ilaclar.js onları iki yerde çiziyor, biri görünüyor). Beş sütunda
   ad 80 px'e sıkışıyor, «Augmentin 1000 mg تابلیت» altı satıra bölünüyordu;
   ekrana iki buçuk ilaç sığıyordu. Şekil zaten adın içinde yazılı. */
.tablo--ilac-listesi .ilac-hucre__rozet { display: none; }
@media (max-width: 560px) {
  .tablo--ilac-listesi :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)) { display: none; }
  .tablo--ilac-listesi .ilac-hucre__rozet:not(:empty) { display: flex; flex-wrap: wrap; gap: var(--b-1); margin-block-start: var(--b-1); }
}

/* ---------- Rozet ---------- */
.rozet {
  display: inline-flex; align-items: center; gap: 4px;
  padding-block: 3px; padding-inline: var(--b-2);
  border-radius: var(--r-tam); font-size: var(--f-xs); font-weight: 700; white-space: nowrap;
  background: rgb(var(--metin-3) / .14); color: rgb(var(--metin-2));
}
.rozet--yesil { background: rgb(var(--yesil) / .13); color: rgb(var(--yesil)); }
.rozet--kirmizi { background: rgb(var(--kirmizi) / .13); color: rgb(var(--kirmizi)); }
.rozet--sari { background: rgb(var(--sari) / .15); color: rgb(var(--sari)); }
.rozet--mavi { background: rgb(var(--mavi) / .13); color: rgb(var(--mavi)); }
.rozet--mor { background: rgb(var(--mor) / .13); color: rgb(var(--mor)); }
.rozet--vurgu { background: rgb(var(--vurgu) / .13); color: rgb(var(--vurgu)); }

/* ---------- Sekmeler ---------- */
.sekmeler { display: flex; gap: var(--b-1); border-block-end: var(--kenarlik); margin-block-end: var(--b-4); overflow-x: auto; }
.sekme {
  padding-block: var(--b-2); padding-inline: var(--b-3); border: none; background: none;
  color: rgb(var(--metin-2)); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  border-block-end: 2px solid transparent; margin-block-end: -1px;
  transition: color var(--hiz-1) var(--egri), border-color var(--hiz-1) var(--egri);
}
.sekme[aria-selected="true"] { color: rgb(var(--vurgu)); border-block-end-color: rgb(var(--vurgu)); }

/* ---------- Uyarı şeridi ---------- */
.uyarilar { display: flex; flex-direction: column; gap: var(--b-2); margin-block: var(--b-2); }
.uyari {
  display: flex; align-items: center; gap: var(--b-2);
  padding: var(--b-2) var(--b-3); border-radius: var(--r-kucuk); font-size: var(--f-s); font-weight: 600;
  background: rgb(var(--sari) / .1); color: rgb(var(--sari));
  border-inline-start: 3px solid rgb(var(--sari));
}
.uyari--hata { background: rgb(var(--kirmizi) / .1); color: rgb(var(--kirmizi)); border-inline-start-color: rgb(var(--kirmizi)); }
.uyari--bilgi { background: rgb(var(--mavi) / .1); color: rgb(var(--mavi)); border-inline-start-color: rgb(var(--mavi)); }
/* Salt kod QR'ında bulunan kaydın özeti: eczacı kâğıtla satır satır karşılaştırıyor. */
.dogrula-ozet {
  margin-block-start: var(--b-2); padding: var(--b-2) var(--b-3); border: 1px solid rgb(var(--cizgi) / .2); border-radius: var(--r-kucuk);
  background: rgb(var(--yuzey-2)); white-space: pre-line; line-height: 1.7;
}

/* ---------- Boş durum ---------- */
.durum { display: flex; flex-direction: column; align-items: center; gap: var(--b-2); padding: var(--b-8) var(--b-4); text-align: center; color: rgb(var(--metin-2)); }
.durum__simge {
  color: rgb(var(--metin-3)); background: rgb(var(--metin-3) / .1);
  inline-size: 56px; block-size: 56px; border-radius: var(--r-tam);
  display: grid; place-items: center; margin-block-end: var(--b-1);
}
.durum__baslik { font-weight: 700; font-size: var(--f-l); color: rgb(var(--metin)); }
.durum__alt { margin: 0; max-inline-size: 46ch; font-size: var(--f-m); }
.durum--hata .durum__simge { color: rgb(var(--kirmizi)); background: rgb(var(--kirmizi) / .1); }

/* ---------- Modal ---------- */
.ortu {
  position: fixed; inset: 0; z-index: 60; background: rgb(var(--ortu));
  backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--b-4); overflow-y: auto;
  animation: ortu-gir var(--hiz-2) var(--egri);
}
@keyframes ortu-gir { from { opacity: 0; } }
.modal {
  background: rgb(var(--yuzey)); border-radius: var(--r-buyuk); box-shadow: var(--golge-3);
  inline-size: min(560px, 100%); max-block-size: 90vh; display: flex; flex-direction: column;
  border: var(--kenarlik);
  animation: modal-gir var(--hiz-3) var(--egri-yay);
}
@keyframes modal-gir { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.modal--genis { inline-size: min(880px, 100%); }
.modal__bas { display: flex; justify-content: space-between; align-items: center; gap: var(--b-2); padding: var(--b-4); border-block-end: var(--kenarlik); }
.modal__bas h2 { margin: 0; font-size: var(--f-l); }
.modal__govde { padding: var(--b-4); overflow-y: auto; }
/* Sığmayan düğmeler alt satıra iner: üç düğmeli kutu (hesap değişimi
   sorusu) telefonda kutuyu ekrandan taşırıyordu. */
.modal__ayak { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--b-2); padding: var(--b-4); border-block-start: var(--kenarlik); background: rgb(var(--yuzey-2) / .5); border-end-start-radius: var(--r-buyuk); border-end-end-radius: var(--r-buyuk); }

/* ---------- Bildirim ---------- */
.bildirimler { position: fixed; inset-block-end: var(--b-4); inset-inline: var(--b-4) auto; z-index: 80; display: flex; flex-direction: column; gap: var(--b-2); pointer-events: none; }
.bildirim {
  display: flex; align-items: center; gap: var(--b-2); pointer-events: auto;
  padding: var(--b-3) var(--b-4); border-radius: var(--r); box-shadow: var(--golge-3);
  background: rgb(var(--yuzey)); border: var(--kenarlik-2); font-size: var(--f-m); font-weight: 600;
  max-inline-size: min(420px, calc(100vw - var(--b-8)));
  animation: bildirim-gir var(--hiz-3) var(--egri-yay);
}
.bildirim--basari { border-color: rgb(var(--yesil) / .5); color: rgb(var(--yesil)); }
.bildirim--hata { border-color: rgb(var(--kirmizi) / .5); color: rgb(var(--kirmizi)); }
.bildirim--uyari { border-color: rgb(var(--sari) / .5); color: rgb(var(--sari)); }
@keyframes bildirim-gir { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ---------- Küçükler ---------- */
.cip { display: inline-flex; align-items: center; gap: 4px; padding-block: 3px; padding-inline: var(--b-2); border-radius: var(--r-tam); background: rgb(var(--yuzey-2)); border: var(--kenarlik); font-size: var(--f-xs); }

/* Dokunulabilir çip. Reçetedeki tanı, kullanım ve süre alanları buradan
   seçiliyor: hekimin klavyeye gitmesi gereken yerleri tek dokunuşa indiriyor.
   En az 32px yükseklik — telefonda parmakla basılacak. */
.cip--secilir {
  min-block-size: 32px; padding-block: 5px; cursor: pointer;
  color: rgb(var(--metin)); font: inherit; font-size: var(--f-xs);
  transition: background var(--hiz-1) var(--egri), border-color var(--hiz-1) var(--egri), transform var(--hiz-1) var(--egri);
}
.cip--secilir:hover { background: rgb(var(--yuzey-3)); border-color: rgb(var(--vurgu) / .45); }
.cip--secilir:active { transform: scale(.96); }
.cip--secilir:focus-visible { outline: none; box-shadow: var(--halka); }
.cip--secili {
  background: rgb(var(--vurgu) / .13); border-color: rgb(var(--vurgu) / .55);
  color: rgb(var(--vurgu)); font-weight: 600;
}
.cip--secili:hover { background: rgb(var(--vurgu) / .2); }

/* Başlıklı çip kümesi: "Yaygın", "Senin sık yazdıkların" gibi. */
.cip-kume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2); margin-block-start: var(--b-2); }
/* Çip sırasının ardındaki alanın etiketi çiplere yapışmasın. */
.cip-kume + .alan { margin-block-start: var(--b-3); }
.cip-kume__etiket {
  font-size: var(--f-xs); font-weight: 600; color: rgb(var(--metin-3));
  inline-size: 100%; margin-block-end: -2px;
}

.sessiz { color: rgb(var(--metin-3)); }
.sayi-yazi { font-variant-numeric: tabular-nums; }
.simge { flex-shrink: 0; }
/* Görünmeyen ama okunan metin: ekran okuyucu ve metin araması için.
   Rx işareti ve hat çizim olarak basılıyor; «℞» ve vecizenin kendisi
   burada, erişilebilir metin olarak kalıyor. display:none olsaydı ekran
   okuyucu da duymazdı. */
.gizli-metin {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Glif çizimleri (cekirdek/cizimler.js) yazının yerini tutuyor: varsayılan
   ölçüleri yazı boyundan türüyor, boyut vermeyen bir yerde SVG'nin
   300×150 varsayılanıyla patlamasınlar. Oran viewBox'tan gelir. */
.rx-isaret { display: inline-flex; line-height: 1; }
.rx-isaret__cizim { block-size: 1em; inline-size: auto; }
.hat-cizim { inline-size: 6em; block-size: auto; }

/* =====================================================================
   REÇETE YAZMA SAYFASI: form paneli ve canlı kâğıt
   ---------------------------------------------------------------------
   Ölçüler tasarımdan (yeni/hedef, 1536 px genişlikte): form paneli 672,
   önizleme 638, aralarında 18. Burada yalnız mantıksal özellikler var:
   geniş ekranda panelin içi soldan sağa akıyor (uygulama.css'in sonundaki
   masaüstü bloğu), telefonda sağdan sola; aynı kurallar iki yönde de
   tasarımdaki yerlere düşüyor. Renkler bileşen tokenlarından (tokenlar.css),
   karanlık tema kendiliğinden geliyor.
   ===================================================================== */

/* ---- Sayfa çerçevesi ----
   İki sütun yalnız form sütunu en az 620 px alabildiğinde, 1280 px ve
   üstü ekranda: daha darında hasta adı, tarih, tablo başlıkları ve
   Clinical kutuları kırpılıyordu. Form önce gelir; 620'nin altına inmiyor,
   kâğıt kalan yere ölçekleniyor. Daha dar ekranda tek sütun ve kâğıt
   formun ALTINDA: telefonda yan yana iki sütun ikisini de okunmaz yapıyor. */
.recete-duzen {
  display: grid; grid-template-columns: minmax(620px, 672fr) minmax(0, 638fr);
  gap: 18px; align-items: start;
}
/* Kâğıt kaydırmayla birlikte yukarıda kalıyor: hekim formu doldururken
   kâğıdı görmeye devam etsin. Form uzun (ilaç eklendikçe tablo sayfanın
   akışında uzuyor); ofset formun tepesiyle aynı hizada. */
/* Önizleme paneli: formla aynı panel, içinde başlık satırı (57 px) ve
   kâğıt. Kâğıt satırın hemen altından başlıyor, panelin içinde ortalı. */
.recete-onizleme { min-inline-size: 0; position: sticky; inset-block-start: calc(var(--ust-cubuk) + 10px); }
.recete-panel.recete-panel--onizleme { gap: 0; padding-inline: 0; padding-block-end: 0; container-type: inline-size; }
.recete-onizleme__bas { display: flex; align-items: center; gap: 10px; block-size: 57px; padding-inline: 13px 21px; }
.recete-onizleme__eylem { display: flex; gap: 10px; }
.recete-onizleme__dugme {
  block-size: 34px; min-block-size: 34px; padding-inline: 12px; gap: 7px; border-radius: 7px;
  background: rgb(var(--btn-3-zemin)); border: 1px solid rgb(var(--btn-3-cizgi));
  color: rgb(var(--btn-3-metin)); font-size: 13px; font-weight: 500;
}
.recete-onizleme__ikon { inline-size: 35px; padding: 0; justify-content: center; }
/* Simge yazının bitişinde (sağdan sola düğmede solda), tasarımdaki gibi. */
.recete-onizleme__dugme:not(.recete-onizleme__ikon) { flex-direction: row-reverse; }
.recete-onizleme__baslik {
  display: flex; align-items: center; gap: 14px; margin: 0; margin-inline-start: auto;
  font-size: 20px; font-weight: 700; line-height: 1.2; color: rgb(var(--form-baslik)); white-space: nowrap;
}
.recete-onizleme__baslik .simge { flex-shrink: 0; color: rgb(var(--baslik-simge)); }
/* Yaprak rozeti («2 صفحه»): başlığın hemen yanında; görünürken başlığı
   sola iten boşluk rozetin önünde. */
.recete-onizleme__sayfa {
  margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: rgb(var(--btn-3-zemin)); border: 1px solid rgb(var(--btn-3-cizgi));
  color: rgb(var(--btn-3-metin)); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.recete-onizleme__sayfa:not([hidden]) + .recete-onizleme__baslik { margin-inline-start: 0; }
:root[data-tema="karanlik"] .recete-onizleme__baslik { color: #fff; }
/* Dar panel (1366'da ≈ 520, 1280'de ≈ 430 px): başlık, yaprak rozeti ve üç
   düğme tek satıra sığsın diye başlık ve düğme payları küçülüyor; yoksa simge
   «ذخیره PDF»in altına giriyordu. En darında rozet görünürken başlığın
   simgesi çekiliyor: rozet bölünen kâğıdın tek işareti, simge süs. */
@container (max-width: 560px) {
  .recete-onizleme__bas { gap: 6px; padding-inline: 10px 12px; }
  .recete-onizleme__eylem { gap: 6px; }
  .recete-onizleme__dugme { padding-inline: 8px; gap: 5px; }
  .recete-onizleme__baslik { gap: 8px; font-size: 16px; }
  .recete-onizleme__baslik .simge { inline-size: 24px; block-size: 24px; }
  .recete-onizleme__sayfa { padding-inline: 7px; font-size: 11.5px; }
}
@container (max-width: 480px) {
  .recete-onizleme__bas:has(> .recete-onizleme__sayfa:not([hidden])) .recete-onizleme__baslik .simge { display: none; }
}
@media (max-width: 1279px) {
  .recete-duzen { grid-template-columns: 1fr; }
  .recete-onizleme { position: static; }
  /* Tek sütunda başlık kendi satırında, düğmeler altında. */
  .recete-onizleme__bas { flex-wrap: wrap-reverse; block-size: auto; padding-block: 10px; row-gap: 10px; }
}
@media (pointer: coarse) {
  .recete-onizleme__dugme { block-size: 44px; min-block-size: 44px; }
  .recete-onizleme__ikon { inline-size: 44px; }
}
/* Kâğıdın altında panelin 3 px'lik payı (tasarımda kâğıt 992'de, kart 995'te
   bitiyor). Ölçek bu dolguyu boydan düşüyor (bkz. kagidiOlcekle). */
.recete-panel--onizleme .kagit-tuval { padding-block: 0 3px; }

/* ---- Panel: formun tamamı tek kart ----
   `overflow: clip`, hidden DEĞİL: hidden bir kaydırma kabı kuruyor ve
   ilaç tablosunun yapışkan başlığı sayfaya değil panele yapışıyordu. */
.recete-panel {
  display: flex; flex-direction: column; gap: 10px; min-inline-size: 0;
  padding-inline: 6px; padding-block-end: 8px;
  background: rgb(var(--form-panel)); border: 1px solid rgb(var(--panel-cizgi)); border-radius: 10px;
  overflow: clip;
}
/* İçteki kartlar kendi dolgusuz; başlık şeritleri kenardan kenara. */
.recete-panel .kart {
  margin: 0; padding: 0; border-radius: 8px;
  background: rgb(var(--kart-govde)); border: 1px solid rgb(var(--kart-cizgi));
  overflow: clip;
}
.recete-panel .kart__bas { margin: 0; }
.recete-panel > .uyarilar { margin: 0; }
.recete-panel > .uyari { border-radius: 8px; }

/* Başlık bandı: 72 px, düz panel rengi ve yalnız köşede bir parıltı.
   Gradyanın konumu fizikseldir (`at 0 0` = sol üst): masaüstünde bant hep
   soldan sağa; telefonda (sağdan sola) dar ekran bloğunda aynalanıyor.
   Alt pay eksi: hasta kartı bandın hemen altından başlıyor (tasarımda 2 px). */
.recete-panel__bas {
  display: flex; align-items: center; gap: 16px;
  block-size: 72px; margin-inline: -6px; margin-block-end: -9px; padding-inline: 14px 15px;
  background:
    radial-gradient(120px 90px at 0 0, rgb(var(--panel-bas-1) / .9), transparent 70%),
    rgb(var(--form-panel));
}
.recete-panel__simge { display: flex; flex-shrink: 0; color: rgb(var(--baslik-simge)); }
.recete-panel__metin { min-inline-size: 0; }
.recete-panel__metin h1 {
  margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: 0;
  color: rgb(var(--form-baslik));
}
.recete-panel__metin p { margin-block: 2px 0; margin-inline: 0; font-size: 15px; line-height: 1.35; color: rgb(var(--form-alt)); }
/* Düzenlemede başlığın ardındaki reçete numarası: tirelerden bölünmüyor
   (iki satıra dağılıp bandın dışına taşıyordu) ve başlıktan küçük. Başlık
   bu yüzden uzun; şablon düğmeleri yalnız simge (adları title'da), başlık
   tek satıra sığıyor. */
.recete-panel__no { white-space: nowrap; font-size: .78em; font-weight: 700; }
.recete-panel__eylem { margin-inline-start: auto; display: flex; gap: 8px; flex-shrink: 0; }
/* Şablon düğmeleri: bandın öbür ucunda, sade koyu düğmeler. «ذخیره به عنوان
   قالب» boş formda da çizili ama pasif (nedenini title söylüyor). */
.recete-panel__sablon {
  block-size: 34px; min-height: 34px; padding-inline: 14px; gap: 8px; border-radius: 6px;
  background: rgb(var(--btn-3-zemin)); border: 1px solid rgb(var(--btn-3-cizgi));
  color: rgb(var(--btn-3-metin)); font-size: 13.5px; font-weight: 500;
}
.recete-panel__sablon .simge { color: rgb(var(--baslik-simge)); }
.recete-panel__sablon:disabled { opacity: .55; }
.recete-panel__bas--duzenle .recete-panel__sablon { inline-size: 34px; padding: 0; }
.recete-panel__bas--duzenle .recete-panel__sablon-metin { display: none; }

/* ---- Kart anatomisi: başlık şeridi, simge, başlık ---- */
.recete-panel .kart__bas--serit {
  justify-content: flex-start; gap: 10px;
  block-size: 44px; padding-block: 0; padding-inline: 14px 12px;
  background: rgb(var(--kart-bas)); border-block-end: 1px solid rgb(var(--kart-bas-cizgi));
}
.recete-panel .kart__bas--serit h2 {
  margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0;
  color: rgb(var(--metin-baslik)); white-space: nowrap;
}
.kart__bas-simge { display: flex; flex-shrink: 0; color: rgb(var(--baslik-simge)); }
.kart__bas-sayi { margin-inline-start: auto; font-size: 13px; color: rgb(var(--metin-2)); white-space: nowrap; }
/* «معلومات معاینه (Clinical)» 244 px'lik kartta tek satıra sığsın. */
.recete-panel .kart--klinik > .kart__bas--serit { gap: 8px; padding-inline: 12px 8px; }
.recete-panel .kart--klinik > .kart__bas--serit h2 { font-size: 17px; }
/* Clinical ve ilaç ekle başlıkları daha büyük simgeli (stetoskop 32, Rx 41). */
.recete-panel :is(.kart--klinik, .kart--ekle) > .kart__bas--serit { block-size: 48px; }
.kart--ekle .rx-baslik__isaret { display: flex; font-size: 41px; line-height: 1; color: rgb(var(--baslik-simge)); }

/* Form girdileri tek görünüşte: ölçüm dolgusu, ince kenar, 6 px köşe. */
.recete-panel .input {
  background: rgb(var(--yuzey-olcum)); border: 1px solid rgb(var(--olcum-cizgi)); border-radius: 6px;
  font-size: 15px; font-weight: 500; color: rgb(var(--metin));
}
.recete-panel .input::placeholder { color: rgb(var(--metin-3)); font-size: 13.5px; font-weight: 400; opacity: 1; }
.recete-panel .alan__etiket { font-size: 14px; font-weight: 500; line-height: 20px; color: rgb(var(--etiket)); }
/* Açılır seçim: tarayıcının oku yerine uygulamanın simgesi, bitiş ucunda. */
.acilir { position: relative; display: block; min-inline-size: 0; }
.acilir select.input { appearance: none; padding-inline: 10px 30px; text-align: center; text-overflow: ellipsis; }
.acilir__ok {
  position: absolute; inset-block-start: 50%; inset-inline-end: 9px; translate: 0 -50%;
  color: rgb(var(--simge-sessiz)); pointer-events: none;
}
.acilir:has(select:disabled) { opacity: .55; }

/* ---- Hasta kartı ---- */
.kart--hasta .kart__govde { padding-block: 11px 15px; padding-inline: 16px; }
/* Dört alan TEK satırda, genişlikleri tasarımdaki gibi (172/92/172/149).
   Dar formda her sütun kendi içeriğinin altına inmiyor: kısa bir ad
   simgesiyle, şemsi tarih takvim düğmesiyle sığıyor. */
.izgara--hasta {
  grid-template-columns: minmax(150px, 172fr) minmax(64px, 92fr) minmax(136px, 172fr) minmax(150px, 149fr);
  gap: 12px 16px;
}
/* Tasarımın genişliğinin (1536) altında form daralıyor: oranıyla ad «محمد
   نعیم رح…» diye kesiliyordu (1440'ta da); tarih ve yaş ise boşluklu. En
   azlar içerikten (ad + simge 164, numara 150), yaşın payı onlara. */
@media (max-width: 1535px) {
  .izgara--hasta { grid-template-columns: minmax(164px, 172fr) minmax(64px, 72fr) minmax(136px, 150fr) minmax(150px, 149fr); gap: 12px; }
}
.izgara--hasta .alan { margin: 0; gap: 1px; min-inline-size: 0; }
.izgara--hasta .alan__yildiz { margin-inline-start: 5px; }
.izgara--hasta :is(.input, .secim-alani, .tarih-secici, .yas-kutu) {
  block-size: 44px; min-block-size: 44px; border-radius: 6px;
}
.izgara--hasta .input { padding-block: 0; padding-inline: 12px; }

/* Hasta seçici: düğme ama giriş kutusu görünümünde. */
.secim-alani { inline-size: 100%; justify-content: flex-start; font-weight: 500; }
.secim-alani--girdi {
  min-height: 44px; padding-inline: 45px 10px; overflow: hidden;
  background: rgb(var(--yuzey-olcum)); border: 1px solid rgb(var(--olcum-cizgi)); font-weight: 400;
}
.secim-alani--girdi:hover:not(:disabled) { background: rgb(var(--yuzey-olcum)); }
.secim-alani--girdi:hover:not(:disabled, .input--hata) { border-color: rgb(var(--cizgi) / .3); }
.secim-alani--girdi:active:not(:disabled) { transform: none; }
/* Kişi simgesi tasarımda parlak (başlık simgesinin tonu), soluk değil. */
.secim-alani--girdi .girdi-simgesi { color: rgb(var(--baslik-simge)); inset-inline-start: 13px; }
.secim-alani__metin {
  min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 500; color: rgb(var(--metin));
}
.secim-alani__metin.sessiz { font-size: 13.5px; font-weight: 400; color: rgb(var(--metin-3)); }
/* Kutunun başındaki simge (kişi, belge). */
.girdi-simgeli { position: relative; display: block; }
.girdi-simgesi {
  position: absolute; inset-block-start: 50%; inset-inline-start: 11px; translate: 0 -50%;
  color: rgb(var(--simge-sessiz)); pointer-events: none;
}
.izgara--hasta .girdi-simgeli .input { padding-inline-start: 44px; }
/* Düzenlenen reçetenin numarası («2026-09-25-01») 150 px'lik kutuya tam
   sığsın: son iki hanesi kesiliyordu (1536'da da). */
.izgara--hasta .girdi-simgeli .recete-no { padding-inline: 36px 8px; font-size: 14px; }
/* Yaş hastadan türüyor: salt okunur kutu, sayı ve «سال» ortada. */
.yas-kutu {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: rgb(var(--yuzey-salt)); border: 1px solid rgb(var(--salt-cizgi));
}
.yas-kutu output { font-size: 17px; font-weight: 500; color: rgb(var(--metin)); }
.yas-kutu__birim { font-size: 14px; color: rgb(var(--birim)); }
.yas-kutu__birim.sessiz { color: rgb(var(--metin-3)); }
/* Tarih: takvim düğmesi kutunun başında (masaüstünde solda), değer kalan
   yerin ortasında. */
.izgara--hasta .tarih-secici {
  gap: 4px; padding-inline: 8px 12px;
  background: rgb(var(--yuzey-olcum)); border-color: rgb(var(--olcum-cizgi));
}
.izgara--hasta .tarih-secici .input { background: transparent; border: 0; text-align: center; font-size: 16px; font-weight: 500; }
.izgara--hasta .tarih-secici__dugme { inline-size: 32px; block-size: 32px; color: rgb(var(--baslik-simge)); }
.izgara--hasta .tarih-secici__dugme .simge { inline-size: 24px; block-size: 24px; }

/* ---- Clinical ile ilaç kartları yan yana, aynı boyda ----
   Clinical tasarımda 244, sağ sütun 412. En dar formda (620) Clinical
   220'ye iniyor; daha darında «Temperature» etiketi küçülüyor (aşağıda). */
.recete-ikili {
  display: grid; grid-template-columns: minmax(220px, 244fr) minmax(0, 412fr);
  gap: 8px; align-items: start;
}
.recete-ilaclar { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
/* Liste kartı kalan boyu alıyor: tablo kısayken alt kenarı Clinical'la
   hizalı. Sütunlar gerilmiyor (align-items: start): ilaçlar uzayınca
   Clinical kartı Blood Gr.'nin altında 650 px boş kutu oluyordu. Kısa
   tabloda hizayı sağ sütunun en az boyu tutuyor (Clinical'ın boyu). */
.recete-ilaclar .kart--liste { flex: 1; }
.recete-ikili > .recete-ilaclar { align-self: stretch; }

/* ---- Clinical: ölçüm satırları ----
   Satır dört sütun: simge (30), etiket, kutu (84; dar satırlarda 52),
   birim (40). Kutular aynı sağ kenarda bitiyor; birim kutunun DIŞINDA.
   Etiket ve kutu dir="ltr": masaüstünde de telefonda da soldan sağa okunan
   Latin kısaltmalar ve sayılar. */
.kart--klinik { display: flex; flex-direction: column; container-type: inline-size; }
.olcum-liste { display: flex; flex-direction: column; row-gap: 9.8px; padding-block: 13px 12px; padding-inline: 14px; }
.olcum-satir { display: grid; grid-template-columns: 30px minmax(0, 1fr) 84px 40px; align-items: center; }
.olcum-satir--dar { grid-template-columns: 30px minmax(0, 1fr) 52px 40px; }
.olcum-satir__simge {
  display: flex; align-items: center; justify-content: center;
  inline-size: 30px; block-size: 37px; color: rgb(var(--simge));
}
.olcum-satir__simge .simge { flex-shrink: 0; }
.olcum-satir__ad {
  /* Etiket ve birim dir="ltr" taşıyor: kendi kenar payları hep soldan sağa
     çözülüyor. Telefonda (satır sağdan sola) simge sağda, o yüzden pay
     bitişte; masaüstünün karşılığı uygulama.css'in masaüstü bloğunda. */
  margin-inline-end: 11px; min-inline-size: 0; white-space: nowrap; text-align: end;
  /* Vazirmatn'ın Latin harfleri tasarımdaki yazıdan kalın düşüyor: 500
     yerine 440 aynı koyulukta görünüyor. */
  font-size: 13.5px; font-weight: 440; color: rgb(var(--metin-baslik));
}
.olcum-satir .input, .olcum-bp {
  grid-column: 3; block-size: 37px; min-height: 0; padding-block: 0; padding-inline: 6px;
  border-radius: 5px; text-align: center; font-size: 15px; font-weight: 500;
}
/* Dar kutuda (52) «172.5» de sığsın: yan dolgu küçük. */
.olcum-satir--dar .input { padding-inline: 3px; }
.olcum-satir__birim { grid-column: 4; margin-inline-end: 10px; font-size: 13.5px; color: rgb(var(--birim)); white-space: nowrap; }
/* Kan grubu seçimi kutu ve birim sütununu birlikte kaplıyor. */
.olcum-satir--kan .acilir { grid-column: 3 / 5; inline-size: 103px; justify-self: end; }
.olcum-satir--kan .acilir select.input { block-size: 37px; padding-inline: 8px 26px; font-size: 14px; }
.olcum-satir--kan .acilir__ok { inset-inline-end: 7px; }
/* BP: tek çerçevede iki kutu ve arada «/». Çerçeve odak halkasını taşıyor,
   içteki kutular çerçevesiz. */
.olcum-bp {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3px;
  background: rgb(var(--yuzey-olcum)); border: 1px solid rgb(var(--olcum-cizgi));
}
.olcum-bp:focus-within { border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.olcum-bp__girdi {
  inline-size: 100%; min-inline-size: 0; block-size: 100%; padding: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 15px; font-weight: 500; color: rgb(var(--metin)); text-align: center;
}
.olcum-bp__ayrac { color: rgb(var(--metin-3)); }
/* Dar kart (620 px'lik form, Clinical 220): başlık, «Temperature» ve
   «Blood Gr.» sığsın diye simge sütunu ve paylar daralıyor, yazı küçülüyor;
   kan grubu seçimi de. Yoksa etiketin sonu yanındaki kutunun altında
   kalıyordu. */
@container (max-width: 235px) {
  .recete-panel .kart--klinik > .kart__bas--serit h2 { font-size: 14px; }
  .recete-panel .kart--klinik > .kart__bas--serit .simge { inline-size: 28px; block-size: 28px; }
  .olcum-satir { grid-template-columns: 24px minmax(0, 1fr) 84px 40px; }
  .olcum-satir--dar { grid-template-columns: 24px minmax(0, 1fr) 52px 40px; }
  .olcum-satir__simge { inline-size: 24px; }
  .olcum-satir__simge .simge { max-inline-size: 24px; }
  .olcum-satir__ad { margin-inline-end: 6px; }
  .olcum-satir--dar .olcum-satir__ad { font-size: 12.5px; letter-spacing: -.2px; }
  .olcum-satir--kan .acilir { inline-size: 88px; }
}

/* ---- İlaç ekle: arama kutusu, canlı sonuçlar, süzgeçler ---- */
.kart--ekle .kart__govde { display: flex; flex-direction: column; padding-block: 13px 15px; padding-inline: 13px; }
.ilac-ara .input { block-size: 38px; min-height: 38px; padding-block: 0; padding-inline: 42px 12px; }
.ilac-ara .girdi-simgesi, .tani-ara .girdi-simgesi { color: rgb(var(--baslik-simge)); inset-inline-start: 12px; }
/* Sonuçlar kutunun altında ve kart onlarla uzuyor; altı satırdan sonra
   kendi içinde kayıyor. */
.ilac-sonuc, .tani-sonuc {
  margin-block: 6px 0; max-block-size: 264px; overflow-y: auto; scrollbar-width: thin;
  background: rgb(var(--tablo-govde)); border: 1px solid rgb(var(--olcum-cizgi)); border-radius: 6px;
}
.tani-sonuc { max-block-size: 220px; }
.ilac-sonuc[hidden], .tani-sonuc[hidden] { display: none; }
.ilac-sonuc .liste__satir, .tani-sonuc .liste__satir { min-block-size: 44px; padding-block: 5px; gap: 8px; }
.ilac-sonuc__satir, .tani-sonuc__satir {
  inline-size: 100%; border: none; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer;
  border-block-end: 1px solid rgb(var(--tablo-ayrac));
}
.ilac-sonuc__satir:focus-visible, .tani-sonuc__satir:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: -2px; }
.ilac-sonuc .liste__baslik, .tani-sonuc .liste__baslik { display: block; font-size: 14px; font-weight: 600; }
.ilac-sonuc .liste__alt, .tani-sonuc .liste__alt { display: block; font-size: 12.5px; }
.ilac-sonuc__arti { color: rgb(var(--ekle-metin)); }
.ilac-sonuc__fazla { min-block-size: 36px; font-size: 12.5px; }
.tani-sonuc__kod { flex-shrink: 0; font-size: 12px; color: rgb(var(--metin-3)); }
.ilac-suzgec {
  display: grid; grid-template-columns: 101fr 85fr 85fr 77fr; column-gap: 12px; align-items: end;
  margin-block-start: 12px; container-type: inline-size;
}
.ilac-suzgec .alan { margin: 0; gap: 4px; min-inline-size: 0; }
.ilac-suzgec select.input { block-size: 34px; min-height: 34px; padding-block: 0; font-size: 14px; }
.ilac-ara__dugme {
  block-size: 38px; min-height: 38px; padding-inline: 8px; gap: 6px; border: 0; border-radius: 7px;
  background: rgb(var(--ara-zemin)); color: rgb(var(--vurgu-yz)); font-size: 14.5px; font-weight: 600;
}
.ilac-ara__dugme:hover:not(:disabled) { background: rgb(var(--ara-zemin) / .88); }
/* En dar formda düğme yalnız simge (adı title ve aria-label'da). */
@container (max-width: 379px) {
  .ilac-ara__dugme-metin { display: none; }
}

/* ---- Reçetedeki ilaçlar: tablo ----
   Tablo sayfanın akışında uzuyor, iç kaydırma yok; başlık satırı üst
   çubuğun altına yapışıyor. Sütunlar sabit (colgroup): içerik değiştikçe
   başlık ayraçları kaymasın. Ayrık kenar modeli: yapışkan başlığın alt
   çizgisi hücreyle birlikte kalsın. */
.kart--liste .kart__govde { display: flex; flex-direction: column; padding-block: 3px 12px; padding-inline: 3px; }
.kart--liste .tablo-kap {
  overflow: visible; background: rgb(var(--tablo-govde));
  border: 1px solid rgb(var(--tablo-cizgi)); border-radius: 6px;
}
.kart--liste .tablo-kap--hata { border-color: rgb(var(--kirmizi)); }
.kart--liste .tablo-kap--hata .tablo__bos td { color: rgb(var(--kirmizi)); }
.tablo--ilac { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.tablo--ilac col:nth-child(1) { inline-size: 8%; }
.tablo--ilac col:nth-child(2) { inline-size: 26%; }
.tablo--ilac col:nth-child(3) { inline-size: 20.5%; }
.tablo--ilac col:nth-child(4) { inline-size: 8.5%; }
.tablo--ilac col:nth-child(5) { inline-size: 15.5%; }
.tablo--ilac col:nth-child(6) { inline-size: 10.75%; }
/* «عملیات» en dar formda (620) da tek satırda okunsun: # sütunu iki haneye yetiyor. */
.tablo--ilac col:nth-child(7) { inline-size: 10.75%; }
.tablo--ilac th {
  position: sticky; inset-block-start: var(--ust-cubuk); z-index: 2;
  block-size: 41px; padding-block: 0; padding-inline: 1px; text-align: center;
  background: rgb(var(--tablo-bas)); color: rgb(var(--metin-2));
  font-size: 11.5px; font-weight: 500; line-height: 1.25; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-block-end: 1px solid rgb(var(--tablo-ayrac));
}
.tablo--ilac th:first-child { font-size: 15px; font-weight: 700; color: rgb(var(--metin)); }
/* Dikey ayraçlar başlıkta da gövdede de (tasarım). */
.tablo--ilac :is(th, td) + :is(th, td) { border-inline-start: 1px solid rgb(var(--tablo-ayrac)); }
.tablo--ilac td {
  block-size: 52px; padding-block: 6px; padding-inline: 4px; text-align: center;
  /* Vazirmatn'ın Latin harfi tasarımın yazısından kalın: 440 aynı koyulukta. */
  font-size: 14px; font-weight: 440; line-height: 1.35; color: rgb(var(--metin));
  border-block-end: 1px solid rgb(var(--tablo-ayrac));
}
.tablo--ilac tbody tr:last-child td { border-block-end: none; }
.tablo--ilac tbody tr:not(.tablo__bos) { cursor: pointer; transition: background var(--hiz-1) var(--egri); }
.tablo--ilac tbody tr:not(.tablo__bos):hover { background: rgb(var(--vurgu) / .06); }
.ilac-sira { font-weight: 600; }
/* Ad hiç kesilmiyor, sarıyor: yanlış ilaç okunabilir kalmalı. Ad düğmesi
   satırın sekme durağı; görünüşü düz yazı. Tasarımdaki gibi 500 ağırlık
   (kalın değil); etken madde ikinci satırda, küçük. Kalın ve yanındayken
   26%'lık sütunda «Nexium (Esomeprazole» yazıp «)»yu tek başına alt
   satıra atıyordu. Sütundan uzun tek sözcük («Sulfamethoxazole») yine her yerden
   bölünebiliyor: düğme sığdırılan kutu, break-word'le sütunu taşırıyordu. */
.ilac-ad {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 500; color: inherit; text-align: center; overflow-wrap: anywhere;
}
.ilac-ad__etken { display: block; font-size: 12px; font-weight: 400; line-height: 1.3; color: rgb(var(--metin-2)); }
.ilac-ad:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: 2px; border-radius: 3px; }
/* Güç ve şekil ayrı parçalar; şekil bölünmüyor, sığmazsa alt satıra
   iniyor. Önce üç noktayla kısalıyordu, «100 mcg (Spr…»da şekil hiç
   görünmüyordu. Uzun bileşik güç («225/200/25 mg/5 ml») de kesilmiyor,
   sarıyor. */
.tablo--ilac td.ilac-doz { padding-inline: 2px; font-size: 11.5px; font-weight: 400; line-height: 1.3; color: rgb(var(--metin-2)); overflow-wrap: anywhere; }
.ilac-doz__sekil { white-space: nowrap; }
.tablo--ilac td.ilac-sure { padding-inline: 2px; white-space: nowrap; font-size: 13px; }
/* Kullanım iki satır: kullanım, altında zaman · yol · not. Sığmayan
   sarıyor: 1366 ve 1280'de «روزانه 1 …», «بعد از غ…» diye kesiliyordu. */
.ilac-kullanim__satir {
  display: block; overflow-wrap: break-word;
  font-size: 12.5px; font-weight: 400; line-height: 20px;
}
.ilac-sil {
  min-width: 28px; min-height: 28px; inline-size: 28px; block-size: 28px; padding: 0; vertical-align: middle;
  border-color: transparent; background: none; color: rgb(var(--kirmizi));
}
.ilac-sil:hover:not(:disabled) { background: rgb(var(--kirmizi) / .1); border-color: transparent; }
/* Uyarılı satır: başta 3 px şerit ve adın önünde simge (metni title'da).
   Şerit mantıksal kenarlık: gölgenin kayması fiziksel (x), sağdan sola
   tabloda satırın başında değil, # ile ad arasında çıkıyordu. */
.ilac-satir--hata td:first-child { border-inline-start: 3px solid rgb(var(--kirmizi)); }
.ilac-satir--uyari td:first-child { border-inline-start: 3px solid rgb(var(--sari)); }
.ilac-satir__uyari { display: inline-flex; vertical-align: -2px; margin-inline-end: 4px; }
.ilac-satir--hata .ilac-satir__uyari { color: rgb(var(--kirmizi)); }
.ilac-satir--uyari .ilac-satir__uyari { color: rgb(var(--sari)); }
/* 11 satırdan sonra sıkışık: 25 ilaç ~1300 yerine ~1100 px. */
.tablo--sik td { block-size: 44px; padding-block: 3px; line-height: 18px; }
.tablo--sik .ilac-kullanim__satir { font-size: 12px; line-height: 18px; }
/* Boş durum: ters çevrilmiş kapsül ve kısa yazı, ortada. */
.tablo--ilac .tablo__bos td {
  block-size: auto; padding-block: 13px 15px;
  font-size: 12.5px; font-weight: 400; line-height: 1.5; color: rgb(var(--metin-4));
  white-space: normal; border-block-end: none;
}
.tablo--ilac .tablo__bos .simge {
  display: block; margin-inline: auto; margin-block-end: 10px;
  color: rgb(var(--simge-sessiz) / .65); rotate: 180deg;
}
/* «+ افزودن یک ردیف دیگر»: kesik çizgili, kutuyla ekleme yolu. */
.satir-ekle {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  block-size: 36px; margin-block-start: 12px; margin-inline: 10px;
  border: 1.5px dashed rgb(var(--kesik-cizgi)); border-radius: 7px; background: rgb(var(--ekle-metin) / .04);
  color: rgb(var(--ekle-metin)); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background var(--hiz-1) var(--egri);
}
.satir-ekle:hover { background: rgb(var(--ekle-metin) / .09); }
.satir-ekle:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: 2px; }
.satir-ekle .simge { stroke-width: 2.4; }

/* ---- Alt kartlar: belirtiler, tetkikler, tanı ---- */
.alt-kartlar { display: grid; grid-template-columns: 222fr 178fr 246fr; gap: 10px; align-items: stretch; }
.alt-kartlar .kart { display: flex; flex-direction: column; min-inline-size: 0; }
.alt-kartlar .kart__bas--serit h2 { font-size: 17px; }
.alt-kartlar .kart__govde { display: flex; flex-direction: column; flex: 1; gap: 8px; padding-block: 10px 8px; padding-inline: 12px; }
/* Kontrol listeli kartlarda «+ افزودن مورد» son satırın yanında, sığarsa
   (tasarım); sığmazsa kendi satırına iniyor. Liste sarılan esnek kutunun
   içine açılıyor: her satır tam genişlik, yalnız sonuncusu kendi boyunda. */
.alt-kartlar :is(.kart--belirti, .kart--lab) .kart__govde {
  flex-direction: row; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; column-gap: 6px; row-gap: 0;
}
.secim-liste { display: contents; margin: 0; padding: 0; list-style: none; }
.secim-liste li { flex: 1 0 100%; min-inline-size: 0; }
.secim-liste li:last-child { flex: 0 1 auto; }
.alt-kartlar :is(.kart--belirti, .kart--lab) .madde-ekle { flex-shrink: 0; margin-block-start: 0; margin-inline-start: auto; }
.secim-liste .onay { display: flex; min-block-size: 26px; gap: 9px; font-size: 14px; color: rgb(var(--metin)); }
.secim-liste .onay input {
  appearance: none; display: grid; place-content: center; flex-shrink: 0; margin: 0;
  inline-size: 17px; block-size: 17px; border: 1.5px solid rgb(var(--etiket) / .8); border-radius: 3px; background: transparent;
}
.secim-liste .onay input:checked { background: rgb(var(--isaret)); border-color: rgb(var(--isaret)); }
/* Tik işareti: kırpılmış beyaz kare (kenarlık tiki yönle aynalanırdı). */
.secim-liste .onay input:checked::before {
  content: ''; inline-size: 11px; block-size: 9px; background: #fff;
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 18%, 86% 2%, 40% 70%);
}
.secim-liste .onay input:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: 2px; }
.secim-liste .onay bdi { overflow-wrap: anywhere; }
/* «+ افزودن مورد»: kartın altında, bitiş ucunda. */
.madde-ekle {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-end; margin-block-start: auto;
  block-size: 26px; padding-inline: 7px; border-radius: 6px;
  background: rgb(var(--btn-3-zemin)); border: 1px solid rgb(var(--btn-3-cizgi));
  color: rgb(var(--ekle-metin)); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.madde-ekle:hover { border-color: rgb(var(--vurgu) / .45); }
.madde-ekle:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: 2px; }
.madde-ekle .simge { stroke-width: 2.4; }
.tani-ara .input { block-size: 35px; min-height: 35px; padding-block: 0; padding-inline: 38px 12px; }
.tani-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cip--tani {
  gap: 6px; min-block-size: 32px; max-inline-size: 100%; padding-block: 3px; padding-inline: 6px 3px; border-radius: 16px;
  background: rgb(var(--tablo-bas)); border: 1px solid rgb(var(--kart-cizgi));
  font-size: 13px; font-weight: 440; color: rgb(var(--metin));
}
.tani-cip__simge {
  display: grid; place-items: center; inline-size: 18px; block-size: 18px; flex-shrink: 0;
  border-radius: 50%; background: rgb(var(--baslik-simge)); color: rgb(var(--form-panel));
}
.tani-cip__kod { font-size: 11px; color: rgb(var(--metin-3)); }
.tani-cip__sil {
  display: grid; place-items: center; flex-shrink: 0; inline-size: 22px; block-size: 22px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: rgb(var(--metin-2)); cursor: pointer;
}
.tani-cip__sil:hover { background: rgb(var(--kirmizi) / .12); color: rgb(var(--kirmizi)); }
.tani-cip__sil:focus-visible { outline: 2px solid rgb(var(--vurgu)); }

/* ---- Ek not: tek satır, yazdıkça uzuyor (altı satıra dek) ---- */
.recete-panel .kart--not {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px;
}
.kart--not__etiket {
  display: flex; align-items: center; gap: 8px; padding-block-start: 10px;
  font-size: 15px; font-weight: 700; color: rgb(var(--metin-baslik)); white-space: nowrap;
}
.kart--not__etiket .simge { color: rgb(var(--baslik-simge)); }
.kart--not textarea.input { min-height: 44px; block-size: 44px; padding-block: 10px; line-height: 22px; resize: none; }

/* ---- Alt düğmeler: üç düğme, kart genişliğine yayılı ----
   Sınıflar önizleme kutusunun ayağında da kullanılıyor (aynı üç görünüş). */
.recete-eylem {
  display: grid; grid-template-columns: 210fr 211fr 224fr; gap: 10px;
  margin-block-start: 4px;
}
/* Masaüstünde formun dibine yapışık: tasarımın kendi 1536 × 1024'ünde bile
   (ek not satırıyla) «ذخیره و چاپ» ekranın altında kalıyordu. Paneli
   `overflow: clip` (kaydırma kabı değil), yapışma sayfaya. Telefonda iki
   satırlık düğmeler ekranın beşte birini kapatırdı: orada akışta. */
@media (min-width: 561px) {
  .recete-panel > .recete-eylem {
    position: sticky; inset-block-end: 0; z-index: 3;
    margin-inline: -6px; margin-block-end: -8px; padding: 8px 6px;
    background: rgb(var(--form-panel)); box-shadow: 0 -8px 12px -8px rgb(0 0 0 / .35);
  }
}
.recete-eylem .btn { inline-size: 100%; justify-content: center; }
.recete-btn { gap: 12px; border-radius: 7px; font-size: 15px; font-weight: 600; }
.recete-eylem .recete-btn { block-size: 52px; min-height: 52px; font-size: 17px; }
.recete-btn--sade { background: rgb(var(--btn-3-zemin)); border-color: rgb(var(--btn-3-cizgi)); color: rgb(var(--btn-3-metin)); }
.recete-btn--ikincil { background: rgb(var(--btn-2-zemin)); border-color: rgb(var(--btn-2-cizgi)); color: rgb(var(--btn-2-metin)); }
.recete-btn--sade:hover:not(:disabled) { background: rgb(var(--btn-3-zemin)); border-color: rgb(var(--vurgu) / .35); }
.recete-btn--ikincil:hover:not(:disabled) { background: rgb(var(--btn-2-zemin)); border-color: rgb(var(--vurgu) / .45); }
/* Asıl düğme düz renk (tasarımda gölgesiz, gradyansız). */
.recete-btn--asil { background: rgb(var(--asil-zemin)); border-color: transparent; color: rgb(var(--asil-metin)); }
.recete-btn--asil:hover:not(:disabled) { background: rgb(var(--asil-zemin-2)); border-color: transparent; }

/* Önizleme kutusu: kâğıt kutunun genişliğine ölçekli (kagidiOlcekle).
   Genişlik ekrana göre veriliyor: örtü bir ızgara ve yüzdeli genişlik
   içeriğe (794 px'lik kâğıda) göre çözülüyordu, telefonda kutu taşıyordu.
   Kâğıdın ölçeklenmemiş kutusu tuvalden taşıyor; görünen ölçekli hâli
   içeride kaldığı için taşan kısım kırpılıyor. */
.modal--onizleme { inline-size: min(880px, calc(100vw - 2 * var(--b-4))); }
.modal--onizleme .modal__govde { min-inline-size: 0; padding: var(--b-3); background: rgb(var(--bg)); }
.modal--onizleme .kagit-tuval { padding-block: 0; overflow: hidden; }
.modal--onizleme .modal__ayak .btn { flex: 1; min-height: 44px; }
/* Satır kutusundaki «son kez» çipi: seçilen ilacın altında, tek dokunuş. */
.cip--hafiza { margin-block-start: var(--b-2); }

/* ---- Giriş hareketi: yalnız sayfaya gelişte (recete-duzen--giris) ----
   Kartlar 40 ms arayla yükseliyor, kâğıt panelden sonra beliriyor. Sonlu;
   hareket azaltılmışsa hiç yok (gecikmeli "backwards" dolgu da yok). */
@media (prefers-reduced-motion: no-preference) {
  .recete-duzen--giris :is(.kart--hasta, .kart--klinik, .kart--ekle, .kart--liste, .alt-kartlar, .kart--not, .recete-eylem) {
    animation: sira-gir var(--hiz-2) var(--egri) backwards;
  }
  .recete-duzen--giris .kart--klinik { animation-delay: 40ms; }
  .recete-duzen--giris .kart--ekle { animation-delay: 80ms; }
  .recete-duzen--giris .kart--liste { animation-delay: 120ms; }
  .recete-duzen--giris .alt-kartlar { animation-delay: 160ms; }
  .recete-duzen--giris .kart--not { animation-delay: 200ms; }
  .recete-duzen--giris .recete-eylem { animation-delay: 240ms; }
  .recete-duzen--giris .recete-onizleme { animation: onizleme-gir var(--hiz-2) var(--egri) 200ms backwards; }
  .tablo--ilac .tablo__yeni { animation: sira-gir var(--hiz-2) var(--egri); }
}
@keyframes onizleme-gir { from { opacity: 0; } }

/* ---- Dokunmatik: kontrol satırları parmak boyunda ---- */
@media (pointer: coarse) {
  .secim-liste .onay { min-block-size: 40px; }
}

/* ---- Dar ekran: sağdan sola ---- */
@media (max-width: 860px) {
  /* Bant sağdan sola dizildiğinde simge ve yazı sağda: parıltı da sağ üst
     köşeye (fiziksel konum; masaüstü bloğunun aynası). */
  .recete-panel__bas {
    background:
      radial-gradient(120px 90px at 100% 0, rgb(var(--panel-bas-1) / .9), transparent 70%),
      rgb(var(--form-panel));
  }
}
@media (max-width: 760px) {
  /* Clinical ve ilaç kartları alt alta; alt kartlar tek sütun. Clinical'da
     etiket sütunu en uzun etiket kadar (7.5em), kutu etiketin hemen yanında:
     satırın öbür ucuna itilince 700 px'lik ekranda aradaki boşluk 370 px'i
     buluyordu. */
  .recete-ikili, .alt-kartlar { grid-template-columns: 1fr; }
  /* Hasta: dört alan tek satıra sığmıyor (en küçük genişlikleri 500 px).
     Ad tam satır, yaş ile tarih ikinci satırda, numara üçüncüde. */
  .izgara--hasta { grid-template-columns: 96px 1fr; gap: 12px 10px; }
  .izgara--hasta > .alan:first-child, .izgara--hasta > .alan:last-child { grid-column: 1 / -1; }
  .olcum-satir { grid-template-columns: 30px minmax(0, 7.5em) 120px 40px; justify-content: start; }
  .olcum-satir--dar { grid-template-columns: 30px minmax(0, 7.5em) 120px 40px; }
  .olcum-satir--kan .acilir { inline-size: 160px; justify-self: start; }
  /* Etiket yazısı kutuya yaslı (dir="ltr": başlangıç = sol, kutunun yanı):
     kısa «BP» ile kutusu arasında sütunun boşluğu kalmasın. */
  .olcum-satir__ad { margin-inline: 8px 11px; text-align: start; }
  .recete-panel .kart--not { grid-template-columns: 1fr; gap: 6px; }
  .kart--not__etiket { padding-block-start: 0; }
}
@media (max-width: 560px) {
  .recete-panel { padding-inline: 10px; }
  .recete-panel__bas { block-size: 64px; margin-inline: -10px; padding-inline: 12px; gap: 12px; }
  .recete-panel__simge .simge { inline-size: 30px; block-size: 30px; }
  .recete-panel__metin h1 { font-size: 20px; }
  .recete-panel__metin p { font-size: 13px; }
  /* Şablon düğmeleri yalnız simge; ad aria-label ve title'da. */
  .recete-panel__sablon { inline-size: 34px; padding: 0; }
  .recete-panel__sablon-metin { display: none; }
  /* Telefonda numara başlığın yanına sığmıyor, ikinci satıra iniyor: bant
     onunla uzuyor (sabit boyda yazı bandın üstünden taşıyordu). */
  .recete-panel__bas--duzenle { block-size: auto; min-block-size: 64px; padding-block: 8px; }
  .kart--hasta .kart__govde { padding-inline: 12px; }
  .olcum-satir .input, .olcum-bp { block-size: 44px; }
  .olcum-liste { row-gap: 8px; }
  .olcum-bp { grid-template-columns: 48px auto 48px; justify-content: center; }
  .olcum-satir--kan .acilir select.input { block-size: 44px; }
  .ilac-ara .input, .tani-ara .input { block-size: 44px; min-height: 44px; }
  .ilac-suzgec { grid-template-columns: 1fr 1fr 1fr; row-gap: 10px; }
  .ilac-suzgec .alan__etiket { font-size: 13px; }
  .ilac-suzgec select.input { block-size: 44px; min-height: 44px; }
  .ilac-ara__dugme { grid-column: 1 / -1; block-size: 44px; min-height: 44px; }
  .ilac-ara__dugme-metin { display: inline; }
  .ilac-sonuc .liste__satir { min-block-size: 52px; }
  .ilac-sonuc { max-block-size: 262px; }
  /* İlaç tablosu yedi sütuna sığmıyor: her satır bir kart. Birinci
     satırda sıra, ad ve çöp kutusu; ikincide güç · N=adet · kullanım ·
     zaman · süre (sığmayan alt satıra sarıyor, kesilmiyor). Başlık satırı
     gerekmiyor. Karta dokunmak düzenliyor. Satır kırılması tr::after ile:
     esnek sırada ilk satırın sonuna tam genişlikte boş bir öğe giriyor. */
  .tablo--ilac thead, .tablo--ilac colgroup { display: none; }
  .tablo--ilac:has(tbody tr:not(.tablo__bos)), .tablo--ilac:has(tbody tr:not(.tablo__bos)) tbody { display: block; }
  .tablo--ilac tbody tr:not(.tablo__bos) {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px;
    min-block-size: 56px; padding-block: 10px; padding-inline: 10px 6px;
    border-block-end: 1px solid rgb(var(--tablo-ayrac));
  }
  .tablo--ilac tbody tr:not(.tablo__bos)::after { content: ''; order: 3; flex-basis: 100%; }
  .tablo--ilac tbody tr:not(.tablo__bos):last-child { border-block-end: none; }
  .tablo--ilac tbody tr:not(.tablo__bos) td { block-size: auto; padding: 0; border: none; text-align: start; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-sira { order: 0; flex: 0 0 22px; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-ad-hucre { order: 1; flex: 1 1 0; min-inline-size: 0; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-ad { font-size: 15px; font-weight: 700; text-align: start; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-islem { order: 2; flex: 0 0 44px; }
  .tablo--ilac tbody tr:not(.tablo__bos) :is(.ilac-doz, .ilac-adet, .ilac-kullanim, .ilac-sure) {
    flex: 0 1 auto; min-inline-size: 0; font-size: 12.5px; color: rgb(var(--metin-2));
  }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-doz { order: 4; margin-inline-start: 28px; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-adet { order: 5; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-kullanim { order: 6; display: flex; flex-wrap: wrap; column-gap: 6px; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-sure { order: 7; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-kullanim__satir { font-size: 12.5px; white-space: normal; }
  /* Ayraç ve «N=» (kâğıttaki adet yazımı) yalnız bu dizilişte gerekiyor.
     Ayraç satır içi blok: çift yönlü dizilişte yansız bir kutu, iki yanında
     eşit boşluk (esnek aralık + kendi payı); değerler <bdi> içinde, rakama
     yapışmıyor. «N=» adedin soldan sağa kutusunda: «N=2», «2=N» değil. */
  .tablo--ilac tbody tr:not(.tablo__bos) :is(.ilac-adet, .ilac-sure, .ilac-kullanim__satir)::before {
    content: '·'; display: inline-block; margin-inline-end: 6px; font-weight: 700;
  }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-adet__deger::before { content: 'N='; }
  /* Boş kullanım ve süre telefonda yer tutucu «—» değil, hiç yok. */
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac--bos { display: none; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-sil { inline-size: 44px; block-size: 44px; min-width: 44px; min-height: 44px; }
  .tablo--ilac tbody tr:not(.tablo__bos) .ilac-sil .simge { inline-size: 20px; block-size: 20px; }
  .tablo--sik td { block-size: auto; }
  .satir-ekle { block-size: 48px; margin-inline: 4px; }
  .madde-ekle { block-size: 36px; }
  .cip--tani { min-block-size: 36px; }
  .recete-panel .kart--not textarea.input { min-height: 88px; }
  /* Düğmeler: asıl düğme önde ve iki sütun boyunca, altında önizle ve temizle. */
  .recete-eylem { grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 4px; }
  .recete-eylem .recete-btn { block-size: 48px; min-height: 48px; font-size: 15px; }
  .recete-eylem .recete-btn--asil, .modal--onizleme .recete-btn--asil { grid-column: 1 / -1; order: -1; }
  .recete-eylem .recete-btn--sade, .modal--onizleme .recete-btn--sade { order: 1; }
  /* Önizleme kutusunun ayağı da aynı dizilişte: simgeli üç düğme yan yana
     sığmıyor, «بستن» kutunun dışına taşıyordu. */
  .modal--onizleme .modal__ayak { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ---------- Şemsi tarih seçici ---------- */
/* Kutu ve takvim şemsi; depoya giren değer gizli alanda miladi ISO.
   Bkz. cekirdek/tarih-secici.js */
/* Çerçeve dıştaki kapta, simge kutunun İÇİNDE: ayrı bir düğme olarak
   yanında dururken dar sütunda tarihi kırpıyordu. */
.tarih-secici {
  display: flex; align-items: center; gap: var(--b-2);
  padding-inline: var(--b-3); min-block-size: 40px;
  background: rgb(var(--yuzey)); border: var(--kenarlik-2); border-radius: var(--r-kucuk);
  transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.tarih-secici:focus-within { border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
/* alan() doğrulama hatasında `input--hata`yı SARMALAYICIYA koyuyor; buradaki
   `border` kısayolu onu eziyordu ve alan kırmızıya dönmüyordu. */
.tarih-secici.input--hata { border-color: rgb(var(--kirmizi)); }
.tarih-secici.input--hata:focus-within { box-shadow: 0 0 0 3px rgb(var(--kirmizi) / .18); }
.tarih-secici .input {
  flex: 1; min-inline-size: 0; border: none; background: none; padding: 0;
  min-block-size: 0; font: inherit; font-size: var(--f-m); color: inherit;
  font-variant-numeric: tabular-nums;
}
.tarih-secici .input:focus { outline: none; box-shadow: none; }
.tarih-secici .input.input--hata { color: rgb(var(--kirmizi)); box-shadow: none; }
.tarih-secici__dugme {
  flex-shrink: 0; display: grid; place-items: center;
  inline-size: 26px; block-size: 26px; padding: 0;
  border: none; border-radius: 6px; background: none; cursor: pointer;
  color: rgb(var(--metin-3));
  transition: background var(--hiz-1) var(--egri), color var(--hiz-1) var(--egri);
}
.tarih-secici__dugme:hover { background: rgb(var(--vurgu) / .1); color: rgb(var(--vurgu)); }
.tarih-secici:focus-within .tarih-secici__dugme { color: rgb(var(--vurgu)); }

/* Takvim gövdeye ekleniyor (fixed): kartın ya da pencerenin overflow
   kuralları kırpmasın. Yeri JS'ten veriliyor. */
.tarih-kutu {
  position: fixed; z-index: 60; inline-size: 290px;
  padding: var(--b-3);
  background: rgb(var(--yuzey)); border: var(--kenarlik-2); border-radius: var(--r);
  box-shadow: var(--golge-3);
  /* Boy JS'ten sınırlanıyor (dar ekranda iki yana da sığmayabiliyor):
     kutu kendi içinde kaydırılsın, ekrandan taşmasın. */
  overflow-y: auto;
  animation: tarih-kutu-gir var(--hiz-2) var(--egri);
}
@keyframes tarih-kutu-gir { from { opacity: 0; transform: translateY(-4px); } }
.tarih-kutu__bas { display: flex; align-items: center; gap: 2px; margin-block-end: var(--b-2); }
.tarih-kutu__ok { min-width: 30px; min-height: 30px; padding-inline: 0; }
/* Ay ve yıl ortada, oklar iki yanda. */
.tarih-kutu__ad {
  flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px;
  font-size: var(--f-m); white-space: nowrap;
}
.tarih-kutu__ad b { font-weight: 700; }
.tarih-kutu__ad span { color: rgb(var(--metin-2)); font-variant-numeric: tabular-nums; }
.tarih-kutu__izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tarih-kutu__gunadi {
  display: grid; place-items: center; block-size: 26px;
  font-size: var(--f-xs); font-weight: 700; color: rgb(var(--metin-3));
}
.tarih-kutu__gun {
  display: grid; place-items: center;
  block-size: 34px; padding: 0; border: none; border-radius: var(--r-kucuk);
  background: none; color: inherit; font: inherit; font-size: var(--f-s);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--hiz-1) var(--egri), color var(--hiz-1) var(--egri);
}
.tarih-kutu__gun:hover { background: rgb(var(--yuzey-2)); }
/* Bugün yalnız çerçeveli: seçili günle karışmasın. */
.tarih-kutu__gun--bugun { box-shadow: inset 0 0 0 1px rgb(var(--vurgu) / .55); font-weight: 700; }
.tarih-kutu__gun--secili { background: rgb(var(--vurgu)); color: rgb(var(--vurgu-yz)); font-weight: 700; }
.tarih-kutu__gun--secili:hover { background: rgb(var(--vurgu-2)); }
.tarih-kutu__ayak {
  display: flex; gap: var(--b-2); margin-block-start: var(--b-3);
  padding-block-start: var(--b-2); border-block-start: var(--kenarlik);
}
.tarih-kutu__ayak .btn { flex: 1; justify-content: center; }

/* ---------- Görsel seçme (Clinical sütunundaki fotoğraf) ---------- */
/* Dosya cihazda okunup küçültülüyor; bkz. cekirdek/gorsel.js */
.gorsel-secim__onizleme { display: flex; align-items: center; gap: var(--b-3); flex-wrap: wrap; }
.gorsel-secim__resim {
  inline-size: 84px; block-size: auto; max-block-size: 64px; object-fit: contain;
  border: var(--kenarlik); border-radius: var(--r-kucuk); background: #fff; padding: 2px;
}

/* Gelişmiş: hekimin günlük işinde yeri olmayan ayarlar katlı duruyor. Silmek
   yerine katlamak — istemci kimliği geliştiriciye, kasa kodu da ikinci cihazı
   kuran hekime lazım; ama ikisi de ilk bakışta ekranda durmamalı.
   İşaret olarak ok değil artı kullanılıyor: ok sağdan sola yazıda ters
   görünüyor, artı her iki yönde de aynı okunuyor. */
details.gelismis {
  margin-block-start: var(--b-4); border-block-start: var(--kenarlik); padding-block-start: var(--b-3);
}
details.gelismis > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--b-2);
  font-weight: 600; font-size: var(--f-s); color: rgb(var(--metin-3));
}
details.gelismis > summary::-webkit-details-marker { display: none; }
details.gelismis > summary::before {
  content: '+'; display: inline-block; font-size: var(--f-l); line-height: 1;
  transition: transform var(--hiz-1) var(--egri);
}
details.gelismis[open] > summary::before { transform: rotate(45deg); }
details.gelismis > summary:hover { color: rgb(var(--metin)); }

/* Kasa kodu: elle öbür cihaza geçirilecek, o yüzden tek aralıklı ve seçilebilir. */
code.kod {
  display: inline-block; padding: var(--b-2) var(--b-3); border-radius: var(--r-kucuk);
  background: rgb(var(--yuzey-2)); border: var(--kenarlik);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--f-m); letter-spacing: .06em; user-select: all;
}

/* ---------- Hesap kartı (hesap-arayuz.js) ---------- */
/* «حساب دارید؟» bağlantısı ve hata bandı kartı kaydırıp gösteriyor: üst
   çubuğun altında kalmasın. */
#hesap-karti { scroll-margin-block-start: calc(var(--ust-cubuk) + var(--b-3)); }
.hesap-ozet { display: flex; flex-direction: column; gap: var(--b-2); margin-block-start: var(--b-2); }
.hesap-ozet > p { margin: 0; }
.hesap-kim bdi { font-weight: 700; color: rgb(var(--metin)); }
.hesap-govde > .sekmeler { margin-block: var(--b-4) 0; }
/* Form tek sütun ve dar: kullanıcı adı ve parola geniş ekranda satır boyu
   uzamasın, telefonda da tam genişlik. */
.hesap-form { max-inline-size: 460px; margin-block-start: var(--b-3); }
.hesap-form > .kart__alt { margin-block: 0 var(--b-3); }
.hesap-hata:empty { display: none; }
.hesap-hata { margin-block-end: var(--b-3); }
.hesap-durum { margin: 0; font-size: var(--f-s); font-weight: 600; color: rgb(var(--metin-2)); }
.hesap-durum:not(:empty) { margin-block-start: var(--b-2); }
.gelismis__bolum { margin-block-start: var(--b-4); padding-block-start: var(--b-3); border-block-start: var(--kenarlik); }
.gelismis__bolum h3 { margin-block: 0 var(--b-1); font-size: var(--f-m); }
.gelismis .hesap-gizlilik { margin-block-start: var(--b-3); }

/* Kurtarma kodu kutusu: kod büyük ve tek aralıklı, gruplar ayrı kutucuk —
   dar telefonda satır ancak tirede kırılsın, bir grubun ortasında değil. */
.kod-kutu { display: flex; flex-direction: column; gap: var(--b-3); }
.kod-kutu > p { margin: 0; }
code.kod--buyuk {
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--b-1);
  padding: var(--b-3); font-size: clamp(1.125rem, 5vw, 1.5rem); font-weight: 700; letter-spacing: .08em;
}
code.kod--buyuk span { white-space: nowrap; }
.kod-kutu__bilgi { display: grid; gap: 2px; font-size: var(--f-s); color: rgb(var(--metin-2)); overflow-wrap: anywhere; }
.kod-kutu__onay { font-weight: 600; }