/*--------------------------------------------------------------

# Header

--------------------------------------------------------------*/

.site-header {
  padding: 2rem 0;

  background-color: var(--surface-color); /* Diğer sayfalar için varsayılan arkaplan rengi */

  transition: background-color 0.3s ease-in-out;

  z-index: 999;
}

/* Anasayfa için şeffaf header */

.site-header.transparent-header {
  position: absolute;

  width: 100%;

  top: 0;

  left: 0;

  background-color: transparent;
}

.header-inner {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

/* Logo */

.site-branding .custom-logo {
  max-height: 50px; /* Logonuzun boyutunu ayarlayabilirsiniz */

  width: auto;
}

/* Ana Menü */

.main-navigation ul {
  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;
}

.main-navigation li {
  margin: 0 2rem;
}

.main-navigation a {
  position: relative; /* Alt çizgi için konumlandırma bağlamı */

  text-decoration: none;

  color: var(--text-color);

  font-weight: 500;

  font-size: 1.6rem;

  letter-spacing: 0.5px;

  transition: color 0.3s;

  padding-bottom: 5px; /* Çizgiye yer açmak için */
}

.main-navigation .current-menu-item > a,
.main-navigation a:hover {
  color: var(--primary-color);
}

/* Alt çizgiyi oluşturma */

.main-navigation a::after {
  content: "";

  position: absolute;

  width: 100%;

  transform: scaleX(0); /* Başlangıçta genişliği 0 */

  height: 2px;

  bottom: -5px;

  left: 0;

  background-color: var(--primary-color);

  transform-origin: bottom right;

  transition: transform 0.25s ease-out;
}

/* Hover durumunda ve aktif menü elemanında çizgiyi gösterme */

.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after {
  transform: scaleX(1); /* Genişliği %100 yap */

  transform-origin: bottom left;
}

/* Sağdaki Yardımcı Menü */

.header-utility {
  display: flex;

  align-items: center;
}

.header-utility .utility-link {
  display: flex;

  align-items: center;

  text-decoration: none;

  color: var(--text-color);

  font-weight: 500;

  font-size: 1.5rem;

  margin-left: 2.5rem;
}

.header-utility .utility-link i {
  font-size: 2.4rem;

  color: var(--primary-color);

  margin-right: 0.8rem;
}

.header-utility .cart-count {
  background-color: var(--primary-color);

  color: var(--text-color);

  border-radius: 50%;

  width: 22px;

  height: 22px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  font-size: 1.2rem;

  font-weight: 700;

  margin-left: 0.8rem;
}

/*--------------------------------------------------------------

# Anasayfa Slider

--------------------------------------------------------------*/

.home-slider {
  height: 100vh; /* Ekran yüksekliğinin %100'ı kadar */

  width: 100%;

  position: relative;

  color: #fff;
}

.home-slider .swiper-slide {
  background-size: cover;

  background-position: center;

  position: relative; /* Overlay için eklendi */
}

/* YENİ: Slider üzerine overlay ekleme (SADECE .has-overlay sınıfı olanlara) */

.home-slider .swiper-slide.has-overlay::after {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.3); /* Siyah, %30 opaklıkta. Değeri artırıp azaltabilirsiniz. */

  z-index: 1; /* İçeriğin arkasında kalması için */
}

.home-slider .slide-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: 100%;

  text-align: center;

  padding: 2rem;

  padding-top: 90px; /* Header yüksekliğini dengelemek için eklendi */

  box-sizing: border-box; /* Padding'in yüksekliğe dahil edilmesi için eklendi */

  position: relative; /* z-index için eklendi */

  z-index: 2; /* Overlay'in üzerinde kalması için z-index güncellendi */
}

.home-slider .slide-title {
  font-family: "Times New Roman", Times, serif; /* Daha şık bir font */

  font-size: clamp(2.5rem, 6vw, 5rem); /* Ekran boyutuna göre değişen font boyutu */

  font-weight: 700;

  line-height: 1.1;

  margin: 0 0 1rem 0;

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Okunabilirliği artırmak için hafif gölge */
}

.home-slider .slide-subtitle {
  font-size: clamp(0.9rem, 2vw, 1.1rem);

  text-transform: uppercase;

  letter-spacing: 3px;

  font-weight: 400;

  margin-bottom: 2.5rem;

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

.home-slider .slide-button {
  background-color: var(--primary-color); /* Diğer butonlarla aynı renk */

  color: var(--text-color-white);

  border: 2px solid var(--primary-color);

  padding: 1.2rem 3rem; /* Diğer butonlarla aynı iç boşluk */

  font-weight: 700;

  letter-spacing: 1px;

  border-radius: 50px; /* Diğer butonlar gibi yuvarlak */

  transition: all 0.3s ease;

  letter-spacing: 1.5px;
}

.home-slider .slide-button:hover {
  background-color: var(--primary-darker-color);

  border-color: var(--primary-darker-color);

  color: #fff;

  transform: translateY(-3px);
}

/* Navigasyon Oklarını Gizle */

.home-slider .swiper-button-prev,
.home-slider .swiper-button-next {
  display: none;
}

/* Yatay Paginasyon (Noktalar) */

.home-slider .swiper-pagination {
  position: absolute;

  bottom: 20px; /* Altta konumlandır */

  left: 50%; /* Yatayda ortala */

  transform: translateX(-50%); /* Yatayda tam ortalamak için */

  width: auto;

  display: flex;

  gap: 10px; /* Noktalar arası boşluk */

  z-index: 5;
}

.home-slider .swiper-pagination-bullet {
  width: 12px;

  height: 12px;

  background-color: transparent;

  border: 2px solid rgba(255, 255, 255, 0.8);

  opacity: 1;

  transition: all 0.3s ease;
}

.home-slider .swiper-pagination-bullet-active {
  background-color: var(--primary-darker-color); /* Tema rengi ile güncellendi */

  border-color: var(--primary-darker-color); /* Tema rengi ile güncellendi */

  transform: scale(1.2);
}

/*--------------------------------------------------------------

# Özellikler Bölümü

--------------------------------------------------------------*/

.features-section {
  padding: 8rem 0;

  position: relative; /* Overlay ve içerik konumlandırması için gerekli */

  z-index: 1;

  /* Arkaplan Görseli Ayarları */

  background-color: var(--surface-color); /* Resim yüklenmezse görünecek renk */

  background-image: url("../images/section_background.png"); /* GÖRSEL ADINI KONTROL EDİN */

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;
}

/* Arkaplan deseninin üzerine yarı şeffaf bir katman ekleyerek okunabilirliği artırma */

.features-section::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(248, 245, 240, 0.65); /* var(--surface-color) renginin %85 opaklıkta hali */

  z-index: -1;
}

