/* ============================================
   Layout Fixes - Genel Sayfa Düzenlemeleri
   ============================================ */

/* ============================================
   1. GALLERY & IMAGE FIXES
   Galeri ve resim boyutları
   ============================================ */

/* Galeri resimleri daha büyük olsun */
.gallery-item img,
.photo-gallery img,
.mayor-gallery img {
  width: 100%;
  height: auto;
  min-height: 200px;
  object-fit: cover;
}

/* Gallery grid düzeni */
.gallery-grid,
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--hbb-spacing-lg);
  margin-bottom: var(--hbb-spacing-2xl);
}

/* ============================================
   2. TIMELINE FIXES
   Timeline metinleri ve başlıkları
   ============================================ */

/* Timeline başlıkları */
.timeline-title,
.timeline h3,
.timeline-item h3 {
  font-size: var(--hbb-font-2xl) !important;
  font-weight: var(--hbb-font-bold) !important;
  color: var(--hbb-navy) !important;
  margin-bottom: var(--hbb-spacing-md) !important;
}

/* Timeline yılları */
.timeline-year,
.timeline-item .year {
  font-size: var(--hbb-font-3xl) !important;
  font-weight: var(--hbb-font-bold) !important;
  color: var(--hbb-navy) !important;
}

/* Timeline metinleri */
.timeline-text,
.timeline-item p,
.timeline-description {
  font-size: var(--hbb-font-lg) !important;
  line-height: 1.75 !important;
  color: var(--hbb-text) !important;
}

/* Timeline item spacing */
.timeline-item {
  margin-bottom: var(--hbb-spacing-2xl) !important;
  padding: var(--hbb-spacing-lg) !important;
}

/* ============================================
   3. PAGE TITLE FIXES
   Sayfa başlıkları daha büyük
   ============================================ */

/* Ana sayfa başlıkları */
.page-title,
.main-title,
.content-title {
  font-size: var(--hbb-font-4xl) !important;
  font-weight: var(--hbb-font-bold) !important;
  color: var(--hbb-navy) !important;
  margin-bottom: var(--hbb-spacing-xl) !important;
  text-align: center;
}

/* Mobil başlıklar */
@media (max-width: 768px) {
  .page-title,
  .main-title,
  .content-title {
    font-size: var(--hbb-font-3xl) !important;
  }
}

/* ============================================
   4. SECTION SPACING FIXES
   Section'lar arası boşluklar
   ============================================ */

/* Section padding */
section,
.section {
  padding-bottom: var(--hbb-spacing-xl);
}

/* Mobil section padding */
@media (max-width: 768px) {
  section,
  .section {
    padding-bottom: var(--hbb-spacing-2xl);
  }
}

/* ============================================
   5. CONTENT SPACING FIXES
   İçerik alanı boşlukları
   ============================================ */

/* Content area genel spacing */
.content-area,
.page-content,
.main-content {
  margin-bottom: var(--hbb-spacing-2xl);
}

/* Paragraph spacing */
.content-area > p,
.page-content > p,
.main-content > p,
.content-area > div,
.page-content > div,
.main-content > div {
  margin-bottom: var(--hbb-spacing-md) !important;
}

/* Heading spacing */
.content-area h1,
.content-area h2,
.content-area h3,
.page-content h1,
.page-content h2,
.page-content h3 {
  margin-top: var(--hbb-spacing-xl);
  margin-bottom: var(--hbb-spacing-md);
}

.content-area h1:first-child,
.content-area h2:first-child,
.content-area h3:first-child,
.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child {
  margin-top: 0;
}

/* ============================================
   6. GRID & LAYOUT FIXES
   Grid ve layout düzenlemeleri
   ============================================ */

/* Row spacing */
.row {
  margin-bottom: var(--hbb-spacing-lg);
}

.row:last-child {
  margin-bottom: 0;
}

/* Column spacing */
.col,
[class*="col-"] {
  margin-bottom: var(--hbb-spacing-md);
}

@media (min-width: 768px) {
  .col,
  [class*="col-"] {
    margin-bottom: 0;
  }
}

/* ============================================
   7. MAYOR BIOGRAPHY PAGE FIXES
   Başkan biyografi sayfası özel düzenlemeler
   ============================================ */

/* Biography section başlığı */
.biography-section h2,
.mayor-bio h2 {
  font-size: var(--hbb-font-3xl) !important;
  text-align: center;
  margin-bottom: var(--hbb-spacing-xl) !important;
}

