/* Editör dışı içerik görünümü için stil kuralları */

/* Editör kontrol butonlarını gizle */
.detailed-info-content .img-controls,
.detailed-info-content .control-group,
.detailed-info-content .size-buttons,
.detailed-info-content .alignment-buttons,
.detailed-info-content .action-buttons,
.detailed-info-content .resize-handles {
  display: none !important;
}

/* ============================================
   PRODUCTION SORUN GİDERME - GEREKSIZ KUTUCUKLAR
   ============================================ */

/* Tüm boş contenteditable alanları gizle */
*[contenteditable="true"]:empty,
*[contenteditable="false"]:empty,
.ql-editor:empty,
.ql-container:empty {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Boş divleri de gizle (sadece detay sayfa altında) */
.detailed-description-content div:empty,
.info-text div:empty,
.blog-text div:empty {
  display: none !important;
}

/* Quill editör elementlerini tamamen gizle */
.ql-editor,
.ql-container,
.ql-toolbar,
.ql-tooltip {
  display: none !important;
  visibility: hidden !important;
}

/* Gösterim modunda gereksiz bilgileri temizle */
.blog-text img + div,
.info-text img + div {
  display: none !important;
}

/* Fotoğrafın altındaki yazıları gizle */
.info-text img::after,
.blog-text img::after {
  content: none !important;
}

/* Resim açıklamaları ve kontrol metinlerini gizle */
.info-text .img-wrapper > *:not(img),
.blog-text .img-wrapper > *:not(img),
.info-text .image-wrapper > *:not(img),
.blog-text .image-wrapper > *:not(img) {
  display: none !important;
}

/* Sadece fotoğrafı göster, diğer tüm kontrol elementlerini gizle */
.info-text img,
.blog-text img {
  display: block !important;
  margin: 20px auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Özel kontrol alanlarını temizle */
.info-text [contenteditable="false"] > *:not(img),
.blog-text [contenteditable="false"] > *:not(img) {
  display: none !important;
}

/* ============================
   IRK DETAY SAYFASI LAYOUT
   ============================ */

/* Ana hero bölümü */
.blog-breed-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 30px 20px; /* Üst padding'i biraz azalt */
  margin-bottom: 15px; /* Alt margin'i azalt */
}

/* Breed detail container */
.breed-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start; /* Öğeleri üstten hizala */
  min-height: 400px;
}

/* Sol taraf - Resim bölümü */
.blog-image-section {
  flex: 0 0 400px; /* Sabit genişlik */
  display: flex;
  justify-content: center;
}

/* Sağ taraf - İçerik bölümü */
.blog-content-section {
  flex: 1; /* Kalan alanı kaplasın */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Üstten başla */
  padding: 0; /* Tüm padding'i kaldır */
  margin: -10px 0 0 0; /* Negatif üst margin ile yukarı taşı */
  align-self: flex-start; /* Kendini container'ın üstüne hizala */
  position: relative;
}

/* Resim konteyneri */
.image-container {
  width: 100%;
  max-width: 400px;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  background: white;
  margin-top: 0; /* Üstten margin yok */
}

/* Ana resim */
.breed-main-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* Pet type badge */
.breed-type-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -5px 0 8px 0; /* Negatif üst margin ile yukarı taşı */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}

/* Breed title */
.breed-title-blog {
  font-size: 2.5em;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
  line-height: 1.2;
}

/* Breed description */
.breed-description-blog {
  font-size: 16px;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Quick stats container */
.quick-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

/* Stat item */
.stat-item {
  background: white;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.stat-item i {
  color: #667eea;
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.stat-item span {
  font-weight: 600;
  color: #495057;
}

/* Responsive design */
@media (max-width: 768px) {
  .breed-detail-container {
    flex-direction: column;
    gap: 30px;
  }
  
  .blog-image-section {
    flex: none;
    width: 100%;
  }
  
  .blog-content-section {
    padding-top: 0;
  }
  
  .breed-title-blog {
    font-size: 2em;
  }
  
  .quick-stats {
    grid-template-columns: 1fr;
  }
}

/* ============================
   TOOLTIP STYLES
   ============================ */

/* Stat item tooltip container */
.stat-item {
  position: relative;
  cursor: help;
}

/* Tooltip text */
.stat-item .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  min-width: 200px;
  max-width: 300px;
  white-space: normal;
}

/* Tooltip arrow */
.stat-item .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #2c3e50;
}

/* Show tooltip on hover */
.stat-item:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

/* Responsive tooltip */
@media (max-width: 768px) {
  .stat-item .tooltip-text {
    bottom: 120%;
    min-width: 180px;
    font-size: 12px;
    padding: 10px 14px;
  }
}

/* ============================
   DETAILED BREED INFO SECTION
   ============================ */

/* Detailed breed info container */
.breed-detailed-info {
  padding: 20px 0 40px 0; /* Üst padding'i azalt */
  margin-top: 0; /* Üst margin'i kaldır */
  background: #ffffff;
}

/* Detailed info title */
.detailed-info-title {
  margin-top: 0; /* Üst margin'i kaldır */
  margin-bottom: 25px;
  padding-top: 0; /* Üst padding'i kaldır */
}