/* ============================================================
   FikaDent Operatör Paneli

   Vurgu rengi klinik uygulamasından BİLİNÇLİ OLARAK farklı: klinik teal,
   panel indigo. İki uygulama aynı kişi tarafından aynı tarayıcıda açılıyor
   ve buradaki bir tıklama bütün müşterilerin abonelik kaydını değiştiriyor.
   "Hangi ekrandayım" sorusunun bir saniye bile sürmemesi gerekir.
   ============================================================ */

:root{
  --zemin:#F2F3F7;
  --yuzey:#FFFFFF;
  --yuzey-2:#F8F9FC;
  --murekkep:#151823;
  --soluk:#5F6577;
  --cizgi:#D7DAE4;
  --ince:#E8EAF1;
  --vurgu:#3B4E9B;
  --vurgu-zemin:#E5E9F6;
  --iyi:#2C6B48;
  --iyi-zemin:#E3EEE7;
  --uyari:#95580D;
  --uyari-zemin:#F6EAD6;
  --kotu:#9B3222;
  --kotu-zemin:#F6E3DF;
  --golge:0 1px 2px rgba(21,24,35,.06), 0 8px 24px rgba(21,24,35,.06);
  --yan-genislik:236px;
}

:root[data-tema="koyu"]{
  --zemin:#0B0D14;
  --yuzey:#14172180;
  --yuzey:#141721;
  --yuzey-2:#191D29;
  --murekkep:#E7E8EE;
  --soluk:#959BAE;
  --cizgi:#282D3C;
  --ince:#1E2230;
  --vurgu:#8CA0E8;
  --vurgu-zemin:#1A2140;
  --iyi:#62B88A;
  --iyi-zemin:#14261C;
  --uyari:#D6A052;
  --uyari-zemin:#2A2114;
  --kotu:#E08270;
  --kotu-zemin:#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ş ---------- */
.giris-sayfa{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(1100px 560px at 15% -10%, var(--vurgu-zemin), transparent 60%),
    var(--zemin);
}
.giris-kart{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:16px;
  padding:30px;width:min(400px,94vw);box-shadow:var(--golge);
}
.giris-kart .alt{color:var(--soluk);font-size:13px;margin:4px 0 22px}

/* ---------- form ---------- */
.alan{margin-bottom:13px}
.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);
}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:2px solid var(--vurgu);outline-offset:-1px;border-color:var(--vurgu);
}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ipucu-metin{font-size:12.5px;color:var(--soluk);margin:10px 0 0;line-height:1.5}
.form-alt{margin-top:16px;display:flex;gap:8px;justify-content:flex-end}

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

/* ---------- kabuk ---------- */
.kabuk{display:grid;grid-template-columns:var(--yan-genislik) 1fr;min-height:100vh}
.yan{background:var(--yuzey);border-right:1px solid var(--cizgi);
     display:flex;flex-direction:column}
.yan-tepe{padding:18px 16px;border-bottom:1px solid var(--ince)}
.marka{display:flex;align-items:center;gap:10px}
.marka-im{
  width:30px;height:30px;border-radius:9px;background:var(--vurgu);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;
}
.marka-ad{font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.15}
.marka-alt{font-size:10.5px;color:var(--soluk);letter-spacing:.08em;text-transform:uppercase}

.yan-menu{padding:12px 10px;flex:1}
.yan-menu .baslik{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soluk);
  padding:12px 10px 5px;font-weight:600;
}
.yan-menu a{
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;
  color:var(--murekkep);font-size:13.5px;
}
.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:16px;text-align:center;opacity:.75}

.yan-alt{padding:14px 16px;border-top:1px solid var(--ince)}
.kullanici-ad{font-size:12.5px;margin-bottom:8px}
.kullanici-ad .rol{color:var(--soluk);font-size:11.5px}

.govde{display:flex;flex-direction:column;min-width:0}
.ust{
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  border-bottom:1px solid var(--cizgi);background:var(--yuzey);
}
.ikon-dugme{
  border:1px solid var(--cizgi);background:var(--yuzey);border-radius:8px;
  padding:6px 10px;cursor:pointer;
}
.buyuyen{flex:1;min-width:0}
.arama-sar{display:flex;align-items:center;gap:8px;max-width:360px;
           border:1px solid var(--cizgi);border-radius:9px;padding:6px 11px;background:var(--yuzey)}
.arama-sar input{border:0;outline:0;background:transparent;width:100%;font-size:13px}

.icerik{padding:20px;min-width:0}

/* ---------- sayfa ---------- */
.sayfa-tepe{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.sayfa-tepe h1{font-size:21px;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{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:10.5px;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}

/* ---------- rozet ---------- */
.rozet{display:inline-block;padding:2px 9px;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)}

/* ---------- ölçüm ---------- */
.izgara{display:grid;gap:14px}
.izgara.dort{grid-template-columns:repeat(auto-fit,minmax(180px,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)}
.olcum .deger{font-size:25px;font-weight:600;margin-top:6px;letter-spacing:-.02em;
              font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.olcum .not{font-size:12px;color:var(--soluk);margin-top:2px}
.olcum.dikkat{border-color:var(--uyari)}
.olcum.dikkat .deger{color:var(--uyari)}

/* durum dağılımı çubuğu */
.dagilim{display:flex;height:10px;border-radius:6px;overflow:hidden;
         background:var(--ince);margin:10px 0 12px}
.dagilim span{display:block}
.dagilim-aciklama{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px}
.dagilim-aciklama span{display:inline-flex;align-items:center;gap:6px;color:var(--soluk)}
.nokta{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ---------- modal ---------- */
#katman{position:fixed;inset:0;z-index:100;display:none}
#katman.acik{display:block}
.perde{position:absolute;inset:0;background:rgba(11,13,20,.5);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-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}
.bildirim.hata{border-left-color:var(--kotu)}
.bildirim.basari{border-left-color:var(--iyi)}

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

.zaman-akisi{display:flex;flex-direction:column;gap:0}
.olay{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:10px 0;
      border-bottom:1px solid var(--ince);font-size:13px}
.olay:last-child{border-bottom:0}
.olay .ne-zaman{color:var(--soluk);font-family:"IBM Plex Mono",monospace;font-size:12px}
.olay .aciklama{color:var(--soluk);font-size:12.5px;margin-top:2px}

.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}}

@media(max-width:860px){
  .kabuk{grid-template-columns:1fr}
  .yan{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:60;
       transform:translateX(-100%);transition:transform .18s ease-out}
  .yan.acik{transform:none}
  .icerik{padding:14px}
  .olay{grid-template-columns:1fr;gap:3px}
  .ikili{grid-template-columns:1fr}
}