/* Uygulama kabuğu: üst çubuk, kenar menü, içerik, mobilde alt gezinme. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* Düz zemin: tasarımda sayfanın tepesinde ışık yok; eski radyal parıltı
     üst çubuğun düz zemininin altında ayrı bir leke gibi kalıyordu. */
  background: rgb(var(--bg)); color: rgb(var(--metin));
  font-family: var(--yazi); font-size: var(--f-m); line-height: var(--satir-yazi);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { line-height: var(--satir-baslik); letter-spacing: -.01em; }
h1 { font-size: var(--f-xl); margin-block: 0 var(--b-1); font-weight: 700; }
h2 { font-size: var(--f-l); margin-block: var(--b-5) var(--b-2); font-weight: 700; }
a { color: rgb(var(--vurgu)); }
:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: 2px; }
.js-gerekli { padding: var(--b-5); text-align: center; color: rgb(var(--metin-2)); }

/* ---------- Üst çubuk ---------- */
/* Zemin sayfanın kendisi: tasarımda üst çubuğun ayrı bir dolgusu yok, onu
   yalnız alttaki ince çizgi ve yumuşak gölge ayırıyor. Eski yarı saydam
   beyaz + bulanıklık, düz zeminin üstünde gri bir şerit gibi duruyordu. */
.ust {
  position: sticky; inset-block-start: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--b-3);
  block-size: var(--ust-cubuk); padding-inline: var(--b-4);
  background: rgb(var(--bg));
  border-block-end: 1px solid rgb(var(--ust-cizgi));
  box-shadow: var(--ust-golge);
}
/* Marka geniş ekranda kenar çubuğunda; üst çubuktaki kopyası yalnız kenar
   çubuğu gizlendiğinde (dar ekran) görünür — iki yerde birden durunca
   sayfanın üstünde aynı ad iki kez yazıyordu. */
.ust__logo { display: none; align-items: center; gap: var(--b-2); text-decoration: none; color: inherit; flex-shrink: 0; }
/* Kenar çubuğundaki kalp+EKG çizimi. Renk kenar çubuğunun camgöbeği
   değil vurgu: o renk koyu kolon için, açık üst çubukta soluk kalıyordu.
   SVG'nin kendi boşluğu negatif payla yutuluyor (bkz. .kenar__marka-simge). */
.ust__logo-simge {
  display: flex; flex-shrink: 0; margin: -5px; color: rgb(var(--vurgu));
  transition: transform var(--hiz-2) var(--egri-yay);
}
.ust__logo:hover .ust__logo-simge { transform: scale(1.06); }
.ust__ad { display: flex; flex-direction: column; line-height: 1.15; }
.ust__ad b { font-size: var(--f-l); letter-spacing: -.02em; }
/* Arama kutusu ortada yüzmesin: sınırlı genişlikte, başlıktan sonra. */
.ust__ara { flex: 1; max-inline-size: 420px; }
.ust__sag { margin-inline-start: auto; display: flex; align-items: center; gap: var(--b-2); }

/* Büyüteç ve kısayol rozeti kutunun İÇİNDE; girdi ikisinin arasında akar.
   Kenar renkleri çizgi tonunun saydamlığıyla: karanlık temada da kendiliğinden
   doğru tona düşüyor (tasarımda #dae3ec). */