/* Biography timeline */
.biography-timeline,
.mayor-timeline {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--hbb-spacing-2xl) 0;
}

/* ============================================
   8. BLOG DETAIL PAGE FIXES
   Haber, duyuru, etkinlik detay sayfaları
   ============================================ */

/* Blog içerik sol hizalama */
.th-blog.blog-single .blog-content {
  text-align: left !important;
}

/* Başlık ve tarih sol hizalama */
.th-blog.blog-single .blog-content .blog-meta,
.th-blog.blog-single .blog-content .blog-title {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Blog içerik paragrafları */
.th-blog.blog-single .blog-content p,
.th-blog.blog-single .blog-content div {
  text-align: left !important;
}

/* Detay sayfaları - footer ile arasında boşluk */
.th-blog-wrapper.space-extra-bottom {
  margin-bottom: 60px;
}

/* Liste sayfaları - satırlar arası responsive boşluk */
.news_container {
  row-gap: 30px;
}

/* ============================================
   9. GEZI REHBERI PAGE FIXES
   Gezi rehberi detay sayfası görselleri
   ============================================ */

/* Gezi rehberi galeri - yatay format için */
#tourGallerySlider .swiper-slide img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: var(--hbb-radius-lg);
}

.blog-single .blog-img {
  background-color: var(--smoke-color);
  border-radius: 14px;
  margin: 20px;
  padding: 10px;
}

.blog-single.haber .blog-img img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Etkinlik & Duyuru kartları - kare görsel */
#events-container .blog-single.haber .blog-img img,
#announcements-container .blog-single.haber .blog-img img {
  aspect-ratio: 1 / 1;
}

.blog-single .blog-img section {
  margin: 0;
  padding: 0 !important;
}

.blog-single .blog-img .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  max-width: 100%;
}

.blog-single .blog-img .container.mb-15 {
  margin-bottom: 0 !important;
}

#newsGallerySlider,
#projectGallerySlider,
#eventGallerySlider,
#announcementGallerySlider {
  margin: 0 !important;
  padding: 0 !important;
}

#newsGallerySlider .swiper-wrapper,
#projectGallerySlider .swiper-wrapper,
#eventGallerySlider .swiper-wrapper,
#announcementGallerySlider .swiper-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

.blog-single .blog-img .news-carousel {
  margin-top: 10px !important;
  padding-bottom: 5px;
} 

/* Detay sayfası sliderları - haber/proje 3/2, etkinlik/duyuru 1/1 */
#newsGallerySlider .swiper-slide img,
#projectGallerySlider .swiper-slide img {
  aspect-ratio: 3 / 2;
  object-fit: cover !important;
  width: 100%;
  border-radius: var(--hbb-radius-lg);
}

#announcementGallerySlider .swiper-slide img,
#eventGallerySlider .swiper-slide img {
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  width: 100%;
  border-radius: var(--hbb-radius-lg);
}