/* İçeriğin arkaplan ve overlay'in üzerinde kalmasını sağlama */

.features-section .container {
  position: relative;

  z-index: 2;
}

/* Genel bölüm başlığı stili olarak güncellendi */

.section-header {
  margin-bottom: 6rem;

  display: flex;

  flex-direction: column;

  align-items: center; /* Flexbox ile çocukları yatayda ortala */
}

/* Ortak başlık stilleri (h1 ve h2 için) */

.section-header h1,
.section-header h2 {
  font-size: 4rem !important; /* Bootstrap'i ezmek için !important eklendi */

  font-weight: 700;

  text-align: center;
}

.features-section .section-header p {
  font-size: 1.8rem;

  color: var(--text-color-light);

  max-width: 600px;

  text-align: center;
}

/* YENİ: Bölüm başlığı altındaki ayırıcı */

.section-divider {
  margin: 2.5rem 0; /* Sadece dikey boşluk yeterli */

  max-width: 100%;
}

.features-grid {
  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 4rem;
}

.features-column {
  display: flex;

  flex-direction: column;

  gap: 5rem;
}

.feature-item {
  display: flex;

  align-items: center; /* Dikeyde ortalamak için center yapıldı */

  gap: 2rem;
}

.features-column-right .feature-item {
  text-align: left;
}

.features-column-left .feature-item {
  text-align: right;

  flex-direction: row-reverse;
}

/* YENİ: İkonun sarmalayıcısı (arkadaki daire) */

.feature-icon-wrapper {
  position: relative;

  width: 70px;

  height: 70px;

  border-radius: 50%;

  background-color: #e4f5e5; /* Varsayılan yeşilimsi renk */

  display: flex;

  justify-content: center;

  align-items: center;

  flex-shrink: 0;

  transition: background-color 0.3s ease;
}

/* YENİ: İkonun kendisi */

.feature-icon-wrapper img {
  width: 50px; /* Daireden daha büyük olması için */

  height: auto;

  max-width: none; /* Önceki kuralı ezmek için */
}

/* YENİ: Hover efekti */

.feature-item:hover .feature-icon-wrapper {
  background-color: var(--primary-lighter-color); /* Hover'da açık kırmızı renk */
}

.feature-item h3 {
  font-size: 2rem;

  font-weight: 600;

  margin-bottom: 0.5rem;
}

.feature-item p {
  font-size: 1.5rem;

  color: var(--text-color-light);

  line-height: 1.6;
}

.features-center-image img {
  max-width: 450px;

  border-radius: 50%;
}

.features-buttons {
  display: flex;

  justify-content: center;

  gap: 2rem;

  margin-top: 6rem;
}

/*--------------------------------------------------------------

# İçerik/Görsel Blokları

--------------------------------------------------------------*/

.content-image-section {
  background-color: var(--background-color); /* Arkaplanı beyaz yapar */
}

.content-image-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: stretch; /* Sütunların tam yüksekliği kaplamasını sağlar */

  min-height: 70vh; /* Bölüme minimum bir yükseklik verir */
}

/* Görselin solda olduğu durum için metin ve görselin yerini değiştir */

.content-image-section.image-left .ci-text-content {
  order: 2;
}

.content-image-section.image-left .ci-image-content {
  order: 1;
}

.ci-text-content {
  position: relative; /* Pseudo-element konumlandırması için */

  z-index: 1; /* İçeriğin önde kalması için */

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 8rem 4rem; /* İç boşluklar */

  overflow: hidden; /* Pseudo-elementin taşmasını engeller */
}

/* Arkaplan görselini opaklık ayarı için pseudo-element olarak ekleme */

.ci-text-content::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: url("../images/section_blocks_background.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  opacity: 0.05; /* Opaklığı buradan ayarlayabilirsiniz (0.0 ile 1.0 arası) */

  z-index: -1; /* Katmanı içeriğin arkasına gönder */
}

.ci-text-wrapper {
  max-width: 550px; /* Metin içeriğinin maksimum genişliği */
}

.ci-text-content h2 {
  font-size: 4.5rem;

  font-weight: 700;

  line-height: 1.2;
}

/* Başlıktaki vurgulu kelime için */

.ci-text-content h2 strong {
  color: var(--primary-darker-color);

  font-weight: 700; /* Kalınlığını koru */
}

