/*
  Health Motion yonetim paneli.

  Renkler ve olculer masaustu uygulamasindaki UITheme ile AYNI: panel, uygulamanin bir
  parcasi gibi gorunmeli. Ayri bir tasarim dili, ayni sistemin iki farkli urun gibi
  hissedilmesi demek olurdu.

  Sayilar ESIT GENISLIKLI bir yazi tipiyle (Consolas): bu ekrandaki sayilarin cogu alt
  alta duran olculer. Orantili bir yazi tipinde "1" ile "8" farkli yer kaplar, sutun her
  satirda kayar ve goz onu tarayamaz.
*/

:root {
  /* --- PhysioTech marka renkleri ---
     Ikisi de LOGODAN OLCULDU (saydam olmayan piksellerin kanal ortalamasi),
     goz karariyla secilmedi: yesil #4AA631, mavi #146DBF.

     Logo yesili arayuzde DOGRUDAN kullanilmiyor: beyaz uzerinde kontrast orani
     3.09 -- ne kendisi yazi olarak okunuyor ne de uzerine beyaz yazi konabiliyor
     (AA esigi 4.5). Marka rengine "sadik" kalmak icin okunmayan bir panel
     birakmanin karsiligi yok. Bu yuzden logo rengi ISARET icin, etkilesim icin
     bir ton koyusu (--vurgu, kontrast 4.59). Ikisi ayni ailede. */
  --marka-yesil:  #4AA631;
  --marka-mavi:   #146DBF;

  --zemin:        #F7F9F6;
  --yuzey:        #FFFFFF;
  --cizgi:        #E3E8DF;
  --cizgi-koyu:   #CFD7CA;
  --murekkep:     #16201A;
  --murekkep-2:   #53605A;
  --murekkep-3:   #869089;

  --vurgu:        #3B8527;
  --vurgu-koyu:   #347522;
  --vurgu-yumusak:#EAF4E6;

  /* Mavi "bilgi / gezinme / olcum" tasiyor, yesil "yap / dogru / ilerle".
     Ikisi ayni isi paylassaydi kullanici hangisinin ne demek oldugunu
     ogrenemez, ikisi de anlamsiz sus olurdu. */
  --bilgi:        #146DBF;
  --bilgi-yumusak:#E6F0FA;

  --okra:         #A8752A;
  --tugla:        #AE443C;

  --yazi: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sayi: Consolas, "SF Mono", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font: 14px/1.45 var(--yazi);
}

/* --- Ust serit --- */

.ust {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  height: 60px;
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}

.marka { display: flex; align-items: center; gap: 10px; }

/* Logo YUKSEKLIGE gore olceklenmiyor, genislige gore: serit yuksekligi 60px ve
   logo 722x345 oranindaydi. Yukseklikten kisitlamak, dar ekranda logoyu once
   ezip sonra tasitirdi. */
.marka img {
  height: 34px;
  width: auto;
  display: block;
}

.marka .alt {
  color: var(--murekkep-3);
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
}

.sekmeler { display: flex; gap: 4px; }

.sekmeler a {
  padding: 7px 14px;
  border-radius: 8px;
  color: var(--murekkep-2);
  text-decoration: none;
}

.sekmeler a:hover { background: var(--zemin); }
.sekmeler a.etkin { background: var(--vurgu); color: #fff; }

.cikis { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.cikis .kim { color: var(--murekkep-2); }

.cikis button {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
  background: var(--yuzey);
  color: var(--murekkep-2);
  cursor: pointer;
}

.cikis button:hover { background: var(--zemin); }

/* Alt bosluk digerlerinden fazla: en alttaki kart ekranin dibine yapisik durmasin. */
main { max-width: 1180px; margin: 0 auto; padding: 28px 28px 60px; }

/* --- Ozet sayilar --- */

.ozet {
  display: flex;
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.ozet > div {
  flex: 1;
  background: var(--yuzey);
  padding: 16px 18px;
}

.ozet .sayi { display: block; font: 600 26px/1.1 var(--sayi); }
.ozet .etiket { color: var(--murekkep-3); font-size: 12px; }

/* --- Suzgecler --- */

.suzgec {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.suzgec label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--murekkep-3); }

.suzgec select, .suzgec button {
  font: 14px var(--yazi);
  padding: 7px 10px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
  background: var(--yuzey);
  color: var(--murekkep);
}

/* --- Liste --- */

.liste {
  width: 100%;
  border-collapse: collapse;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  overflow: hidden;
}

.liste th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--murekkep-3);
  padding: 11px 14px;
  border-bottom: 1px solid var(--cizgi);
  background: #FBFBF9;
}

