/* ============================================================
   FikaDent arayüz stili
   Açık/koyu tema kök üzerindeki data-tema ile değişir.
   ============================================================ */

:root{
  --zemin:#F4F2ED;
  --yuzey:#FFFFFF;
  --yuzey-2:#FAF9F6;
  --murekkep:#151C22;
  --soluk:#5F6C76;
  --cizgi:#DCD6CB;
  --ince:#EBE6DD;
  --vurgu:#0D6169;
  --vurgu-zemin:#E2EEEF;
  /* Vurgu zemininin üstündeki yazı. Açık temada vurgu koyu, koyu
     temada açık; sabit beyaz yazmak koyu temada düğme etiketini
     okunmaz hâle getiriyordu. */
  --vurgu-yazi:#FFFFFF;
  --iyi:#2C6B48;
  --iyi-zemin:#E3EEE7;
  --uyari:#95580D;
  --uyari-zemin:#F6EAD6;
  --kotu:#9B3222;
  --kotu-zemin:#F6E3DF;
  --kotu-yazi:#FFFFFF;
  --golge:0 1px 2px rgba(20,28,34,.06), 0 8px 24px rgba(20,28,34,.06);
  --yan-genislik:248px;
}

:root[data-tema="koyu"]{
  --zemin:#0C1116;
  --yuzey:#141B21;
  --yuzey-2:#182028;
  --murekkep:#E8E6E1;
  --soluk:#97A2AB;
  --cizgi:#27313A;
  --ince:#1D262E;
  --vurgu:#4FB3BC;
  --vurgu-zemin:#122A2D;
  --vurgu-yazi:#07201F;
  --iyi:#62B88A;
  --iyi-zemin:#14261C;
  --uyari:#D6A052;
  --uyari-zemin:#2A2114;
  --kotu:#E08270;
  --kotu-zemin:#2B1815;
  --kotu-yazi:#2B1815;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--zemin);color:var(--murekkep);
  font-family:"Sora","Segoe UI",system-ui,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--vurgu);text-decoration:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- giriş ekranı ----------
   Varsayılan düzen tek ortalanmış kart: davet kabulü ve parola
   sıfırlama sayfaları da bu kabuğu kullanıyor (sayfalar/acik.js).

   .vitrinli değiştiricisi yalnızca giriş ekranında: solda ürünün ne
   olduğu, sağda form. Giriş ekranı çoğu kullanıcının uygulamayla ilk
   teması; tek başına duran bir kutu "kurulmamış" hissi veriyordu. */