.ci-text-content .section-divider {
  margin: 2rem 0;

  margin-left: 0; /* Ayırıcının soldan başlamasını sağlar */
}

.ci-main-text {
  /* display: grid; <-- Bu satır kaldırıldı */

  /* grid-template-columns: 1fr 1fr; <-- Bu satır kaldırıldı */

  /* gap: 2rem; <-- Bu satır kaldırıldı */

  font-size: 1.6rem;

  color: var(--text-color-light);

  margin: 3rem 0;
}

/* Paragraflar arasına boşluk eklemek için */

.ci-main-text p + p {
  margin-top: 2rem;
}

.ci-checklist {
  list-style: none;

  padding: 0;

  margin: 3rem 0;
}

.ci-checklist li {
  font-size: 1.6rem;

  font-weight: 500;

  padding-left: 30px;

  position: relative;

  margin-bottom: 1.5rem;
}

.ci-checklist li::before {
  content: "\2713"; /* Checkmark karakteri */

  position: absolute;

  left: 0;

  top: 0;

  color: #4caf50; /* Yeşil renk */

  font-weight: bold;

  font-size: 1.8rem;
}

.ci-image-content {
  position: relative;

  min-height: 400px; /* Mobil için minimum yükseklik */
}

.ci-image-content img {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover; /* Görselin en/boy oranını koruyarak alanı kaplamasını sağlar */
}

/*--------------------------------------------------------------

# Genel Buton Stilleri (Codepen Efekti ile Güncellendi)

--------------------------------------------------------------*/

.btn,
.features-buttons a,
.ci-text-content a.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center; /* Metni ortalar */

  text-decoration: none;

  padding: 1.2rem 3rem; /* Padding güncellendi */

  border-radius: 50px;

  font-weight: 700;

  font-size: 1.4rem;

  border: 2px solid transparent;

  transition: all 0.3s ease;

  position: relative;

  cursor: pointer;

  overflow: hidden; /* İkonun dışarıda gizlenmesi için */
}

/* Buton metni için (span etiketi) */

.btn span,
.features-buttons a span,
.ci-text-content a.btn span {
  display: inline-block;

  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}

/* Ok ikonu için (::before pseudo-elementi) */

.btn::before,
.features-buttons a::before,
.ci-text-content a.btn::before {
  content: "→";

  position: absolute;

  left: 0;

  top: 50%;

  color: inherit; /* Butonun metin rengini alır */

  font-size: 2rem;

  transform: translate(-110%, -50%); /* Başlangıçta solda gizli */

  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}

/* Hover durumunda metni sağa itme */

.btn:hover span,
.features-buttons a:hover span,
.ci-text-content a.btn:hover span {
  transform: translateX(1.5rem);
}

/* Hover durumunda oku içeri kaydırma */

.btn:hover::before,
.features-buttons a:hover::before,
.ci-text-content a.btn:hover::before {
  transform: translate(1.5rem, -50%);
}

/* Birincil Buton (Sarı Zemin) */

.btn-primary {
  background-color: var(--primary-color);

  color: var(--text-color-white);

  border-color: var(--primary-color);
}

/* Bootstrap'in hover efektini ezmek için */

.btn-primary:hover {
  background-color: var(--primary-darker-color);

  color: var(--text-color-white);

  border-color: var(--primary-darker-color);
}

/* İkincil Buton (Beyaz Zemin) */

.btn-secondary {
  background-color: var(--background-color);

  color: var(--text-color);

  border-color: var(--text-color);
}

/* Bootstrap'in hover efektini ezmek için */

.btn-secondary:hover {
  background-color: var(--background-color);

  color: var(--text-color);

  border-color: var(--text-color);
}

/*--------------------------------------------------------------

# Blog Bölümü

--------------------------------------------------------------*/

.blog-section {
  padding: 8rem 0;

  background-color: var(--surface-color);
}

.blog-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 3rem;

  margin-top: 4rem;
}

.post-card {
  background-color: var(--background-color);

  border-radius: 15px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  overflow: hidden; /* EN ÖNEMLİ KURAL: Bu div, çerçeve ve kırpıcı görevi görecek */

  display: flex;

  flex-direction: column;
}

.post-card-image {
  /* Bu sarmalayıcıya artık özel bir stil gerekmiyor */

  line-height: 0; /* Resim altındaki olası boşluğu kaldırır */
}

.post-card-image a {
  display: block;
}

.post-card-image img {
  width: 100%;

  height: 250px;

  object-fit: cover;

  transition: transform 0.4s ease;

  /* Görselden tüm border-radius ve render hileleri kaldırıldı */
}

.post-card:hover .post-card-image img {
  transform: scale(1.1); /* Büyütme efekti */
}

.post-card-content {
  padding: 2.5rem;

  background-color: var(--background-color); /* Resmin alttan görünmesini engeller */

  position: relative; /* z-index için gereklidir */

  z-index: 1; /* İçeriğin her zaman resmin üzerinde kalmasını sağlar */

  display: flex;

  flex-direction: column;

  flex-grow: 1;
}

.post-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 1.5rem;

  font-size: 1.3rem;

  color: var(--text-color-light);

  margin-bottom: 1.5rem;
}

.post-meta .category-badge {
  background-color: var(--primary-lighter-color);

  color: var(--text-color-white);

  padding: 0.4rem 1.2rem;

  border-radius: 50px;

  font-weight: 500;

  text-decoration: none;
}

.post-title {
  font-size: 2rem;

  margin-bottom: 1rem;
}