.ara-kutu {
  display: flex; align-items: center; gap: 16px;
  padding-inline: 13px 12px; block-size: 42px;
  background: rgb(var(--yuzey)); border: 1px solid rgb(var(--cizgi) / .17); border-radius: 8px;
  transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.ara-kutu:focus-within { border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.ara-kutu__simge { display: flex; color: rgb(var(--metin-2)); cursor: text; flex-shrink: 0; }
/* Tasarımdaki büyüteç biraz kalın çizgili (18 px'te 1.35 px ince kalıyordu). */
.ara-kutu__simge .simge { stroke-width: 2.2; }
/* Girdinin kendi kutusu yok: çerçeve dıştaki kapta. */
.ara-kutu input {
  flex: 1; min-inline-size: 0; border: none; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 14px; color: inherit; block-size: 100%;
  /* Vazirmatn'ın alt payı derin (1100/2048): yazı satır kutusunda yukarıda
     duruyor. 4 px üst dolgu onu 2 px indirip tasarımdaki yerine getiriyor. */
  padding-block-start: 4px;
}
.ara-kutu input::placeholder { color: rgb(var(--metin-4) / .9); opacity: 1; }
.ara-kutu input:focus { outline: none; }
.ara-kutu input::-webkit-search-cancel-button { display: none; }
/* Yazı tasarımdaki boyda (13 px); üst dolgu aynı derin alt payı dengeliyor,
   yoksa "Ctrl + K" rozetin 2 px üstünde duruyordu. */
.ara-kutu__kisayol {
  flex-shrink: 0; display: inline-grid; place-items: center;
  block-size: 24px; padding-block: 6px 0; padding-inline: 7px; border-radius: 4px;
  background: rgb(var(--cizgi) / .04); border: 1px solid rgb(var(--cizgi) / .13);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; color: rgb(var(--metin-4));
}

/* Bugünün tarihi — yazı, seçici değil. Yazı başta, takvim simgesi sonda
   (tasarımdaki gibi); kutu arama kutusuyla aynı boyda. */
.ust__tarih {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-2);
  inline-size: 170px; block-size: 42px; padding-block: 0; padding-inline: 15px;
  background: rgb(var(--yuzey)); border: 1px solid rgb(var(--cizgi) / .19); border-radius: 8px;
  font-size: 15px; font-weight: 400; color: rgb(var(--metin));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ust__tarih .simge { color: rgb(var(--metin-baslik)); }
/* Latin rakamlar Vazirmatn'da satır kutusunun ~4 px üstünde duruyor (derin
   alt pay); kutu ortalı olsa da tarih yukarı kaçmış görünüyordu. */
.ust__tarih > span { position: relative; inset-block-start: 4px; }
/* Tema ve zil: çerçevesiz, dolgulu simge (masaüstünde 36 px kutu). */
.ust__tema, .ust__zil { color: rgb(var(--metin-baslik)); }
/* Zil yalnız geniş ekranda (aşağıdaki masaüstü bloğu): telefonda uyarılar
   bugünkü gibi sayfanın tepesinde duruyor, üst çubukta yer de yok. */
.ust__zil { display: none; }
.ust__zil-nokta {
  position: absolute; inset-block-start: 7px; inset-inline-end: 8px;
  inline-size: 8px; block-size: 8px; border-radius: var(--r-tam);
  background: rgb(var(--yildiz)); box-shadow: 0 0 0 2px rgb(var(--bg));
}

/* Hekim bloğu: ad + alt satır, yanında baş harfler. İki satır da avatara
   yaslı (sütun flex'te flex-end = bitiş kenarı). */
.ust__hesap { display: flex; align-items: center; gap: 11px; }
.ust__hesap-ad { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; text-decoration: none; color: inherit; max-inline-size: 180px; }
.ust__hesap-ad b { max-inline-size: 100%; font-size: 14px; font-weight: 600; color: rgb(var(--metin)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust__hesap-ad span { max-inline-size: 100%; font-size: 12px; font-weight: 400; color: rgb(var(--metin-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar--ust { inline-size: 36px; block-size: 36px; flex-shrink: 0; text-decoration: none; }

/* ---------- Gövde ---------- */
.govde { display: flex; min-block-size: calc(100vh - var(--ust-cubuk)); }
.kenar {
  /* Koyu kolon: marka üstte, menü ortada, slogan ve sürüm şeridi altta.
     Flex sütun ki slogan `margin-block-start: auto` ile dibe yaslanabilsin. */
  inline-size: var(--kenar); flex-shrink: 0;
  display: flex; flex-direction: column;
  background: rgb(var(--kenar-zemin)); color: rgb(var(--kenar-metin));
  position: sticky; inset-block-start: var(--ust-cubuk);
  block-size: calc(100vh - var(--ust-cubuk));
  overflow-y: auto;
  /* Sığmadığı en kısa ekranlarda çıkan kaydırma çubuğu koyu kolonun
     tonunda ve ince: tarayıcının açık gri çubuğu kolonun içinde bir yama
     gibi duruyor, seçili hapı da daraltıyordu. */
  scrollbar-width: thin; scrollbar-color: rgb(var(--kenar-cizgi) / .18) transparent;
}
/* Klavye odağı koyu kolonda kendi vurgusuyla ve İÇERİDE çiziliyor. Genel
   halka (petrol, 2 px dışarıda) bu zeminde 1.7:1 kalıyordu; dışarı taşan
   kenarı kolonun taşma kırpmasına, alt kenarı da bir sonraki satırın
   zeminine gömülüyordu. Parlak turkuaz koyu zeminde ~7:1; seçili hapın
   üstünde beyaz (turkuaz orada hapın kendi şeridiyle karışıyor). */
.kenar :focus-visible { outline: 2px solid rgb(var(--kenar-vurgu)); outline-offset: -2px; }
.kenar .menu a[aria-current="page"]:focus-visible { outline-color: rgb(var(--kenar-cizgi)); }

/* ---------- Marka bloğu ---------- */
/* Ölçüler tasarımdan (1536 px): 75 px blok (2 px çizgi dahil), simge 21 px
   içeride, adla arasında 11 px. */
.kenar__marka {
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
  block-size: 75px; padding-block: 0; padding-inline: 21px 12px;
  border-block-end: 2px solid rgb(var(--kenar-cizgi) / .035);
  color: inherit; text-decoration: none;
}
/* Çıplak kalp+EKG çizgisi, kutusuz. SVG'nin kendi boşluğu (24'lük kutuda
   kalp 18 birim) negatif kenar payıyla yutuluyor ki yerleşimde yalnız
   görünen çizim (45×43) yer tutsun ve ad tasarımdaki yere düşsün. */
.kenar__marka-simge {
  display: flex; flex-shrink: 0; color: rgb(var(--kenar-marka));
  margin-block: -10px -4px; margin-inline: -7px;
  transition: transform var(--hiz-2) var(--egri-yay);
}
.kenar__marka:hover .kenar__marka-simge { transform: scale(1.06); }
/* Marka adı Latin: RTL gövdede kendi yönünü taşısın. */
.kenar__marka-ad { display: flex; flex-direction: column; min-inline-size: 0; padding-block-start: 5px; direction: ltr; text-align: start; }
.kenar__marka-ad b { font-size: 22px; font-weight: 700; line-height: 28px; color: rgb(var(--kenar-marka)); }
.kenar__marka-ad span { font-size: 11px; line-height: 16px; color: rgb(var(--kenar-marka-2)); }

/* ---------- Menü ---------- */
/* 52 px satır, aralık yok; simge 22 px kutuda, yazı simgeden 20 px sonra
   (tasarımda bütün etiketler x=70'te başlıyor).
   Menü kolonda kalan yeri dolduruyor (slogan ve ayak böylece dibe
   yaslanıyor); satırlar o yeri paylaşıp 52 px'e kadar uzuyor. Kolon
   kısalınca (1366×768 dizüstü, tarayıcı içinde ~650 px) satırlar 40 px'e
   kadar sıkışıyor: 52 px sabitken kolon 825 px istiyordu, altında ayak
   ekrandan taşıp kolonda kaydırma çubuğu çıkıyordu. Satır sayısından
   bağımsız: menüye kalem eklense de hesap kendiliğinden tutuyor. */
.menu { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; padding-block: 11px; }
.menu a {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px;
  flex: 1 1 0; min-block-size: 40px; max-block-size: 52px; margin-inline-start: 1px;
  padding-block: 0; padding-inline: 27px 12px;
  /* Seçili hap dış kenarda yuvarlak, iç uçta köşeli: iç uç kenar
     çubuğunun sınırına dayanıyor, orada yuvarlak bir uç boşluk bırakıyordu. */
  border-start-start-radius: 6px; border-end-start-radius: 6px;
  color: rgb(var(--kenar-metin)); text-decoration: none; font-weight: 400; font-size: 14px;
  transition: background var(--hiz-1) var(--egri), color var(--hiz-1) var(--egri);
}
.menu a:hover { background: rgb(var(--kenar-cizgi) / .07); color: rgb(var(--kenar-cizgi)); }
.menu a[aria-current="page"] {
  /* Düz zemin: gradyan yönü fiziksel olduğu için RTL/LTR'de elle
     çevrilmesi gerekiyordu; tasarımdaki seçili öğe zaten tek renk.
     Gölge yalnız dikey: yatay kayma fizikseldir, çekmecede yanlış yana düşerdi. */
  background: rgb(var(--kenar-vurgu-2));
  color: rgb(var(--kenar-cizgi)); font-weight: 600; font-size: 15px;
  box-shadow: 0 2px 12px rgb(var(--kenar-vurgu-2) / .3);
}
/* Seçili öğenin DIŞ kenarında parlak şerit. Sahte öğe kullanıldı:
   border-inline-start metni kaydırıyordu. */
.menu a[aria-current="page"]::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: 0;
  inline-size: 5px; background: rgb(var(--kenar-vurgu));
  border-start-start-radius: 6px; border-end-start-radius: 6px;
  animation: isaret-bit var(--hiz-2) var(--egri);
}
/* İç uçta 3 px'lik parlak kenar. İçe gölge (inset box-shadow) kullanılmadı:
   onun kayması fiziksel, sağdan açılan telefon çekmecesinde dış kenara düşerdi. */
.menu a[aria-current="page"]::after {
  content: ''; position: absolute; inset-inline-end: 0; inset-block: 0;
  inline-size: 3px; background: rgb(var(--kenar-vurgu) / .7);
}
@keyframes isaret-bit { from { transform: scaleY(0); opacity: 0; } }
.menu .simge { flex-shrink: 0; color: rgb(var(--kenar-simge)); transition: transform var(--hiz-2) var(--egri-yay); }
.menu a:hover .simge { transform: scale(1.12); }
.menu a[aria-current="page"] .simge { color: rgb(var(--kenar-cizgi)); }
.menu a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sayı etiketi menünün bitiş kenarında, okunur bir hap olarak durur. */
.menu__sayi {
  margin-inline-start: auto; flex-shrink: 0; min-inline-size: 22px; text-align: center;
  padding-block: 1px; padding-inline: 6px; border-radius: var(--r-tam);
  background: rgb(var(--kenar-cizgi) / .1); color: rgb(var(--kenar-metin-2));
  font-size: var(--f-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.menu a[aria-current="page"] .menu__sayi { background: rgb(var(--kenar-cizgi) / .22); color: rgb(var(--kenar-cizgi)); }

/* ---------- Slogan ve ayak ---------- */
/* Dibe yaslanması menünün büyümesinden (yukarıda); kendi kenar payı yok. */
.kenar__slogan { padding-block: 24px 22px; padding-inline: 12px; text-align: center; }
.kenar__slogan-fa { font-size: 18px; font-weight: 500; line-height: 27px; color: rgb(var(--kenar-slogan)); }
/* Dar genişlik tasarımdaki iki satırı veriyor ("Your Health," / "Our
   Priority"); 15 px'te tek satıra sığıp başka bir blok gibi duruyordu. */
.kenar__slogan-lat {
  margin-block-start: 10px; margin-inline: auto; max-inline-size: 105px;
  font-size: 15px; font-weight: 300; line-height: 23px; color: rgb(var(--kenar-slogan-2));
}
/* Ayak kolonla aynı renkte, yalnız ince bir çizgiyle ayrılıyor. */
.kenar__ayak {
  display: flex; align-items: center; gap: 13px; flex-shrink: 0;
  block-size: 52px; padding-block: 0; padding-inline: 17px 8px;
  background: rgb(var(--kenar-zemin-2));
  border-block-start: 2px solid rgb(var(--kenar-cizgi) / .05);
  font-size: 12px; color: rgb(var(--kenar-metin));
}
/* Marka simgesiyle aynı hile: görünen kalp 25 px yer tutsun. */
.kenar__ayak .simge { flex-shrink: 0; margin-inline: -4px; margin-block: -4px; color: rgb(var(--kenar-cizgi)); }
.kenar__ayak b { font-weight: 600; color: rgb(var(--kenar-cizgi)); }
.kenar__surum { margin-inline-start: auto; font-variant-numeric: tabular-nums; opacity: .75; }

.icerik { flex: 1; min-inline-size: 0; padding: var(--b-5) var(--b-6); padding-block-end: var(--b-8); max-inline-size: var(--icerik-en); }
.bantlar { display: flex; flex-direction: column; gap: var(--b-2); margin-block-end: var(--b-4); }
.bant {
  display: flex; align-items: center; gap: var(--b-2); flex-wrap: wrap;
  padding: var(--b-3) var(--b-4); border-radius: var(--r); font-size: var(--f-s); font-weight: 600;
  background: rgb(var(--sari) / .09); color: rgb(var(--sari)); border: 1px solid rgb(var(--sari) / .25);
}
.bant--hata { background: rgb(var(--kirmizi) / .09); color: rgb(var(--kirmizi)); border-color: rgb(var(--kirmizi) / .25); }
.bant .btn { margin-inline-start: auto; }

/* ---------- Sayfa başlığı ---------- */
.sayfa-bas { display: flex; align-items: flex-start; gap: var(--b-3); margin-block-end: var(--b-5); flex-wrap: wrap; }
.sayfa-bas__govde { flex: 1; min-inline-size: 240px; }
.sayfa-bas__alt { margin: 0; color: rgb(var(--metin-2)); font-size: var(--f-s); }
.sayfa-bas__eylem { display: flex; gap: var(--b-2); flex-wrap: wrap; margin-inline-start: auto; }

/* ---------- Alt gezinme (mobil) ---------- */
.alt { display: none; }

/* ---------- Alt şerit (yalnız masaüstü) ---------- */
/* Sürüm solda, "teknolojiyle ♥" notu sağda. Telefonda yok: orada alt
   gezinme çubuğu duruyor, sürüm de çekmecenin ayağında. Görünür olduğu
   yer aşağıdaki masaüstü bloğu. */
.alt-serit {
  display: none; align-items: center; justify-content: space-between; gap: var(--b-4);
  block-size: var(--alt-serit); padding-inline: 47px 31px;
  background: rgb(var(--bg-alt)); border-block-start: 1px solid rgb(var(--cizgi) / .035);
  font-size: 12.5px; color: rgb(var(--alt-serit-metin));
}
.alt-serit__surum { font-size: 13px; font-variant-numeric: tabular-nums; }
.alt-serit__not { display: flex; align-items: center; gap: 6px; }
.alt-serit__not .simge { flex-shrink: 0; color: rgb(var(--yildiz)); }

/* ---------- Hareket ---------- */
/* Sayfa girişi: kısa ve yukarı doğru. Uzun ya da yaylı olursa her gezinme
   yavaş hissettiriyor — gün boyu kullanılan bir arayüzde bu yorucu. */
.sayfa-giris { animation: sayfa-gir var(--hiz-2) var(--egri); }
@keyframes sayfa-gir { from { opacity: 0; transform: translateY(8px); } }
/* Sıra gecikmesi kısa: uzun listede satırlar tek tek belirince sayfa yavaş
   açılıyormuş gibi oluyordu. */
.sirali > * { animation: sira-gir var(--hiz-2) var(--egri) backwards; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes sira-gir { from { opacity: 0; transform: translateY(5px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .ust__logo:hover .ust__logo-simge, .menu a:hover .simge, a.sayac:hover { transform: none; }
}

/* ---------- Dar ekran ---------- */
@media (max-width: 860px) {
  /* Kenar çubuğu telefonda kaybolmuyor, çekmeceye dönüyor: üst köşedeki ☰
     onu açıyor. Ayrı bir telefon menüsü yazmaktansa aynı menüyü kaydırmak —
     sayaçlar, sıra ve aktif işaret tek yerde kalıyor. */
  .kenar {
    display: flex; position: fixed; inset-block: 0; inset-inline-start: 0;
    z-index: 60; inline-size: min(82vw, 300px); block-size: 100dvh;
    box-shadow: var(--golge-3);
    /* Kapalıyken görünmez: ekran dışına kaydırılsa da gölgesi ~16 px
       ekrana taşıyor, her sayfanın kenarında gri bir şerit gibi duruyordu;
       içindeki bağlantılar da klavyeyle görünmeden odaklanıyordu. */
    visibility: hidden;
  }
  /* Kayma animasyonu ancak hekim ☰'ye BİR KEZ bastıktan sonra açılıyor.
     Yoksa geniş ekrandan dar ekrana geçildiği anda medya sorgusu da bir
     değer değişimi sayılıyor ve çekmece bir kez görünüp kayarak kapanıyordu.
     Telefonda olmaz ama bilgisayarda pencere daraltılınca gözle görülüyordu. */
  /* visibility de geçişte: kapanırken kayma bitene dek görünür kalıyor,
     açılırken hemen görünüyor (görünür uç her zaman kazanır). */
  body.menu-hazir .kenar { transition: translate var(--hiz-3) var(--egri), visibility var(--hiz-3); }
  /* Kapalıyken kendi kenarının dışına çıkıyor. Yön belgeden geliyor:
     uygulama sağdan sola ama bir gün soldan sağa açılırsa da doğru kalsın. */
  [dir="rtl"] .kenar { translate: 100% 0; }
  [dir="ltr"] .kenar { translate: -100% 0; }
  body.menu-acik .kenar { translate: 0 0; visibility: visible; }
  .kenar-perde {
    position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .45);
    opacity: 0; pointer-events: none; transition: opacity var(--hiz-3) var(--egri);
  }
  body.menu-acik .kenar-perde { opacity: 1; pointer-events: auto; }
  body.menu-acik { overflow: hidden; }
  .ust__logo { display: flex; }
  /* Telefonda üst çubukta yalnız marka, arama ve tema kalır: tarih ve
     hekim adı satırı taşırıyordu, ikisi de başka yerde yazılı. */
  .ust__tarih, .ust__hesap-ad { display: none; }
  .icerik { padding: var(--b-4); padding-block-end: calc(var(--alt-cubuk) + var(--b-5)); }
  .ust { padding-inline: var(--b-3); gap: var(--b-2); }
  /* Telefonda başlık yerine arama önemli: ad kısalır, kutu genişler. */
  .ust__ara { max-inline-size: none; }
  .alt {
    display: flex; position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 40;
    block-size: var(--alt-cubuk); background: rgb(var(--yuzey) / .9); backdrop-filter: saturate(160%) blur(12px);
    border-block-start: var(--kenarlik);
    padding-block-end: env(safe-area-inset-bottom);
  }
  .alt a, .alt button {
    position: relative;
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: none; background: none; color: rgb(var(--metin-3)); text-decoration: none;
    font: inherit; font-size: var(--f-xs); font-weight: 600; cursor: pointer;
    transition: color var(--hiz-1) var(--egri);
  }
  .alt a[aria-current="page"] { color: rgb(var(--vurgu)); }
  .alt .simge { transition: transform var(--hiz-2) var(--egri-yay); }
  .alt a[aria-current="page"] .simge { transform: translateY(-1px) scale(1.1); }
  /* Seçili sekmenin üstünde ince bir çizgi: renk tek başına, özellikle
     karanlık temada ve küçük simgelerde yeterince belli olmuyordu. */
  .alt a[aria-current="page"]::before {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 22%;
    block-size: 2px; border-radius: var(--r-tam); background: rgb(var(--vurgu));
    animation: isaret-bit var(--hiz-2) var(--egri);
  }
  /* Eylem düğmeleri ikili ızgara; asıl eylem tam satır. flex ile dizildiğinde
     üçüncü düğme tek başına alt satıra düşüp boydan boya uzuyor, ikincil bir
     düğme asıl düğmeden iri görünüyordu. */
  .sayfa-bas__eylem {
    margin-inline-start: 0; inline-size: 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--b-2);
  }
  .sayfa-bas__eylem > .btn--birincil { grid-column: 1 / -1; }
  /* Bildirimler alt gezinme çubuğunun üstünde durur; yoksa düğmeleri örtüyordu. */
  .bildirimler { inset-block-end: calc(var(--alt-cubuk) + var(--b-2)); inset-inline: var(--b-3) var(--b-3); }
  .bildirim { max-inline-size: none; }
}

/* Yönlendirme sonrası başlığa verilen odak GÖRÜNMESİN: odak ekran okuyucu
   için gerekli ama tarayıcı programla verilen bu odağı klavye odağı sayıp
   halkayı çiziyor, sayfanın üstünde sebepsiz bir çerçeve olarak görünüyordu.
   Klavyeyle gerçekten gelinirse işaret kalkıyor ve halka yine çıkıyor. */
[data-yonlendirme-odagi]:focus,
[data-yonlendirme-odagi]:focus-visible { outline: none; }

/* ☰ yalnız dar ekranda: geniş ekranda kenar çubuğu zaten görünüyor. */
.ust__menu { display: none; }
.kenar-perde { display: none; }
@media (max-width: 860px) {
  .ust__menu { display: inline-flex; }
  .kenar-perde { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .kenar, .kenar-perde { transition: none; }
}

/* =====================================================================
   MASAÜSTÜ YERLEŞİMİ (≥ 861 px) — tasarımla birebir
   ---------------------------------------------------------------------
   Tasarım soldan sağa dizilmiş: kenar çubuğu solda, arama solda, hekim
   sağda, sürüm solda. <html dir="rtl"> DEĞİŞMİYOR; yalnız kabuğun
   kapları (üst çubuk, kenar çubuğu, alt şerit) CSS `direction` ile soldan
   sağa akıyor, sayfaların içeriği (.icerik) sağdan sola kalıyor. Mantıksal
   özellikler böylece tasarımdaki yerlere kendiliğinden düşüyor.

   Yönle ilgili bütün masaüstü kuralları BU blokta. Blok silinirse bugünkü
   aynalanmış sağdan sola düzen geri gelir (geri dönüş yolu budur).
   Uyarılar:
   - direction: rtl verilen bir öğe kendi margin/padding-inline'ını sağdan
     sola çözer. O yüzden yalnız ebeveynin yerleştirdiği yapraklara verilir;
     kenar payı taşıyanlarda unicode-bidi: plaintext kullanılır.
   - [dir="rtl"] / [dir="ltr"] seçici YAZILMAZ: <html dir>'e bakar,
     hesaplanan yöne değil.
   - Gölge kayması, translate ve gradyan açısı fizikseldir; elle bakılır.
   - Telefon çekmecesi kuralları dar ekran bloğunda kalır.
   - @media screen: yazdırmaya karışmaz.
   ===================================================================== */
@media screen and (min-width: 861px) {
  /* ---- 1. Kabuk ---- */
  /* Kenar çubuğu tam boy, üst çubuk ve alt şerit yalnız içerik sütununda.
     DOM taşınmıyor: sağdan sola ızgarada 1. sütun sağda olduğu için kenar
     çubuğu 2. sütuna konunca fiziksel olarak sola düşüyor. */
  body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--kenar);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "ust kenar" "icerik kenar" "serit kenar";
    min-block-size: 100dvh;
  }
  .govde { display: contents; }
  .ust { grid-area: ust; direction: ltr; padding-inline: 18px 22px; gap: 18px; }
  /* Sayfayla arasında 1 px açık çizgi (tasarımda x=189, üst çubuğun
     yanından da geçiyor). Kolonun dışında: kenar çubuğu 189 px koyu
     kalıyor. Gölge kayması fiziksel; bu blokta kolon hep solda.
     z-index çizgi üst çubuğun (40) zemininin altında kalmasın diye;
     zil kutusu (45), modal ve bildirimler yine üstte. */
  .kenar {
    grid-area: kenar; direction: ltr; inset-block-start: 0; block-size: 100dvh;
    z-index: 41; box-shadow: 1px 0 0 rgb(var(--ust-cizgi));
  }
  /* İçerik sağdan sola kalıyor: öbür sayfalar dokunulmadan duruyor. Kenar
     boşlukları tasarımdan: panellerin üstünde ve altında 12, solda
     (kenar çubuğu yanında) 14, sağda 25.
     1240 px'e sınırlı sütun geniş ekranda ORTADA: sağdan sola ızgarada
     başlangıca (sağa) yaslanınca kenar çubuğunun yanında ölü bir şerit
     kalıyor, üst çubukla sayfa kopuk görünüyordu. inline-size: 100%
     şart: ortalanan ızgara öğesi yoksa içeriği kadar daralıyor. */
  .icerik {
    grid-area: icerik; padding-block: 12px; padding-inline: 25px 14px;
    inline-size: 100%; justify-self: center;
  }
  .alt-serit { grid-area: serit; direction: ltr; display: flex; }

  /* Sağdan sola kalan yapraklar */
  .ust__ara { flex: 0 1 377px; max-inline-size: 377px; }
  .ara-kutu__kisayol { min-inline-size: 56px; }
  /* Yer tutucu büyütecin hemen yanında (sağdan sola girdide `end` = sol). */
  .ara-kutu input { direction: rtl; text-align: end; }
  .ust__sag { gap: 18px; }
  .ust__tema, .ust__zil { min-inline-size: 36px; min-block-size: 36px; padding: 0; }
  .ust__zil { display: inline-flex; }
  /* Ad ve alt satır avatara yaslı; Farsça ad soldan sağa kapta yazı
     sırasını kendi ilk harfinden alsın (parantezli adlar karışmasın). */
  .ust__hesap-ad b, .ust__hesap-ad span { unicode-bidi: plaintext; }
  .avatar--ust { inline-size: 41px; block-size: 41px; box-shadow: 0 0 0 1px rgb(var(--yuzey)); }
  /* Not sağ uçta: yeri ebeveynin space-between'i veriyor, kendi kenar payı yok. */
  .alt-serit__not { direction: rtl; }
  /* Tasarımda menüde sayı yok; 189 px'te uzun etiketler de kesiliyordu.
     Sayılar telefon çekmecesinde ve sayfaların kendisinde duruyor. */
  .menu__sayi { display: none; }
  /* Sürüm masaüstünde alt şeritte; ayakta ikinci kez yazılmıyor. */
  .kenar__surum { display: none; }
  /* Kısa ekran: menü satırları kendiliğinden sıkışıyor (Menü bölümü);
     önce sloganın boşlukları, 740 px'in altında slogan gidiyor ki satırlar
     ~650 px'lik pencerede de 50 px'e yakın kalsın. Menü 40 px'lik satırlarla
     549 px'e kadar sığıyor; daha kısası kolonda ince çubukla kayar. */
  @media (max-height: 824px) {
    .kenar__slogan { padding-block: 12px 10px; }
  }
  @media (max-height: 740px) {
    .kenar__slogan { display: none; }
  }

  /* Uyarı bantları (yedek, depolama) sayfanın tepesini itmiyor: zilin
     açtığı kutuda duruyor. Zilin noktası bekleyen uyarı olduğunu söylüyor.
     Kutu .icerik'te (sağdan sola), inline-start = sağ = zilin altı. */
  .bantlar {
    position: fixed; z-index: 45;
    inset-block-start: calc(var(--ust-cubuk) + 6px); inset-inline-start: 22px;
    inline-size: min(380px, calc(100vw - var(--kenar) - 40px));
    margin: 0; padding: var(--b-3);
    background: rgb(var(--yuzey)); border: var(--kenarlik-2); border-radius: var(--r);
    box-shadow: var(--golge-3);
    display: none;
  }
  body.zil-acik .bantlar { display: flex; animation: zil-kutu-gir var(--hiz-2) var(--egri); }
  /* Dar kutuda simge yalnız bir satırda kalmasın: yazı aradaki yeri alıp kırılsın. */
  .bantlar .bant > span { flex: 1 1 0; min-inline-size: 0; }
  .bantlar:empty::before {
    content: attr(data-bos); padding: var(--b-2);
    font-size: var(--f-s); color: rgb(var(--metin-2)); text-align: center;
  }

  /* ---- 2. Reçete sayfası: form solda, kâğıt sağda ----
     Sonraki adımlar (form paneli, kâğıt) kurallarını buraya ekler. */
  /* Tasarımda sayfa tam genişlikte; öbür sayfalardaki 1240 px sınırı
     okunurluk için, burada iki panel yan yana ekranı dolduruyor. Kenar
     payları da tasarımdan: üstte 10, kenar çubuğunun yanında 10, sağda 11
     (.icerik sağdan sola: başlangıç = sağ). */
  .icerik:has(.recete-duzen) { max-inline-size: none; padding-block: 10px 12px; padding-inline: 11px 10px; }
  .recete-duzen { direction: ltr; }
  /* Kâğıt kendi yönünü koruyor: antet ve satırlar sağdan sola. */
  .recete-duzen > .recete-onizleme { direction: rtl; }

  /* ---- 3. Form: yerleşim soldan sağa, yazı yaprakları sağdan sola ----
     Tasarımdaki gibi: başlık simgesi solda, ad alanı en solda, Clinical ilaç
     kartlarının solunda, belirtiler solda ve tanı sağda, asıl düğme kâğıdın
     yanında. Soldan sağa yön .recete-duzen'den miras geliyor; Farsça yazı
     taşıyan yapraklar kendi içinde sağdan sola. */
  /* Başlık ve alt yazı simgeye yaslı (sağdan sola blokta bitiş = sol). */
  .recete-form .recete-panel__metin > * { direction: rtl; text-align: end; }
  /* Kart başlıkları simgenin hemen yanında; «(Clinical)» parantezleri
     Farsça cümlenin yönünde dizilsin. */
  .recete-form :is(.kart__bas h2, .kart--not__etiket > span) { direction: rtl; }
  /* «* etiket» kutunun sol kenarında, yıldız solda. */
  .recete-form .alan__etiket { direction: rtl; align-self: flex-start; }
  /* Kenar payı taşıyan yazılar: yalnız harf sırası sağdan sola. */
  .recete-form :is(.secim-alani__metin, .kart__bas-sayi) { unicode-bidi: plaintext; }
  .recete-form :is(.uyarilar, .uyari) { direction: rtl; }
  /* Takvim açılır kutusu alanın hesaplanan yönüne bakıyor; düğme sağdan
     sola kapta kendiliğinden solda (tasarımdaki gibi). */
  .recete-form .tarih-secici { direction: rtl; }
  /* Tablo tasarımda sağdan sola: # sütunu sağda. */
  .recete-form .tablo-kap { direction: rtl; }
  /* İlaç aramasının yer tutucusu büyütecin hemen yanında (üst çubuktaki
     arama gibi); tanı aramasınınki kutunun sağında (tasarım). */
  .recete-form .ilac-ara .input { direction: rtl; text-align: end; }
  .recete-form .tani-ara .input { direction: rtl; }
  /* «+ افزودن …» düğmeleri: tasarımda artı yazının sağında. Yön değil
     sıra çevriliyor: direction: rtl düğmenin kendi otomatik kenar payını
     da çevirir, bitişe itilen düğme başa kaçardı. */
  .recete-form :is(.satir-ekle, .madde-ekle, .ilac-ara__dugme) { flex-direction: row-reverse; }
  /* Ölçüm etiketi ve birimi dir="ltr": kenar payları soldan sağa satırda
     başlangıç tarafına geçiyor (telefondaki bitiş kuralının karşılığı). */
  .recete-form .olcum-satir__ad { margin-inline: 11px 0; text-align: start; }
  @container (max-width: 235px) {
    .recete-form .olcum-satir__ad { margin-inline: 6px 0; }
  }
  .recete-form .olcum-satir__birim { margin-inline: 10px 0; }
  /* Önizleme kutusunun ayağı formun alt düğmeleriyle aynı dizilişte:
     بستن solda, ذخیره و چاپ sağda (formda da kâğıdın yanında, sağda). */
  .modal--onizleme .modal__ayak { direction: ltr; }
}
@keyframes zil-kutu-gir { from { opacity: 0; transform: translateY(-4px); } }