* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  color: #1f2937;
  min-height: 100vh;
}

/* ============================================================
   GİRİŞ EKRANI
   ============================================================ */
body.giris-sayfa {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.giris-kart {
  background: #ffffff;
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  padding: 36px 28px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.giris-logo {
  font-size: 46px;
  line-height: 1;
}

/* Giriş ekranındaki kurum logosu (varsa emoji yerine gösterilir). */
.giris-logo-img {
  max-height: 84px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.giris-kart h1 {
  font-size: 24px;
  color: #1e3a8a;
  margin-top: 8px;
}

.giris-alt {
  color: #6b7280;
  font-size: 14px;
  margin: 6px 0 24px;
}

.giris-kart .alan {
  text-align: left;
  margin-bottom: 16px;
}

.giris-kart .giris-btn {
  width: 100%;
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s;
}

.giris-kart .giris-btn:hover {
  background: #1d4ed8;
}

.giris-ipucu {
  margin-top: 18px;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.6;
}

/* ============================================================
   PANEL — ÜST BAR
   ============================================================ */
body.panel-sayfa {
  background: #f1f5f9;
}

.ust-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #1e3a8a;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  z-index: 30;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.menu-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.26);
}

.marka {
  font-size: 19px;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

/* Üst bardaki kurum logosu (Ayarlar → Kurum Bilgileri'nden gelir). */
.marka-logo {
  height: 38px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  padding: 3px 5px;
}

.marka #markaAd {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ust-sag {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.aktif-ad {
  font-size: 14px;
  opacity: 0.9;
}

.cikis-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.cikis-btn:hover {
  background: #dc2626;
}

/* ============================================================
   PANEL — SOL MENÜ (kayan)
   ============================================================ */
.kenar-menu {
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  width: 250px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 25;
  overflow-y: auto;
  padding: 12px 0;
}

body.menu-acik .kenar-menu {
  transform: translateX(0);
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.08);
}

/* Menü grupları (akordeon) */
.menu-grup {
  border-bottom: 1px solid #f1f5f9;
}

.grup-baslik {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.grup-baslik:hover {
  background: #f8fafc;
}

.grup-ok {
  color: #9ca3af;
  transition: transform 0.2s;
}

.menu-grup.acik .grup-ok {
  transform: rotate(90deg);
}

.grup-govde {
  display: none;
  padding: 2px 0 8px;
  background: #fafbfc;
}

.menu-grup.acik .grup-govde {
  display: block;
}

.menu-oge {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 18px 10px 42px;
  font-size: 14px;
  color: #4b5563;
  transition: background 0.12s, color 0.12s;
}

.menu-oge:hover {
  background: #eff6ff;
  color: #2563eb;
}

.menu-oge.secili {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
  border-left: 3px solid #2563eb;
  padding-left: 39px;
}

/* Mobilde menü açıkken arkayı karartan perde */
.perde {
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
  z-index: 20;
}

body.menu-acik .perde {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   PANEL — İÇERİK ALANI
   ============================================================ */
.icerik {
  margin-top: 60px;
  padding: 26px 18px;
  transition: margin-left 0.25s ease;
}

/* Geniş ekranda menü açılınca içerik sağa kayar (perde gizli) */
@media (min-width: 900px) {
  body.menu-acik .icerik {
    margin-left: 250px;
  }
  .perde {
    display: none;
  }
}

.ekran {
  display: none;
  max-width: 1000px;
  margin: 0 auto;
}

.ekran.aktif {
  display: block;
}

.ekran-baslik {
  margin-bottom: 20px;
}

.ekran-baslik h2 {
  font-size: 22px;
  color: #1e3a8a;
}

.ekran-alt {
  color: #6b7280;
  font-size: 14px;
  margin-top: 4px;
}

/* Karşılama ekranı */
.hosgeldin {
  text-align: center;
  padding: 70px 20px;
  color: #475569;
}

.hosgeldin-ikon {
  font-size: 58px;
}

.hosgeldin h2 {
  color: #1e3a8a;
  margin: 14px 0 8px;
}

/* ============================================================
   KART, FORM, TABLO (Kullanıcı Tanım ekranında kullanılır)
   ============================================================ */
.kart {
  background: #ffffff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(30, 58, 138, 0.08);
  margin-bottom: 24px;
}

.kart h3 {
  font-size: 18px;
  margin-bottom: 18px;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Form --- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.alan {
  display: flex;
  flex-direction: column;
}

.alan label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #374151;
}

.zorunlu {
  color: #dc2626;
}

/* "(opsiyonel)" etiketi — zorunlu olmayan alanların yanında soluk gri not. */
.opsiyonel {
  color: #9ca3af;
  font-weight: 400;
  font-size: 0.85em;
}

/* Form alanı altındaki küçük açıklama/ipucu metni. */
.alan-ipucu {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* Hediye adedi vurgusu (paket satış listesi + üye paket durumları tabloları). */
.hediye-not {
  color: #059669;
  font-weight: 700;
}

/* Ödeme yöntemi "çek"leri (ücretsiz / paket onay kutuları). */
.cek-secim {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 8px 0 2px;
}
.cek-satir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}
.cek-satir input {
  width: auto;
  margin: 0;
  cursor: pointer;
}

/* Tablo içinde küçük renkli rozet (ücretsiz / paket işaretleri için). */
.isaret-rozet {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 4px;
}
.isaret-rozet.ucretsiz  { background: #dcfce7; color: #166534; }
.isaret-rozet.paket     { background: #ede9fe; color: #5b21b6; }
.isaret-rozet.nakit     { background: #fef3c7; color: #92400e; }
.isaret-rozet.grupanya  { background: #fce7f3; color: #9d174d; }
.isaret-rozet.hediye-karti { background: #ccfbf1; color: #115e59; }
.isaret-rozet.randevulu { background: #dbeafe; color: #1e40af; }
.isaret-rozet.borc      { background: #fee2e2; color: #991b1b; }
.isaret-rozet.vip       { background: #fef08a; color: #713f12; }
.isaret-rozet.ozel-oda  { background: #e0e7ff; color: #3730a3; }
.isaret-rozet.ozel-musteri { background: #cffafe; color: #155e75; }

/* İşaret taşımayan hücreler için soluk tire. */
.rozet-yok { color: #9ca3af; }

.alan input,
.alan select {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.alan input:focus,
.alan select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.buton-alani {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Vazgeç butonu (düzenleme modundan çıkar) */
.vazgec-btn {
  background: #e5e7eb;
  color: #374151;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.vazgec-btn:hover {
  background: #d1d5db;
}

button[type="submit"] {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

button[type="submit"]:hover {
  background: #1d4ed8;
}

/* --- Mesaj --- */
.mesaj {
  margin-top: 14px;
  font-size: 14px;
  min-height: 20px;
}

.mesaj.basari {
  color: #047857;
}

.mesaj.hata {
  color: #dc2626;
}

/* --- Rozet (sayaç) --- */
.rozet {
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* --- Tablo --- */
.tablo-sarmal {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead th {
  background: #f3f4f6;
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}

tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid #f0f1f3;
}

tbody tr:hover {
  background: #f9fafb;
}

/* Şifre, güvenlik için gerçek değeriyle değil maskelenmiş gösterilir */
.sifre-mask {
  color: #9ca3af;
  letter-spacing: 2px;
}

.sil-btn {
  background: #fee2e2;
  color: #b91c1c;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.sil-btn:hover {
  background: #fecaca;
}

/* Düzenle butonu — sil butonunun solunda durur */
.duzenle-btn {
  background: #dbeafe;
  color: #1d4ed8;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 6px;
  transition: background 0.15s;
}

.duzenle-btn:hover {
  background: #bfdbfe;
}

/* ============================================================
   RENK COMBOSU (Ödeme Yöntemi ekranı)
   ============================================================ */
/* Renk <select> + canlı önizleme kutusu yan yana */
.renk-secim {
  display: flex;
  align-items: center;
  gap: 10px;
}

.renk-secim select {
  flex: 1;
}

/* Formda seçili rengi gösteren küçük kare önizleme */
.renk-onizleme {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  visibility: hidden; /* renk seçilince JS görünür yapar */
}

/* Tabloda renk hücresi: renkli yuvarlak çip + renk adı */
.renk-cip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.renk-kutu {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex: none;
}

/* ============================================================
   ÇALIŞMA CETVELİ — İZİNLİ SEÇİMİ (form)
   ============================================================ */
/* "İzinli" onay kutusu: tıklanabilir geniş etiket */
.izinli-secim {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #9a3412;
}

.izinli-secim input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #f59e0b;
  cursor: pointer;
  flex: none;
}

.izinli-secim strong {
  color: #b45309;
}

/* İzinli işaretliyken saat alanları gizlenir */
.saat-alan.gizli {
  display: none;
}

/* Formdaki "Sil" butonu (cetvel düzenleme modunda görünür) */
.cetvel-sil-btn {
  background: #fee2e2;
  color: #b91c1c;
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.cetvel-sil-btn:hover {
  background: #fecaca;
}

/* ============================================================
   ÇALIŞMA CETVELİ — TAKVİM
   ============================================================ */
.takvim-kart {
  overflow-x: auto; /* dar ekranda takvim yatay kaydırılabilir */
}

/* Üst şerit: ‹ Ay Yıl › ........ [Bugün] */
.takvim-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.takvim-gezinme {
  display: flex;
  align-items: center;
  gap: 12px;
}

.takvim-baslik {
  font-size: 18px;
  font-weight: 700;
  color: #1e3a8a;
  min-width: 160px;
  text-align: center;
  margin: 0;
}

.takvim-nav {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.takvim-nav:hover {
  background: #dbeafe;
}

.takvim-bugun {
  background: #1e3a8a;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.takvim-bugun:hover {
  background: #16306e;
}

/* Çizelgeyi PDF olarak yazdır — çizelgenin altında, sağa yaslı */
.cetvel-yazdir-alani {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.cetvel-yazdir-btn {
  background: #0f766e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.cetvel-yazdir-btn:hover {
  background: #115e59;
}

/* Haftalık çizelge ızgarası: solda personel sütunu (150px) + 7 gün sütunu */
.haftalik-cetvel {
  display: grid;
  grid-template-columns: 150px repeat(7, minmax(92px, 1fr));
  gap: 6px;
  min-width: 820px; /* 8 sütun rahat sığsın; dar ekranda kart yatay kaydırır */
}

/* Üst-sol köşe ("Personel" başlığı) — yatay kayarken sabit kalır */
.hc-kose {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
}

/* Gün başlığı (üst satır: gün adı + tarih numarası) */
.hc-gun {
  text-align: center;
  padding: 6px 2px;
  border-bottom: 2px solid #eef2f7;
}

.hc-gun-ad {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hc-gun-no {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: #374151;
  margin-top: 3px;
}

.hc-gun.haftasonu .hc-gun-ad {
  color: #b45309;
}

.hc-gun.bugun {
  border-bottom-color: #2563eb;
}

.hc-gun.bugun .hc-gun-no {
  background: #2563eb;
  color: #fff;
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0 6px;
}

/* Sol sütun: personel adı (sol kenar rengi JS ile personele göre atanır) — yatay kayarken sabit */
.hc-personel {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 4px solid #cbd5e1;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  left: 0;
  z-index: 2;
}

/* İşten çıkmış personelin ad hücresi: ad üstte, "ayrıldı" notu altında (dikey diz). */
.hc-personel.hc-cikisli {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  white-space: normal;
  line-height: 1.2;
}
.hc-ayrildi-not {
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
  font-size: 10px;
  font-weight: 600;
}

/* Çıkış tarihinden sonraki günler: soluk, tıklanamaz hücre ("—"). */
.hc-hucre.ayrildi {
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px);
  border-style: dashed;
  border-color: #e5e7eb;
  cursor: not-allowed;
  align-items: center;
}
.hc-hucre.ayrildi:hover {
  border-color: #e5e7eb;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px);
  transform: none;
}
.hc-ayrildi {
  color: #cbd5e1;
  font-size: 18px;
  font-weight: 700;
}

/* Personel yoksa gösterilen uyarı (tüm satırı kaplar) */
.hc-bos-uyari {
  padding: 18px 12px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

/* Bir gün hücresi (personel × gün) — tıklanabilir */
.hc-hucre {
  min-height: 54px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}

.hc-hucre:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  transform: translateY(-1px);
}

/* Bugünün sütunundaki hücreler hafif vurgulu */
.hc-hucre.bugun {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.18);
}

/* Hafta sonu sütunu */
.hc-hucre.haftasonu {
  background: #fffdf7;
}

.hc-hucre.haftasonu:hover {
  background: #fff8ec;
}

/* Dolu hücrelerin sol kenarı kalın (mesai rengi JS ile — başlangıç–bitiş saatine göre) */
.hc-hucre.dolu,
.hc-hucre.izinli {
  border-left-width: 4px;
}

/* İzinli gün → tüm hücre kırmızı (arka plan + kenarlar). */
.hc-hucre.izinli {
  background: #fee2e2;
  border-color: #dc2626;
  border-left-color: #dc2626;
}
.hc-hucre.izinli:hover {
  background: #fecaca;
  border-color: #dc2626;
}

/* Boş hücre — tıklayınca o personel + güne kayıt eklenir */
.hc-hucre.bos {
  border-style: dashed;
  align-items: center;
}

.hc-hucre.bos::before {
  content: '+';
  color: #cbd5e1;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.hc-hucre.bos:hover::before {
  color: #60a5fa;
}

/* Dolu hücre içeriği: mesai saati / izinli */
.hc-mesai {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.hc-izinli {
  font-size: 12px;
  font-weight: 700;
  color: #b91c1c;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  padding: 2px 6px;
  align-self: flex-start;
}

/* Bir cetvel kaydı çipi (mesai) — renk JS ile personel bazında atanır */
.cetvel-cip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  width: 100%;
  border: none;
  border-left: 4px solid #93c5fd;
  background: #eff6ff;
  color: #1e3a8a;
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s, transform 0.12s;
}

.cetvel-cip:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.cip-ad {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cip-saat {
  font-size: 11px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* İzinli çipi — amber/turuncu, mesai mavilerinden ayrışır */
.cetvel-cip.izinli {
  background: #fff7ed;
  border-left-color: #f59e0b;
  color: #9a3412;
}

.cip-rozet {
  font-size: 11px;
  font-weight: 600;
}

/* Takvim altı renk açıklaması */
.takvim-aciklama {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f1f3;
  font-size: 13px;
  color: #6b7280;
}

.aciklama-oge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.aciklama-kutu {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border-left: 4px solid;
  flex: none;
}

.aciklama-kutu.mesai {
  background: #eff6ff;
  border-left-color: #2563eb;
}

.aciklama-kutu.izinli {
  background: #fff7ed;
  border-left-color: #f59e0b;
}

.aciklama-ipucu {
  margin-left: auto;
  font-style: italic;
}

/* ============================================================
   ÇALIŞMA CETVELİ — HAFTALIK HIZLI GİRİŞ
   ============================================================ */
/* Hafta seçimi: ‹ tarih › yan yana */
.hafta-secim {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hafta-secim input[type="date"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

.hafta-secim .takvim-nav {
  flex: none;
}

/* Seçili haftanın aralık etiketi (örn. "29 Haz – 5 Tem 2026") */
.hafta-aralik {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a8a;
}

/* Çalışma türü: Mesai / İzin günü (pill şeklinde radyolar) */
.tur-secim {
  display: flex;
  gap: 10px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.tur-secenek {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.tur-secenek:hover {
  border-color: #93c5fd;
}

.tur-secenek input {
  accent-color: #2563eb;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* Seçili radyonun etiketini vurgula (modern tarayıcılar :has destekler) */
.tur-secenek:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

/* Saat alanları bloğu (Mesai seçiliyken görünür) */
.hafta-saatler {
  margin-bottom: 6px;
}

/* Gece vardiyası uyarı notu (hem haftalık hem tekil formda) */
.gece-not {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #6d28d9;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 8px 12px;
}

/* Gün seçimi bloğu */
.gun-secim-blok {
  margin-top: 4px;
}

.gun-secim-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.gun-secim-baslik {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.gun-hizli {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Hızlı seçim butonları (Hafta içi / Tüm hafta / Temizle) */
.hizli-btn {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.hizli-btn:hover {
  background: #dbeafe;
}

/* 7 gün kutusu — her zaman tek satırda 7 eşit sütun (takvim haftası gibi) */
.gun-secim {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.gun-kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: #374151;
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}

.gun-kutu:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}

.gun-kutu.haftasonu {
  background: #fffdf7;
}

/* Seçili gün — dolu mavi */
.gun-kutu.secili {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.gun-kutu-ad {
  font-size: 13px;
  font-weight: 700;
}

.gun-kutu-no {
  font-size: 12px;
  opacity: 0.85;
}

/* Tekil düzenleme kartı (çipe tıklayınca açılır) — hafif vurgulu kenar */
.tekil-kart {
  border: 2px solid #bfdbfe;
}

/* Takvim çipindeki "+1" gece vardiyası işareti */
.cip-gece {
  font-size: 9px;
  font-weight: 700;
  margin-left: 2px;
}

/* Takvim altı açıklamadaki "+1" rozeti */
.gece-rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 4px;
  padding: 1px 5px;
}

/* ============================================================
   PAKET SATIŞ — üye arama, seçili üye, fiyat/bitiş göstergeleri
   ============================================================ */
/* Üye arama alanı tam genişlik (form-grid dışında, üstte durur) */
.uye-ara-alan {
  margin-bottom: 4px;
}

/* Arama kutusu + altında açılan sonuç listesi için konumlama */
.uye-arama {
  position: relative;
}

.uye-arama input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.uye-arama input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Eşleşen üyelerin açılır listesi */
.ara-sonuc {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  z-index: 15;
  max-height: 264px;
  overflow-y: auto;
}

.ara-oge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}

.ara-oge:last-child {
  border-bottom: none;
}

.ara-oge:hover {
  background: #eff6ff;
}

.ara-ad {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.ara-tel {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}

.ara-bos {
  padding: 12px;
  font-size: 14px;
  color: #6b7280;
}

/* Seçilen üyeyi gösteren kart (+ Değiştir butonu) */
.secili-uye {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 14px;
}

.secili-uye-bilgi {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
}

/* Kara liste rozeti — randevu ver ekranında seçili müşterinin yanında büyük, görünür siyah "KL".
   Sadece görsel uyarıdır; randevu vermeyi engellemez. */
.kara-liste-rozet {
  display: inline-block;
  margin-left: 12px;
  padding: 1px 9px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.3;
  color: #000;
  background: #fde047;
  border: 2px solid #000;
  border-radius: 6px;
  vertical-align: middle;
}

/* Üye listesindeki küçük varyant */
.kara-liste-rozet-kucuk {
  margin-left: 6px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 1.5;
  border-width: 1px;
  border-radius: 4px;
}

.degistir-btn {
  background: #dbeafe;
  color: #1d4ed8;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
  transition: background 0.15s;
}

.degistir-btn:hover {
  background: #bfdbfe;
}

/* Salt-okunur değer kutuları (güncel fiyat ve bitiş tarihi) */
.fiyat-goster,
.deger-goster {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 15px;
  min-height: 42px;
  display: flex;
  align-items: center;
}

/* Güncel fiyat — vurgulu yeşil */
.fiyat-goster {
  font-weight: 700;
  color: #047857;
}

/* Fiyat tanımlı değilse / hata — amber uyarı tonu */
.fiyat-goster.fiyat-yok {
  color: #b45309;
  font-weight: 600;
  font-size: 14px;
}

/* Bitiş tarihi — nötr lacivert */
.deger-goster {
  font-weight: 700;
  color: #1e3a8a;
}

/* --- Mobil --- */
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .aktif-ad {
    display: none;
  }
  .marka {
    font-size: 17px;
  }
  .takvim-aciklama .aciklama-ipucu {
    margin-left: 0;
    width: 100%;
  }
  .haftalik-cetvel {
    grid-template-columns: 116px repeat(7, minmax(80px, 1fr));
    min-width: 700px;
  }
  .gun-kutu {
    padding: 8px 2px;
  }
  .gun-kutu-ad {
    font-size: 12px;
  }
}

/* ============================================================
   HİZMET TİP SÜRESİ — dinamik tip/süre satırları (master-detail)
   ============================================================ */
.tip-sure-blok {
  margin: 4px 0 18px;
}

.tip-sure-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 10px;
}

.tip-sure-toplam {
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 4px 12px;
  border-radius: 999px;
}

.tip-sure-satirlar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tip-sure-satir {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tip-sure-satir .tip-sure-tip {
  flex: 1 1 auto;
  min-width: 0;
}

.tip-sure-satir .tip-sure-dk {
  flex: 0 0 110px;
  width: 110px;
}

/* Satır içi input/select'ler, .alan input/select ile aynı görünsün */
.tip-sure-satir select,
.tip-sure-satir input {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tip-sure-satir select:focus,
.tip-sure-satir input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tip-sure-birim {
  font-size: 13px;
  color: #6b7280;
  flex: 0 0 auto;
}

.tip-sure-kaldir {
  flex: 0 0 auto;
  background: #fee2e2;
  color: #b91c1c;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.tip-sure-kaldir:hover {
  background: #fecaca;
}

.satir-ekle-btn {
  margin-top: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px dashed #93c5fd;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.satir-ekle-btn:hover {
  background: #dbeafe;
}

/* Listede tip kırılımı çipleri (örn. "Masaj · 50 dk") */
.tip-sure-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tip-sure-cip {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}

/* ============================================================
   RANDEVU VER — öneri kutusu, onay, günlük çizelge
   ============================================================ */

/* Sorgu sonucu kutusu (öneri veya hata) */
.randevu-oneri {
  margin-top: 16px;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
}

.randevu-oneri.ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.randevu-oneri.hata {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

/* MESAİ seçici (uygun personel yokken "mesai yapmak isteyen var mı?") */
.randevu-oneri.mesai {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}
.mesai-baslik {
  font-weight: 700;
  color: #3730a3;
  margin: 12px 0 4px;
  font-size: 15px;
}
.mesai-aciklama {
  color: #475569;
  font-size: 13px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.mesai-aday {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 7px;
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  cursor: pointer;
}
.mesai-aday:hover { background: #f5f3ff; }
.mesai-aday input { width: 17px; height: 17px; cursor: pointer; }
.mesai-aday-ad { font-weight: 600; color: #0f172a; }
.mesai-aday-bilgi { color: #4338ca; font-size: 13px; }
#randevuMesaiSorgulaBtn { background: #6366f1; }
#randevuMesaiSorgulaBtn:hover { background: #4f46e5; }

/* Mesai ile atanan kişi kartı + rozet/not */
.kisi-karti.mesaili { border-color: #c7d2fe; background: #f5f3ff; }
.mesai-rozet {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
/* Çift kişilik oda paylaşan kişi kartı + rozet (yeşil/teal — mesaiden ayırt için) */
.kisi-karti.ciftli { border-color: #99f6e4; background: #f0fdfa; }
.cift-rozet {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: #ccfbf1;
  color: #115e59;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.kisi-mesai {
  margin: 6px 0 2px;
  padding: 7px 10px;
  background: #e0e7ff;
  border-radius: 7px;
  color: #3730a3;
  font-size: 13px;
  line-height: 1.45;
}
.rd-mesai { color: #4338ca; font-weight: 600; }

.oneri-baslik {
  font-size: 15px;
  font-weight: 700;
  color: #047857;
  margin-bottom: 6px;
}

.oneri-personel {
  color: #1e3a8a;
  margin-bottom: 10px;
}

.oneri-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oneri-liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  padding: 8px 12px;
}

.oneri-tip {
  font-weight: 700;
  color: #065f46;
  min-width: 90px;
}

.oneri-oda {
  flex: 1 1 auto;
  color: #334155;
}

.oneri-saat {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #1e3a8a;
}

.oneri-not {
  font-size: 12px;
  color: #b45309;
  font-style: italic;
}

.oneri-hata {
  color: #b91c1c;
  font-weight: 600;
}

/* Kabul satırı: ödeme tipi + Randevu Ver */
.randevu-onay {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e5e7eb;
}

.onay-satir {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.onay-satir .alan {
  flex: 1 1 220px;
}

.onay-satir button {
  background: #16a34a;
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.onay-satir button:hover {
  background: #15803d;
}

.onay-satir button:disabled {
  background: #9ca3af;
  cursor: default;
}

.onay-ipucu {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
}

/* Sorgula butonu (mavi, normal submit görünümü) */
#randevuSorgulaBtn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

#randevuSorgulaBtn:hover {
  background: #1d4ed8;
}

#randevuSorgulaBtn:disabled {
  background: #9ca3af;
  cursor: default;
}

/* --- Günlük çizelge --- */
.randevu-cizelge-kart {
  overflow: hidden;
}

.rc-wrap {
  overflow-x: auto;       /* çok personelde yatay kaydırma */
  overflow-y: visible;
}

.rc-grid {
  display: grid;          /* sütunlar JS ile: 56px + her personel */
  min-width: min-content;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

/* Başlık satırı: köşe + personel adları */
.rc-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f3f4f6;
  border-bottom: 2px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-head-col {
  background: #f3f4f6;
  border-bottom: 2px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-top: 3px solid #93c5fd;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Saat sütunu (gutter) — etiketler mutlak konumlu */
.rc-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fafbfc;
  border-right: 1px solid #e5e7eb;
}

.rc-saat {
  position: absolute;
  right: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  transform: translateY(-1px);
}

/* Personel sütunu — saat çizgileri arka plan gradyanıyla; bloklar mutlak konumlu */
.rc-col {
  position: relative;
  border-left: 1px solid #eef2f7;
  background-color: #fff;
}

/* Bir randevu parçası bloğu (oda + müşteri + hizmet) */
.rc-blok {
  position: absolute;
  left: 3px;
  right: 3px;
  border: none;
  border-left: 4px solid #93c5fd;
  border-radius: 6px;
  padding: 3px 6px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: filter 0.12s, transform 0.12s;
}

.rc-blok:hover {
  filter: brightness(0.97);
  transform: translateX(1px);
  z-index: 5;
}

.rc-blok-ad {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-blok-bilgi {
  font-size: 11px;
  line-height: 1.15;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-blok-saat {
  font-size: 10px;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.rc-bos {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  background: #f8fafc;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
}

/* Bloğa tıklayınca açılan randevu detay kutusu */
.randevu-detay-kutu {
  margin-top: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #1f2937;
}

.rd-baslik {
  font-size: 15px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 4px;
}

.rd-butonlar {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Detay kutusundaki "Güncelle" düğmesi (mavi, sil/kapat ile aynı boyut) */
.rd-guncelle-btn {
  background: #dbeafe;
  color: #1d4ed8;
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.rd-guncelle-btn:hover {
  background: #bfdbfe;
}

/* ============================================================
   DÜZENLENEBİLİR PLAN (öneri içindeki personel/oda seçimleri)
   ============================================================ */
.oneri-aciklama {
  font-size: 13px;
  color: #475569;
  margin-bottom: 12px;
}

/* Her kişi (çoklu randevuda birden çok) için bir kart */
.kisi-karti {
  background: #fff;
  border: 1px solid #d1fae5;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.kisi-karti:last-child {
  margin-bottom: 0;
}

.kisi-baslik {
  font-size: 13px;
  font-weight: 700;
  color: #047857;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #d1fae5;
}

/* Bir satır: etiket (Personel / oda tipi) + seçim kutusu */
.plan-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.plan-satir:last-child {
  margin-bottom: 0;
}

.plan-etiket {
  flex: 0 0 150px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

.plan-saat {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.plan-personel,
.plan-oda {
  flex: 1 1 200px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #1f2937;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.plan-personel:focus,
.plan-oda:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.plan-personel {
  border-color: #93c5fd;
  background: #f0f7ff;
}

/* Planın canlı durum satırı (✓ uygun / ⚠ dolu / kontrol ediliyor) */
.plan-durum {
  margin-top: 12px;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
}

.plan-durum.ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

.plan-durum.hata {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.plan-durum.bekle {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

/* Düzenleme modu bandı (üstte "Randevu #X düzenleniyor") */
.duzenle-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #92400e;
  line-height: 1.5;
}

/* ============================================================
   ÖDEME (TAHSİLAT) EKRANI
   ============================================================ */

/* Master-detail düzeni: solda liste, sağda seçili satırın tahsilat paneli */
.odeme-duzen {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.odeme-liste-sarmal {
  flex: 1 1 60%;
  min-width: 0;
}
.odeme-detay {
  flex: 1 1 40%;
  min-width: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 12px;
}

/* Liste tablosu */
.odeme-tablo th, .odeme-tablo td { white-space: nowrap; }
.odeme-satir { cursor: pointer; transition: background 0.12s; }
.odeme-satir:hover { background: #f1f5f9; }
.odeme-satir.secili { outline: 2px solid #3b82f6; outline-offset: -2px; }
.odeme-bos-hucre { color: #94a3b8; }

/* Kaynak rozeti (Randevu / Paket) */
.kaynak-rozet {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.kaynak-rozet.randevu { background: #dbeafe; color: #1e40af; }
.kaynak-rozet.paket { background: #f3e8ff; color: #6b21a8; }
.kaynak-rozet.hediye { background: #ccfbf1; color: #115e59; }
.kaynak-rozet.borc { background: #ffe4e6; color: #9f1239; }

/* ===================== HEDİYE KARTI ===================== */
/* Satış formundaki hizmet ekleme ızgarası: "Hizmeti Ekle" butonu alttaki inputlarla hizalanır. */
.hediye-hizmet-grid { align-items: end; }
.hediye-hizmet-ekle-alan { display: flex; flex-direction: column; justify-content: flex-end; }
/* Kart toplam tutarı (tfoot). */
.hediye-hizmet-tablo tfoot td { font-weight: 600; background: #f8fafc; }
#hediyeKartiToplam { font-weight: 700; color: #0f766e; }
/* Ödeme detay panelinde hediye kartının kapsadığı hizmetlerin küçük özeti. */
.hediye-detay-hizmetler { font-size: 12px; color: #64748b; margin-top: 4px; }
/* "🎁 Hediye Kartı Yazdır" butonu (teal). */
.hediye-yazdir-btn {
  background: #0f766e; color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-weight: 600; cursor: pointer;
}
.hediye-yazdir-btn:hover { background: #115e59; }

/* Durum rozeti */
.odeme-durum {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}
.odeme-durum.odendi { background: #dcfce7; color: #166534; }
.odeme-durum.bekliyor { background: #fef3c7; color: #92400e; }
.odeme-durum.borc { background: #ffe4e6; color: #9f1239; }

/* ===================== BORÇ (VERESİYE) ===================== */
/* Ödeme ekranı: "Borç Tahsilatı" aracı (gün seçimi ile liste arasında). */
.borc-tahsilat-arac { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.borc-tahsilat-btn {
  background: #e11d48; color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; font-weight: 600; cursor: pointer;
}
.borc-tahsilat-btn:hover { background: #be123c; }
.borc-tahsilat-ipucu { font-size: 12px; color: #64748b; flex: 1 1 240px; }
/* Ödeme listesinde "Borç Tahsilatı" satırı (sol kenar kırmızı + hafif arka plan). */
.odeme-satir.odeme-satir-borc { background: #fff1f2; border-left: 3px solid #e11d48; }
.odeme-satir.odeme-satir-borc.secili { background: #ffe4e6; }
/* Detay panelinde "Borç çeki" seçilince çıkan bilgi şeridi. */
.odeme-borc-bilgi {
  margin: 10px 0; padding: 10px 12px; border-radius: 8px;
  background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; font-size: 13px; line-height: 1.5;
}
/* Borç tahsilat paneli (sağ): borç özeti. */
.odeme-borc-ozet {
  margin: 6px 0 14px; padding: 12px; border-radius: 10px;
  background: #fff1f2; border: 1px solid #fecdd3;
}
.odeme-borc-ozet > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.odeme-borc-ozet > div span { color: #64748b; }
.odeme-borc-ozet > div strong { color: #0f172a; }
.odeme-borc-ozet .odeme-borc-kalan { border-top: 1px dashed #fda4af; margin-top: 6px; padding-top: 8px; }
.odeme-borc-ozet .odeme-borc-kalan span,
.odeme-borc-ozet .odeme-borc-kalan strong { color: #9f1239; font-size: 16px; font-weight: 700; }
.odeme-borc-kapat-not {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px;
}

/* Borç Listesi ekranı: araç çubuğu + tablo. */
.borc-arac-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.borc-suzgec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.borc-suzgec select, .borc-suzgec input[type="search"] { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px; }
.borc-ozet { font-size: 14px; color: #334155; }
.borc-ozet strong { color: #9f1239; }
.borc-tablo .borc-satir { cursor: pointer; }
.borc-tablo .borc-satir:hover { background: #fff7f7; }
.borc-tablo .borc-satir.secili { background: #ffe4e6; }
.borc-detay-satir td { background: #fff7f7; padding: 0 !important; }
.borc-tahsilat-gecmis { padding: 12px 16px; }
.borc-tahsilat-gecmis h4 { margin: 0 0 8px; font-size: 13px; color: #9f1239; }
.borc-tahsilat-kalem {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid #fee2e2; font-size: 13px;
}
.borc-tahsilat-kalem span:first-child { min-width: 92px; color: #64748b; }
.borc-tahsilat-iptal {
  margin-left: auto; background: #fff; color: #b91c1c; border: 1px solid #fca5a5;
  border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.borc-tahsilat-iptal:hover { background: #fee2e2; }

/* Borçlu müşteri seçme popup'ı (paket seçim listesini taban alır; kırmızı vurgu). */
.borc-secim-oge { border-color: #fecdd3 !important; }
.borc-secim-oge:hover { background: #fff1f2 !important; border-color: #fb7185 !important; }

/* Kasa Defteri: "Bugün Oluşan Borçlar" bilgi bloğu + gelir içi borç tahsilatı notu. */
.kasa-borc-blok { background: #fff1f2; border: 1px solid #fecdd3; border-radius: 10px; }
.kasa-borc-blok h4 { color: #9f1239; }
.kasa-borc-not span small { color: #9f1239; }

/* Detay paneli içeriği */
.odeme-detay-bos { color: #94a3b8; text-align: center; padding: 24px 8px; }
.odeme-detay-baslik {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}
.odeme-detay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.odeme-detay-grid .alan { margin: 0; }
.odeme-detay-grid label {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
  font-weight: 600;
}
.odeme-detay-grid select,
.odeme-detay-grid input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}
/* Kilitli (ücretsiz/paket çekinde) ücret alanı */
.odeme-detay-grid input.kilitli {
  background: #e2e8f0;
  color: #64748b;
  cursor: not-allowed;
}
.odeme-detay .buton-alani { margin-top: 16px; }
.odeme-detay .buton-alani button {
  width: 100%;
  padding: 11px;
  font-size: 15px;
}

/* "Ödeme tipini böl" seçimi + iki parçalı blok */
.odeme-bol-secim {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}
.odeme-bol-secim input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* "Ödenmez" tahsilatında zorunlu açıklama alanı (ödeme detay panelinde). */
.odeme-odenmez-alan {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 10px;
}
.odeme-odenmez-alan label { color: #9a3412; }
.odeme-odenmez-alan textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.odeme-bol-blok {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed #c4b5fd;
  border-radius: 10px;
  background: #faf5ff;
}
.odeme-bol-toplam {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9d5ff;
  font-size: 14px;
  color: #334155;
}
.odeme-bol-toplam strong { font-size: 17px; color: #6b21a8; }
.odeme-bol-indirim { font-size: 12px; color: #64748b; }

/* Ödeme ekranı — paket çeki seçimi (Paketleri Gör + düşülecek adet + kapsam notu) */
.odeme-paket-blok {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed #6ee7b7;
  border-radius: 10px;
  background: #f0fdf4;
}
.odeme-paket-baslik {
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 6px;
}
.odeme-paket-blok .ekran-alt { margin: 0 0 8px; }
.odeme-paket-secili {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  margin-bottom: 8px;
}
.odeme-paket-ad { font-weight: 600; color: #064e3b; }
.odeme-paket-hizmet { font-weight: 400; color: #6b7280; font-size: 13px; }
.odeme-paket-bilgi { font-size: 13px; color: #374151; margin-top: 2px; }
.odeme-paket-not {
  margin-top: 8px;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.paket-not-fazla { color: #b45309; font-weight: 600; }
.paket-not-eksik { color: #6b7280; }
.paket-not-tam { color: #047857; font-weight: 600; }
.paket-not-hata { color: #b91c1c; font-weight: 600; }
.paket-gor-btn {
  padding: 9px 14px;
  background: #059669;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.paket-gor-btn:hover { background: #047857; }
.paket-gor-btn.paket-degistir {
  margin-top: 4px;
  background: #fff;
  color: #047857;
  border: 1px solid #6ee7b7;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 12px;
}
.paket-gor-btn.paket-degistir:hover { background: #ecfdf5; }

/* Paket seçim popup'ı (modal-overlay içinde liste) */
.paket-secim-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.paket-secim-oge {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.paket-secim-oge:hover { background: #d1fae5; border-color: #34d399; }
.paket-secim-ad { font-weight: 700; color: #064e3b; font-size: 14px; }
.paket-secim-detay { font-size: 12.5px; color: #374151; }

/* Toplu ödeme paneli (tahsilat panelinin altında) */
.odeme-toplu {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
}
.odeme-toplu-baslik {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}
.odeme-toplu-liste {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
}
.odeme-toplu .buton-alani { margin-top: 14px; }
.odeme-toplu .buton-alani button {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  background: #2563eb;
}
.odeme-toplu .buton-alani button:hover { background: #1d4ed8; }

/* Gün sonu gelir raporu */
.odeme-rapor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.rapor-blok {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}
.rapor-blok h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #334155;
}
.rapor-satir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed #e2e8f0;
  font-size: 14px;
}
.rapor-satir:last-child { border-bottom: none; }
.rapor-satir strong { color: #0f172a; }
.rapor-toplam {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 16px;
}
.rapor-toplam strong { font-size: 20px; }

/* Ödemeyi iptal et butonu (detay panelinde, Kaydet'in altında; tehlike rengi) */
.iptal-btn {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.iptal-btn:hover { background: #fecaca; }

/* İptal Edilen Ödemeler listesi: paket iadesi rozeti */
.iade-rozet {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
}

/* Randevu Ver: aktif paket uyarı kutusu (paket teması = mor; seçilince yeşil onay) */
.randevu-paket-uyari {
  margin-top: 10px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-left: 4px solid #9333ea;
  border-radius: 8px;
  padding: 12px 14px;
}

/* ÖZEL MÜŞTERİ uyarı banner'ı (seçilen müşteri özel müşteriyse) — ÖM rozetiyle aynı camgöbeği tema. */
.randevu-ozel-musteri-uyari {
  margin-top: 10px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-left: 4px solid #0891b2;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: #155e75;
  line-height: 1.5;
}
.ozel-musteri-rozet-buyuk {
  display: inline-block;
  background: #0891b2;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 2px 9px;
  border-radius: 999px;
  margin-right: 6px;
}

/* "Özel/Normal oda da kullanılsın mı?" onay düğmesi (alt form öneri kutusunda, yer yokken). */
.kapsam-override-alani { margin-top: 12px; }
.kapsam-override-btn {
  background: #ecfeff;
  border: 1.5px solid #0891b2;
  color: #0e7490;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.kapsam-override-btn:hover { background: #0891b2; color: #fff; }

/* Üst hızlı kontrol: "özel oda da kullanılsın mı?" alanı + düğmesi + notu. */
.hk-kapsam-alani { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.hk-kapsam-btn {
  align-self: flex-start;
  background: #ecfeff;
  border: 1.5px solid #0891b2;
  color: #0e7490;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.hk-kapsam-btn:hover { background: #0891b2; color: #fff; }
.hk-kapsam-not { font-size: 12px; color: #0e7490; }
.hk-kapsam-not.hepsi { margin-top: 10px; font-weight: 600; }
.randevu-paket-uyari.secili {
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left-color: #16a34a;
}
.paket-uyari-baslik {
  font-size: 14px;
  font-weight: 700;
  color: #6b21a8;
  margin-bottom: 8px;
}
.randevu-paket-uyari.secili .paket-uyari-baslik { color: #15803d; }
.paket-uyari-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed #e9d5ff;
}
.paket-uyari-bilgi { display: flex; flex-direction: column; gap: 2px; }
.paket-uyari-bilgi strong { font-size: 14px; color: #1f2937; }
.paket-uyari-bilgi span { font-size: 12.5px; color: #6b7280; }
.paket-uyari-bilgi em { color: #b45309; font-style: italic; }
.paket-kullan-btn {
  flex: none;
  background: #9333ea;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.paket-kullan-btn:hover { background: #7e22ce; }
.paket-uyari-alt { margin-top: 10px; }

/* ============================================================
   HIZLI MÜSAİTLİK KONTROLÜ (üst blok) + KİŞİ-BAŞINA ÖDEME
   ============================================================ */
.hizli-kontrol {
  margin: 4px 0 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0ea5e9;
  border-radius: 8px;
}
.hizli-kontrol-cumle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: #334155;
}
.hk-metin { color: #475569; }
.hk-select {
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: #0f172a;
}
.hk-select:focus { outline: 2px solid #7dd3fc; border-color: #0ea5e9; }
.hk-kisi { width: 58px; }
.hk-cift { max-width: 170px; }
.hk-select:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
#randevuCiftOda:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
#hkSaat { min-width: 92px; }
#hkHizmet { min-width: 150px; max-width: 230px; }
.hk-btn {
  background: #0ea5e9;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hk-btn:hover { background: #0284c7; }
.hk-btn:disabled { background: #94a3b8; cursor: default; }
.hk-vazgec { margin-left: 2px; }

.hk-sonuc { margin-top: 12px; }
.hk-bekle { color: #64748b; font-size: 14px; padding: 6px 2px; }
.hk-uyari {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
  color: #92400e;
  font-size: 14px;
  line-height: 1.5;
}
.hk-uyari-detay { color: #b45309; font-size: 12.5px; }

/* Küçük plan özeti (müsaitlik var) */
.hk-plan { border-radius: 8px; padding: 12px 14px; }
.hk-plan.ok { background: #ecfdf5; border: 1px solid #a7f3d0; }
.hk-plan.mesaili { background: #f5f3ff; border: 1px solid #c7d2fe; }
.hk-plan-baslik { font-weight: 700; color: #065f46; margin-bottom: 6px; font-size: 14.5px; }
.hk-plan.mesaili .hk-plan-baslik { color: #3730a3; }
.hk-plan-satir { color: #334155; font-size: 13.5px; margin: 2px 0; }
.hk-mesai-not {
  margin: 8px 0 2px;
  padding: 8px 10px;
  background: #e0e7ff;
  border-radius: 7px;
  color: #3730a3;
  font-size: 13px;
  line-height: 1.45;
}
.hk-kullan-btn {
  margin-top: 10px;
  background: #16a34a;
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hk-kullan-btn:hover { background: #15803d; }

/* Önceki/sonraki saat önerisi (istenen saatte yer yok) */
.hk-oneri {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 14px;
}
.hk-oneri-baslik { color: #92400e; font-weight: 600; font-size: 14px; margin-bottom: 10px; line-height: 1.5; }
.hk-saat-secenek { display: flex; flex-wrap: wrap; gap: 10px; }
.hk-saat-btn {
  background: #fff;
  border: 1.5px solid #f59e0b;
  color: #b45309;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hk-saat-btn:hover { background: #f59e0b; color: #fff; }
.hk-oneri-ipucu { margin-top: 8px; color: #a16207; font-size: 12px; }

/* "Bu müşteriye özel süre kısalt" düzenleyicisi (istenen saatte yer yokken alta gelir) */
.hk-sure-duzenle {
  margin-top: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #0ea5e9;
  border-radius: 8px;
  padding: 12px 14px;
}
.hk-sure-baslik { font-weight: 700; color: #0c4a6e; font-size: 14px; margin-bottom: 4px; }
.hk-sure-aciklama { color: #475569; font-size: 12.5px; line-height: 1.5; margin-bottom: 10px; }
.hk-sure-satir { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.hk-sure-ad { min-width: 90px; font-weight: 600; color: #334155; font-size: 13.5px; }
.hk-sure-girdi {
  width: 72px; padding: 6px 8px; border: 1.5px solid #cbd5e1; border-radius: 6px;
  font-size: 14px; text-align: center; color: #0f172a;
}
.hk-sure-girdi:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.15); }
.hk-sure-dk { color: #64748b; font-size: 13px; }
.hk-sure-vars { color: #94a3b8; font-size: 12px; }
.hk-sure-vars.degisti { color: #0369a1; font-weight: 600; }
.hk-sure-butonlar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hk-sure-btn {
  background: #0ea5e9; color: #fff; border: none; padding: 9px 15px; border-radius: 7px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.hk-sure-btn:hover { background: #0284c7; }
.hk-sure-sifirla {
  background: #fff; color: #475569; border: 1.5px solid #cbd5e1; padding: 9px 14px;
  border-radius: 7px; font-size: 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.hk-sure-sifirla:hover { background: #f1f5f9; border-color: #94a3b8; }

/* Özel sürenin uygulandığını belirten notlar (hızlı kontrol özeti + asıl form planı) */
.hk-ozel-not { color: #0369a1; }
.oneri-ozel-sure {
  margin: 8px 0 2px; padding: 8px 10px; background: #e0f2fe; border-radius: 7px;
  color: #0c4a6e; font-size: 13px; line-height: 1.45;
}

/* Kişi-başına ödeme dağılımı (paket kısmi kullanımı) */
.paket-uyari-kalan {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 7px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
}
.odeme-dagilim {
  margin: 4px 0 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.odeme-dagilim-baslik { font-weight: 700; color: #334155; font-size: 13.5px; margin-bottom: 8px; }
.odeme-dagilim-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed #e2e8f0;
}
.odeme-dagilim-satir:first-of-type { border-top: none; }
.odeme-dagilim-kisi { font-weight: 600; color: #0f172a; font-size: 13.5px; }
.odeme-dagilim-paket {
  color: #6b21a8;
  font-weight: 600;
  font-size: 13px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  padding: 4px 10px;
  border-radius: 6px;
}
.odeme-dagilim-select {
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-size: 13.5px;
  min-width: 180px;
}

/* Dar ekran: master-detail ve rapor alt alta */
@media (max-width: 860px) {
  .odeme-duzen { flex-direction: column; }
  .odeme-detay { position: static; width: 100%; }
  .odeme-rapor { grid-template-columns: 1fr; }
}

/* Gün sonu raporu: kasa çıkışı (kırmızı) + net kasa (yeşil) toplam satırları */
.rapor-toplam.kasa-cikis { background: #7f1d1d; }
.rapor-toplam.net-kasa   { background: #065f46; }

/* ===== Durum rozetleri (Üye Paket Durumları + Personel Hakediş "Ödendi") ===== */
.durum-rozet {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.durum-rozet.aktif      { background: #dcfce7; color: #166534; }
.durum-rozet.sure-doldu { background: #fee2e2; color: #b91c1c; }
.durum-rozet.tukendi    { background: #fef3c7; color: #92400e; }
.durum-rozet.bekliyor   { background: #e2e8f0; color: #475569; }

/* Üye Paket Durumları: süresi geçmiş / tükenmiş satırlar soluk */
#uyePaketDurumTablo tr.paket-pasif td { color: #94a3b8; }

/* ===== Personel Hakediş Ödeme ekranı ===== */
.ph-tablo th, .ph-tablo td { white-space: nowrap; vertical-align: middle; }
.ph-satir { cursor: pointer; transition: background 0.12s; }
.ph-satir:hover { background: #f1f5f9; }
.ph-satir.secili { background: #e0f2fe; }
.ph-satir.ph-odendi td { background: rgba(16, 185, 129, 0.10); }
.ph-satir.ph-odendi.secili td { background: #e0f2fe; }
.ph-ad { font-weight: 600; color: #0f172a; }
.ph-odenen {
  width: 120px;
  padding: 7px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 14px;
  text-align: right;
}
.ph-alacak { font-weight: 600; color: #b45309; }
.ph-ode-btn {
  background: #0ea5e9;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ph-ode-btn:hover { background: #0284c7; }

/* Mesai (fazla mesai) — hakediş tablosu */
.ph-satir.ph-mesaili td { box-shadow: inset 3px 0 0 #6366f1; }
.ph-mesai-hucre { font-size: 13px; }
.ph-mesai-bilgi { color: #4338ca; font-weight: 600; white-space: nowrap; }
.ph-mesai-bilgi small { color: #6366f1; font-weight: 600; }
.ph-mesai-odeme {
  width: 120px;
  padding: 7px 9px;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  font-size: 14px;
  text-align: right;
  background: #eef2ff;
}
.ph-mesai-odeme:disabled { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }

/* Seçili personelin o gün yaptığı hizmetler (açılır panel) */
.ph-hizmet-detay {
  margin-top: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}
.ph-detay-baslik {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}
.ph-detay-tablo { width: 100%; border-collapse: collapse; }
.ph-detay-tablo th, .ph-detay-tablo td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13.5px;
}
.ph-detay-tablo tfoot td {
  font-weight: 700;
  border-top: 2px solid #cbd5e1;
  border-bottom: none;
}

/* Personel hakediş gün özeti (toplam hakediş / kasadan çıkan / alacak) */
.ph-ozet {
  margin-top: 16px;
  display: grid;
  gap: 4px;
  max-width: 480px;
}
.ph-ozet .rapor-satir { font-size: 14.5px; }

/* Veritabanı Bağlantısı: ipucu içindeki kod ve şifre göster onay kutusu */
#ekranDbAyar code {
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
}
#ekranDbAyar .alan-ipucu label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* ===== Onaylı gün kilit uyarısı (Ödeme / Personel Hakediş / Diğer Ödemeler) ===== */
.kilit-uyari {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
  border-radius: 10px;
  color: #92400e;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ===== Diğer Ödemeler ekranı ===== */
#digerOdemeTablo tfoot td {
  background: #f8fafc;
  font-size: 14px;
  border-top: 2px solid #e2e8f0;
}
#digerOdemeTablo tfoot strong { color: #b91c1c; }

/* ===== Kasa Defteri ekranı ===== */
.kasa-defteri {
  display: grid;
  gap: 14px;
  max-width: 620px;
}
.kasa-onay-durum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: #475569;
}
.kasa-satir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
}
.kasa-satir small { color: #64748b; font-weight: normal; font-size: 12px; }
.kasa-satir strong { font-size: 18px; }
.kasa-devir { background: #fbf6e7; border: 1px solid #f3e6c0; color: #854d0e; }
.kasa-kapanis { background: #065f46; color: #fff; }
.kasa-kapanis small { color: #a7f3d0; }
.kasa-blok {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 16px 12px;
}
.kasa-blok h4 {
  margin: 12px 0 6px;
  font-size: 13.5px;
  color: #334155;
}
.kasa-blok .rapor-satir.bos-kalem span { color: #94a3b8; }
.kasa-blok .rapor-satir.ara-toplam {
  border-top: 2px solid #e2e8f0;
  border-bottom: none;
  margin-top: 4px;
  font-weight: 600;
}
.kasa-blok .rapor-satir.ara-toplam strong { font-size: 16px; }
.kasa-blok small { color: #94a3b8; }

/* Kasa defteri — fiziksel nakit sayımı bloğu (kasada olması gereken nakit) */
.kasa-nakit {
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: 10px;
  padding: 6px 16px 12px;
  margin-top: 4px;
}
.kasa-nakit h4 {
  margin: 12px 0 6px;
  font-size: 13.5px;
  color: #92400e;
}
.kasa-nakit small { color: #b45309; font-weight: normal; font-size: 12px; }
.kasa-nakit .rapor-satir.kasa-nakit-sonuc {
  border-top: 2px solid #fcd34d;
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 700;
  color: #92400e;
}
.kasa-nakit .rapor-satir.kasa-nakit-sonuc strong { font-size: 18px; }

/* Kasa defteri buton satırı */
.kasa-defteri-butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}
.kasa-defteri-butonlar button {
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.kasa-defteri-butonlar button:disabled { opacity: 0.55; cursor: not-allowed; }
.kasa-onayla-btn { background: #065f46; }
.kasa-onayla-btn:hover { background: #047857; }
.kasa-onaykaldir-btn { background: #b45309; }
.kasa-onaykaldir-btn:hover { background: #92400e; }
.kasa-yazdir-btn { background: #1d4ed8; }
.kasa-yazdir-btn:hover { background: #1e40af; }
.kasa-gunluk-btn { background: #7c3aed; }
.kasa-gunluk-btn:hover { background: #6d28d9; }
.kasa-aylik-btn { background: #0f766e; }
.kasa-aylik-btn:hover { background: #115e59; }

/* ============================================================
   AYLIK RAPOR EKRANI — araç çubuğu, özet şerit, kırılım tabloları
   ============================================================ */
.aylik-rapor-arac {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.aylik-secim {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.aylik-secim select {
  padding: 9px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  min-width: 130px;
}
.aylik-rapor-arac button {
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.aylik-geri-btn { background: #e2e8f0; color: #1e293b; }
.aylik-geri-btn:hover { background: #cbd5e1; }
.aylik-sorgula-btn { background: #0f766e; margin-left: auto; }
.aylik-sorgula-btn:hover { background: #115e59; }
.aylik-yazdir-btn { background: #1d4ed8; }
.aylik-yazdir-btn:hover { background: #1e40af; }

.aylik-ozet-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.aylik-ozet-serit > div {
  flex: 1;
  min-width: 160px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aylik-ozet-serit .etk { font-size: 12px; color: #64748b; }
.aylik-ozet-serit strong { font-size: 20px; color: #0f172a; }

.aylik-tablolar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.aylik-tablo-blok h4 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #0f172a;
}
.aylik-tablo .sag { text-align: right; white-space: nowrap; }
.aylik-tablo tfoot th {
  background: #eef2f7;
  color: #0f172a;
  border-top: 2px solid #cbd5e1;
  padding: 11px 12px;
  text-align: left;
}
.aylik-tablo tfoot th.sag { text-align: right; }
.aylik-tablo .bos-satir { text-align: center; color: #94a3b8; font-style: italic; }
.aylik-not {
  margin-top: 16px;
  font-size: 12.5px;
  color: #64748b;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  padding: 10px 12px;
  border-radius: 6px;
}

/* ============================================================
   YETKİLENDİRME — yetki matrisi, araç çubuğu, salt görüntüleme
   ============================================================ */

/* Yetki matris tablosu */
.yetki-tablo th.orta, .yetki-tablo td.orta { text-align: center; }
.yetki-tablo th small { font-weight: 400; color: #6b7280; font-size: 11px; }
.yetki-tablo input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.yetki-tablo input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.45; }
.yetki-grup-satir td {
  background: #eef2ff;
  font-weight: 700;
  color: #3730a3;
  border-bottom: 2px solid #e5e7eb;
}
.yg-yok { color: #cbd5e1; }

/* Toplu seçim araç çubuğu */
.yetki-arac-cubugu { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.kucuk-btn {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.kucuk-btn:hover { background: #e0e7ff; }

/* Satır-içi rol seçimi (Kullanıcı Tanım tablosu) */
.satir-rol-secim {
  padding: 5px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  max-width: 200px;
}
.satir-rol-secim:disabled { background: #f3f4f6; color: #6b7280; cursor: not-allowed; }

/* "Salt görüntüleme" bilgilendirme şeridi (işlem yetkisi olmayan ekranın üstünde) */
.salt-okunur-banner {
  background: #fef9c3;
  border: 1px solid #fde047;
  color: #854d0e;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 500;
}

/* Salt görüntüleme ekranlarında yazma denetimlerini (ekle/düzenle/sil) gizle */
.ekran.salt-okunur .sil-btn,
.ekran.salt-okunur .duzenle-btn,
.ekran.salt-okunur form button[type="submit"],
.ekran.salt-okunur .vazgec-btn { display: none !important; }

/* ============================================================
   KURUM BİLGİLERİ — logo önizlemesi (Ayarlar → Kurum Bilgileri)
   ============================================================ */
.kurum-logo-onizleme {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%) 0 0 / 18px 18px,
    linear-gradient(45deg, #f1f5f9 25%, #ffffff 25%, #ffffff 75%, #f1f5f9 75%) 9px 9px / 18px 18px;
}

.kurum-logo-onizleme-etiket {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.kurum-logo-onizleme img {
  max-height: 96px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   ONAYLI POPUP (modal) — örn. "Tüm randevularını sil"
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal-kutu {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  line-height: 1.6;
  color: #1f2937;
}

.modal-baslik {
  font-size: 16px;
  font-weight: 700;
  color: #b91c1c;
  margin-bottom: 10px;
}

.modal-govde p { margin: 6px 0; }

.modal-liste {
  margin: 10px 0;
  padding-left: 20px;
  max-height: 210px;
  overflow-y: auto;
}

.modal-liste li { margin: 3px 0; }

.modal-uyari {
  font-weight: 700;
  color: #b91c1c;
  margin-top: 12px !important;
}

.modal-butonlar {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}