.giris-sayfa{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--vurgu-zemin), transparent 60%),
    var(--zemin);
}
.giris-kart{
  width:100%;max-width:420px;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:14px;padding:32px;
  box-shadow:var(--golge);
}
.marka{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.marka-im{
  width:30px;height:30px;border-radius:8px;background:var(--vurgu);
  display:grid;place-items:center;color:var(--vurgu-yazi);font-weight:700;font-size:15px;
  flex:none;
}
.marka-ad{font-size:19px;font-weight:700;letter-spacing:-.02em}
.giris-kart .alt{color:var(--soluk);margin:0 0 22px;font-size:13.5px}

/* ---------- iki panelli giriş ---------- */

.giris-sayfa.vitrinli{
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  place-items:stretch;padding:0;background:var(--zemin);
}

.giris-vitrin{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:40px;padding:clamp(32px,4vw,56px);
  background:
    radial-gradient(760px 420px at 12% 8%, #17838D, transparent 62%),
    radial-gradient(620px 520px at 92% 96%, #0A4A50, transparent 58%),
    #0B3E44;
  color:#EAF5F4;
}

/* Arkada duran, okunmayan bir nokta dokusu. Panelin boş kalan
   yarısını doldurmak için; içeriğin önüne geçmiyor. */
.giris-vitrin::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 1.4px, transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(200deg, #000 0 35%, transparent 78%);
  mask-image:linear-gradient(200deg, #000 0 35%, transparent 78%);
}

.giris-vitrin > *{position:relative;z-index:1}
.giris-vitrin .marka-ad{color:#fff}
.giris-vitrin .marka-im{background:rgba(255,255,255,.14);color:#fff}

.vitrin-soz{
  font-size:clamp(26px,2.8vw,36px);line-height:1.14;letter-spacing:-.025em;
  font-weight:700;margin:0 0 14px;max-width:16ch;
}
.vitrin-soz em{font-style:normal;color:#8FD6C8}

.vitrin-alt-yazi{margin:0;color:rgba(234,245,244,.74);font-size:14px;max-width:38ch}

.vitrin-liste{display:grid;gap:0;margin-top:30px}
.vitrin-sat{padding:13px 0;border-top:1px solid rgba(255,255,255,.14)}
.vitrin-sat:last-child{border-bottom:1px solid rgba(255,255,255,.14)}

/* İşaret numara değil: bu üç madde bir sıra oluşturmuyor,
   numaralandırmak olmayan bir düzeni ima ederdi. */
.vitrin-sat b{
  display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
}
.vitrin-sat b::before{
  content:"";width:6px;height:6px;flex:none;
  background:#8FD6C8;transform:rotate(45deg);
}
.vitrin-sat span{display:block;padding-left:15px}
.vitrin-sat span{font-size:13px;color:rgba(234,245,244,.7)}

.vitrin-dip{margin:0;font-size:12.5px;color:rgba(234,245,244,.58)}

.giris-govde{display:grid;place-items:center;padding:clamp(24px,4vw,48px) 24px;width:100%}

/* Geniş ekranda kart çerçevesiz: sağ panelin kendisi zaten kart. */
.giris-sayfa.vitrinli .giris-kart{
  max-width:400px;background:transparent;border:0;box-shadow:none;padding:0;
}
.giris-sayfa.vitrinli .giris-kart .marka,
.giris-sayfa.vitrinli .giris-kart .alt{display:none}

/* Dar ekranda sol panel kalkıyor: telefonda giren kişi ürünü zaten
   biliyor, onu formdan önce okuma yapmaya zorlamıyoruz. */
@media (max-width:940px){
  .giris-sayfa.vitrinli{
    grid-template-columns:minmax(0,1fr);place-items:center;padding:24px;
    background:
      radial-gradient(1200px 600px at 15% -10%, var(--vurgu-zemin), transparent 60%),
      var(--zemin);
  }
  .giris-vitrin{display:none}
  .giris-govde{padding:0}
  .giris-sayfa.vitrinli .giris-kart{
    background:var(--yuzey);border:1px solid var(--cizgi);
    border-radius:14px;padding:28px;box-shadow:var(--golge);
  }
  .giris-sayfa.vitrinli .giris-kart .marka{display:flex}
  .giris-sayfa.vitrinli .giris-kart .alt{display:block}
}

/* ---------- giriş kartının içi ---------- */

.giris-basi{margin-bottom:22px}
.giris-basi h1{
  font-size:25px;font-weight:700;letter-spacing:-.025em;margin:0 0 5px;line-height:1.15;
}
.giris-basi p{margin:0;color:var(--soluk);font-size:13.5px}

.sekmeler{display:flex;gap:4px;background:var(--ince);padding:4px;border-radius:9px;margin-bottom:20px}
.sekmeler[hidden]{display:none}
.sekmeler button{
  flex:1;padding:8px;border:0;background:transparent;border-radius:6px;
  cursor:pointer;font-size:13.5px;font-weight:500;color:var(--soluk);
}
.sekmeler button.etkin{background:var(--yuzey);color:var(--murekkep);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Hata kartın içinde duruyor: başarısız giriş denemesinin sebebi
   formun yanında kalmalı, kaybolan bir bildirimde değil. */
.giris-hata{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--kotu-zemin);color:var(--kotu);
  border:1px solid color-mix(in srgb, var(--kotu) 40%, transparent);
  border-radius:9px;padding:10px 12px;margin-bottom:16px;font-size:13px;
}
.giris-hata[hidden]{display:none}
.giris-hata .im{font-weight:700;line-height:1.35}

/* Parola alanı: göster/gizle ve Caps Lock uyarısı. İkisi de yanlış
   parola denemelerinin bilinen sebepleri. */
.parola-sarmal{position:relative}
.parola-sarmal input{padding-right:72px}
.parola-goz{
  position:absolute;top:50%;right:5px;transform:translateY(-50%);
  border:0;background:transparent;color:var(--soluk);cursor:pointer;
  font-size:12px;padding:5px 8px;border-radius:6px;
}
.parola-goz:hover{background:var(--ince);color:var(--murekkep)}

.caps{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--uyari)}
.caps[hidden]{display:none}

/* Parola ölçütleri yazarken doluyor; kuralı sunucu uyguluyor,
   buradaki gösterim yalnızca yol gösteriyor. */
.olcutler{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:6px;font-size:12px;color:var(--soluk)}
.olcut{display:inline-flex;align-items:center;gap:5px}
.olcut::before{content:"○";font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;line-height:1}
.olcut.tamam{color:var(--iyi)}
.olcut.tamam::before{content:"●"}

.giris-klinikler{display:grid;gap:8px}

.giris-dip{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--ince);
  font-size:12.5px;color:var(--soluk);text-align:center;
}

/* ---------- form ---------- */
.alan{margin-bottom:14px}
.alan > label{display:block;font-size:12.5px;font-weight:500;color:var(--soluk);margin-bottom:5px}
.alan input,.alan select,.alan textarea{
  width:100%;padding:9px 11px;border:1px solid var(--cizgi);border-radius:8px;
  background:var(--yuzey);outline:none;transition:border-color .12s,box-shadow .12s;
}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  border-color:var(--vurgu);box-shadow:0 0 0 3px var(--vurgu-zemin);
}
.alan textarea{min-height:80px;resize:vertical}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.ikili{grid-template-columns:1fr}}

.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:8px;border:1px solid transparent;
  background:var(--vurgu);color:var(--vurgu-yazi);font-weight:500;font-size:13.5px;
  cursor:pointer;transition:filter .12s;white-space:nowrap;
}
.dugme:hover{filter:brightness(1.08)}
.dugme:disabled{opacity:.55;cursor:default}
.dugme.tam{width:100%}
.dugme.sade{background:var(--yuzey);color:var(--murekkep);border-color:var(--cizgi)}
.dugme.sade:hover{background:var(--yuzey-2)}
.dugme.tehlike{background:var(--kotu);color:var(--kotu-yazi)}
.dugme.kucuk{padding:6px 11px;font-size:12.5px}

/* ---------- kabuk ---------- */
.kabuk{display:grid;grid-template-columns:var(--yan-genislik) 1fr;min-height:100vh}
.kabuk.dar{--yan-genislik:64px}

.yan{
  background:var(--yuzey);border-right:1px solid var(--cizgi);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.yan-tepe{padding:16px 16px 12px;border-bottom:1px solid var(--ince)}
.yan-menu{flex:1;overflow-y:auto;padding:10px 10px 20px}
.yan-menu .baslik{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soluk);padding:14px 10px 6px;font-weight:600;
}
.yan-menu a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--murekkep);font-size:13.5px;margin-bottom:1px;
}
.yan-menu a:hover{background:var(--ince)}
.yan-menu a.etkin{background:var(--vurgu-zemin);color:var(--vurgu);font-weight:500}
.yan-menu .im{width:18px;text-align:center;flex-shrink:0;opacity:.8}
.yan-alt{padding:12px;border-top:1px solid var(--ince)}

