/* Tasarım tokenları — petrol vurgu, mavi-gri zemin, yüksek okunurluk.
   Uygulamayı bir hekim kullanıyor: muayene sırasında, hastayla konuşurken,
   çoğu zaman telefonda. Renkler bu yüzden sakin; dikkat çeken tek şey
   uyarılar olsun. Renkler rgb üçlüsü olarak tutulur ki
   rgb(var(--vurgu) / .12) gibi saydamlıklar tek yerden türesin.
   Yalnız mantıksal yön özellikleri kullanılır. */

/* Vazirmatn: Farsça için çizilmiş açık kaynak (OFL) yazı tipi — lisans
   yazi/OFL.txt. Sistem yazı tipleri Arap harflerini genelde ikinci sınıf
   taşıyor: harf yükseklikleri oynuyor, nokta kümeleri birbirine giriyor,
   kalınlık sahteleniyor. Tek değişken dosya (111 KB) bütün kalınlıkları
   taşıyor ve service worker'ın önbelleğinde olduğu için ilk açılıştan sonra
   çevrimdışı da geliyor. font-display: swap — yazı tipi inene kadar metin
   görünür kalsın, reçete yazan kimse boş ekrana bakmasın. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../yazi/vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Kalam 700: yalnız reçete kâğıdındaki el yazısı satırı ("Healthy Life
   Brighter Tomorrow") için — lisans yazi/OFL-Kalam.txt. Dosya basılabilir
   ASCII'ye indirildi (12 KB); unicode-range de aynı aralığı söylüyor ki
   tarayıcı Farsça bir metin için bu dosyayı hiç istemesin. */