/* Mobil görünüm için aspect-ratio ayarı */
@media (max-width: 768px) {
  #tourGallerySlider .swiper-slide img {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================
   10. PROJE KARTLARI FIXES
   Proje sayfası kart boyutları ve hizalama
   ============================================ */

/* Proje Kartları - Eşit Yükseklik */
.project-section .news_container {
  display: flex;
  flex-wrap: wrap;
}

.project-section .news_container > .col-xxl-4,
.project-section .news_container > .col-lg-4,
.project-section .news_container > .col-md-6,
.project-section .news_container > .col-sm-12 {
  display: flex;
}

.project-section .th-blog.blog-single.proje {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.project-section .th-blog.blog-single.proje .blog-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-section .th-blog.blog-single.proje .blog-title {
  flex: 1;
}

/* Proje Görselleri - Sabit Aspect Ratio */
.project-section .th-blog.blog-single.proje .blog-img img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Proje Kartları - İçerik Padding ve Tipografi (Canlı site ile uyumlu) */
.project-section .th-blog.blog-single.proje .blog-content {
  padding: 40px !important;
}

.project-section .th-blog.blog-single.proje .blog-title {
  font-size: 28px !important;
  line-height: 1.28 !important;
}

.project-section .th-blog.blog-single.proje .blog-meta {
  margin-bottom: 15px !important;
}

/* Mobil görünüm için padding ayarı */
@media (max-width: 768px) {
  .project-section .th-blog.blog-single.proje .blog-content {
    padding: 25px !important;
  }

  .project-section .th-blog.blog-single.proje .blog-title {
    font-size: 22px !important;
  }
}

/* ============================================
   11. PROJE BÖLÜMLERI ARASI BOŞLUK
   Section başlıkları ile kartlar arası mesafe
   ============================================ */

/* İlk section'da üst margin olmasın */
.project-section:first-of-type {
  margin-top: 0 !important;
}

/* Ardışık section'lar arası boşluk */
.project-section + .project-section {
  margin-top: 60px !important;
}

/* Section başlık alt boşluğu */
.project-section .sec-title {
  margin-bottom: 30px !important;
}

/* ============================================
   12. HABER/ETKİNLİK/DUYURU KARTLARI
   Blog kartları - padding ve tipografi
   ============================================ */

/* Kart İçerik Padding */
.th-blog.blog-single.haber .blog-content {
  padding: 40px !important;
}

/* Başlık Tipografisi */
.th-blog.blog-single.haber .blog-title {
  font-size: 28px !important;
  line-height: 1.28 !important;
}

/* Meta Alanı Alt Boşluk */
.th-blog.blog-single.haber .blog-meta {
  margin-bottom: 15px !important;
}

/* Mobil Responsive */
@media (max-width: 768px) {
  .th-blog.blog-single.haber .blog-content {
    padding: 25px !important;
  }

  .th-blog.blog-single.haber .blog-title {
    font-size: 22px !important;
  }
}

/* ============================================
   13. GEZİ REHBERLERİ KARTLARI
   Tour kartları - eşit yükseklik ve görsel oranı
   ============================================ */

/* Gezi Rehberleri Grid - Eşit Yükseklik */
#tours-container {
  display: flex;
  flex-wrap: wrap;
}

#tours-container > .col-xxl-4,
#tours-container > .col-lg-4,
#tours-container > .col-md-6,
#tours-container > .col-sm-12 {
  display: flex;
}

#tours-container .th-blog.blog-single.haber {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Gezi Rehberleri Görselleri - Sabit Aspect Ratio */
#tours-container .th-blog.blog-single.haber .blog-img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Gezi Rehberleri İçerik */
#tours-container .th-blog.blog-single.haber .blog-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================
   14. GEZİ REHBERLERİ DETAY SAYFASI
   Tour detay sayfası stilleri (.detail-page class ile)
   ============================================ */