.kabuk.dar .yan-menu .yazi,.kabuk.dar .yan-menu .baslik,.kabuk.dar .kullanici-ad{display:none}
.kabuk.dar .yan-menu a{justify-content:center}

/* ---------- üst çubuk ---------- */
.govde{display:flex;flex-direction:column;min-width:0}
.ust{
  display:flex;align-items:center;gap:12px;padding:10px 20px;
  background:var(--yuzey);border-bottom:1px solid var(--cizgi);
  position:sticky;top:0;z-index:20;flex-wrap:wrap;
}
.ust .buyuyen{flex:1;min-width:120px}
.ikon-dugme{
  width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  border:1px solid var(--cizgi);background:var(--yuzey);cursor:pointer;
}
.ikon-dugme:hover{background:var(--ince)}

.hizli-secim{display:flex;align-items:center;gap:8px}
.hizli-secim select{
  padding:7px 10px;border:1px solid var(--cizgi);border-radius:8px;
  background:var(--yuzey);max-width:190px;font-size:13px;
}

.arama-sar{position:relative;max-width:360px;width:100%}
.arama-sar input{
  width:100%;padding:8px 11px 8px 32px;border:1px solid var(--cizgi);
  border-radius:8px;background:var(--yuzey-2);
}
.arama-sar .im{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.5}
.oneriler{
  position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:10px;box-shadow:var(--golge);
  max-height:320px;overflow-y:auto;z-index:40;
}
.oneriler div{padding:9px 12px;cursor:pointer;font-size:13.5px}
.oneriler div:hover{background:var(--ince)}

/* Aramada eslesme yoksa: bilgi satiri tiklanmaz, altindaki eylem tiklanir.
   Ikisini ayni gorunume birakmak, tiklanmayan satiri da dugme gibi
   gosterirdi. */
.oneriler .oneri-bos{color:var(--soluk);cursor:default}
.oneriler .oneri-bos:hover{background:transparent}
.oneriler .oneri-yeni{
  color:var(--vurgu);font-weight:500;border-top:1px solid var(--ince);
}

/* ---------- randevuda satir ici yeni hasta ---------- */
.secim-notu{
  margin-top:6px;font-size:12.5px;color:var(--iyi);
}
.secim-notu[hidden]{display:none}

.yeni-hasta{
  border:1px solid var(--cizgi);border-radius:10px;
  background:var(--yuzey-2);padding:14px;margin-bottom:12px;
}
.yeni-hasta[hidden]{display:none}
.yeni-hasta-basi{
  font-size:12.5px;font-weight:600;color:var(--soluk);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;
}
.yeni-hasta .eylemler{display:flex;gap:8px;margin-top:4px}

/* ---------- içerik ---------- */
.icerik{padding:20px;min-width:0}
.sayfa-tepe{
  display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap;
}
.sayfa-tepe h1{font-size:22px;font-weight:600;margin:0;letter-spacing:-.02em}
.sayfa-tepe p{margin:3px 0 0;color:var(--soluk);font-size:13.5px}
.sayfa-tepe .eylemler{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.kart{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:12px;
  overflow:hidden;margin-bottom:16px;
}
.kart-tepe{
  padding:13px 16px;border-bottom:1px solid var(--ince);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.kart-tepe h2{font-size:14.5px;font-weight:600;margin:0}
.kart-tepe .eylemler{margin-left:auto;display:flex;gap:8px}
.kart-govde{padding:16px}

/* filtre çubuğu */
.filtre{
  display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ince);
  flex-wrap:wrap;align-items:center;background:var(--yuzey-2);
}
.filtre input,.filtre select{
  padding:7px 10px;border:1px solid var(--cizgi);border-radius:7px;
  background:var(--yuzey);font-size:13px;
}

/* ---------- tablo ---------- */
.tablo-sar{overflow-x:auto}
table.veri{width:100%;border-collapse:collapse;font-size:13.5px}
table.veri th{
  text-align:left;padding:9px 14px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soluk);font-weight:600;
  border-bottom:1px solid var(--cizgi);white-space:nowrap;background:var(--yuzey-2);
}
table.veri td{padding:11px 14px;border-bottom:1px solid var(--ince);vertical-align:middle}
table.veri tr:last-child td{border-bottom:0}
table.veri tbody tr:hover{background:var(--yuzey-2)}
table.veri td.sag,table.veri th.sag{text-align:right}
.tiklanir{cursor:pointer}

.bos{padding:40px 20px;text-align:center;color:var(--soluk)}
.bos .im{font-size:26px;display:block;margin-bottom:8px;opacity:.5}