@font-face {
  font-family: 'Kalam';
  src: url('../yazi/kalam-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+2019;
}

/* Cinzel 500–700: yalnız lacivert reçete kâğıdında (Latin hekim adı, Latin
   ihtisas satırı, mühür halkasının yazısı) — lisans yazi/OFL-Cinzel.txt.
   Dosya Temel Latin'e ve iki kalınlık arasına indirildi (15,6 KB).
   Küçük harfleri zaten küçük büyük harf: «Dr. Nemuna Ahmadi» tasarımdaki
   gibi uzun baş harfli büyük harflerle çıkıyor, CSS'te büyütülmüyor.
   font-display: block — kâğıt yedek yazıyla basılmasın; yazdırmadan önce
   kagidiYazdir yüzün inmesini ayrıca bekliyor. */
@font-face {
  font-family: 'Cinzel';
  src: url('../yazi/cinzel-kagit.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+2013-2014, U+2018-2019, U+201C-201D;
}

:root {
  /* Renkler reçete sayfası tasarımından ölçüldü (hedef görüntüden piksel
     örneği). Zemin mavi-gri, vurgu petrol (#015277). Eski yeşil-turkuaz
     vurgu bırakılmadı: iki vurgu yan yana durunca sayfalar ayrı
     uygulamalar gibi görünürdü, bütün uygulama tek vurguya geçti. */
  --bg: 246 250 253;           /* sayfa ve üst çubuk */
  --bg-alt: 234 240 246;       /* alt şerit */
  --yuzey: 255 255 255;
  --yuzey-2: 242 248 251;      /* tablo başlığı, hafif dolgular */
  --yuzey-3: 238 245 249;      /* ikincil düğme */
  --cizgi: 45 95 145;          /* .10 ince çizgi, .20 giriş kutusu kenarı */

  --metin: 11 28 57;
  --metin-baslik: 11 35 80;
  --metin-2: 52 79 101;
  /* Yer tutucu ve soluk ikincil metin, tasarımdaki gibi (#8a97aa). Bilinçli
     bir karşıtlık ödünü: beyaz üstünde 2.96:1 (eski ton 3.3:1 idi).
     Okunurluk öne alınırsa tek satır değişir: 107 122 143 (#6b7a8f). */
  --metin-3: 138 151 170;
  --metin-4: 86 102 124;       /* boş durum metni */
  --simge: 4 51 74;            /* dolgulu lacivert simgeler */
  --simge-sessiz: 120 146 168; /* giriş kutusu içindeki soluk simgeler */

  --vurgu: 1 82 119;           /* petrol: asıl düğme, odak */
  --vurgu-2: 2 71 109;         /* üzerine gelince, düğmenin alt kenarı */
  --vurgu-3: 17 109 142;       /* gradyanların açık ucu */
  --vurgu-yz: 255 255 255;
  --turkuaz: 8 147 171;        /* süs dalgaları */
  --turkuaz-2: 82 192 204;
  --turkuaz-acik: 201 239 246;
  /* Zorunlu alan yıldızı ve alt şeritteki kalp. Hata kırmızısından ayrı:
     --kirmizi uyarılar için koyu kalıyor, yıldız tasarımdaki parlak ton. */
  --yildiz: 236 37 47;

  --kirmizi: 190 18 60;
  --sari: 180 83 9;
  --yesil: 21 128 61;
  --mavi: 29 78 216;
  --mor: 126 34 206;

  --r-kucuk: 9px; --r: 14px; --r-buyuk: 20px; --r-tam: 999px;
  --b-1: 4px; --b-2: 8px; --b-3: 12px; --b-4: 16px; --b-5: 24px; --b-6: 32px; --b-8: 48px;

  /* Gölgeler hafif ve katmanlı: yüzeyler kenarlıkla ayrılıyor, gölge yalnız
     gerçekten yüzen şeylerde (modal, bildirim, açılır) iş görüyor. Her kutuya
     gölge koymak sayfayı bulanıklaştırıyordu. */
  --golge-1: 0 1px 2px rgb(var(--cizgi) / .05);
  --golge-2: 0 4px 14px rgb(var(--cizgi) / .07), 0 1px 3px rgb(var(--cizgi) / .05);
  --golge-3: 0 24px 56px rgb(var(--cizgi) / .18), 0 4px 12px rgb(var(--cizgi) / .08);
  --kenarlik: 1px solid rgb(var(--cizgi) / .10);
  --kenarlik-2: 1px solid rgb(var(--cizgi) / .20);
  --halka: 0 0 0 3px rgb(var(--vurgu) / .18);
  /* Kutuların arkasındaki örtü, saydamlığıyla birlikte: sayfayı karartsın.
     Çizgi rengiydi; karanlık temada o açık camgöbeği ve örtü koyu sayfayı
     karartacağına parlak bir mavi-griye çeviriyordu. */
  --ortu: 45 95 145 / .45;

  --yazi: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Arabic', Tahoma, Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* El yazısı: yalnız kâğıttaki "Healthy Life Brighter Tomorrow" satırı.
     Kalam dosyası yalnız ASCII taşıyor; Farsça metne asla verilmemeli. */
  --yazi-el: 'Kalam', 'Segoe Print', cursive;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --f-xs: .6875rem; --f-s: .8125rem; --f-m: .9375rem; --f-l: 1.0625rem; --f-xl: 1.375rem; --f-2xl: 1.875rem;
  /* Arap yazısı Latin'den daha çok satır aralığı ister: harfler altına ve
     üstüne uzanıyor, dar satırda birbirine değiyorlar. */
  --satir-yazi: 1.62;
  --satir-baslik: 1.28;

  /* Kabuk ölçüleri tasarımın 1536 px genişliğinden: kenar çubuğu 189,
     üst çubuk 66, masaüstündeki alt şerit 48. Telefonda üst çubuk 60 kalıyor
     (aşağıdaki dar ekran bloğu). */
  --ust-cubuk: 66px; --alt-cubuk: 64px; --alt-serit: 48px; --kenar: 189px; --icerik-en: 1240px;

  /* Kenar çubuğu iki temada da koyu lacivert. Açık temada beyaz bırakılınca
     sayfa iki beyaz bloğa bölünüyor ve menü içerikten ayırt edilemiyordu;
     koyu kolon aynı zamanda markanın taşıyıcısı. Karanlık temada da aynı
     değerler geçerli, o blokta yeniden tanımlanmıyor. */
  --kenar-zemin: 21 42 59;
  --kenar-zemin-2: 21 42 59;   /* ayak da kolonla aynı renk */
  --kenar-cizgi: 255 255 255;
  --kenar-metin: 198 232 242;
  --kenar-metin-2: 151 190 208;
  --kenar-simge: 205 239 249;
  --kenar-marka: 136 233 245;
  /* İkincil yazılar ince (11 px/400, 15 px/300): kenar yumuşatması onları
     koyulaştırdığı için tokenlar tasarımda görünen tondan biraz açık. */
  --kenar-marka-2: 134 197 216; /* "Medical System" alt satırı */
  --kenar-slogan: 196 245 250;
  --kenar-slogan-2: 176 216 232;
  --kenar-vurgu: 56 204 218;   /* seçili öğenin parlak şeridi */
  --kenar-vurgu-2: 36 115 141; /* seçili öğenin düz zemini */

  /* Bileşen tokenları: reçete formunun ve kabuğun temaya bağlı renkleri.
     Her biri karanlık temada da tanımlı; formda doğrudan onaltılık renk
     yazılmıyor ki karanlık tema yarım kalmasın. Yalnız kâğıt (her zaman
     beyaz, basılı sayfa) kendi sabit renklerini kullanıyor. */
  --panel-cizgi: 235 245 249;
  /* Reçete formu (yeni/hedef tasarımı; açık tema aynı rollerin mevcut açık
     tonları). Başlık bandının köşesindeki parıltı --panel-bas-1. */
  --form-panel: 255 255 255;
  --panel-bas-1: 201 239 246;
  --kart-cizgi: 214 234 240; --kart-govde: 255 255 255;
  --kart-bas: 241 247 247; --kart-bas-cizgi: 232 242 244;
  --yuzey-olcum: 244 249 252; --olcum-cizgi: 220 233 240;
  --yuzey-salt: 246 249 252; --salt-cizgi: 219 230 238;
  --tablo-bas: 242 248 251; --tablo-govde: 255 255 255;
  --tablo-cizgi: 226 236 242; --tablo-ayrac: 235 243 247;
  --form-baslik: 11 35 80; --form-alt: 52 79 101;
  --etiket: 11 28 57; --birim: 52 79 101;
  --ara-zemin: 1 82 119;
  --asil-zemin: 1 82 119; --asil-metin: 255 255 255; --asil-zemin-2: 2 71 109;
  --btn-3-zemin: 243 247 248; --btn-3-cizgi: 230 241 245; --btn-3-metin: 9 32 82;
  --btn-2-zemin: 238 245 249; --btn-2-cizgi: 211 228 236; --btn-2-metin: 8 25 54;
  /* Küçük ekle düğmeleri, kesik çizgili satır, «+». Kesik çizgi vurgunun
     beyaz üstündeki %45'i (saydam yazılırsa üst üste binen yerde koyulaşır). */
  --ekle-metin: 1 82 119; --kesik-cizgi: 141 177 194;
  /* İşaret kutusu: açık temada vurgu, karanlıkta tasarımın mavisi. */
  --isaret: 1 82 119;
  --ust-golge: 0 2px 10px rgb(20 60 100 / .06);
  --baslik-simge: 4 49 72;
  --ust-cizgi: 225 233 240;
  --alt-serit-metin: 115 134 155;

  /* Hareket: tek bir yay eğrisi bütün arayüzde. Süreler kısa — arayüz
     "animasyonlu" değil, çevik hissetsin. */
  --egri: cubic-bezier(.22, .68, .36, 1);
  --egri-yay: cubic-bezier(.2, .9, .3, 1.2);
  --hiz-1: 120ms; --hiz-2: 200ms; --hiz-3: 320ms;
  --gecis: var(--hiz-2) var(--egri);
  color-scheme: light;
}

:root[data-tema="karanlik"] {
  /* Aynı ton aileleri, koyu zeminde: sayfa ~210° mavi-gri, vurgu petrolün
     açılmış hali. Kenar çubuğu açık temanın değerlerini koruyor. */
  /* Sayfa zemini reçete tasarımının çerçevesinden (her sayfada aynı). */
  --bg: 4 17 28;
  --bg-alt: 13 27 39;
  --yuzey: 15 30 43;
  --yuzey-2: 21 40 56;
  --yuzey-3: 29 53 72;
  --cizgi: 140 200 225;

  --metin: 226 238 245;
  --metin-baslik: 236 244 250;
  --metin-2: 160 186 204;
  --metin-3: 116 140 160;
  --metin-4: 140 162 180;
  --simge: 160 234 252;
  --simge-sessiz: 110 140 162;

  --vurgu: 56 182 214;
  --vurgu-2: 110 212 234;
  /* Gradyanların öbür ucu (asıl düğme, grafik çubukları). Koyu petrol
     (16 108 141) seçilince düğmenin üst yarısında koyu yazı 2.9:1'e
     düşüyordu; bu ton 5.5:1 veriyor. */
  --vurgu-3: 40 160 196;
  /* Açık vurgunun üstündeki yazı koyu: beyaz yazı #38b6d6 üstünde okunmuyor. */
  --vurgu-yz: 4 32 44;
  --turkuaz: 8 147 171;
  --turkuaz-2: 42 150 170;
  --turkuaz-acik: 20 70 88;
  --yildiz: 251 113 133;

  /* Reçete formu: renkler tasarımdan ölçüldü (medyan mürekkep ya da
     dolgu; yeni/form.md §2a). */
  --panel-cizgi: 20 52 72;
  --form-panel: 7 27 41;
  --panel-bas-1: 1 80 112;
  --kart-cizgi: 22 60 84; --kart-govde: 8 29 43;
  --kart-bas: 8 34 51; --kart-bas-cizgi: 20 53 73;
  --yuzey-olcum: 9 31 47; --olcum-cizgi: 25 62 87;
  --yuzey-salt: 9 31 47; --salt-cizgi: 25 62 87;
  --tablo-bas: 8 36 52; --tablo-govde: 5 24 37;
  --tablo-cizgi: 21 54 73; --tablo-ayrac: 19 55 80;
  --form-baslik: 201 247 252; --form-alt: 147 205 225;
  --etiket: 188 211 223; --birim: 138 192 217;
  --ara-zemin: 24 191 233;
  --asil-zemin: 66 219 254; --asil-metin: 4 40 52; --asil-zemin-2: 40 200 240;
  --btn-3-zemin: 12 36 55; --btn-3-cizgi: 28 64 87; --btn-3-metin: 238 242 245;
  --btn-2-zemin: 12 40 61; --btn-2-cizgi: 28 64 87; --btn-2-metin: 238 242 245;
  --ekle-metin: 45 200 228; --kesik-cizgi: 36 92 118;
  --isaret: 4 108 248;
  --ust-golge: 0 2px 10px rgb(0 0 0 / .35);
  --baslik-simge: 140 232 252;
  --ust-cizgi: 30 50 66;
  --alt-serit-metin: 140 162 180;

  --kirmizi: 251 113 133;
  --sari: 251 191 36;
  --yesil: 74 222 128;
  --mavi: 147 197 253;
  --mor: 196 181 253;

  --golge-1: 0 1px 2px rgb(0 0 0 / .4);
  --golge-2: 0 4px 16px rgb(0 0 0 / .45);
  --golge-3: 0 24px 56px rgb(0 0 0 / .6), 0 4px 12px rgb(0 0 0 / .4);
  --kenarlik: 1px solid rgb(var(--cizgi) / .14);
  --kenarlik-2: 1px solid rgb(var(--cizgi) / .24);
  --halka: 0 0 0 3px rgb(var(--vurgu) / .22);
  --ortu: 0 0 0 / .6;
  color-scheme: dark;
}

/* Telefonda üst çubuk daha alçak: tarih ve hekim adı orada gizli, 66 px
   yalnız boşluk olurdu. */
@media (max-width: 860px) {
  :root { --ust-cubuk: 60px; }
}