.post-title a {
  text-decoration: none;

  color: var(--text-color);

  transition: color 0.3s ease;
}

.post-title a:hover {
  color: var(--primary-color);
}

.post-excerpt {
  color: var(--text-color-light);

  flex-grow: 1;
}

.post-excerpt p {
  font-size: 1.4rem;
}

.btn-read-more {
  display: inline-flex;

  align-items: center;

  align-self: flex-start;

  gap: 0.8rem;

  background-color: var(--primary-darker-color);

  color: var(--text-color-white);

  padding: 1rem 2rem;

  border-radius: 50px;

  font-weight: 700;

  font-size: 1.3rem;

  text-decoration: none;

  transition: all 0.3s ease;

  letter-spacing: 1.2px;
}

.btn-read-more:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  transform: translateY(-2px);
}

/*--------------------------------------------------------------

# Footer

--------------------------------------------------------------*/

.site-footer {
  background-color: var(--footer-bg-color);

  color: #aab1b7;

  font-size: 1.5rem;
}

/* Footer Ana Alanı */

.footer-main {
  padding: 6rem 0;
}

.footer-grid {
  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

  gap: 4rem;
}

.footer-column .widget-title {
  color: #fff;

  font-size: 1.8rem;

  margin-bottom: 2.5rem;

  position: relative;

  padding-bottom: 1rem;
}

.footer-column .widget-title::after {
  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 30px;

  height: 2px;

  background-color: var(--primary-darker-color); /* Değiştirildi */
}

/* Hakkında Widget'ı */

.about-widget .custom-logo {
  max-height: 40px;

  width: auto;

  margin-bottom: 2rem;
}

.about-widget p {
  line-height: 1.7;
}

.about-widget .about-address {
  display: flex;

  align-items: flex-start;

  gap: 1rem;

  margin-top: 2rem;
}

.about-widget .about-address i {
  color: var(--primary-darker-color); /* Değiştirildi */

  font-size: 2.2rem;

  flex-shrink: 0;

  margin-top: 2px;
}

/* Menü ve İletişim Widget'ları */

.menu-widget ul,
.contact-widget ul {
  list-style: none;

  padding: 0;

  margin: 0;
}

.menu-widget li:not(:last-child),
.contact-widget li:not(:last-child) {
  margin-bottom: 1.2rem;
}

.menu-widget a,
.contact-widget a {
  color: inherit;

  text-decoration: none;

  transition: color 0.3s ease;
}

.menu-widget a:hover,
.contact-widget a:hover {
  color: var(--primary-darker-color); /* Değiştirildi */
}

.contact-widget i {
  color: var(--primary-darker-color); /* Değiştirildi */

  margin-right: 1rem;

  width: 20px;

  text-align: center;

  font-size: 2.2rem;
}

/* Alt Bar */

.footer-bottom {
  background-color: var(--footer-bottom-bg-color);

  padding: 2rem 0;

  font-size: 1.4rem;
}