/* rozetler */
.rozet{
  display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;
  font-weight:500;white-space:nowrap;background:var(--ince);color:var(--soluk);
}
.rozet.iyi{background:var(--iyi-zemin);color:var(--iyi)}
.rozet.uyari{background:var(--uyari-zemin);color:var(--uyari)}
.rozet.kotu{background:var(--kotu-zemin);color:var(--kotu)}
.rozet.bilgi{background:var(--vurgu-zemin);color:var(--vurgu)}

/* ---------- pano ---------- */
.izgara{display:grid;gap:14px}
.izgara.dort{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.izgara.iki{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.olcum{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:12px;padding:16px}
.olcum .ad{font-size:12.5px;color:var(--soluk);display:flex;align-items:center;gap:6px}
.olcum .deger{font-size:26px;font-weight:600;margin-top:6px;letter-spacing:-.02em}
.olcum .not{font-size:12px;color:var(--soluk);margin-top:2px}

.eylem-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.eylem-kutu{
  display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:10px;
  border:1px solid var(--cizgi);background:var(--yuzey);cursor:pointer;text-align:left;
}
.eylem-kutu:hover{border-color:var(--vurgu);background:var(--vurgu-zemin)}
.eylem-kutu .im{font-size:19px}
.eylem-kutu .ad{font-weight:500;font-size:13.5px}
.eylem-kutu .aciklama{font-size:12px;color:var(--soluk)}

/* ---------- modal ---------- */
#katman{position:fixed;inset:0;z-index:100;display:none}
#katman.acik{display:block}
.perde{position:absolute;inset:0;background:rgba(12,17,22,.45);backdrop-filter:blur(2px)}
.pencere{
  position:relative;margin:6vh auto;background:var(--yuzey);border-radius:14px;
  width:min(560px,94vw);max-height:88vh;display:flex;flex-direction:column;
  box-shadow:var(--golge);border:1px solid var(--cizgi);
}
.pencere.genis{width:min(860px,96vw)}
.pencere-tepe{
  padding:15px 18px;border-bottom:1px solid var(--ince);
  display:flex;align-items:center;gap:10px;
}
.pencere-tepe h3{margin:0;font-size:15.5px;font-weight:600}
.pencere-tepe .kapat{margin-left:auto;cursor:pointer;opacity:.5;font-size:19px;line-height:1}
.pencere-tepe .kapat:hover{opacity:1}
.pencere-govde{padding:18px;overflow-y:auto}
.pencere-alt{
  padding:13px 18px;border-top:1px solid var(--ince);
  display:flex;gap:8px;justify-content:flex-end;
}

/* ---------- bildirim ---------- */
#bildirimler{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px}
.bildirim{
  background:var(--yuzey);border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);
  border-radius:9px;padding:11px 15px;box-shadow:var(--golge);max-width:360px;font-size:13.5px;
  animation:gir .18s ease-out;
}
.bildirim.hata{border-left-color:var(--kotu)}
.bildirim.basari{border-left-color:var(--iyi)}
@keyframes gir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bildirim{animation:none}}

/* ---------- sekme / iç menü ---------- */
.tablar{display:flex;gap:2px;border-bottom:1px solid var(--cizgi);overflow-x:auto}
.tablar button{
  padding:10px 14px;border:0;background:transparent;cursor:pointer;
  font-size:13.5px;color:var(--soluk);border-bottom:2px solid transparent;white-space:nowrap;
}
.tablar button.etkin{color:var(--vurgu);border-bottom-color:var(--vurgu);font-weight:500}

.detay{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
@media(max-width:820px){.detay{grid-template-columns:1fr}}
.ic-menu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:12px;padding:8px}
.ic-menu button{
  display:block;width:100%;text-align:left;padding:8px 11px;border:0;
  background:transparent;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--murekkep);
}
.ic-menu button:hover{background:var(--ince)}
.ic-menu button.etkin{background:var(--vurgu-zemin);color:var(--vurgu);font-weight:500}

/* ---------- künye listesi ---------- */
.kunye{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
.kunye dt{color:var(--soluk)}
.kunye dd{margin:0}

/* ---------- diş şeması ---------- */
.cene{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:10px}
.dis{
  width:34px;border:1px solid var(--cizgi);border-radius:7px;background:var(--yuzey);
  padding:5px 2px;cursor:pointer;text-align:center;
}
.dis:hover{border-color:var(--vurgu)}
.dis .no{font-size:10.5px;color:var(--soluk);font-family:"IBM Plex Mono",monospace}
.dis .im{font-size:15px;line-height:1.1}
.dis.bulgulu{background:var(--kotu-zemin);border-color:var(--kotu)}
.dis.tedavili{background:var(--iyi-zemin);border-color:var(--iyi)}
.dis.secili{outline:2px solid var(--vurgu);outline-offset:1px}
/* Kritik uyarıyı kapatan onay kutusu. Bandın içinde ve altta:
   önce okunacak metin, sonra onay. */
.uyari-kabul{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:13px;cursor:pointer;user-select:none;
}
.uyari-kabul input{accent-color:var(--kotu);cursor:pointer}

/* ---------- kısayollar ve sık kullanılanlar ---------- */
/* Yıldız yalnızca menüdeki maddede, sık kullanılanlar bölümünde değil:
   orada zaten hepsi yıldızlı ve tekrar etmek gürültü. */
.yan-menu a .yildiz{margin-left:auto;font-size:11px;color:var(--vurgu);opacity:.75}
.kisayol-tus{
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  border:1px solid var(--cizgi);border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;background:var(--yuzey-2);
}

/* ---------- zaman tüneli ---------- */
/* Sol kenardaki çizgi olayları tek bir dikey eksene bağlıyor: gün
   başlıkları arasında kopan bir liste, zaman çizgisi gibi okunmuyor. */
.tunel{position:relative}
.tunel-gun{
  font-size:11px;color:var(--soluk);letter-spacing:.06em;text-transform:uppercase;
  margin:16px 0 8px;padding-left:34px;
}
.tunel-gun:first-child{margin-top:0}
.tunel-satir{display:flex;gap:12px;align-items:flex-start;padding:7px 0;position:relative}
.tunel-satir::before{
  content:"";position:absolute;left:13px;top:0;bottom:0;width:1px;background:var(--ince);
}
.tunel-im{
  width:27px;height:27px;flex:0 0 27px;border-radius:50%;
  border:1px solid var(--cizgi);background:var(--yuzey);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--soluk);position:relative;z-index:1;
}
.tunel-govde{min-width:0;flex:1;padding-top:3px}
.tunel-ozet{font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}

