body { font-family: 'Roboto', sans-serif; }
    .page-title {
      font-weight: 600;
      font-size: 2rem;
      display: inline-block;
      padding-bottom: 0.25rem;
      margin-bottom: 1rem;
    }

    /* Back‑to‑top button */
    #backToTop{
      position:fixed;bottom:24px;right:24px;z-index:1000;
      width:48px;height:48px;border:none;border-radius:50%;
      background:#005CDE;color:#fff;font-size:1.4rem;display:none;
      align-items:center;justify-content:center;cursor:pointer;
      box-shadow:0 2px 6px rgba(0,0,0,.2);
    }
    #backToTop:hover{background:#0048b0;}

    #backToTop .arrow{
      font-size:1.6rem;
      line-height:1;
      transform:rotate(-90deg); /* sağdan yukarıya */
    }

    .container {;
      padding: 20px;
    }

    /* nav’a gölge geçişi için */
    .navbar {
      position: sticky;       /* zaten sticky-top var, ama bir de burada da gölge çalışsın */
      top: 0;
      z-index: 1000;          /* gölge içeriğin üzerinde görünsün */
      transition: box-shadow 0.3s ease-in-out;
    }

    /* scroll edince eklenen “scrolled” sınıfı burayı tetikleyecek */
    .navbar.scrolled {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .navbar-nav .nav-link {
      color: #000 !important;
      font-weight: 600;
      font-family: 'Roboto', sans-serif;
      font-style: normal;
      font-size: 10.5pt;
      letter-spacing: 0.7px;
      margin-right: 8px;
      position: relative;
      gap: 0.5rem;
    }

    .navbar-nav .nav-link:hover {
      color: #000;
    }

    .dropdown-menu {
      background-color: #fff;
      border: 0px solid #ddd;
      border-radius: 8px;
      padding: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .dropdown-menu .dropdown-item {
      color: #666666;
      /*padding: 0px 20px 20px 20px;*/
      font-weight: 400;
      font-family: 'Roboto', sans-serif;
      font-size: 0.80rem;
      letter-spacing: 0.5px;
      transition: color 0.2s ease;
      line-height: 25px;
    }

    .dropdown-menu .dropdown-item:hover {
      background-color: transparent !important;
      color: #005CDE;
    }

    .navbar-nav .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
    }

    /* Dil butonu */
    .dropdown-toggle.lang-btn {
      background-color: #005CDE;
      color: #fff;
      border: none;
      border-radius: 0;
      font-weight: bold;
      padding: 6px 12px;
    }

    .dropdown-toggle.lang-btn::after {
      display: none;
    }

    .lang-menu .dropdown-menu {
      background-color: #000;
      border-radius: 0;
      border: none;
      padding: 0;
      min-width: auto;
    }

    .lang-menu .dropdown-item {
      color: #fff;
      padding: 6px 12px;
    }

    .lang-menu .dropdown-item:hover {
      background-color: #333;
    }

    /* Banner ayarları */
    .hero { padding-top: 0 !important; }

    /* Ana ve yan slider konteyner yüksekliği */
    .hero .carousel-inner,
    .hero .side-banner .carousel-inner {
      height: 420px; /* ihtiyaca göre değiştir */
    }

    /* Her bir slaytın yüksekliğini yüzde 100 yap */
    .hero .carousel-inner .carousel-item,
    .hero .side-banner .carousel-inner .carousel-item {
      height: 100%;
    }

    /* Görseller tam otursun */
    .hero .carousel-inner .carousel-item img,
    .hero .side-banner .carousel-inner .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 8px;
      display: block;
    }.hero .carousel-inner, .hero .side-banner .carousel-inner {
      height: 420px;               /* Tüm banner yüksekliği – gerekirse değiştir */
    }
    .hero .carousel-inner img, .hero .side-banner .carousel-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;           /* Görseli çerçeveye tam doldurur */
      object-position: center;     /* Odak ortada */
      border-radius: 8px;
      display: block;              /* flicker engeli */
    }.hero .carousel-inner img, .hero .side-banner .carousel-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 8px;
    }


    .kurumsal-sidebar a {
      display: block;
      padding: 8px 10px;
      color: #333;
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: 0.3s;
    }

    .kurumsal-sidebar a.active,
    .kurumsal-sidebar a:hover {
      border-left: 3px solid #007bff;
      font-weight: bold;
      color: #000;
    }

    .kurumsal-sidebar {
      border-right: 1px solid #ddd;
      padding-right: 15px;
    }