/* Satirlar KUTU DEGIL GRUP: her satiri ayri bir karta koymak yerine tek bir beyaz
   yuzeye sac teli cizgiyle ayiriyoruz. On iki esit agirlikta kutu, goze hicbir sey
   anlatmiyor. */
.liste td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}

.liste tbody tr:last-child td { border-bottom: none; }
.liste tbody tr:hover { background: #FAFAF8; }

.sag { text-align: right; }
.sayi-yazi { font-family: var(--sayi); font-size: 13px; }

.baslik { color: var(--murekkep); }
.ayrinti { color: var(--murekkep-3); font-size: 12px; }

.w-zaman  { width: 128px; }
.w-kisi   { width: 130px; }
.w-tur    { width: 150px; }
.w-makine { width: 150px; }
.w-skor   { width: 78px; }
.w-surum  { width: 74px; }

/* Tur rengi: uygulamadaki KindColor ile ayni mantik -- silme ve hata kirmizi,
   kayit yesil, tamamlanan oturum okra, gerisi notr. */
.tur { color: var(--murekkep-2); }
.t-giris_basarisiz, .t-poz_silindi, .t-egzersiz_silindi, .t-bulut_hata,
.t-kalibrasyon_basarisiz { color: var(--tugla); }
.t-poz_kaydedildi, .t-egzersiz_kaydedildi { color: var(--vurgu); }
.t-egzersiz_bitti { color: var(--okra); }

.skor { font-weight: 600; }
.skor.iyi   { color: var(--vurgu); }
.skor.orta  { color: var(--okra); }
.skor.zayif { color: var(--tugla); }

.silinmis .baslik { color: var(--murekkep-3); text-decoration: line-through; }

.rozet {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vurgu-yumusak);
  color: var(--vurgu);
  font-size: 12px;
}

h2 { font: 300 22px/1.2 var(--yazi); margin: 26px 0 12px; }
h2 .ayrinti { font-size: 13px; }

.bos { color: var(--murekkep-3); padding: 22px 0; }

.not {
  color: var(--murekkep-2);
  font-size: 13px;
  border-left: 3px solid var(--vurgu);
  padding: 2px 0 2px 12px;
  margin-top: 20px;
}

.sayfalar { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 18px 0; }
.sayfalar a { color: var(--vurgu); text-decoration: none; }
.sayfalar span { color: var(--murekkep-3); font-family: var(--sayi); font-size: 13px; }

/* --- Giris --- */

.giris-kutu {
  max-width: 380px;
  margin: 60px auto;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 30px;
}

.giris-kutu h1 { font: 300 26px/1.2 var(--yazi); margin: 0 0 10px; }
.giris-kutu .aciklama { color: var(--murekkep-2); font-size: 13px; margin: 0 0 20px; }

.giris-kutu label { display: block; font-size: 12px; color: var(--murekkep-3); margin-bottom: 14px; }

.giris-kutu input {
  display: block;
  width: 100%;
  margin-top: 5px;
  font: 15px var(--yazi);
  padding: 9px 11px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
  background: var(--yuzey);
  color: var(--murekkep);
}

.giris-kutu input:focus { outline: 2px solid var(--vurgu); outline-offset: 1px; border-color: transparent; }

.birincil {
  width: 100%;
  font: 600 15px var(--yazi);
  padding: 11px;
  border: none;
  border-radius: 9px;
  background: var(--vurgu);
  color: #fff;
  cursor: pointer;
}

.birincil:hover { background: var(--vurgu-koyu); }

.hata {
  background: #F8E8E6;
  color: #8E332C;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 16px;
}

