:host { display: block; padding: 0; overflow-y: auto; overflow-x: hidden; height: 100%; }

/* ===== STAT KARTLARI ===== */
.stat-kart {
  position: relative;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.stat-kart:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.stat-kart--turuncu  { background: linear-gradient(135deg, #fa8c16 0%, #faad14 100%); }
.stat-kart--mavi     { background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%); }
.stat-kart--yesil    { background: linear-gradient(135deg, #389e0d 0%, #52c41a 100%); }
.stat-kart--kirmizi  { background: linear-gradient(135deg, #cf1322 0%, #ff4d4f 100%); }

.stat-kart__ikon {
  font-size: 32px;
  opacity: 0.95;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.1);
  border-radius: 12px;
}
.stat-kart__ikon--pulse {
  animation: iconPulse 1.4s ease-in-out infinite;
}
@keyframes iconPulse {
  0%, 100% { background: rgba(0,0,0,0.1); transform: scale(1); }
  50%       { background: rgba(0,0,0,0.18); transform: scale(1.06); }
}

.stat-kart__icerik { flex: 1; }
.stat-kart__deger {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.stat-kart__baslik {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}
.stat-kart__trend {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-kart__trend--aktif   { opacity: 1; font-weight: 600; }
.stat-kart__trend--basari  { opacity: 0.95; }
.stat-kart__trend--hata    { opacity: 0.95; }

.stat-kart__arkaplan-ikon {
  position: absolute;
  right: -10px;
  bottom: -10px;
  font-size: 80px;
  opacity: 0.07;
  pointer-events: none;
}

/* ===== ILERLEME KARTI ===== */
.ilerleme-kart {
  border-radius: 10px;
  border: 1px solid #f0f0f0;
}
.ilerleme-kart__baslik {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.ilerleme-kart__toplam {
  margin-left: auto;
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 400;
}
.ilerleme-kart__detay {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #595959;
}
.ilerleme-kart__detay span { display: flex; align-items: center; gap: 4px; }
.ilerleme-renk--yesil  { color: #52c41a !important; }
.ilerleme-renk--mavi   { color: #1890ff !important; }
.ilerleme-renk--turuncu { color: #faad14 !important; }
.ilerleme-renk--kirmizi { color: #ff4d4f !important; }

/* ===== ISTATISTIK KARTI ===== */
.istatistik-kart { border-radius: 10px; border: 1px solid #f0f0f0; }
.istatistik-kart__baslik { display: flex; align-items: center; margin-bottom: 10px; }
.istatistik-satir {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.istatistik-etiket { color: #8c8c8c; min-width: 110px; }
.istatistik-deger { font-weight: 700; font-size: 14px; }
.istatistik-deger--mavi { color: #1890ff; font-weight: 700; font-size: 14px; }
.istatistik-deger--mor  { color: #722ed1; font-weight: 700; font-size: 14px; }

/* ===== TABLO EKSTRA ===== */
.tablo-ekstra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.secili-bilgi {
  font-size: 12px;
  color: #1890ff;
  font-weight: 600;
  padding: 0 4px;
}
.oto-yenile-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  cursor: pointer;
}

/* ===== TABLO SATIRLARI ===== */
.satir--isleniyor td:first-child {
  border-left: 3px solid #1890ff !important;
}
.satir--hata td:first-child {
  border-left: 3px solid #ff4d4f !important;
}
.satir--tamamlandi td:first-child {
  border-left: 3px solid #52c41a !important;
}
.satir--bekliyor td:first-child {
  border-left: 3px solid #faad14 !important;
}
.satir--isleniyor {
  background: linear-gradient(to right, rgba(24,144,255,0.04), transparent) !important;
  animation: satirIsleniyorPulse 2.5s ease-in-out infinite;
}
@keyframes satirIsleniyorPulse {
  0%, 100% { background: linear-gradient(to right, rgba(24,144,255,0.04), transparent); }
  50%       { background: linear-gradient(to right, rgba(24,144,255,0.09), transparent); }
}
.satir--secili { background: rgba(24,144,255,0.06) !important; }
.satir--hata   { background: rgba(255,77,79,0.03) !important; }

/* ===== RESIM ===== */
.resim-kapsayici {
  position: relative;
  width: 52px;
  height: 52px;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}
.resim-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}
.resim-kapsayici:hover .resim-thumbnail { transform: scale(1.08); }
.resim-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.2s;
}
.resim-kapsayici:hover .resim-overlay { opacity: 1; }
.resim-placeholder {
  width: 52px;
  height: 52px;
  background: #f5f5f5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bfbfbf;
  font-size: 20px;
  border: 1px dashed #d9d9d9;
}

/* ===== DURUM TAG ===== */
.durum-kapsayici {
  display: flex;
  align-items: center;
  gap: 6px;
}
.durum-tag { border-radius: 20px !important; font-size: 11px !important; }

/* Pulse nokta (isleniyor) */
.pulse-nokta {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1890ff;
  animation: pulseBlink 1.2s ease-in-out infinite;
}
@keyframes pulseBlink {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(24,144,255,0.5); }
  50%       { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(24,144,255,0); }
}

/* ===== DENEME CUBUKLAR ===== */
.deneme-kapsayici { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.deneme-cubuklar  { display: flex; gap: 2px; }
.deneme-cubuk {
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: #f0f0f0;
  border: 1px solid #e8e8e8;
  transition: background 0.2s;
}
.deneme-cubuk--dolu  { background: #52c41a; border-color: #389e0d; }
.deneme-cubuk--hata  { background: #ff4d4f !important; border-color: #cf1322 !important; }

/* ===== SONUC ===== */
.sonuc-bilgi { display: flex; flex-direction: column; gap: 2px; }
.sonuc-yuz   { font-size: 12px; color: #52c41a; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.sonuc-sure  { font-size: 11px; color: #8c8c8c; }

/* ===== HATA ===== */
.hata-kapsayici { display: flex; align-items: center; }
.hata-detay-satiri td {
  padding: 0 !important;
  border-bottom: 2px solid #ff4d4f !important;
}
.hata-detay-icerik {
  padding: 8px 16px;
  background: #fff2f0;
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: flex-start;
  font-size: 12px;
}
.hata-detay-icerik code {
  font-family: 'Courier New', monospace;
  color: #cf1322;
  word-break: break-all;
}

/* ===== ISLEM BUTONLARI ===== */
.islem-butonlari { display: flex; gap: 2px; align-items: center; }

/* ===== RESIM MODAL ===== */
.resim-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalAc 0.18s ease-out;
}
@keyframes modalAc {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.resim-modal-icerik {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.resim-modal-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
.resim-modal-kapat {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.resim-modal-kapat:hover { background: rgba(0,0,0,0.85); }

/* ===== RESIM MODAL - YUZ BBOX ===== */
.resim-modal-resim-kapsayici {
  position: relative;
  display: inline-block;
}
.yuz-bbox-kutu {
  position: absolute;
  border: 2px solid #52c41a;
  border-radius: 3px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
  transition: border-color 0.2s;
}
.yuz-bbox-etiket {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #52c41a;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ===== MODAL YUZ CROP LISTESi ===== */
.modal-yuz-liste {
  background: rgba(0,0,0,0.7);
  padding: 10px 14px;
  border-radius: 0 0 10px 10px;
}
.modal-yuz-baslik {
  font-size: 12px;
  color: #1e293b;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.modal-yuz-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-yuz-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.modal-yuz-crop {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-repeat: no-repeat;
  border: 2px solid #64748b;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.15s, border-color 0.15s;
}
.modal-yuz-item:hover .modal-yuz-crop {
  transform: scale(1.1);
  border-color: #fff;
}
.modal-yuz-crop-etiket {
  font-size: 10px;
  color: #52c41a;
  font-weight: 600;
  max-width: 64px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== KULLANICI HUCRE ===== */
.kullanici-hucre {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kullanici-bilgi {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kullanici-ad {
  font-size: 12px;
  font-weight: 600;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.kullanici-id {
  font-size: 10px;
  color: #bfbfbf;
  font-family: 'Courier New', monospace;
}

/* ===== CANLI NOKTA (isleniyor live badge) ===== */
.canli-nokta {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  animation: nabiz 1.5s ease-in-out infinite;
}
@keyframes nabiz {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ===== ANA TABLO KARTI ===== */
.ana-tablo-kart { border-radius: 10px; }
.ana-tablo-kart ::ng-deep .ant-card-head { border-bottom: 1px solid #f0f0f0; }