/* Enhanced Statistics Cards */



/* 4 Yüzlü Küp Container - Tüm Kartlar Aynı Boyut */

.enhanced-stat {

  position: relative;

  cursor: pointer;

  perspective: 1000px;

  height: 120px !important; /* Zorla sabit yükseklik */

  width: 100% !important; /* Zorla sabit genişlik */

  min-height: 120px !important;

  max-height: 120px !important;

}



.enhanced-stat:hover {

  filter: brightness(1.1);

}



/* 4 Yüzlü Küp Inner - Sabit Boyut */

.stat-flip-container {

  position: relative;

  width: 100% !important;

  height: 120px !important; /* Zorla sabit yükseklik */

  transition: transform 0.8s ease-in-out;

  transform-style: preserve-3d;

}



/* Küp dönüş durumları */

.enhanced-stat.face-1 .stat-flip-container {

  transform: rotateY(0deg); /* Yüz 1 */

}



.enhanced-stat.face-2 .stat-flip-container {

  transform: rotateY(-90deg); /* Yüz 2 */

}



.enhanced-stat.face-3 .stat-flip-container {

  transform: rotateY(-180deg); /* Yüz 3 */

}



.enhanced-stat.face-4 .stat-flip-container {

  transform: rotateY(-270deg); /* Yüz 4 */

}



/* 4 Yüz Tanımları - Hepsi Aynı Boyut */

.stat-face-front,

.stat-face-right,

.stat-face-back,

.stat-face-left {

  position: absolute !important;

  width: 100% !important;

  height: 120px !important; /* Zorla sabit yükseklik - tüm yüzler aynı */

  min-height: 120px !important;

  max-height: 120px !important;

  backface-visibility: hidden;

  border-radius: 8px;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  align-items: center !important;

  padding: 16px !important;

  box-sizing: border-box !important;

}



/* Yüz 1: Güncel İstatistik */

.stat-face-front {

  transform: rotateY(0deg);

  /* Orijinal kart rengini al */

}



/* Yüz 2: Geçen Ay */