.footer-bottom-inner {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.social-links {
  display: flex;

  gap: 0.8rem;
}

.social-links a {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 36px;

  height: 36px;

  background-color: #453a34;

  color: #fff;

  border-radius: 50%;

  text-decoration: none;

  transition: background-color 0.3s ease;
}

.social-links a i {
  font-size: 2rem;
}

.social-links a:hover {
  background-color: var(--primary-darker-color); /* Değiştirildi */
}

/*--------------------------------------------------------------

# Mobil Menü Stilleri

--------------------------------------------------------------*/

.mobile-menu-toggle {
  display: none; /* Varsayılan olarak gizli */

  background: transparent;

  border: none;

  cursor: pointer;

  padding: 10px;

  z-index: 1001; /* Menünün üzerinde kalması için */
}

.mobile-menu-toggle .icon-bar {
  display: block;

  width: 24px;

  height: 3px;

  background-color: var(--text-color);

  margin: 5px 0;

  transition: all 0.3s ease-in-out;
}

/* Menü açıkken hamburger ikonunu "X" ikonuna dönüştürme */

.mobile-menu-open .mobile-menu-toggle .icon-bar:nth-of-type(1) {
  /* Değiştirildi */

  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-open .mobile-menu-toggle .icon-bar:nth-of-type(2) {
  /* Değiştirildi */

  opacity: 0;
}

.mobile-menu-open .mobile-menu-toggle .icon-bar:nth-of-type(3) {
  /* Değiştirildi */

  transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu-open .mobile-menu-toggle .icon-bar {
  background-color: var(--text-color);
}

/*--------------------------------------------------------------

# Responsive Tasarım Kodları

--------------------------------------------------------------*/

/* 1. Adım: Tablet ve Altı (992px) */

@media (max-width: 992px) {
  /* Genel Ayarlar */

  .container {
    padding-left: 3rem;

    padding-right: 3rem;
  }

  /* Header ve Mobil Menü */

  .mobile-menu-toggle {
    display: block; /* Mobil menü butonunu göster */
  }

  .main-navigation,
  .header-utility {
    display: none; /* Masaüstü menüyü gizle */
  }

  .main-navigation {
    display: flex;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background-color: var(--surface-color);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transform: translateX(-100%);

    transition: transform 0.4s ease-in-out;

    z-index: 1000;
  }

  .mobile-menu-open .main-navigation {
    transform: translateX(0);
  }

  body.mobile-menu-open {
    overflow: hidden; /* Arkaplanın kaymasını engelle */
  }

  .main-navigation ul {
    flex-direction: column;

    text-align: center;

    gap: 2rem;
  }

  .main-navigation a {
    font-size: 2.4rem;
  }

  /* YENİ: Mobil menüdeki linklerin her zaman varsayılan metin renginde olmasını sağla */

  .mobile-menu-open .main-navigation a {
    color: var(--text-color) !important;
  }

  /* Özellikler Bölümü */

  .features-grid {
    grid-template-columns: 1fr;

    gap: 5rem;
  }

  .features-center-image {
    order: 2;
    margin: 0 auto;
  }

  .features-column-left {
    order: 1;
  }

  .features-column-right {
    order: 3;
  }

  .features-column-left .feature-item,
  .features-column-right .feature-item {
    text-align: left;

    flex-direction: row;
  }

  /* İçerik/Görsel Blokları */

  .content-image-grid {
    grid-template-columns: 1fr;
  }

  .content-image-section .ci-image-content {
    min-height: 350px;

    display: block; /* Görseli gizlemek yerine göster */
  }

  .content-image-section.image-left .ci-text-content,
  .content-image-section.image-left .ci-image-content {
    order: 0;
  }

  /* ÖNEMLİ: Mobil'de gizlemek istediğiniz görseller için */

  .hide-on-mobile {
    display: none !important;
  }

  /* Blog Bölümü */

  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-widget {
    grid-column: 1 / -1;
  }
}

/* 2. Adım: Sadece Mobil (768px) */

@media (max-width: 768px) {
  /* Genel Font Boyutları */

  :root {
    font-size: 55%;
  }

  .section-header h1,
  .section-header h2 {
    font-size: 3.8rem !important;
  }

  .ci-text-content h2 {
    font-size: 3.6rem;
  }

  /* Header */

  .site-header {
    padding: 1.5rem 0;
  }

  .site-branding .custom-logo {
    max-height: 40px; /* Mobil için logo yüksekliğini küçült */
  }

  /* Slider */

  .home-slider {
    height: 40vh;
  }

  .home-slider .slide-content {
    padding-top: 70px;
  }

  /* Bölüm Boşlukları */

  .features-section,
  .blog-section {
    padding: 6rem 0;
  }

  .ci-text-content {
    padding: 6rem 3rem;
  }

  /* Özellikler Bölümü Butonları */

  .features-buttons {
    flex-direction: column;

    align-items: center;

    width: 100%;
  }

  .features-buttons .btn {
    width: 80%;

    justify-content: center;
  }

  /* Footer */

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;

    gap: 1.5rem;

    text-align: center;
  }
}

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

   İç Sayfa Hero Alanı Stilleri (Hakkımızda, İletişim vb.)

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

.page-hero,
.page-hero-section {
  position: relative;

  height: 45vh; /* Yüksekliği ayarlayabilirsiniz */

  min-height: 350px;

  background-color: #333; /* Görsel yüklenmezse görünecek renk */

  background-size: cover;

  background-position: center center;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #ffffff;
}

/* Arka planı karartmak için katman */

.page-hero .hero-overlay,
.page-hero-section .hero-overlay {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5); /* Rengi ve şeffaflığı ayarlayabilirsiniz */

  z-index: 1;
}

/* Hero alanı içeriği */

.page-hero .container,
.page-hero-section .hero-content {
  position: relative;

  z-index: 2;
}

.page-hero .page-title,
.page-hero-section .hero-title {
  font-size: 4.5rem;

  font-weight: bold;

  margin: 0;

  color: #ffffff;
}

.page-hero-section .breadcrumbs {
  margin-top: 15px;

  font-size: 1.5rem;
}

.page-hero-section .breadcrumbs a,
.page-hero-section .breadcrumbs span {
  color: #ffffff;

  text-decoration: none;
}

.page-hero-section .breadcrumbs a:hover {
  text-decoration: underline;
}

/* Sayfa içeriği ile hero alanı arasına boşluk eklemek için */

.about-us-container {
  padding-top: 60px;

  padding-bottom: 60px;
}

/* İç Sayfa Header Stilleri (Görsel Üzerinde) */

.page-header-on-image {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  background-color: transparent;

  border-bottom: none;

  z-index: 100;
}

/* İç Sayfa Header Menü Link Renkleri */

.page-header-on-image .main-navigation a {
  color: var(--text-color-white);
}

/* İç Sayfa Header Hover Renkleri */

.page-header-on-image .main-navigation a:hover {
  color: var(--primary-color); /* Sarı renk */
}

.page-header-on-image .main-navigation a::after {
  background-color: var(--primary-color); /* Hover'daki alt çizgi rengi */
}

/* Hakkımızda sayfası paragraf yazı tipi boyutu */

.about-us-container .entry-content p {
  font-size: 1.8rem; /* 18px'e denk gelir */

  line-height: 1.7;
}

/* Hakkımızda sayfası için Boxed (Kutulu) İçerik Alanı */

.about-us-container #main {
  max-width: 960px; /* İçerik alanının maksimum genişliği. Bu değeri değiştirebilirsiniz. */

  margin-left: auto;

  margin-right: auto;

  padding-left: 15px; /* Mobil cihazlarda kenar boşluğu için */

  padding-right: 15px;
}

/* Ürünlerimiz Sayfası Kart Stilleri */

.product-grid-container {
  padding-top: 60px;

  padding-bottom: 60px;
}

.product-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 30px;
}

.product-card {
  display: block;

  text-decoration: none;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-card-inner {
  position: relative;

  height: 400px;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  display: flex;

  align-items: flex-end; /* Başlığı alta yasla */

  justify-content: center;

  padding: 20px;

  color: #ffffff;
}

/* Metnin okunabilirliği için kart görselinin üzerine karartma efekti */

.product-card-inner::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);

  z-index: 1;
}

