/* Döngüsel Responsive Tablo Sistemi - 2 Kolon Sabit */
.responsive-table-container {
  position: relative;
  overflow-x: auto;
  margin: 0 !important;
  padding: 0 !important;
}

.responsive-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px 0;
}

.cycle-columns-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: none; /* Varsayılan olarak gizli */
}

.cycle-columns-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

.cycle-columns-btn:active {
  transform: translateY(0);
}

.cycle-columns-btn i {
  margin-right: 4px;
}

/* Temel kolon sınıfları */
.col-always-visible {
  display: table-cell !important;
}

.col-main-content {
  display: table-cell !important;
}

/* Döngüsel kolon grupları */
.col-cycle-group-1 {
  display: table-cell;
}
.col-cycle-group-2 {
  display: table-cell;
}
.col-cycle-group-3 {
  display: table-cell;
}
.col-cycle-group-4 {
  display: table-cell;
}
.col-cycle-group-5 {
  display: table-cell;
}
.col-cycle-group-6 {
  display: table-cell;
}
.col-cycle-group-7 {
  display: table-cell;
}

/* Desktop (1024px üzeri) - Tüm kolonlar görünür */
@media (min-width: 1024px) {
  .cycle-columns-btn {
    display: none !important;
  }

  .responsive-table {
    font-size: 12px;
  }
}

/* Tablet (768px-1023px) - Ana içerik + 2 döngüsel kolon */
@media (max-width: 1023px) and (min-width: 768px) {
  .cycle-columns-btn {
    display: inline-block;
  }

  /* 3-7 grupları gizle, 1-2 görünür kalacak */
  .col-cycle-group-3,
  .col-cycle-group-4,
  .col-cycle-group-5,
  .col-cycle-group-6,
  .col-cycle-group-7 {
    display: none !important;
  }

  /* Aktif kolon göster */
  .col-cycle-group-3.cycle-active,
  .col-cycle-group-4.cycle-active,
  .col-cycle-group-5.cycle-active,
  .col-cycle-group-6.cycle-active,
  .col-cycle-group-7.cycle-active {
    display: table-cell !important;
  }

  .responsive-table {
    font-size: 11px;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 4px 3px;
  }
}

/* Mobil (768px ve altı) - Ana içerik + 1 sabit + 1 döngüsel kolon */
@media (max-width: 767px) {
  .cycle-columns-btn {
    display: inline-block;
  }

  /* 2-7 grupları gizle, sadece 1 görünür kalacak */
  .col-cycle-group-2,
  .col-cycle-group-3,
  .col-cycle-group-4,
  .col-cycle-group-5,
  .col-cycle-group-6,
  .col-cycle-group-7 {
    display: none !important;
  }

  /* Sadece aktif kolon göster */
  .col-cycle-group-2.cycle-active,
  .col-cycle-group-3.cycle-active,
  .col-cycle-group-4.cycle-active,
  .col-cycle-group-5.cycle-active,
  .col-cycle-group-6.cycle-active,
  .col-cycle-group-7.cycle-active {
    display: table-cell !important;
  }

  .responsive-table {
    font-size: 10px;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 3px 2px;
  }
}

/* Küçük telefon (576px ve altı) */
@media (max-width: 576px) {
  .responsive-table {
    font-size: 9px;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 2px 1px;
  }
}

/* Mini telefon (480px ve altı) */
@media (max-width: 480px) {
  .responsive-table {
    font-size: 8px;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 2px 1px;
  }
}

/* Döngü animasyonu */
.col-cycle-group-1,
.col-cycle-group-2,
.col-cycle-group-3,
.col-cycle-group-4,
.col-cycle-group-5,
.col-cycle-group-6,
.col-cycle-group-7 {
  transition: all 0.4s ease;
}

.cycle-active {
  animation: slideInColumn 0.4s ease;
}

@keyframes slideInColumn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tablo temel stilleri */
.responsive-table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.responsive-table th,
.responsive-table td {
  vertical-align: middle;
  border: 1px solid #d0d7de;
  padding: 4px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.responsive-table thead th {
  background-color: #e3f2fd !important;
  font-weight: bold;
  border-bottom: 2px solid #bbdefb;
  text-align: center;
  position: sticky !important;
  top: 0 !important;
  z-index: 1001 !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.responsive-table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Zebra çizgili satırlar */
.responsive-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.responsive-table tbody tr:hover {
  background-color: #e7f3ff;
}

/* Ana kolon genişlikleri */
.responsive-table .col-always-visible:first-child {
  min-width: 40px;
  max-width: 60px;
  text-align: center;
}

.responsive-table .col-main-content {
  min-width: 180px;
  max-width: 250px;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
}

/* Döngüsel kolon genişlikleri */
.col-cycle-group-1,
.col-cycle-group-2,
.col-cycle-group-3,
.col-cycle-group-4,
.col-cycle-group-5,
.col-cycle-group-6,
.col-cycle-group-7 {
  min-width: 80px;
  max-width: 120px;
  text-align: center;
}

/* Buton durumu gösterici */
.cycle-columns-btn.has-hidden::after {
  content: " (" attr(data-current) "/" attr(data-total) ")";
  font-size: 10px;
  opacity: 0.8;
}

/* Scrollbar stillemesi */
.responsive-table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.responsive-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.responsive-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.responsive-table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Gizli kolonlar ipucu */
.hidden-columns-hint {
  font-size: 10px;
  color: #6c757d;
  text-align: center;
  margin-top: 5px;
  display: none;
}

@media (max-width: 767px) {
  .hidden-columns-hint {
    display: block;
  }

  .hidden-columns-hint::before {
    content: "📱 ";
  }
}

/* Özel durumlar için yardımcı sınıflar */
.table-2-column-mobile .col-always-visible {
  max-width: 150px;
}

.table-2-column-mobile .cycle-active {
  max-width: 120px;
}

/* Responsive metin boyutları */
@media (max-width: 576px) {
  .cycle-columns-btn {
    font-size: 11px;
    padding: 5px 8px;
  }
}

@media (max-width: 480px) {
  .cycle-columns-btn {
    font-size: 10px;
    padding: 4px 6px;
  }

  .hidden-columns-hint {
    font-size: 9px;
  }
}

/* Scroll ile Sticky Header */
.table-with-scroll {
  max-height: 400px;
  overflow-y: auto;
}

/* Tercih Sihirbazı - Scroll yok */
.preferences-table-container {
  max-height: none;
  overflow: visible;
}

.responsive-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-clip: padding-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tercih sihirbazında sticky header istemiyoruz */
.preferences-table-container .responsive-table thead th {
  position: static;
  top: auto;
  z-index: auto;
  box-shadow: none;
}

/* Post detail tablosu için 300px yükseklik */
.post-detail-table {
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* Forum post tabloları - scroll yok */
.forum-post-table {
  max-height: none;
  overflow: visible;
}

.forum-post-table .responsive-table thead th {
  position: static;
  top: auto;
  z-index: auto;
  box-shadow: none;
}

/* Tercih Sihirbazı - Direkt HTML scroll ile sticky header */
#preferences-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background-color: #e8f5e8 !important;
  background-clip: padding-box !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}