.breadcrumb-custom {
  font-size: 0.9rem;
  display: flex;
  position: absolute;
  right: 0;
  /* top: 0; /* veya istediğin dikey offset */
}

.breadcrumb-custom .separator {
  margin: 0 8px;
  color: #ccc;
}

.breadcrumb-custom a {
  color: #777;
  text-decoration: none;
  transition: color .2s;
}

.breadcrumb-custom a:hover {
  color: #005CDE;
}

.breadcrumb-custom .current {
  color: #000;
  font-weight: 500;
  pointer-events: none;
}

.banner-under-breadcrumb {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  /*height: 320px; */
  /*background-color: #f3f3f3;*/
  /* isteğe bağlı: içerik ortalamak için iç padding */
  /*padding: 1rem 0;*/
}

.breadcrumb-sm {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
}


/* Üretim Alanı Kartları */
    .prod-card {
      background: #f9f9f9;
      border-radius: 4px;
      padding: 1rem;
      position: relative;
      transition: box-shadow 0.2s;
    }
    .prod-card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .prod-card img {
      max-width: 100%;
      height: auto;
      margin-bottom: 0.75rem;
    }
    .prod-card h6 {
      font-weight: 500;
      margin-bottom: 0.5rem;
    }
    .prod-card .stretched-link {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      font-size: 1.25rem;
      color: #005CDE;
    }

    /* 1) Kart kolonlarına kenarlık */
    #productContainer .col-sm-6.col-md-4.col-xl-3 {
      padding: 1rem;                   /* kart içi boşluk */
      border-right: 1px solid #e0e0e0; /* sütun çizgisi */
      border-bottom: 1px solid #e0e0e0;/* satır çizgisi */
    }

    /* 2) Satır sonlarında dikey çizgiyi kaldır (4 kolonlu grid için) */
    #productContainer .col-sm-6.col-md-4.col-xl-3:nth-child(4n) {
      border-right: none;
    }

    /* 3) Son satırda alt çizgiyi kaldır
          (8 ürünlük sayfada, 4’erli iki satır var → alt satır 4 tanesi) */
    #productContainer .col-sm-6.col-md-4.col-xl-3:nth-last-child(-n+4) {
      border-bottom: none;
    }
    .py-5 { 
    padding-top: 0rem!important;
    padding-bottom: 0rem!important;
    }

    .mb-5 {
    margin-bottom: 0rem!important;
    }

    .filter-panel {
      border-right: 1px solid #ddd;
      padding-right: 1.5rem;
    }
    .filter-panel h6 {
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    /* input-group vb zaten mevcut */
    .filter-panel .input-group .form-control {
      border-radius: 0;
    }
    .filter-panel .group-search {
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
    }
    .filter-panel .group-list {
      max-height: 200px;
      overflow-y: auto;
    }
    /* bu satırlar, form-check’leri baştan aşağı iki ucuna yaslıyor */
    .filter-panel .group-list .form-check,
    .filter-panel .form-check.form-switch {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.25rem 0;
    }
    /* label’ları margin sıfırlı */
    .filter-panel .form-check.form-switch .form-check-label {
      margin: 0;
    }
    /* toggle input’u da margin sıfırlı */
    .filter-panel .form-check.form-switch .form-check-input {
      margin: 0;
    }

        /* form-switch’leri iki ucuna yaslayan kapsayıcı */
    .filter-panel .form-check.form-switch {
      display: flex;
      align-items: center;
    }

    /* label önce gelir */
    .filter-panel .form-check.form-switch .form-check-label {
      order: 0;
      margin: 0;            /* ekstra boşlukları sıfırla */
      padding-right: 0.5rem;/* isteğe bağlı: toggle ile arasına boşluk */
    }

    /* toggle (checkbox) sona gelir ve otomatik boşlukla sağa itilir */
    .filter-panel .form-check.form-switch .form-check-input {
      order: 1;
      margin-left: auto;    /* yazıdan kalan tüm boşluğu kapla */
    }


/* -------------------------------------------------- */
/* Filtre panelini sticky yapmak için */
.filter-panel {
  position: sticky;
  /* navbar yaklaşık 80px, banner 210px, breadcrumb ~30px => toplam ~320px
     Gerektiğinde tam ölçülerinize göre ayarlayın */
  top: 180px;
  /* viewport yüksekliğinin geri kalanını kapla */
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  border-right: 1px solid #ddd;
  padding-right: 1.5rem;
}

/* Pagination’ın altındaki boşluğu güçlendirmek için */
.pagination {
  margin-bottom: 20rem; /* gerekirse artırın */
}


/* 992px altındaki ekranlarda sticky özelliğini kaldır */
@media (max-width: 991.98px) {
  .filter-panel {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
   .pagination {
    margin-bottom: 1rem; /* gerekirse artırın */
  }

}


@media (max-width: 767.98px) {
  /* Ana carousel kapsayıcısını tam genişlik yap */
  .hero .col-lg-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Yan banner’ı zaten gizlemiştik, tekrar kontrol */
  .side-banner {
    display: none !important;
  }

  /* Sabit 420px yüksekliği iptal et */
  .hero .carousel-inner {
    height: auto !important;
  }

  /* Her bir slide ve içindeki resim de otomatik boyutsun */
  .hero .carousel-inner .carousel-item,
  .hero .carousel-inner .carousel-item img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ====================================================
   ÜRÜN DETAY SAYFASI STİLLERİ
   ==================================================== */

/* Container reset */
.container.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* -----------------------
   SOL BLOK: Carousel & Butonlar
   ----------------------- */
#productCarousel {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
#productCarousel .carousel-inner img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
#productCarousel .carousel-control-prev-icon,
#productCarousel .carousel-control-next-icon {
  background-color: rgba(0,0,0,0.3);
  border-radius: 50%;
}
.carousel-indicators button {
  opacity: .6;
}
.carousel-indicators .active {
  opacity: 1;
}

/* Anahat Çizimi / Yazdır Butonları */
.col-lg-5 > .d-flex {
  margin-top: 1rem;

}
.btn-outline-secondary {
  border-color: #ccc;
  color: #333;
}
.btn-outline-secondary:hover {
  background-color: #f5f5f5;
}

/* -----------------------
   SAĞ BLOK: Başlık, Fiyat, Açıklamalar
   ----------------------- */
.col-lg-7 h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-right: 0.5rem;
}
.compare-icon {
  font-size: 1.25rem;
  color: #555;
  cursor: pointer;
}
.compare-icon:hover {
  color: #000;
}

/* Fiyat Kutusu */
.price-box {
  display: inline-flex;
  flex-direction: column;
  background: #f9faff;
  border: 1px solid #cce0ff;
  padding: .5rem 1rem;
  border-radius: 4px;
}
.price-box .label {
  font-size: .85rem;
  color: #555;
}
.price-box .amount {
  font-size: 1.5rem;
  font-weight: 600;
  color: #005CDE;
}

/* Açıklama paragrafı */
.col-lg-7 > .mb-4 p {
  line-height: 3.55;
  color: #333;
}

/* -----------------------
   Toggle Bölümleri (Teknik Öz, Belgeler)
   ----------------------- */
.toggle-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  padding: .75rem 1rem;
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: .5rem;
}
.toggle-section h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}
.toggle-section i {
  transition: transform .3s ease;
}
.toggle-section.collapsed i {
  transform: rotate(-90deg);
}