/* ===========================================================================
   SURUM 4 -- yonetim ekranlari
   ===========================================================================
   Panel bu surumde okumaktan yonetmeye gecti: hasta ekleme, gorev atama,
   paylasim. Yeni siniflar ayni renk ve olculeri kullaniyor -- ayri bir tasarim
   dili, ayni sistemin iki farkli urun gibi hissedilmesi demek olurdu.
*/

/* main kurali BURADA TANIMLANMIYOR -- yukarida, bir kez tanimli.
   Burada ikinci bir tane vardi ve icinde `margin: 0 auto` yoktu; sonra geldigi
   icin oncekini eziyordu ve sayfa ortalanmaktan cikip sola kayiyordu. Ayni
   secici icin ikinci bir kural yazmak, hangi ozelligin eksik kaldigini
   gormeden birinin digerini ezmesi demek. */

.kutu {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 18px;
}

.kutu h1, .kutu h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kutu h2 { font-size: 15px; }

/* Sayi rozetleri: baslikta kac kayit oldugunu soyler. */
.kutu .sayi {
  font: 12px var(--sayi);
  color: var(--murekkep-2);
  background: var(--zemin);
  border-radius: 20px;
  padding: 2px 9px;
}

/* --- Islem sonucu bildirimi ---
   POST -> Redirect -> GET akisinda tasindigi icin sayfa yenilendiginde islem
   tekrarlanmiyor; mesaj bir kez gorunup kayboluyor. */
.flash {
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 14px;
}

.flash.iyi  { background: var(--vurgu-yumusak); color: #2C6B1F; }
.flash.kotu { background: #F8E8E6; color: #8E332C; }

/* --- Dizelge (tablo) --- */

.dizelge { width: 100%; border-collapse: collapse; font-size: 13px; }

.dizelge th {
  text-align: left;
  font-weight: 500;
  color: var(--murekkep-3);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}

.dizelge td {
  padding: 10px;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}

.dizelge tr:last-child td { border-bottom: none; }
.dizelge tbody tr:hover { background: #FBFBF9; }

/* Kapali hesap/kurum: silik ama OKUNUR. Tamamen soluklastirmak, kapali bir
   hesabi bulmak isteyen kisiye is cikarirdi. */
.dizelge tr.kapali td { opacity: .55; }

.ikincil { color: var(--murekkep-3); font-size: 12px; display: block; }
.dizelge .skor { font: 600 13px var(--sayi); }

/* --- Hasta secim seridi --- */

.hasta-secim { display: flex; flex-wrap: wrap; gap: 6px; }

.hasta-secim a {
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid var(--cizgi);
  color: var(--murekkep-2);
  text-decoration: none;
  font-size: 13px;
}

.hasta-secim a:hover { border-color: var(--cizgi-koyu); }

.hasta-secim a.etkin {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #fff;
}

/* --- Formlar --- */

.alan-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }

.alan-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--murekkep-2);
}

.alan-form .ikincil { display: inline; }

input[type=text], input[type=password], input[type=number],
input[type=date], select {
  font: 14px var(--yazi);
  padding: 8px 10px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
  background: var(--yuzey);
  color: var(--murekkep);
  min-width: 170px;
}

input:focus, select:focus {
  outline: 2px solid var(--vurgu);
  outline-offset: -1px;
}

.alan-form button, .acilir button, .satir-form button {
  font: 600 14px var(--yazi);
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--vurgu);
  color: #fff;
  cursor: pointer;
}

.alan-form button:hover { background: var(--vurgu-koyu); }

/* Ikincil eylem: metin gibi gorunen dugme. "Kapat" ve "Kaldir" gibi geri
   alinabilir ama dikkat isteyen isler burada -- birincil yesil dugmeyle ayni
   agirlikta gorunmeleri, yanlis tiklamayi kolaylastirirdi. */
button.sade {
  background: none;
  color: var(--murekkep-2);
  border: 1px solid var(--cizgi-koyu);
  padding: 7px 12px;
  font-weight: 500;
}

button.sade:hover { border-color: var(--tugla); color: var(--tugla); }

.satir-form { display: inline-block; margin: 0; }
.satir-form select { min-width: 150px; }

.islemler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.islemler a { color: var(--vurgu); text-decoration: none; font-size: 13px; }
.islemler a:hover { text-decoration: underline; }