.product-card-title {
  position: relative;

  z-index: 2;

  font-size: 2.4rem;

  text-align: center;

  margin: 0;
}

/* Ürün Detay Sayfası Header Stilleri */

.product-header {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  background-color: transparent;

  z-index: 100;

  padding: 15px 0;
}

.product-header .header-inner {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.product-header .main-navigation {
  flex-grow: 1;

  display: flex;

  justify-content: end;
}

/* Header link renkleri */

.product-header .main-navigation a,
.product-header .header-utility-nav a {
  color: var(--text-color-white);

  text-decoration: none;

  font-weight: 500;
}

.product-header .main-navigation a:hover,
.product-header .header-utility-nav a:hover {
  color: var(--secondary-color); /* Sarı renk */
}

/* Ana menü alt çizgisini ayarla */

.product-header .main-navigation a::after {
  background-color: var(--secondary-color);
}

/* Sağdaki Yardımcı Menü */

.header-utility-nav {
  display: flex;

  align-items: center;

  gap: 25px;
}

.header-utility-nav .utility-link {
  font-size: 1.4rem;
}

/* Ürün Detay Sayfası Hero ve Header Alanı */

.product-hero-header {
  position: relative;

  height: 120px; /* Yüksekliği isteğe göre ayarlayın */

  min-height: auto;

  background-color: #333; /* Görsel yoksa görünecek renk */

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;
}

.product-hero-header .hero-overlay {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.2); /* Görseli karartma katmanı */

  z-index: 1;
}

/* Header'ın kendisi için stiller */

.product-hero-header .product-header {
  position: relative;

  width: 100%;

  background-color: transparent;

  z-index: 2; /* Overlay katmanının üzerinde olmalı */
}

.product-hero-header .product-header .header-inner {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.product-hero-header .product-header .main-navigation a:hover {
  color: var(--primary-color);
}

/* Ürün Detay Sayfası Stilleri */

.product-detail-container {
  padding-top: 40px;

  padding-bottom: 60px;
}

.product-breadcrumbs {
  font-size: 1.4rem;

  color: var(--text-color-light);

  margin-bottom: 30px;
}

.product-breadcrumbs a {
  color: var(--text-color);

  text-decoration: none;
}

.product-breadcrumbs a:hover {
  color: var(--primary-color);
}

.product-detail-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  align-items: flex-start;
}

/* Sol Sütun: Galeri */

.product-gallery {
  min-width: 0; /* ÖNEMLİ: Grid yapısı içindeki büyük görsellerin küçülmesine ve taşmamasına izin verir. */

  display: flex;

  flex-direction: column;
}

.gallery-main-image {
  border: 1px solid #e0e0e0;

  margin-bottom: 15px;

  overflow: hidden; /* Kapsayıcının dışına taşmayı kesin olarak engeller. */

  height: 450px; /* Yüksekliği doğrudan kapsayıcıya veriyoruz. */

  width: 100%;
}

.gallery-main-image img {
  width: 100%;

  height: 100%; /* Kapsayıcının yüksekliğini ve genişliğini doldurur. */

  object-fit: cover; /* Görselin oranını koruyarak alanı kaplamasını sağlar. */

  display: block;
}

/* Thumbnail Slider Stilleri */

.thumbnail-slider-container {
  position: relative;
}

.thumbnail-slider {
  overflow: hidden;
}

.gallery-thumbnail-item {
  /* Bu artık bir swiper-slide */

  border: 2px solid #e0e0e0;

  cursor: pointer;

  transition: border-color 0.3s ease;

  height: auto;
}

.gallery-thumbnail-item:hover,
.gallery-thumbnail-item.is-active {
  border-color: var(--primary-color);
}

.gallery-thumbnail-item img {
  width: 100%;

  height: auto;

  display: block;
}

/* Thumbnail Slider Navigasyon Okları */

.thumbnail-slider-container .swiper-button-prev,
.thumbnail-slider-container .swiper-button-next {
  color: var(--text-color);

  width: 30px;

  height: 30px;

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

  border-radius: 50%;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  top: 50%;
}

.thumbnail-slider-container .swiper-button-prev:after,
.thumbnail-slider-container .swiper-button-next:after {
  font-size: 1.4rem;

  font-weight: bold;
}

.thumbnail-slider-container .swiper-button-prev {
  left: 0;
}

.thumbnail-slider-container .swiper-button-next {
  right: 0;
}

.thumbnail-slider-container .swiper-button-disabled {
  opacity: 0.3;

  cursor: not-allowed;
}

/* Sağ Sütun: Özet */

.product-summary .product-title {
  font-size: 3.2rem;

  font-weight: 700;

  margin-top: 0;

  margin-bottom: 20px;
}

/* Varyant Butonları Listesi */

.product-variants-list {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 25px;
}

/* Varyant Butonu */

.variant-button {
  background-color: var(--surface-color); /* Açık bej/gri renk */

  border: 1px solid #e0e0e0;

  padding: 8px 15px;

  border-radius: 8px;

  font-size: 1.4rem;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.3s ease;
}

.variant-button:hover {
  border-color: var(--primary-color);

  color: var(--primary-color);
}

.variant-button.is-active {
  background-color: var(--primary-color);

  color: var(--text-color-white);

  border-color: var(--primary-color);
}

.product-short-description {
  font-size: 1.6rem;

  line-height: 1.7;

  color: var(--text-color-light);
}