/* İçerik blokları */
.section-content {
  border: 1px solid #eee;
  border-top: none;
  padding: 1rem;
  border-radius: 0 0 4px 4px;
  background: #fff;
}
.section-content table {
  width: 100%;
  border-collapse: collapse;
}
.section-content th,
.section-content td {
  padding: .5rem;
  text-align: left;
  vertical-align: middle;
}
.section-content tr + tr th,
.section-content tr + tr td {
  border-top: 1px dashed #ddd;
}
.icon-cell {
  width: 2rem;
  color: #000;
}

/* Belgeler listesi */
#documentsSection .d-flex {
  flex-wrap: wrap;
}
#documentList .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* -----------------------
   İKİ SUTÜNLÜ “Teknik Özellikler / Değişimler”
   ----------------------- */
.product-specs {
  border-top: 1px solid #ddd;
  margin-top: 3rem;
  padding-top: 2rem;
}
.product-specs .d-flex > h3 {
  font-size: 1.25rem;
  font-weight: 600;
}
.toggle-specs i {
  font-size: 1rem;
  transition: transform .3s ease;
}
.product-specs.collapsed .toggle-specs i {
  transform: rotate(180deg);
}

/* içerik gizleme */
.specs-content {
  transition: max-height .4s ease;
  overflow: hidden;
}
.product-specs.collapsed .specs-content {
  max-height: 0 !important;
}