/* Detay Sayfası Ana Kart */
.detail-page .th-blog.blog-single {
  background: #fafafa;
  border-radius: var(--hbb-radius-lg, 12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Detay Sayfası İçerik */
.detail-page .th-blog.blog-single > .blog-content {
  padding: 30px 40px 40px !important;
  text-align: left !important;
  display: block !important;
}

/* Detay Sayfası Başlık - Sola Hizalı (Yüksek Spesifiklik) */
.detail-title,
h3.detail-title,
.blog-title.detail-title,
h3.blog-title.detail-title,
.detail-content .detail-title,
.col-xxl-8 .detail-title,
.col-lg-7 .detail-title,
/* Fallback: detail-page class'ı ile mevcut yapıyı hedefle */
section.detail-page .blog-title,
section.detail-page h3.blog-title,
section.detail-page .col-xxl-8 .blog-title,
section.detail-page .col-lg-7 .blog-title,
.detail-page .th-blog.blog-single .blog-title,
.th-blog-wrapper.detail-page .blog-content .blog-title {
  text-align: left !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--hbb-navy, #0b335f) !important;
  margin-bottom: 20px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Detay İçerik Alanı */
.detail-content,
.blog-content.detail-content,
section.detail-page .blog-content,
.detail-page .th-blog.blog-single > .blog-content {
  display: block !important;
  text-align: left !important;
}

/* Detay Sayfası Başlık Link */
.detail-page .th-blog.blog-single .blog-content .blog-title a {
  text-align: left !important;
}

/* Detay Sayfası Paragraflar */
.detail-page .th-blog.blog-single > .blog-content p,
.detail-page .th-blog.blog-single > .blog-content div {
  text-align: left !important;
  line-height: 1.7;
  margin-bottom: 1rem !important;
}

/* Detay Sayfası İçerik Başlıkları (h4, h5, h6) - Sola Hizalı */
.detail-page .blog-content h4,
.detail-page .blog-content h5,
.detail-page .blog-content h6,
.detail-content h4,
.detail-content h5,
.detail-content h6,
section.detail-page h4,
section.detail-page h5,
section.detail-page h6 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 0.5em !important;
  display: block !important;
}

/* Mobil Responsive */
@media (max-width: 768px) {
  .detail-page .th-blog.blog-single > .blog-content {
    padding: 20px 25px 30px !important;
  }

  .detail-page .th-blog.blog-single .blog-content .blog-title {
    font-size: 22px !important;
  }
}

/* Detay Sayfası - Media Query Override (site.css liste stili geçersiz kıl) */
@media (min-width: 992px) and (max-width: 1199px) {
  .detail-page .col-lg-7 .th-blog.blog-single .blog-content,
  .detail-page.th-blog-wrapper .col-lg-7 .blog-content {
    display: block !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .detail-page .col-lg-7 .blog-title,
  .detail-page.th-blog-wrapper .col-lg-7 .blog-title {
    text-align: left !important;
    margin: 0 auto 20px 0 !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .detail-page .col-xxl-8 .th-blog.blog-single .blog-content,
  .detail-page.th-blog-wrapper .col-xxl-8 .blog-content {
    display: block !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .detail-page .col-xxl-8 .blog-title,
  .detail-page.th-blog-wrapper .col-xxl-8 .blog-title {
    text-align: left !important;
    margin: 0 auto 20px 0 !important;
  }
}

/* ============================================
   15. HATAY.BEL.TR SPACING SYNC
   Canlı site ile boşluk uyumu (rem birimleri)
   16px = 1rem
   ============================================ */

/* Section Space Variables Override - Canlı site ile uyumlu */
:root {
  --section-space: 7.5rem;      /* 120px */
  --section-space-mobile: 5rem; /* 80px */
}

/* space-extra-bottom - 5.625rem padding (canlı site ile uyumlu) */
.space-extra,
.space-extra-bottom {
  padding-bottom: 5.625rem !important; /* 90px */
}

.space-extra,
.space-extra-top {
  padding-top: 5.625rem !important; /* 90px */
}

/* th-blog-wrapper spacing - canlı site ile uyumlu */
.th-blog-wrapper.space-extra-bottom {
  padding-top: 0 !important;
  padding-bottom: 5.625rem !important; /* 90px */
  margin-bottom: 0 !important;
}

/* Container ayarları - canlı site ile uyumlu */
.container {
  padding-left: 0.75rem !important;  /* 12px */
  padding-right: 0.75rem !important; /* 12px */
  max-width: 82.5rem !important;     /* 1320px */
}

/* Breadcrumb wrapper - canlı site ile uyumlu */
.breadcumb-wrapper {
  margin-top: 0 !important;
  padding: 1.875rem 0 !important;    /* 30px */
  margin-bottom: 1.875rem !important; /* 30px - canlı site ile aynı */
}

/* Breadcrumb içi başlık boyutu */
.breadcumb-wrapper h1 {
  font-size: 3rem !important;    /* 48px - canlı site ile uyumlu */
  margin-bottom: -0.42rem !important; /* -6.72px - canlı site ile aynı */
}

/* H2 Section heading margin - canlı site ile uyumlu */
.th-blog-wrapper h2,
.project-section h2,
section h2.sec-title,
h2.sec-title,
h2.sec-title.mb-4,
.space-extra-bottom h2,
main h2.sec-title {
  margin-bottom: 0.9375rem !important; /* 15px */
}

/* Row margin ayarları */
.row {
  margin-left: -0.75rem !important;  /* -12px */
  margin-right: -0.75rem !important; /* -12px */
}

/* Column padding ayarları - sadece blog/proje kartları */
.news_container > [class*="col-"],
.project-section [class*="col-"] {
  padding-left: 0.75rem !important;  /* 12px */
  padding-right: 0.75rem !important; /* 12px */
}

/* Mobil responsive spacing */
@media (max-width: 991px) {
  .space-extra,
  .space-extra-bottom {
    padding-bottom: 3.125rem !important; /* 50px */
  }

  .space-extra,
  .space-extra-top {
    padding-top: 3.125rem !important; /* 50px */
  }

  .th-blog-wrapper.space-extra-bottom {
    padding-bottom: 3.125rem !important; /* 50px */
  }

  .container {
    padding-left: 0.9375rem !important;  /* 15px */
    padding-right: 0.9375rem !important; /* 15px */
  }

  .breadcumb-wrapper h1 {
    font-size: 2rem !important; /* 32px mobil - masaüstü 48px oranında */
  }
}