.cene-etiket{
  text-align:center;font-size:11px;color:var(--soluk);letter-spacing:.08em;
  text-transform:uppercase;margin:10px 0 6px;
}

/* ---------- takvim ---------- */
.takvim{display:grid;grid-template-columns:62px 1fr;gap:0;font-size:13px}
.takvim .saat{
  padding:6px 8px;color:var(--soluk);font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;border-top:1px solid var(--ince);text-align:right;
}
.takvim .yuva{border-top:1px solid var(--ince);min-height:34px;padding:3px;cursor:pointer}
.takvim .yuva:hover{background:var(--yuzey-2)}
.randevu-kutu{
  background:var(--vurgu-zemin);border-left:3px solid var(--vurgu);
  border-radius:6px;padding:4px 8px;margin-bottom:3px;font-size:12.5px;
}
.randevu-kutu.geldi{background:var(--uyari-zemin);border-left-color:var(--uyari)}
.randevu-kutu.koltukta{background:var(--iyi-zemin);border-left-color:var(--iyi)}
.randevu-kutu.iptal{opacity:.5;text-decoration:line-through}
.randevu-kutu .kim{font-weight:500}
.randevu-kutu .ne{color:var(--soluk);font-size:11.5px}

/* ---------- yükleniyor ---------- */
.yukleniyor{padding:36px;text-align:center;color:var(--soluk)}
.donen{
  width:18px;height:18px;border:2px solid var(--cizgi);border-top-color:var(--vurgu);
  border-radius:50%;animation:don .7s linear infinite;display:inline-block;
}
@keyframes don{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.donen{animation:none}}

/* ---------- yönetim ekranları ---------- */

/* onay kutusu satırı: kutu solda, ad ve açıklaması sağda alt alta */
.onay-satir{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:9px 0;cursor:pointer;border-bottom:1px solid var(--ince);
}
.onay-satir:last-child{border-bottom:0}
.onay-satir input{margin-top:3px;accent-color:var(--vurgu);width:15px;height:15px}
.onay-satir input:disabled{cursor:default}
.onay-ad{display:flex;align-items:center;gap:7px;font-size:13.5px}
.onay-aciklama{display:block;font-size:12px;color:var(--soluk);margin-top:2px;line-height:1.45}
.onay-satir.yikici .onay-ad{color:var(--kotu)}

.ipucu-metin{font-size:12.5px;color:var(--soluk);margin:12px 0 0;line-height:1.5}
.form-alt{margin-top:18px;display:flex;gap:8px;justify-content:flex-end}

/* izin matrisi — gruplar sütunlara akar */
.izin-izgara{
  display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.izin-grup{border:1px solid var(--cizgi);border-radius:10px;padding:4px 14px 10px}
.izin-grup-baslik{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soluk);padding:12px 0 6px;
}
.bagli-dugme{
  margin-left:auto;border:0;background:transparent;color:var(--vurgu);
  cursor:pointer;font-size:11.5px;text-transform:none;letter-spacing:0;padding:0;
}
.bagli-dugme:hover{text-decoration:underline}