/* --- Acilir bolum ---
   Satir basina dort dugme yerine tek bir ozet. Hepsi acikta olsaydi, gunde
   yirmi kez bakilan hasta listesi bir dugme duvarina donerdi. */
.acilir { display: inline-block; }

.acilir summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--vurgu);
  list-style: none;
  padding: 7px 12px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
}

.acilir summary::-webkit-details-marker { display: none; }
.acilir summary:hover { border-color: var(--vurgu); }

.acilir[open] summary { background: var(--vurgu-yumusak); border-color: var(--vurgu); }

.acilir form {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 10px 0 2px;
  flex-wrap: wrap;
}

.acilir input[type=text], .acilir input[type=number] { min-width: 130px; }
.acilir input[type=number] { min-width: 70px; }

/* --- Gun secici --- */

.gunler {
  display: flex;
  gap: 4px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
  padding: 8px 10px 10px;
  margin: 0;
}

.gunler legend { font-size: 12px; color: var(--murekkep-3); padding: 0 4px; }

.gun { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.gun input { margin: 0; }

/* --- Ipucu ---
   Ekranin altinda duran, kurali aciklayan kisa metin. Kullanicinin "neden
   boyle" diye sormasi gereken her yerde bir tane var. */
.ipucu {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--murekkep-3);
  line-height: 1.5;
}

.ipucu strong { color: var(--murekkep-2); }

.kutu .rozet {
  display: inline-block;
  font-size: 11px;
  border-radius: 20px;
  padding: 2px 8px;
  background: var(--zemin);
  color: var(--murekkep-2);
}

.kutu .rozet.iyi  { background: var(--vurgu-yumusak); color: #2C6B1F; }
.kutu .rozet.kotu { background: #F8E8E6; color: #8E332C; }

.cikis .kim .rol {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--murekkep-3);
}

code {
  font: 13px var(--sayi);
  background: var(--zemin);
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: .5px;
}

/* Giris ekranindaki logo. Panelin ustundekinden buyuk: giris sayfasinda
   marka tek basina duruyor ve ilk izlenimi o veriyor. */
.giris-logo {
  height: 62px;
  width: auto;
  display: block;
  margin: 0 auto 18px;
}

/* ===========================================================================
   UST SERIT -- iki kademeli menu (olculerek duzeltildi)
   ===========================================================================
   Once on bir baglanti tek sirada duruyordu. Canli panelde OLCULDU: 1147 piksellik
   bir pencerede serit 1297 piksel istiyor, yani 123 piksel tasiyor ve tasan kisimda
   CIKIS DUGMESI kaliyordu. Yaziyi kucultmek bunu gizlerdi ama cozmezdi: on bir
   hedef, hangi olcude olursa olsun tek bakista taranamaz.

   Simdi gunluk is ustte (dort-bes sekme), seyrek kullanilanlar sagdaki hesap
   menusunde. Ayrica serit SARABILIYOR: dar bir pencerede ikinci satira gecip
   tasmaktansa buyuyor -- gizlenen bir dugme, kucuk bir dugmeden daha kotudur. */

.ust {
  flex-wrap: wrap;
  height: auto;
  min-height: 60px;
  padding: 8px 24px;
  row-gap: 6px;
}

.marka { text-decoration: none; }

.sekmeler {
  flex-wrap: wrap;
  flex: 1;
  row-gap: 4px;
}

/* --- Hesap menusu --- */

.hesap-menu { position: relative; margin-left: auto; }

.hesap-menu summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 9px;
  white-space: nowrap;
}

.hesap-menu summary::-webkit-details-marker { display: none; }
.hesap-menu summary:hover { border-color: var(--cizgi-koyu); background: var(--zemin); }
.hesap-menu[open] summary { border-color: var(--vurgu); background: var(--vurgu-yumusak); }

/* Ok isareti: ayri bir gorsel indirmeden, sinirlardan cizilen ucgen. */
.hesap-menu summary::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--murekkep-3);
}

.hesap-menu .kim { font-size: 13px; line-height: 1.25; }
.hesap-menu .kim .rol { display: block; font-style: normal; font-size: 11px; color: var(--murekkep-3); }

.hesap-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 210px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 11px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(20, 32, 26, .12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hesap-liste a {
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--murekkep-2);
  text-decoration: none;
  font-size: 14px;
}