/* sütun ayırıcı */
.product-specs .row {
  position: relative;
}
.product-specs .row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #eee;
}

/* dt/dd listesi */
.spec-list {
  margin: 0;
  padding: 0;
}
.spec-item {
  display: flex;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px dashed #ddd;
}
.spec-item:last-child {
  border-bottom: none;
}
.spec-item dt {
  font-weight: 500;
}
.spec-item dd {
  margin: 0;
  text-align: right;
  color: #333;
}

/* Excel link */
.export-link {
  font-size: .9rem;
  color: #005CDE;
  text-decoration: none;
}
.export-link:hover {
  text-decoration: underline;
}

/* -----------------------
   İLGİLİ ÜRÜNLER
   ----------------------- */
#relatedProducts .prod-card {
  transition: transform .2s, box-shadow .2s;
}
#relatedProducts .prod-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.product-gallery {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  user-select: none;
}

.product-gallery .slides {
  display: flex;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  min-height: 370px;
}

.product-gallery .slide {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.product-gallery .slide.active {
  display: flex;
}

.product-gallery .slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* --- SLIDER OKLARI --- */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #dcddde;
  font-size: 2.4rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  padding: 0;
  transition: color 0.2s;
}
.slider-arrow.left  { left: 5px; }
.slider-arrow.right { right: 5px; }

.slider-arrow:hover,
.slider-arrow:focus {
  color: #bcbec0;
  background: none;
  outline: none;
}


/* Thumbs çubuğu slide kutusuna yaslı */
.product-gallery .thumbs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 10px 0 0 0;
  background: transparent;
}

.product-gallery .thumb {
  border: none;
  padding: 0;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.2s, border 0.2s;
  outline: none;
}

.product-gallery .thumb img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  border-radius: 6px;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  background: #fff;
}

.product-gallery .thumb.active img,
.product-gallery .thumb:focus img {
  border-color: #005CDE;
}

@media (max-width: 575.98px) {
  .product-gallery { max-width: 100%; }
  .product-gallery .slides { min-height: 200px; }
  .product-gallery .thumb img { width: 45px; height: 45px; }
  .slider-arrow { width: 28px; height: 28px; font-size: 1.1rem;}
}


.gallery-lightbox {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(15,18,26,0.88);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.gallery-lightbox.active { display: flex; }
.gallery-lightbox .lightbox-img {
  max-width: 85vw; max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  margin-bottom: 20px;
}
.gallery-lightbox .lightbox-close {
  position: absolute;
  top: 36px; right: 50px;
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer; z-index: 2;
  transition: color 0.2s;
}
.gallery-lightbox .lightbox-close:hover { color: #005cde; }
.gallery-lightbox .lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  background: transparent;
  border: none;
  font-size: 3.2rem;
  cursor: pointer; z-index: 2;
  padding: 0 18px; user-select: none;
  transition: color 0.2s;
}
.gallery-lightbox .lightbox-arrow:hover { color: #005cde; }
.gallery-lightbox .lightbox-prev { left: 32px; }
.gallery-lightbox .lightbox-next { right: 32px; }

/* Lightbox thumbs */
.gallery-lightbox .lightbox-thumbs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 16px;
  z-index: 5;
}
.gallery-lightbox .lightbox-thumb-btn {
  border: none;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  outline: none;
}
.gallery-lightbox .lightbox-thumb-btn img {
  width: 100px; height: 100px;
  border: 2px solid transparent;
  border-radius: 5px;
  opacity: 0.7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  transition: border 0.2s, opacity 0.2s;
}
.gallery-lightbox .lightbox-thumb-btn.active img {
  width: 100px;
  height: 100px;
  border-color: #005CDE;
  opacity: 1;
}

@media (max-width:600px){
  .gallery-lightbox .lightbox-img{max-width:97vw;max-height:45vh;}
  .gallery-lightbox .lightbox-close{top:12px;right:10px;font-size:2rem;}
  .gallery-lightbox .lightbox-arrow{font-size:2rem;}
  .gallery-lightbox .lightbox-thumbs img{width:38px;height:38px;}
}



.fa-map-marker-alt, .fa-phone, .fa-envelope, .fa-instagram {
  color: #000 !important;
}


/* FOOTER */

.text-black {
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  line-height: 30px;
  color: #666666 !important;

}


#sayfa-banner {
  height:320px !important; 
  object-fit:cover !important;
}