/* Alt Bölüm: Uzun Açıklama */

.product-long-description {
  margin-top: 80px;

  padding-top: 40px;

  border-top: 1px solid #e0e0e0;
}

.product-long-description p {
  font-size: 1.7rem;

  line-height: 1.7;

  color: var(--text-color-light);
}

.product-long-description .section-title {
  font-size: 2.4rem;

  margin-bottom: 20px;
}

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

   Navigasyon Dropdown Stilleri (v2 - Düzeltilmiş)

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

/* Genel Navigasyon Ayarları */

.main-navigation li {
  position: relative;
}

/* ALT ÇİZGİ: Sadece alt menüsü OLMAYAN ana menü elemanları için */

.main-navigation > ul > li:not(.menu-item-has-children) > a::after {
  content: "";

  position: absolute;

  bottom: 10px;

  left: 0;

  width: 100%;

  height: 2px;

  background-color: var(--primary-color);

  transform: scaleX(0);

  transform-origin: center;

  transition: transform 0.3s ease;
}

.main-navigation > ul > li:not(.menu-item-has-children):hover > a::after,
.main-navigation > ul > .current-menu-item:not(.menu-item-has-children) > a::after {
  transform: scaleX(1);
}

/* DROPDOWN OKU: Sadece alt menüsü OLAN ana menü elemanları için */

.main-navigation > ul > .menu-item-has-children > a {
  /* Değiştirildi: Sadece ana menü elemanlarını hedefle */

  padding-right: 20px !important; /* Ok için her zaman yer aç */
}

.main-navigation > ul > .menu-item-has-children > a::after {
  /* Değiştirildi: Sadece ana menü elemanlarını hedefle */

  /* Önceki alt çizgi stillerini tamamen sıfırla ve oku tanımla */

  content: "▼";

  position: absolute;

  width: auto;

  height: auto;

  background-color: transparent;

  transform: translateY(-50%);

  transition: transform 0.2s ease;

  font-size: 0.7em;

  right: 0;

  top: 50%;

  left: auto;

  bottom: auto;
}

/* Alt Menü (Dropdown) Genel Stilleri */

