/* ta-he-sin-mim.css - Ta-He-Sin-Mim sayfası için özel stiller */

/* Açılır menüler için stil */
.accordion-trigger {
  transition: all 0.3s ease;
}

.accordion-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.accordion-trigger i {
  transition: transform 0.3s ease;
}

/* SVG Grafikleri için stil */
svg {
  max-width: 100%;
  height: auto;
}

/* İnteraktif grafikler için stil */
circle.cursor-pointer {
  cursor: pointer;
  transition: all 0.3s ease;
}

.relationship-line {
  transition: stroke-width 0.3s ease;
}

/* Pasta grafik dilimleri için stil */
svg path {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Bilgi paneli için stil */
#node-info-panel {
  transition: all 0.3s ease;
}

/* Tablo stilleri */
.min-w-full {
  min-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.table-scroll {
  overflow-x: auto;
}

/* Harf kartları için stil */
.bg-white, .dark .bg-gray-900 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bg-white:hover, .dark .bg-gray-900:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Sayı animasyonları için sınıf */
.thsm-count, .thsm-total {
  transition: color 0.3s ease;
}

/* Özel renkler */
.text-thsm-blue {
  color: #3B82F6; /* Ta */
}

.text-thsm-red {
  color: #EF4444; /* He */
}

.text-thsm-yellow {
  color: #F59E0B; /* Sin */
}

.text-thsm-green {
  color: #10B981; /* Mim */
}

.thsm-block-blue {
  background-color: rgba(59, 130, 246, 0.1);
  border-left: 4px solid #3B82F6;
}

.thsm-block-red {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #EF4444;
}

.thsm-block-yellow {
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 4px solid #F59E0B;
}

.thsm-block-green {
  background-color: rgba(16, 185, 129, 0.1);
  border-left: 4px solid #10B981;
}

/* Responsive ayarlamalar */
@media (max-width: 768px) {
  .grid-cols-1 {
    grid-template-columns: 1fr;
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  .md\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Mobil görünümde araları açma */
  .grid.gap-4 > * {
    margin-bottom: 1rem;
  }
  
  /* Tablo scrollbar'ı */
  .table-scroll {
    margin-bottom: 1rem;
  }
}

/* Chapter Total Kartları - Dark/Light Mode Uyumlu */
.chapter-total-card {
  background-color: #f8f9fa !important; /* Light mode */
}

.dark .chapter-total-card {
  background-color: #1f2937 !important; /* Dark mode */
}

/* Chapter Total kartları hover efekti */
.chapter-total-card:hover {
  background-color: #e9ecef !important; /* Light mode hover */
}

.dark .chapter-total-card:hover {
  background-color: #374151 !important; /* Dark mode hover */
}

/* Special Chapter Kartları (Chapter: 19, 20, etc.) - Dark/Light Mode Uyumlu */
.special-chapter-card {
  background-color: #f7f7f7 !important; /* Light mode */
}

.dark .special-chapter-card {
  background-color: #1f2937 !important; /* Dark mode */
}

/* Special Chapter kartları hover efekti */
.special-chapter-card:hover {
  background-color: #e9ecef !important; /* Light mode hover */
}

.dark .special-chapter-card:hover {
  background-color: #374151 !important; /* Dark mode hover */
}

/* Karanlık mod desteği */
@media (prefers-color-scheme: dark) {
  .bg-white {
    background-color: #1f2937;
  }
  
  .text-gray-700 {
    color: #e5e7eb;
  }
  
  .border-gray-200 {
    border-color: #374151;
  }
  
  .text-gray-600 {
    color: #d1d5db;
  }
  
  .text-gray-800 {
    color: #f9fafb;
  }
  
  .bg-gray-100 {
    background-color: #111827;
  }
}