.stat-face-right {

  background: linear-gradient(135deg, #8e44ad, #9b59b6);

  transform: rotateY(90deg);

}



/* Yüz 3: Çubuk Grafik */

.stat-face-back {

  background: linear-gradient(135deg, #2c3e50, #34495e);

  transform: rotateY(180deg);

}



/* Yüz 4: Yıllık Özet */

.stat-face-left {

  background: linear-gradient(135deg, #16a085, #1abc9c);

  transform: rotateY(270deg);

}



/* Sayı değerleri - her yüzde aynı stil */

.stat-number {

  color: white !important;

  font-weight: 700 !important;

  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

  transition: all 0.3s ease;

  font-size: 2rem !important;

  margin-bottom: 8px;

}



.enhanced-stat:hover .stat-number {

  transform: scale(1.05);

  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);

}



/* Etiketler - her yüzde aynı stil */

.stat-label {

  color: white !important;

  font-weight: 500;

  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

  font-size: 0.9rem;

}



/* Tüm yüzlerdeki içerik aynı stilde */

.stat-face-front .stat-number,

.stat-face-right .stat-number,

.stat-face-back .stat-number, 

.stat-face-left .stat-number {

  color: white !important;

  font-weight: 700 !important;

  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

  font-size: 2rem !important;

  margin-bottom: 8px !important;

}



.stat-face-front .stat-label,

.stat-face-right .stat-label,

.stat-face-back .stat-label,

.stat-face-left .stat-label {

  color: white !important;

  font-weight: 500;

  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

  font-size: 0.9rem !important;

}



/* Ana kartların boyut override */

.stat-card {

  height: 120px !important;

  min-height: 120px !important;

  max-height: 120px !important;

  padding: 0 !important; /* Padding kaldırıldı */

}



.stat-card.primary,

.stat-card.secondary,

.stat-card.success,

.stat-card.warning {

  height: 120px !important;

  min-height: 120px !important;

  max-height: 120px !important;

  padding: 0 !important; /* Padding kaldırıldı */

}



/* Genişletme butonu */

.stat-expand-btn {

  position: absolute;

  top: 8px;

  right: 8px;

  background: rgba(255,255,255,0.2);

  color: white;

  border: none;

  border-radius: 50%;

  width: 24px;

  height: 24px;

  font-size: 12px;

  cursor: pointer;

  transition: all 0.6s ease;

  display: flex;

  align-items: center;

  justify-content: center;

  backdrop-filter: blur(10px);

  z-index: 10;

}



.stat-expand-btn:hover {

  background: rgba(255,255,255,0.3);

  transform: scale(1.1);

}



.enhanced-stat.flipped .stat-expand-btn {

  transform: rotateY(180deg);

}



/* Tüm Yüzler İçeriği */

.stat-history-back {

  color: white;

  text-align: center;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 8px;

}



/* Özel yüz renkleri */

.stat-face-right .stat-history-back {

  color: white;

  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

}



.stat-face-back .stat-history-back {

  color: white;

  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

}



.stat-face-left .stat-history-back {

  color: white;

  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

}



.stat-history.hidden {

  display: none;

}



/* Geçmiş veriler başlığı */

.history-title {

  font-weight: 600;

  color: #333;

  margin-bottom: 8px;

  border-bottom: 1px solid #eee;

  padding-bottom: 4px;

}



/* Ay listesi */

.history-months {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.history-month {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 6px 8px;

  border-radius: 3px;

  background: #f8f9fa;

  font-size: 0.85rem;

}



.history-month:hover {

  background: #e9ecef;

}



.history-month-name {

  color: #495057;

  font-weight: 500;

}



.history-month-value {

  color: #007bff;

  font-weight: 600;

}



/* Chart container - Arka yüz için */

.history-chart-back {

  height: 60px;

  width: 100%;

  display: flex;

  align-items: end;

  padding: 4px;

  gap: 1px;

  margin-top: 8px;

  background: rgba(255,255,255,0.1);

  border-radius: 4px;

}



.chart-bar-back {

  background: rgba(255,255,255,0.8);

  border-radius: 1px 1px 0 0;

  min-height: 2px;

  flex: 1;

  transition: all 0.3s ease;

}



.chart-bar-back:hover {

  background: rgba(255,255,255,1);

  transform: scaleY(1.2);

}



/* Arka yüz başlık */

.history-title-back {

  font-size: 0.8rem;

  font-weight: 600;

  margin-bottom: 4px;

  opacity: 0.9;

}



/* Arka yüz ay bilgisi */

.current-month-info {

  font-size: 0.7rem;

  opacity: 0.7;

  margin-bottom: 8px;

}



/* Renk sınıfları */

.stat-card.primary .chart-bar { background: #007bff; }

.stat-card.secondary .chart-bar { background: #6c757d; }

.stat-card.success .chart-bar { background: #28a745; }

.stat-card.warning .chart-bar { background: #ffc107; }

.stat-card.info .chart-bar { background: #17a2b8; }



/* Loading spinner */

.history-loading {

  text-align: center;

  padding: 20px;

  color: #6c757d;

}



.history-loading::before {

  content: "⏳";

  display: block;

  font-size: 1.5rem;

  margin-bottom: 8px;

  animation: spin 1s linear infinite;

}



@keyframes spin {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}



/* İnfo renk sınıfı */

.stat-card.info {

  background: linear-gradient(135deg, #17a2b8, #20c997);

}



/* Responsive düzenlemeler */

@media (max-width: 768px) {

  .stat-history {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;

    max-width: 400px;

    max-height: 70vh;

  }

  

  .stat-expand-btn {

    width: 20px;

    height: 20px;

    font-size: 10px;

  }

}



/* =====================================================

   ÇAPRAZ BÖLÜNMÜŞ KART - Kadrolu / Ders Ücretli

   Sol alt - sağ üst çapraz bölünme

   ===================================================== */



.diagonal-split-card {

  position: relative;

  height: 120px !important;

  min-height: 120px !important;

  max-height: 120px !important;

  overflow: hidden;

  cursor: default;

  background: linear-gradient(135deg, #95a5a6, #7f8c8d) !important;

}



.diagonal-split-container {

  position: relative;

  width: 100%;

  height: 100%;

}



/* Üst üçgen - Kadrolu (Sol üst köşe) */

.diagonal-top {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, #27ae60, #2ecc71);

  clip-path: polygon(0 0, 100% 0, 0 100%);

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;

  padding: 12px 16px;

  box-sizing: border-box;

}



/* Alt üçgen - Ders Ücretli (Sağ alt köşe) */

.diagonal-bottom {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, #3498db, #2980b9);

  clip-path: polygon(100% 0, 0 100%, 100% 100%);

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-end;

  padding: 12px 16px;

  box-sizing: border-box;

}



/* Çapraz çizgi - container üzerinde pseudo-element ile */

.diagonal-split-container::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(

    to bottom right,

    transparent calc(50% - 1px),

    rgba(255, 255, 255, 0.5) calc(50% - 1px),

    rgba(255, 255, 255, 0.5) calc(50% + 1px),

    transparent calc(50% + 1px)

  );

  pointer-events: none;

  z-index: 10;

}



/* Eski diagonal-line elementi artık kullanılmıyor */

.diagonal-line {

  display: none;

}



/* Etiket stili */

.diagonal-label {

  font-size: 0.7rem;

  font-weight: 500;

  color: rgba(255, 255, 255, 0.9);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

  margin-bottom: 2px;

}



/* Değer stili */

.diagonal-value {

  font-size: 1.8rem;

  font-weight: 700;

  color: white;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

  line-height: 1;

}



/* Hover efekti */

.diagonal-split-card:hover .diagonal-top {

  background: linear-gradient(135deg, #2ecc71, #27ae60);

}



.diagonal-split-card:hover .diagonal-bottom {

  background: linear-gradient(135deg, #2980b9, #3498db);

}



.diagonal-split-card:hover .diagonal-value {

  transform: scale(1.05);

  transition: transform 0.2s ease;

}



/* Responsive */

@media (max-width: 768px) {

  .diagonal-label {

    font-size: 0.6rem;

  }

  

  .diagonal-value {

    font-size: 1.4rem;

  }

  

  .diagonal-top,

  .diagonal-bottom {

    padding: 8px 12px;

  }

}



/* =====================================================

   MADDE 8 UYARI SİSTEMİ

   Özel Öğretim Kurumları Kanunu uyum kontrolü

   ===================================================== */



/* Uyarı badge */

.madde8-warning-badge {

  position: absolute;

  top: -8px;

  right: -8px;

  width: 24px;

  height: 24px;

  background: #e74c3c;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  cursor: pointer;

  z-index: 20;

  animation: pulse-warning 2s infinite;

  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5);

}



@keyframes pulse-warning {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.1); }

}



/* Kart uyarı durumu */

.diagonal-split-card.madde8-warning {

  border: 2px solid #e74c3c !important;

  box-shadow: 0 0 12px rgba(231, 76, 60, 0.4);

}



/* Tooltip */

.madde8-tooltip {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  width: 320px;

  background: #2c3e50;

  color: white;

  border-radius: 8px;

  padding: 12px;

  z-index: 100;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease;

  margin-top: 8px;

  font-size: 12px;

  line-height: 1.4;

}



.madde8-tooltip::before {

  content: '';

  position: absolute;

  top: -8px;

  left: 50%;

  transform: translateX(-50%);

  border-width: 0 8px 8px 8px;

  border-style: solid;

  border-color: transparent transparent #2c3e50 transparent;

}



.diagonal-split-card:hover .madde8-tooltip {

  opacity: 1;

  visibility: visible;

}



.madde8-tooltip-header {

  font-weight: 700;

  font-size: 14px;

  margin-bottom: 8px;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  color: #e74c3c;

}



.madde8-tooltip-content {

  margin-bottom: 12px;

  color: #ecf0f1;

}



.madde8-tooltip-law {

  font-size: 10px;

  color: #95a5a6;

  font-style: italic;

  padding-top: 8px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.madde8-tooltip-unknown {

  background: rgba(241, 196, 15, 0.2);

  border-left: 3px solid #f1c40f;

  padding: 6px 8px;

  margin: 8px 0;

  font-size: 11px;

  color: #f1c40f;

  border-radius: 2px;

}