/* kullanıcı satırındaki rol + kapsam çifti */
.rol-satir{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.rol-satir:last-child{margin-bottom:0}
.kapsam{font-size:11.5px;color:var(--soluk)}

.bolum{margin-top:22px;border-top:1px solid var(--ince);padding-top:16px}
.bolum-baslik{
  margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soluk);
}
.atama-liste{display:flex;flex-direction:column;gap:6px}
.atama{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border:1px solid var(--cizgi);border-radius:8px;background:var(--yuzey-2);
}
.atama > div{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.atama-ekle{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.atama-ekle select{
  padding:7px 10px;border:1px solid var(--cizgi);border-radius:7px;
  background:var(--yuzey);font-size:13px;
}

.filtre-onay{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.filtre-onay input{accent-color:var(--vurgu)}

.sayfalama{
  display:flex;align-items:center;gap:8px;padding:11px 16px;
  border-top:1px solid var(--ince);font-size:12.5px;color:var(--soluk);
}
.sayfalama button{margin-left:0}
.sayfalama span{margin-right:auto}

/* denetim kaydındaki opak kimlik satırı taşırmasın */
.kisalt{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}

.izin-rozetleri{display:flex;flex-wrap:wrap;gap:6px}
.izin-rozetleri .rozet{font-family:"IBM Plex Mono",monospace;font-size:11px}

a.kullanici-ad{text-decoration:none}
a.kullanici-ad:hover{text-decoration:underline}

/* ---------- yaşlandırma çubukları ---------- */
.yaslandirma{display:flex;flex-direction:column;gap:10px}
.yas-satir{
  display:grid;grid-template-columns:120px 1fr 120px 90px;gap:12px;align-items:center;
  font-size:13.5px;
}
.yas-cubuk{height:12px;background:var(--ince);border-radius:6px;overflow:hidden}
.yas-cubuk span{display:block;height:100%;border-radius:6px;min-width:2px}
.yas-tutar{text-align:right;font-weight:500}
.yas-adet{text-align:right;color:var(--soluk);font-size:12.5px}

@media(max-width:720px){
  .yas-satir{grid-template-columns:1fr auto;gap:4px 10px}
  .yas-cubuk{grid-column:1 / -1;order:3}
  .yas-adet{display:none}
}

/* ---------- hasta dosyaları ---------- */
.dosya-izgara{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.dosya-kutu{
  border:1px solid var(--cizgi);border-radius:10px;background:var(--yuzey);
  padding:0;cursor:pointer;text-align:left;overflow:hidden;
  display:flex;flex-direction:column;
}
.dosya-kutu:hover{border-color:var(--vurgu)}
.dosya-gorsel{
  aspect-ratio:4/3;background:var(--ince);display:grid;place-items:center;
  overflow:hidden;
}
.dosya-gorsel img{width:100%;height:100%;object-fit:cover;display:block}
.dosya-gorsel .yer-tutucu{color:var(--soluk);font-size:18px}
.dosya-ad{
  padding:8px 10px 2px;font-size:13px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dosya-alt{padding:0 10px 9px;display:flex;gap:5px;flex-wrap:wrap}
.dosya-alt .rozet{font-size:10.5px;padding:1px 7px}

/* Büyütülmüş görüntü pencerede taşmasın */
.dosya-buyuk{
  display:block;width:100%;max-height:70vh;object-fit:contain;
  background:var(--ince);border-radius:8px;
}

.ince-baglanti{
  display:block;text-align:center;margin-top:12px;font-size:13px;color:var(--soluk);
}
.ince-baglanti:hover{color:var(--vurgu)}

/* ---------- mobil ---------- */
@media(max-width:860px){
  .kabuk{grid-template-columns:1fr}
  .yan{
    position:fixed;left:0;top:0;bottom:0;width:260px;z-index:60;
    transform:translateX(-100%);transition:transform .18s ease-out;
  }
  .yan.acik{transform:none}
  .icerik{padding:14px}
  .hizli-secim select{max-width:130px}
  .izin-izgara{grid-template-columns:1fr}
  .atama{flex-wrap:wrap}
}

/* ---- Periodontal çizelge -------------------------------------
   Çizelge 16 diş × 3 hücre geniş; genel modal genişliği yetmez.
   :has ile yalnızca perio penceresi genişletilir.            */

.pencere:has(.perio-pencere){width:min(1400px,98vw)}

.perio-ozet{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.perio-rozet{
  display:flex;flex-direction:column;gap:1px;
  background:var(--yuzey-2);border:1px solid var(--ince);
  border-radius:9px;padding:7px 11px;min-width:96px
}
.perio-rozet .ad{font-size:11px;color:var(--soluk);letter-spacing:.02em}
.perio-rozet .deger{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}

.perio-arac{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.perio-yardim{
  margin:0;flex:1 1 320px;font-size:12px;color:var(--soluk);
  background:var(--vurgu-zemin);border-radius:8px;padding:7px 10px
}
.perio-mod{font-size:12px;padding:5px 8px}

.perio-cizelge{display:flex;flex-direction:column;gap:14px}
.perio-cene-ad{
  font-size:11.5px;color:var(--soluk);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:5px
}
.perio-siralar{
  display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;
  align-items:flex-start
}

.perio-etiketler,.perio-sutun{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.perio-etiketler{width:64px;text-align:right;padding-right:4px}
.perio-etiket{
  font-size:10.5px;color:var(--soluk);height:22px;line-height:22px;
  white-space:nowrap;overflow:hidden
}

.perio-dis-no{
  font-size:11px;font-weight:600;text-align:center;height:16px;line-height:16px;
  color:var(--soluk);font-variant-numeric:tabular-nums
}
.perio-satir{display:flex;gap:2px}
.perio-ayrac{height:5px;border-top:1px dashed var(--cizgi);margin:1px 0}

.perio-hucre{
  width:24px;height:22px;padding:0;text-align:center;
  font-size:12px;font-variant-numeric:tabular-nums;
  border:1px solid var(--cizgi);border-radius:4px;
  background:var(--yuzey);color:var(--murekkep)
}
.perio-hucre.cekilme{background:var(--yuzey-2);color:var(--soluk)}
.perio-hucre:focus{
  outline:2px solid var(--vurgu);outline-offset:-1px;
  background:var(--vurgu-zemin);position:relative;z-index:1
}
.perio-hucre:disabled{background:var(--ince);border-color:var(--ince);cursor:not-allowed}

/* Derinlik rengi: 4–5 mm dikkat, 6 mm ve üstü bakım gerektirir. */
.perio-hucre.derin{background:var(--uyari-zemin);color:var(--uyari);font-weight:600}
.perio-hucre.cok-derin{background:var(--kotu-zemin);color:var(--kotu);font-weight:700}

/* Kanama ve süpürasyon renkle değil, hücrenin üst kenarındaki bir
   şeritle gösterilir: derinlik rengiyle çakışmasın.                */
.perio-hucre.kanamali{box-shadow:inset 0 3px 0 -1px var(--kotu)}
.perio-hucre.supurasyonlu{border-bottom:2px solid var(--uyari)}
.perio-hucre.kanamali.supurasyonlu{
  box-shadow:inset 0 3px 0 -1px var(--kotu);border-bottom:2px solid var(--uyari)
}

.perio-alt{display:flex;gap:2px;justify-content:center;align-items:center;height:22px}
.perio-secim{
  width:36px;font-size:10.5px;padding:1px 0;text-align:center;
  border:1px solid var(--cizgi);border-radius:4px;
  background:var(--yuzey);color:var(--murekkep)
}
.perio-secim.bos{color:var(--soluk);border-style:dashed;opacity:.45;line-height:18px}
.perio-alt input[type=checkbox]{width:13px;height:13px;margin:0}

.perio-sutun.eksik .perio-dis-no{text-decoration:line-through;opacity:.5}
.perio-sutun.eksik .perio-satir{opacity:.35}

/* ---- Stok, tedarik ve demirbaş -------------------------------- */

/* Geniş formlar: .ikili iki sütuna sabit, bu formlarda on beş alan var
   ve dar ekranda tek sütuna düşmesi gerekiyor.                     */
.form-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 14px}
.form-izgara .alan{margin-bottom:12px}

/* Tablo hücresinde ikinci satır: marka, kod, seri no gibi ikincil bilgi. */
.alt-yazi{font-size:12px;color:var(--soluk);margin-top:2px}
p.alt-yazi{margin:0 0 10px;line-height:1.5}

.onay{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;
      cursor:pointer;padding:6px 0;grid-column:1/-1}
.onay input{accent-color:var(--vurgu);width:15px;height:15px;margin-top:2px;flex-shrink:0}

.sade-liste{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--murekkep)}

/* Mal kabul kalemleri: satır satır eklenir, tek tek çıkarılabilir. */
.kalem-liste{display:flex;flex-direction:column;gap:6px}
.kalem{
  display:flex;align-items:center;gap:12px;
  background:var(--yuzey-2);border:1px solid var(--ince);
  border-radius:9px;padding:9px 12px;font-size:13.5px
}
.kalem > div:first-child{flex:1;min-width:0}
.kalem-toplam{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--cizgi);font-size:14px
}

/* ---- Katlanabilir form bölümü ------------------------------------
   Hasta formunda otuz alan var; hepsini birden göstermek her gün
   kullanılan beşini de görünmez kılıyor.                          */

form details{
  border-top:1px solid var(--ince);
  margin-top:12px;padding-top:10px
}
form details > summary{
  cursor:pointer;font-size:13px;font-weight:500;color:var(--soluk);
  list-style:none;display:flex;align-items:center;gap:7px;user-select:none
}
form details > summary::-webkit-details-marker{display:none}
form details > summary::before{
  content:"›";font-size:15px;line-height:1;
  transition:transform .15s ease;display:inline-block
}
form details[open] > summary::before{transform:rotate(90deg)}
form details > summary:hover{color:var(--murekkep)}

/* ---- Uyarı bandı --------------------------------------------
   Hasta kartının tepesinde duruyor. Bulgu yoksa hiç çizilmiyor:
   boş bir bant dikkati köreltir.                              */

.bant-yigin{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}

.uyari-bant{
  display:flex;gap:11px;align-items:flex-start;
  border-radius:11px;padding:12px 15px;font-size:13.5px;
  border:1px solid transparent
}
.uyari-bant .im{font-size:16px;line-height:1.3;flex-shrink:0}
.uyari-bant strong{display:block;margin-bottom:3px;font-weight:600}
.uyari-bant .sade-liste{margin:0;padding-left:16px}
.uyari-bant.kotu{background:var(--kotu-zemin);border-color:var(--kotu);color:var(--kotu)}
.uyari-bant.uyari{background:var(--uyari-zemin);border-color:var(--uyari);color:var(--uyari)}

/* ---- Anamnez formu ------------------------------------------ */

.anamnez-grup{margin-bottom:18px}
.anamnez-grup-ad{
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soluk);margin-bottom:6px
}

.anamnez-satir{
  display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;
  padding:9px 12px;border:1px solid var(--ince);border-radius:9px;
  margin-bottom:5px;background:var(--yuzey)
}
.anamnez-satir.kritik{border-left:3px solid var(--kotu)}

/* Yanıtlanmamış soru görünür kalsın: form bu hâlde tamamlanamıyor. */
.anamnez-satir.yanitsiz{background:var(--yuzey-2);border-style:dashed}

.anamnez-soru{display:flex;align-items:center;gap:8px;font-size:13.5px}
.anamnez-dugmeler{display:flex;gap:5px}

.anamnez-secim{
  min-width:62px;padding:5px 12px;font-size:13px;cursor:pointer;
  border:1px solid var(--cizgi);border-radius:7px;
  background:var(--yuzey);color:var(--soluk)
}
.anamnez-secim:hover:not(:disabled){border-color:var(--vurgu);color:var(--murekkep)}
.anamnez-secim.secili{
  background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-yazi);font-weight:500
}
.anamnez-secim:disabled{cursor:default;opacity:.6}

.anamnez-ek{grid-column:1/-1}
.anamnez-aciklama{
  width:100%;padding:7px 10px;font-size:13px;
  border:1px solid var(--cizgi);border-radius:7px;
  background:var(--yuzey);color:var(--murekkep)
}
.anamnez-aciklama:focus{outline:2px solid var(--vurgu);outline-offset:-1px}
.anamnez-aciklama.eksik{border-color:var(--uyari);background:var(--uyari-zemin)}

@media (max-width:560px){
  .anamnez-satir{grid-template-columns:1fr}
  .anamnez-dugmeler{justify-content:flex-start}
}

/* ============================================================
   Tedavi sunum ekranı — hastaya dönük.

   Ekran kol mesafesinden okunuyor: taban yazı boyutu uygulamanın geri
   kalanından belirgin biçimde büyük. Renk ve çizgi az; hastanın gözü
   listeye değil, tedavinin kendisine gitmeli.
   ============================================================ */

.ciplak{min-height:100vh;background:var(--zemin)}
.ciplak .icerik{max-width:900px;margin:0 auto;padding:32px 24px 64px}

.sunum-tepe{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.sunum-klinik{margin-left:auto;color:var(--soluk);font-size:14px}

.sunum-baslik{font-size:clamp(24px,4.2vw,34px);line-height:1.2;margin:0 0 6px;
  letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
.sunum-hasta{color:var(--soluk);font-size:16px;margin:0 0 18px}
.sunum-aciklama{font-size:17px;line-height:1.6;margin:0 0 26px;max-width:62ch}

.sunum-bolum{font-size:15px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--soluk);margin:30px 0 12px;font-weight:600}

.sunum-liste{display:flex;flex-direction:column;gap:10px}

.sunum-kalem{display:flex;align-items:center;gap:16px;padding:18px 20px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px}
.sunum-kalem.tamam{opacity:.7}

.sunum-sira{width:34px;height:34px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ince);color:var(--soluk);font-size:15px;font-weight:600}

.sunum-kalem-govde{flex:1;min-width:0}
.sunum-hizmet{font-size:clamp(16px,2.2vw,19px);font-weight:500;line-height:1.35;
  overflow-wrap:break-word}
.sunum-dis{color:var(--soluk);font-size:16px;margin-top:4px}

.sunum-tutar{display:flex;flex-direction:column;align-items:flex-end;
  font-size:20px;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sunum-liste-fiyat{font-size:15px;font-weight:400;color:var(--soluk);
  text-decoration:line-through}

/* Tamamlanan tedavilerde numara yok ama sutun duruyor: numarali ve
   numarasiz satirlarin metinleri ayni hizada baslasin. */
.sunum-sira.yok{background:transparent}
.sunum-tik{color:var(--iyi);font-size:22px;flex:none}

.sunum-toplam{display:flex;align-items:flex-end;gap:16px;margin-top:28px;
  padding:22px 20px;border-top:2px solid var(--cizgi)}
.sunum-toplam-ad{font-size:16px}
.sunum-not{color:var(--soluk);font-size:13.5px;margin-top:4px}
.sunum-toplam-tutar{margin-left:auto;font-size:clamp(22px,3.4vw,30px);font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}

.sunum-ilerleme{position:relative;height:30px;margin-top:22px;border-radius:15px;
  background:var(--ince);overflow:hidden}
.sunum-ilerleme-dolgu{position:absolute;inset:0 auto 0 0;background:var(--vurgu);opacity:.25}
.sunum-ilerleme-yazi{position:relative;display:flex;align-items:center;
  justify-content:center;height:100%;font-size:13.5px;color:var(--soluk)}

@media (max-width:600px){
  .sunum-baslik{font-size:26px}
  .sunum-hizmet{font-size:17px}
  .sunum-dis{font-size:15px}
  .sunum-toplam{flex-direction:column;align-items:flex-start;gap:8px}
  .sunum-toplam-tutar{margin-left:0;font-size:26px}
}

/* ============================================================
   Sekme çubuğu

   Tek sekme varken gizleniyor: bir sekmelik çubuk, ekranın üstünden
   yer çalan bir süsten ibaret olurdu.
   ============================================================ */

.sekmeler-cubuk{display:flex;gap:2px;align-items:stretch;overflow-x:auto;
  padding:0 14px;background:var(--yuzey);border-bottom:1px solid var(--cizgi);
  scrollbar-width:thin}
.sekmeler-cubuk[hidden]{display:none}

.sekme{display:flex;align-items:center;max-width:220px;flex:none;
  border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;
  background:transparent}
.sekme.etkin{background:var(--zemin);border-color:var(--cizgi)}

.sekme-ad{flex:1;min-width:0;padding:9px 6px 9px 12px;border:0;background:none;
  color:var(--soluk);font:inherit;font-size:13px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.sekme.etkin .sekme-ad{color:inherit;font-weight:500}

.sekme-kapat{border:0;background:none;color:var(--soluk);cursor:pointer;
  font-size:16px;line-height:1;padding:4px 10px 4px 4px;border-radius:6px}
.sekme-kapat:hover{background:var(--ince);color:var(--kotu)}

.sekme-govde[hidden]{display:none}