.hesap-liste a:hover { background: var(--zemin); color: var(--murekkep); }
.hesap-liste a.etkin { background: var(--vurgu); color: #fff; }

/* Cikis, ayirici cizginin altinda: geri alinamaz olmasa da digerlerinden farkli
   bir is ve yanlislikla tiklanmamali. */
.hesap-liste form {
  margin: 4px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--cizgi);
}

.hesap-liste button {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--tugla);
  font: 14px var(--yazi);
  cursor: pointer;
}

.hesap-liste button:hover { background: #F8E8E6; }

/* --- Paylasim paneli ---
   Uc paylasim yolu, aralarinda ayrim olmadan alt alta duruyordu ve hangisinin ne
   yaptigi ancak dugmeye basinca anlasiliyordu. Her yolun artik basligi ve tek
   cumlelik aciklamasi var. */

.pay-panel[open] { display: block; }

.pay-yollar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  padding: 14px 2px 4px;
}

.pay-yol h4 {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--murekkep);
}

.pay-yol > p {
  margin: 0 0 9px;
  font-size: 12px;
  color: var(--murekkep-3);
  line-height: 1.45;
}

.pay-yol > p strong { color: var(--murekkep-2); }
.pay-yol .yok { color: var(--murekkep-3); font-style: italic; }

.pay-yol form { display: flex; gap: 7px; align-items: flex-end; flex-wrap: wrap; padding: 0; }
.pay-yol input[type=text], .pay-yol select { min-width: 0; flex: 1; }

/* Sure alani ve birimi BIRLIKTE: "14" yazan etiketsiz bir kutu, neyin sayisi
   oldugunu soylemiyordu ve aciklama yalnizca title ozniteligindeydi -- yani
   fareyi uzerinde bekletmeyen kimse goremiyordu. */
.kod-sure { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--murekkep-3); }
.kod-sure span { display: flex; align-items: center; gap: 6px; color: var(--murekkep-2); }
.kod-sure input { width: 68px; min-width: 0; }

/* Herkese acik yayin AYIRICI CIZGININ ALTINDA: ozel paylasimla ayni yigina
   koymak, sonucu bambaska olan iki isi esit gosteriyordu. */
.pay-yayin {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--cizgi);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pay-yayin p { margin: 0; font-size: 12.5px; color: var(--murekkep-3); flex: 1; min-width: 240px; line-height: 1.5; }
.pay-yayin p strong { color: var(--murekkep-2); }

/* --- Hiza duzeltmesi ---
   `.sag` (0,1,0) ile `.liste th` (0,1,1) carpisiyordu: basliga `class="sag"`
   yazilmis olmasina ragmen th SOLDA kaliyor, altindaki sayi SAGDA duruyordu --
   yani sutun basligi ile icerigi hizalanmiyordu.
   Ozgulluk esitlenerek cozuluyor; `!important` gerekmiyor. */
.liste th.sag,
.dizelge th.sag { text-align: right; }

/* Sayi sutunlari: baslik da sayi yazi tipiyle olculmez ama SAGA dayanmasi,
   gozun sutunu tek dikey cizgide taramasini sagliyor. */
.liste td.sag, .dizelge td.sag { text-align: right; }

/* Kisi seridindeki rol rozeti: yalnizca hasta olmayanlarda cikiyor. */
.hasta-secim em {
  font-style: normal;
  font-size: 11px;
  opacity: .7;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--zemin);
}

.hasta-secim a.etkin em { background: rgba(255,255,255,.22); }

/* Acilir icindeki kucuk etiketli alanlar (rol / kurum secimi). */
.acilir label.mini {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--murekkep-3);
}

.acilir label.mini select { min-width: 150px; }

.mini-not {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--murekkep-3);
  line-height: 1.45;
}

.mini-not strong { color: var(--murekkep-2); }

/* panel.php'nin uc sekmesinde sayfa basligi yoktu; diger her sayfada vardi.
   Menunun icine tasindiktan sonra oraya dusen kullaniciya nerede oldugunu
   soyleyen hicbir sey kalmiyordu. */
.sayfa-basligi {
  font: 300 26px/1.2 var(--yazi);
  margin: 0 0 18px;
}