/* Forpus panel görünümü.
 *
 * 🔴 WEB FONTU YOK. Klinikteki makine eski bir Windows ve bağlantı ADSL;
 * indirilen her font, hekimin "açılmıyor" deyip telefona sarılmasıyla biten
 * saniyelerdir. Sistem yığını anında çizer.
 *
 * 🔴 MOR YOK. Mor DoldurKabı'nın rengi. Hekim "DoldurKabı'nın veteriner
 * sayfası" ile "kendi sitesinin paneli"ni karıştırmamalı; ikisi ayrı tüzel
 * ilişki ve karışması hukuken de sorun.
 *
 * Renkler jeton olarak TEK yerde; koyu tema aynı jetonları yeniden tanımlar,
 * kural gövdeleri iki kez yazılmaz.
 */

:root {
  --murekkep: #12233A;
  --murekkep-soluk: #4A5A70;
  --yuzey: #F7F8FA;
  --kart: #FFFFFF;
  --cizgi: #DDE2EA;
  --cizgi-koyu: #C3CBD8;

  --teal: #0E7C66;
  --teal-koyu: #0A6152;
  --teal-zemin: #E7F2EF;

  --kehribar: #8A5A00;
  --kehribar-zemin: #FFF6E5;
  --kehribar-cizgi: #E8C179;

  /* Kırmızı YALNIZ bloklayıcı hatada. Uyarı kehribardır; her şey kırmızı
     olursa hiçbir şey kırmızı değildir. */
  --kirmizi: #A6231A;
  --kirmizi-zemin: #FDF2F1;
  --kirmizi-cizgi: #E9A9A2;

  --basari: #0A6152;
  --basari-zemin: #E7F2EF;
  --basari-cizgi: #9CCBBE;

  --dokunma: 48px;   /* asgari 44px; 48 hekimin telefonunda rahat */
  --kolon: 680px;
  --yuvarlak: 10px;
  --golge: 0 1px 2px rgba(18, 35, 58, .06), 0 1px 8px rgba(18, 35, 58, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --murekkep: #E8EEF6;
    --murekkep-soluk: #9FB0C4;
    --yuzey: #0E1620;
    --kart: #17222E;
    --cizgi: #2A3949;
    --cizgi-koyu: #3B4C60;

    --teal: #3FAF93;
    --teal-koyu: #59C4A9;
    --teal-zemin: #12312A;

    --kehribar: #F0BE6A;
    --kehribar-zemin: #33280F;
    --kehribar-cizgi: #6B5223;

    --kirmizi: #F0968C;
    --kirmizi-zemin: #331817;
    --kirmizi-cizgi: #6B322C;

    --basari: #59C4A9;
    --basari-zemin: #12312A;
    --basari-cizgi: #2A5F53;

    --golge: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

html {
  /* Telefonda yatay çevirince punto kendiliğinden büyümesin. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--yuzey);
  color: var(--murekkep);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

/* ── Üst çubuk ─────────────────────────────────────────────────────────── */
.ust {
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
}
.ust__ic {
  max-width: var(--kolon);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.ust__marka {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
}
.ust__cikis {
  color: var(--murekkep-soluk);
  text-decoration: none;
  font-size: 17px;
  min-height: var(--dokunma);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  flex: none;
}
.ust__cikis:hover { color: var(--murekkep); border-color: var(--cizgi-koyu); }

/* 🔴 Dört bölüm DE görünür olmalı. Yatay kaydırmalı şeritte "Geçmiş" telefonda
   ekranın dışında kalıyordu; kaydırmayı fark etmeyen hekim o bölümü hiç
   bulamaz. Dört eşit sütun: kimse ekran dışında kalmıyor, etiket gerekirse
   iki satıra sarıyor. */
.menu {
  max-width: var(--kolon);
  margin: 0 auto;
  padding: 0 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.menu__bag {
  color: var(--murekkep-soluk);
  text-decoration: none;
  padding: 6px 4px;
  min-height: var(--dokunma);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 3px solid transparent;
  font-size: 16px;
  line-height: 1.25;
  hyphens: auto;
}
@media (min-width: 480px) {
  .menu__bag { font-size: 17px; padding: 0 12px; }
}
.menu__bag--aktif {
  color: var(--teal);
  border-bottom-color: var(--teal);
  font-weight: 600;
}

/* ── Gövde ─────────────────────────────────────────────────────────────── */
.govde {
  max-width: var(--kolon);
  margin: 0 auto;
  padding: 20px 16px 40px;
}
.baslik {
  font-size: 26px;
  line-height: 1.3;
  margin: 4px 0 16px;
}
.aciklama {
  color: var(--murekkep-soluk);
  margin: 0 0 20px;
}

/* ── Kartlar ───────────────────────────────────────────────────────────── */
.kart {
  display: block;
  position: relative;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  padding: 16px;
  margin: 0 0 14px;
  color: inherit;
  text-decoration: none;
}
.kart--tiklanir { padding-right: 44px; }
.kart--tiklanir:hover { border-color: var(--teal); }
.kart__ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kart__baslik { font-size: 20px; margin: 0; line-height: 1.3; }
.kart__ozet { margin: 6px 0 0; color: var(--murekkep-soluk); }
.kart__ok {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: var(--cizgi-koyu);
}

.rozet {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
}
.rozet--kehribar {
  background: var(--kehribar-zemin);
  color: var(--kehribar);
  border: 1px solid var(--kehribar-cizgi);
}

/* ── Durum şeridi ──────────────────────────────────────────────────────── */
.serit {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--kehribar-cizgi);
  border-radius: var(--yuvarlak);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.serit--yayin { border-left-color: var(--teal); }
.serit__baslik { margin: 0; font-weight: 600; }
.serit__not { margin: 4px 0 0; color: var(--murekkep-soluk); font-size: 16px; }

.adimlar { list-style: none; margin: 12px 0 0; padding: 0; }
.adimlar .adim {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 17px;
}
.adim__isaret { flex: none; width: 24px; text-align: center; font-weight: 700; }
.adim--tamam .adim__isaret { color: var(--teal); }
.adim--bekliyor .adim__isaret { color: var(--kehribar); }
.adim--bekliyor { color: var(--murekkep-soluk); }

.ziyaret {
  background: var(--teal-zemin);
  border: 1px solid var(--teal);
  border-radius: var(--yuvarlak);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.ziyaret__sayi { font-size: 24px; font-weight: 700; color: var(--teal-koyu); }

/* ── Bildirimler ───────────────────────────────────────────────────────── */
.bildirim {
  border-radius: var(--yuvarlak);
  padding: 14px 16px;
  margin: 0 0 18px;
  border: 1px solid;
}
.bildirim__metin { margin: 0; font-weight: 600; }
.bildirim__ne { margin: 6px 0 0; font-weight: 400; }
.bildirim--basari { background: var(--basari-zemin); border-color: var(--basari-cizgi); color: var(--basari); }
.bildirim--uyari { background: var(--kehribar-zemin); border-color: var(--kehribar-cizgi); color: var(--kehribar); }
.bildirim--hata { background: var(--kirmizi-zemin); border-color: var(--kirmizi-cizgi); color: var(--kirmizi); }

/* ── Formlar ───────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; margin: 0 0 6px; }
.ipucu { font-weight: 400; color: var(--murekkep-soluk); font-size: 16px; margin: 4px 0 0; }

input[type="text"],
input[type="time"],
input[type="file"],
select {
  width: 100%;
  min-height: var(--dokunma);
  padding: 10px 12px;
  font-size: 18px;
  font-family: inherit;
  color: var(--murekkep);
  background: var(--kart);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yuvarlak);
}
input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dokunma);
  padding: 10px 20px;
  font-size: 18px;
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--yuvarlak);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: var(--teal);
  color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  .dugme { color: #06211B; }
}
.dugme:hover { background: var(--teal-koyu); }
.dugme--genis { width: 100%; }
.dugme--ikincil {
  background: var(--kart);
  color: var(--murekkep);
  border-color: var(--cizgi-koyu);
}
.dugme--ikincil:hover { border-color: var(--murekkep-soluk); background: var(--yuzey); }
.dugme--kucuk { min-height: 44px; padding: 8px 14px; font-size: 17px; }

/* ── Giriş ekranı ──────────────────────────────────────────────────────── */
.giris { max-width: 420px; margin: 0 auto; }
/* Kod alanı: artık 6 rakam değil, 12 karakterlik harf-rakam kodu ve ekranda
   tireli hâli (XXXX-XXXX-XXXX = 14 karakter) duruyor.

   🔴 ESKİ DEĞERLER TAŞIYORDU. Hesap zinciri bu dosyadan okunuyor: 360px'lik
   telefonda .govde 2×16px, alanın kendi dolgusu+kenarı 2×13px → kodun sığacağı
   iç genişlik 360−32−26 = 302px. Eski 30px + .35em ile karakter başına
   30×(0,55+0,35) = 27px; tireli 14 karakter 378px eder ve 302'ye SIĞMAZ —
   kod alanın içinde yana kayar, yer tutucunun sonu görünmez.
   Yeni değerlerle 360px'te 6.2vw = 22,3px, karakter başına 22,3×(0,60+0,08)
   = 15,2px, 14 karakter 212px. 320px'lik en dar telefonda bile 189px.
   (0,60em = sistem monospace'in karakter genişliği — Menlo 0,602, SF Mono 0,60;
   0,55em ise orantısız arayüz fontunda büyük harf ortalaması. İkisi de font
   metriğinden, ekran ölçümünden değil.) 

   🔴 SİSTEM MONOSPACE — indirilen font YOK (bkz. dosya başı). Sabit karakter
   genişliği iki iş yapıyor: alanın ne kadar yer kaplayacağı cihazdan bağımsız
   hesaplanabiliyor, ve harfler artık orantısız bir arayüz fontunda birbirine
   benzemiyor. tabular-nums'a gerek kalmadı, monospace zaten hepsini eşitliyor.

   🔴 text-transform: uppercase YOK, bilerek. Belge lang="tr" ve CSS büyütmesi
   DİLE DUYARLI: Türkçe'de "i" → "İ" (U+0130) basılır. Kutuda "İ" görünür ama
   alanın DEĞERİ "i" kalır; sunucu onu U+0049 "I" yapar, o harf de alfabede
   yoktur ve kod elenir. Yani ekran hekime bir harf, sunucu başka bir harf
   görür. Alfabede zaten i/I yok, kazanç kozmetik; mekanizma ise bu oturumda
   iki kez ısırdı. Büyük harf isteğini `autocapitalize="characters"` klavye
   ipucu olarak veriyor — o, hekimin YAZDIĞINI değiştirir, gördüğünü değil. */
/* 🔴 `input.giris__kod`, sade `.giris__kod` DEĞİL — ÖLÇÜLDÜ, kuralın yarısı
   ÖLÜYDÜ. Yukarıdaki `input[type="text"]` seçicisi (0,1,1) özgünlüğünde ve sade
   sınıf (0,1,0) kalıyor; kaynak sırası konuşmuyor bile. Tarayıcıda hesaplanan
   değer 18px ve sistem yazı tipiydi, yani sabit genişlik de duyarlı punto da
   hiç uygulanmıyordu. Tip seçicisini eklemek özgünlüğü (0,1,1)'e çıkarıyor ve
   bu kural sonra geldiği için beraberliği kazanıyor. */
input.giris__kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(19px, 6.2vw, 28px);
  letter-spacing: .08em;
  text-align: center;
  min-height: 60px;
}

/* 🔴 `.kod-goster` — yeni üretilen kodun TEK SEFERLİK gösterimi. Yukarıdaki
   monospace kuralı `input` TİP seçicisine bağlı, bir `<p>`ye uygulanmaz: sınıf
   olmasaydı kod gövde yazı tipiyle, küçük ve boşluksuz basılırdı. `user-select:
   all` tek dokunuşla tamamını seçtiriyor — panoya kopyalamak için betik
   gerekmiyor ve panelin ana ekranlarına ilk kez JS sokmuyoruz. */
.kod-goster {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(19px, 6.2vw, 28px);
  letter-spacing: .08em;
  text-align: center;
  min-height: 60px;
  user-select: all;
}

/* ── Saatler ───────────────────────────────────────────────────────────── */
.gun {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 12px 14px;
  margin: 0 0 10px;
}
.gun__ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gun__ad { font-size: 19px; font-weight: 700; }

/* Anahtar: görsel olarak kaydırma, teknik olarak onay kutusu.
   Onay kutusu kalır çünkü form gönderiminde en az sürprizli davranan odur. */
.anahtar { display: inline-flex; align-items: center; gap: 10px; min-height: var(--dokunma); cursor: pointer; margin: 0; }
.anahtar input { width: 26px; height: 26px; accent-color: var(--teal); }
.anahtar__metin { font-weight: 600; color: var(--murekkep-soluk); }
.gun input[type="checkbox"]:checked ~ .anahtar__metin { color: var(--teal); }

.saat-ciftler { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.saat-alan { flex: 1 1 130px; }
.saat-alan label { font-size: 16px; color: var(--murekkep-soluk); }
.ayirac { align-self: center; padding-bottom: 12px; color: var(--murekkep-soluk); }

/* Kapalı gün soluklaşsın; alanlar disabled EDİLMEZ çünkü disabled alan
   gönderilmez ve hekimin yazdığı saat sessizce kaybolur. */
.gun:has(.gun__acik:not(:checked)) .saat-ciftler,
.gun:has(.gun__acik:not(:checked)) .ara { opacity: .45; }

.ara { margin-top: 10px; border-top: 1px dashed var(--cizgi); padding-top: 6px; }
.ara > summary {
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--teal);
  font-weight: 600;
  cursor: pointer;
}
.ara > summary::-webkit-details-marker { display: none; }
.ara > summary::before { content: "+ "; margin-right: 4px; }
.ara[open] > summary::before { content: "− "; }

.kopyala { margin: 0 0 16px; }
.duyuru { min-height: 1.6em; color: var(--teal); font-weight: 600; }

/* ── Fotoğraflar ───────────────────────────────────────────────────────── */
.yuva {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 16px;
  margin: 0 0 14px;
}
.yuva--ornek { border-left: 4px solid var(--kehribar-cizgi); }
.yuva__baslik { font-size: 20px; margin: 0 0 10px; }
.onizleme {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--yuvarlak);
  border: 1px solid var(--cizgi);
  background: var(--yuzey);
  margin: 0 0 12px;
}
.onizleme--yok {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  color: var(--murekkep-soluk);
  border-style: dashed;
  text-align: center;
  padding: 12px;
}
.alan { margin: 0 0 14px; }

/* ── Geçmiş ────────────────────────────────────────────────────────────── */
.kayit {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 12px 14px;
  margin: 0 0 10px;
}
.kayit__satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.kayit__bolum { font-weight: 700; }
.kayit__nokta { color: var(--cizgi-koyu); }
.kayit__zaman, .kayit__kim { color: var(--murekkep-soluk); font-size: 17px; }
.kayit--red .kayit__bolum { color: var(--kehribar); }
.kayit__islem { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }

.tehlike { margin-top: 10px; border-top: 1px solid var(--cizgi); padding-top: 4px; }
.tehlike > summary {
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--kehribar);
  font-weight: 600;
  cursor: pointer;
}
.tehlike > summary::-webkit-details-marker { display: none; }
/* 🔴 Açılır olduğu belli olsun. İşaretsizken düz bir bağlantı gibi duruyor ve
   hekim "tıklarsam site geri döner mi" diye tereddüt ediyor. Üçgen, tıklamanın
   önce AÇIKLAMA getireceğini söyler. */
.tehlike > summary::before { content: "▸"; margin-right: 8px; font-size: 14px; }
.tehlike[open] > summary::before { content: "▾"; }
.tehlike__uyari {
  background: var(--kehribar-zemin);
  border: 1px solid var(--kehribar-cizgi);
  color: var(--kehribar);
  border-radius: var(--yuvarlak);
  padding: 12px 14px;
  margin: 6px 0 10px;
}

.bos {
  background: var(--kart);
  border: 1px dashed var(--cizgi-koyu);
  border-radius: var(--yuvarlak);
  padding: 24px 16px;
  text-align: center;
  color: var(--murekkep-soluk);
}

/* ── Alt bilgi ─────────────────────────────────────────────────────────── */
.alt {
  max-width: var(--kolon);
  margin: 0 auto;
  padding: 20px 16px 40px;
  border-top: 1px solid var(--cizgi);
  color: var(--murekkep-soluk);
  font-size: 16px;
}
.alt__satir { margin: 0 0 4px; }
.alt__satir--soluk { font-size: 15px; }

/* Hareketten rahatsız olan için: zaten animasyon yok, olursa da kapalı. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Ekran okuyucuya görünür, göze görünmez. fieldset/legend yapısı erişilebilirlik
   için gerekli ama gün adı zaten satırın içinde büyük büyük yazıyor. */
.gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
fieldset.gun { border: 1px solid var(--cizgi); }

/* Siteye giden bağlantı — panelin ilk ekranındaki en önemli düğme.
   Ödeme yapmış bir hekimin ilk gördüğü şey eksikler listesi olmasın. */
.site-ac {
  margin: 0 0 1.25rem;
}
.site-ac .ipucu {
  margin-top: 0.5rem;
}