.main-navigation .sub-menu {
  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  background-color: #fff;

  min-width: 220px;

  z-index: 1000;

  padding: 10px 0;

  border-radius: 0 0 5px 5px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  border-top: 3px solid var(--primary-color);

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* Alt Menü Elemanları */

.main-navigation .sub-menu a {
  padding: 10px 20px;

  color: var(--text-color);

  white-space: nowrap;

  display: block;

  position: relative;

  transition: color 0.3s;
}

/* Alt Menü Hover Efekti: Sadece renk ve alt çizgi */

.main-navigation .sub-menu a:hover {
  background-color: transparent; /* Arkaplan rengini değiştirme */

  color: var(--primary-color);
}

/* Alt Menü Elemanları için Alt Çizgi */

.main-navigation .sub-menu a::after {
  content: "";

  position: absolute;

  bottom: 5px;

  left: 20px;

  width: calc(100% - 40px);

  height: 1px;

  background-color: var(--primary-color);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.3s ease;
}

.main-navigation .sub-menu li:hover > a::after,
.main-navigation .sub-menu .current-menu-item > a::after {
  transform: scaleX(1);
}

/* Masaüstünde hover ile alt menüyü göster */

.main-navigation .menu-item-has-children:hover > .sub-menu {
  display: block;

  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

/* Mobil için Submenu Toggle Butonu */

.submenu-toggle {
  display: none;
}

/* --- MOBİL GÖRÜNÜM (ÖRNEK: 992px altı) --- */

@media (max-width: 992px) {
  /* YENİ: Masaüstü dropdown okunu mobilde gizle */

  .main-navigation .menu-item-has-children > a::after {
    display: none;
  }

  .main-navigation .menu-item-has-children:hover > .sub-menu {
    display: none;
  }

  .mobile-menu-open .main-navigation .sub-menu {
    display: none;

    position: static;

    background-color: rgba(0, 0, 0, 0.05);

    box-shadow: none;

    border-top: none;

    padding-left: 20px;

    min-width: auto;

    transform: none;

    opacity: 1;

    visibility: visible;
  }

  .mobile-menu-open .main-navigation .menu-item-has-children.submenu-open > .sub-menu {
    display: block;
  }

  .submenu-toggle {
    display: block;

    position: absolute;

    top: 2px;

    right: -40px;

    width: 50px;

    height: 100%;

    background: transparent;

    border: none;

    cursor: pointer;

    color: inherit;
  }

  /* YENİ: İç içe geçmiş alt menülerde (2. seviye ve altı) mobil toggle butonunu gizle */

  .main-navigation .sub-menu .submenu-toggle {
    display: none;
  }

  .submenu-toggle::after {
    content: "▼";
  }

  .main-navigation .menu-item-has-children.submenu-open > .submenu-toggle::after {
    content: "▲";
  }

  .product-header .main-navigation {
    justify-content: center;
  }

  .swiper-button-prev,
  .swiper-button-next {
    z-index: 1;
  }
}

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

   Ürün Detay Sayfası - Responsive Stiller

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

@media (max-width: 992px) {
  .product-detail-grid {
    /* İki sütunlu yapıyı tek sütuna indirge */

    grid-template-columns: 1fr;

    /* Sütunlar arasına dikey boşluk ekle */

    gap: 40px;
  }

  .product-gallery {
    padding: 2rem;
  }

  .product-detail-container {
    padding-top: 30px;

    padding-bottom: 30px;
  }

  .product-title {
    font-size: 3.2rem; /* Mobil için başlık boyutunu ayarla */

    margin-bottom: 20px;
  }

  .product-long-description {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .product-breadcrumbs {
    font-size: 1.4rem; /* Daha küçük ekranlar için breadcrumb yazısını küçült */

    padding: 0 15px; /* Kenar boşlukları ekle */
  }

  .product-detail-container.container {
    padding-left: 0;

    padding-right: 0;
  }

  .product-summary,
  .product-long-description {
    padding-left: 15px;

    padding-right: 15px;
  }

  .product-title {
    font-size: 2.8rem;
  }

  .gallery-main-image {
    height: 380px; /* Mobil için ana görsel yüksekliğini ayarla */
  }
}

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

   İletişim Sayfası Stilleri

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

/* Harita Alanı */

.contact-map-section {
  line-height: 0; /* iframe altındaki boşluğu kaldırır */
}

.contact-map-section iframe {
  width: 100%;

  height: 450px;

  border: 0;
}

/* İletişim Detayları ve Form Alanı */

.contact-details-section {
  padding: 80px 0;

  background-color: var(--background-color);
}

.contact-details-grid {
  display: grid;

  grid-template-columns: 1fr 1.5fr; /* Sol sütun daha dar, sağ sütun daha geniş */

  gap: 60px;

  align-items: start; /* Sütunları yukarıdan hizala */
}

/* Sol Sütun: Bilgiler */

.contact-info .section-title {
  font-size: 2.8rem;

  margin-bottom: 25px;
}

.contact-info p {
  font-size: 1.6rem; /* Font boyutunu büyüt */

  line-height: 1.8;

  margin-bottom: 20px;
}

.contact-info p strong {
  font-weight: 600;
}

.contact-info a {
  color: var(--primary-color);

  text-decoration: none;

  transition: color 0.3s;
}

.contact-info a:hover {
  color: var(--text-color);
}

/* Sosyal Medya Linkleri */

.contact-social-links {
  margin-top: 40px;
}

.social-title {
  font-size: 2.2rem; /* Font boyutunu büyüt */

  margin-bottom: 20px;
}

.contact-social-links ul {
  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  gap: 15px;
}

.contact-social-links a {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border: 1px solid var(--border-color);

  border-radius: 50%;

  color: var(--text-color);

  text-decoration: none; /* İkonlar için eklendi */

  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* YENİ: İkonların boyutunu ayarlamak için */

.contact-social-links a i {
  font-size: 24px;
}

.contact-social-links a:hover {
  background-color: var(--primary-color);

  border-color: var(--primary-color);

  color: #fff;
}

/* Sağ Sütun: Form (GÜNCELLENMİŞ) */

.contact-form-wrapper .section-title {
  font-size: 2.8rem;

  margin-bottom: 25px;
}

.contact-form-wrapper .wpcf7-form p {
  margin: 0 0 20px 0; /* Alanlar arası boşluk ayarlandı */

  font-size: 1.6rem;

  line-height: 1.6;
}

.contact-form-wrapper .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;

  max-width: inherit;

  padding: 10px 15px; /* Dikey padding azaltılarak daha ince bir görünüm sağlandı */

  border: 1px solid var(--border-color);

  border-radius: 5px;

  background-color: #fff;

  font-size: 1.6rem;

  margin-top: 8px;
}

/* YENİ: Mesaj alanı için özel stiller */

.contact-form-wrapper .wpcf7-textarea {
  height: 75px; /* Yükseklik kısaltıldı */

  resize: vertical; /* Kullanıcının sadece dikeyde boyutlandırmasına izin ver */
}

.contact-form-wrapper .wpcf7-submit {
  width: auto;

  padding: 10px 35px; /* Dikey padding diğer inputlarla uyumlu hale getirildi */

  background-color: var(--primary-color);

  color: #fff;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  font-size: 1.6rem;

  font-weight: bold;

  transition: background-color 0.3s;
}

.contact-form-wrapper .wpcf7-submit:hover {
  background-color: var(--primary-darker-color); /* Değişken adı düzeltildi */
}

/* YENİ: Contact Form 7 Uyarı Mesajları */
.wpcf7-response-output {
  margin-top: 20px;
  padding: 15px 20px;
  border-radius: 5px;
  font-size: 1.6rem;
  text-align: center;
  border-width: 1px;
  border-style: solid;
}

/* Başarılı Gönderim Mesajı (Yeşil) */
.wpcf7-mail-sent-ok {
  background-color: #d4edda; /* Açık yeşil */
  border-color: #c3e6cb; /* Daha koyu yeşil */
  color: #155724; /* Koyu yeşil metin */
}

/* Hata Mesajı (Kırmızı) */
.wpcf7-validation-errors,
.wpcf7-spam-blocked,
.wpcf7-mail-sent-ng {
  background-color: #f8d7da; /* Açık kırmızı */
  border-color: #f5c6cb; /* Daha koyu kırmızı */
  color: #721c24; /* Koyu kırmızı metin */
}

/* Responsive Stiller */
@media (max-width: 992px) {
  .contact-details-grid {
    grid-template-columns: 1fr; /* Sütunları alt alta getir */

    gap: 50px;
  }

  .contact-details-section {
    padding: 60px 0;
  }
}

@media (max-width: 767px) {
  .contact-map-section iframe {
    height: 300px; /* Mobilde harita yüksekliğini azalt */
  }

  .contact-details-section {
    padding: 40px 0;
  }
}