/*
Theme Name: Site Adı - Korenel
Theme URI: https://korenel.com
Author: A. Yiğit Çevik
Author URI:
Description: Korenel website custom theme
Tags:
Version: 1.0
Requires at least: 5.3
Tested up to: 5.4
Requires PHP: 7.0
Bootstrap version: 5.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: korenel
*/

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");

/* ==========================================================================
   1. Değişkenler ve Temel Stiller
   ========================================================================== */
:root {
  /* Renkler */
  --primary-color: #213430;
  --primary-dark: #3b7e6f;
  --secondary-color: #e65c00;
  --text-color: #505056;
  --text-dark: #2c3e50;
  --text-light: #7f8c8d;
  --background-color: #f8f9fa;
  --background-dark: #2c3e50;
  --white: #ffffff;
  --border-color: #e0e0e0;

  /* Nova Renk Paleti */
  --nova-dark-green: #213430;
  --nova-orange: #e65c00;
  --nova-text-gray: #5f5f5f;
  --nova-light-gray: #e9e9e9;
  --nova-icon-gray: #757575;
  --nova-white: #ffffff;
  --nova-transition: all 0.3s ease-in-out;

  /* Alfa değerleri */
  --alpha-light: 0.3;
  --alpha-medium: 0.4;
  --alpha-dark: 0.6;

  /* Gölgeler */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 15px 30px rgba(0, 0, 0, 0.15);
  --text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);

  /* Yazı tipi */
  --font-family: "Roboto", sans-serif;

  /* Font boyutları */
  --font-size-xs: 14px;
  --font-size-sm: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;

  /* Font ağırlıkları */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Kenar yuvarlaklıkları */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 30px;

  /* Geçiş süreleri */
  --transition-fast: 0.3s;
  --transition-normal: 0.5s;
  --transition-slow: 0.8s;

  /* Boşluklar */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 25px;
  --spacing-2xl: 30px;
  --spacing-3xl: 40px;
  --spacing-4xl: 50px;
  --spacing-5xl: 60px;

  /* Konteynır genişliği */
  --container-width: 1200px;

  /* Yükseklikler */
  --item-height-sm: 140px;
  --item-height-md: 160px;
  --item-height-lg: 200px;
  --item-height-xl: 250px;
}

/* ==========================================================================
   Page Transition — Sayfa açılışında titreme/flash önleme
   ========================================================================== */
body {
  opacity: 0;
  transition: opacity 0.35s ease;
}

body.page-loaded {
  opacity: 1;
}

/* ==========================================================================
   2. Animasyonlar (Keyframes)
   ========================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/* ==========================================================================
   3. Genel Body ve Container Stilleri
   ========================================================================== */
body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  color: var(--text-color);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

img {
  width: 100%;
  height: auto;
}

/* (Mevcut diğer genel stiller - kısaltıldı) */
.korenel-logo {
  text-align: center;
}
.korenel-logo > a > img {
  align-items: center;
  width: auto;
  height: 15px;
}
.site-logo > a > img {
  max-height: 25px;
  width: auto;
}
.entry-image {
  width: 100%;
  height: 233px;
  overflow: hidden;
  position: relative;
}
.entry-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
}
.page-numbers.current > span {
  background-color: grey;
  color: var(--white);
}

/* ==========================================================================
   4. NOVA Stil Navigasyon Bar Stilleri (Profesyonel ve Responsive)
   ========================================================================== */

/* Genel Ayarlar ve Font Awesome İkonları */
.navbar-top-nova i,
.navbar-main-nova i {
  line-height: 1;
}

/* Genel Kapsayıcılar */
.navbar-desktop-wrapper,
.navbar-mobile-wrapper {
  width: 100%;
  position: static;
}

/* ==========================================================================
   MASAÜSTÜ STİLLERİ (993px ve üzeri)
   ========================================================================== */
.navbar-mobile-wrapper {
  display: none; /* Mobilde görünecek, masaüstünde gizli */
}

/* Üst Bar (İletişim & Sosyal Medya) */
.navbar-top-nova {
  background-color: var(--nova-white);
  padding: 15px 0;
  border-bottom: 1px solid var(--nova-light-gray);
  position: relative;
  z-index: 1051 !important; /* Üst navbar'ın ana navbar'dan daha üstte olmasını sağlar */
  transition: transform 0.4s ease-out;
  transform: translateY(0);
}

.navbar-top-nova .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.navbar-brand-nova .custom-logo {
  max-height: 50px;
  width: auto;
}

.navbar-brand-nova {
  position: relative;
  bottom: 5px;
}

.navbar-contact-details {
  display: flex;
  gap: 25px;
  margin-right: auto;
  padding-left: 25px;
}

.contact-item-nova {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-item-nova i {
  color: var(--nova-orange);
  font-size: 24px;
}

.contact-text {
  font-size: 13px;
  color: var(--nova-text-gray);
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.contact-text span {
  font-weight: bold;
}

.contact-text a {
  color: var(--nova-text-gray);
  text-decoration: none;
  transition: var(--nova-transition);
}

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

.navbar-right-nova {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-icon-nova i {
  color: var(--nova-icon-gray);
  font-size: 18px;
  cursor: pointer;
}

.navbar-social-nova {
  display: flex;
  gap: 12px;
}

.social-link-nova {
  color: var(--nova-icon-gray);
  font-size: 20px;
  transition: var(--nova-transition);
}

.social-link-nova:hover {
  color: var(--nova-orange);
  transform: translateY(-2px);
}

/* Ana Menü Barı (Yeşil Alan) */
.navbar-main-nova {
  position: relative; /* Sticky kaldırıldı */
  width: 100%;
  background-color: var(--nova-dark-green);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  /* transition kaldırıldı */
}

.navbar-main-nova .container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.navbar-nav-nova {
  list-style: none;
  display: flex;
  gap: 30px; /* Menü öğeleri arasındaki boşluk */
  margin: 0;
  padding: 0;
}

.nav-link-nova {
  display: block;
  color: var(--nova-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  transition: var(--nova-transition);
  padding: 12px 5px;
}

.nav-link-nova::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--nova-orange);
  transform: scaleX(0);
  transform-origin: bottom center;
  transition: transform 0.3s ease-in-out;
}

.nav-item-nova:hover .nav-link-nova::after,
.nav-item-nova.active .nav-link-nova::after {
  transform: scaleX(1);
}

.navbar-right-actions {
  display: flex;
  align-items: stretch;
}

.catalog-button-nova {
  display: flex;
  align-items: center;
  color: var(--secondary-color);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 0 25px;
  transition: var(--nova-transition);
}

.language-selector-nova {
  display: flex;
  align-items: center;
  color: var(--nova-white);
  font-size: 14px;
  gap: 8px;
  cursor: pointer;
  padding: 0 0 0 25px;
}

.language-selector-nova i {
  font-size: 12px;
}

/* ==========================================================================
   NAVBAR SCROLL ANİMASYONLARI
   ========================================================================== */

/* Navbar wrapper - hem top hem main içerir */
.navbar-desktop-wrapper {
  position: fixed;
  top: 0;
  z-index: 1050;
  width: 100%;
  background-color: var(
    --nova-white
  ); /* Ensure background prevents overlap visibility */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add shadow for better separation */
}

/* Scroll sırasında top navbar kaybolur (aşağı scroll) */
.navbar-desktop-wrapper.scroll-hide-top .navbar-top-nova {
  transform: translateY(0); /* Disable hide */
}

/* Scroll animations disabled in JS, these classes are no longer toggled */
.navbar-desktop-wrapper.scroll-hide-top .navbar-main-nova {
  position: relative; /* Override fixed */
}

/* Yukarı scroll yapınca top navbar geri gelir */
.navbar-desktop-wrapper.scroll-show-both .navbar-top-nova {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1051;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

/* Yukarı scroll yapınca main navbar top navbar'ın altında olur */
.navbar-desktop-wrapper.scroll-show-both .navbar-main-nova {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1050;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: top 0.4s ease-out;
}

/* Yumuşak geçiş için body padding */
body.navbar-scrolling {
  transition: padding-top 0.4s ease-out;
}

body.navbar-scrolling-both {
  transition: padding-top 0.4s ease-out;
}

/* Hover efektleri */
.navbar-top-nova:hover {
  transition-duration: 0.3s;
}

.navbar-main-nova:hover {
  transition-duration: 0.2s;
}

/* Tarayıcı uyumluluğu için ek düzeltmeler */
html,
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Safari için ek düzeltme */
@supports (-webkit-touch-callout: none) {
  .navbar-main-nova[style*="position: fixed"],
  .navbar-top-nova[style*="transform"],
  .navbar-mobile-wrapper[style*="position: fixed"] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ==========================================================================
   MOBİL STİLLERİ (992px ve altı) - İÇERİK ORTALANMIŞ
   ========================================================================== */
@media (max-width: 992px) {
  /* Masaüstü header'ı gizle */
  .navbar-desktop-wrapper {
    display: none;
  }

  /* Mobil header'ı göster */
  .navbar-mobile-wrapper {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: block;
    padding: 15px 20px;
    background-color: #fff;
    transition: all 0.3s ease-out;
  }

  .navbar-mobile-wrapper .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar-mobile-wrapper .navbar-brand-nova .custom-logo {
    max-height: 40px;
  }

  .navbar-toggler-nova {
    display: block;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--nova-white);
    padding: 8px 12px;
    cursor: pointer;
  }

  /* Mobil scroll animasyonu */
  .navbar-mobile-wrapper.scroll-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  /* Offcanvas Mobil Menü Stilleri (Tam Ekran ve Ortalanmış) */
  .offcanvas {
    width: 100% !important;
    height: 100%;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.3s ease-in-out,
      visibility 0s 0.3s;
    z-index: 1060 !important; /* Fixed navbar'dan daha yüksek olmalı */
  }

  .offcanvas.show {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform 0.3s ease-in-out,
      visibility 0s 0s;
  }

  .offcanvas-header {
    color: var(--nova-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }

  .offcanvas-title {
    font-weight: bold;
    font-size: 20px;
    color: var(--nova-white);
    margin: 0;
  }

  /* Beyaz kapatma butonu ikonu */
  .btn-close {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M1.5 1.5a.5.5 0 0 1 .707 0L8 7.293l5.793-5.793a.5.5 0 1 1 .707.707L8.707 8l5.793 5.793a.5.5 0 0 1-.707.707L8 8.707l-5.793 5.793a.5.5 0 0 1-.707-.707L7.293 8 1.5 2.207a.5.5 0 0 1 0-.707z'/%3e%3c/svg%3e");
    opacity: 1;
    color: transparent;
    padding: 0.5rem 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
  }
  .btn-close:hover {
    opacity: 0.8;
  }

  .offcanvas-body {
    padding: 30px;
    font-family: "Roboto", sans-serif;
    background-color: var(--nova-white);
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center; /* İçeriği yatayda ortala */
    text-align: center; /* Metinleri ortala */
  }

  .mobile-nav-nova {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    width: 100%;
  }

  .mobile-nav-item-nova a {
    display: block;
    padding: 15px 0;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    font-size: 18px; /* Menü linklerini büyüt */
    transition: var(--nova-transition);
    text-align: center; /* Linkleri ortala */
  }

  .mobile-nav-item-nova a:hover {
    color: var(--nova-orange);
  }

  .mobile-button-wrapper {
    display: flex;
    gap: 10px; /* Butonlar arası boşluk */
    width: 100%;
    max-width: 400px; /* Maksimum genişlik */
    margin-bottom: 25px;
    justify-content: center;
  }

  .catalog-button-mobile {
    display: block;
    width: 80%; /* Butonu biraz daha daralt */
    max-width: 300px;
    text-align: center;
    background-color: var(--nova-orange);
    color: var(--nova-white);
    padding: 18px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 20px;
    transition: var(--nova-transition);
    font-size: 16px;
    align-content: center;
  }

  .catalog-button-mobile:hover {
    background-color: #ff7b24;
  }

  .language-selector-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 5px;
    margin-bottom: 25px;
    cursor: pointer;
    color: #555;
    font-size: 16px;
    width: 80%;
    max-width: 300px;
  }

  .language-selector-mobile i {
    font-size: 18px;
    color: var(--nova-orange);
  }

  .catalog-button-mobile,
  .language-selector-mobile {
    flex: 1; /* Eşit genişlikte alan kapla */
    margin-bottom: 0; /* Wrapper'a taşındığı için alt boşluğu sıfırla */
    padding: 12px; /* Dikey padding'i azaltarak yüksekliği düşür */
    font-size: 14px; /* Yazı boyutunu biraz küçült */
    width: auto; /* Genişliği flex'e bırak */
  }

  .mobile-menu-divider {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 30px 0;
    width: 80%;
  }

  .mobile-contact-info,
  .mobile-social-nova {
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mobile-contact-info h6,
  .mobile-social-nova h6 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--nova-orange);
    padding-bottom: 8px;
    display: inline-block;
  }

  .mobile-contact-item {
    display: flex;
    align-items: center; /* İkon ve metni dikeyde ortalar */
    gap: 15px; /* İkon ile metin arası boşluk */
    margin-bottom: 15px;
    color: var(--nova-text-gray);
    text-decoration: none;
    font-size: 16px;
    transition: var(--nova-transition);
    text-align: center; /* Adres dahil tüm metinleri ortalar */
  }

  .mobile-contact-item:hover {
    color: var(--nova-orange);
  }

  .mobile-contact-item i {
    color: var(--nova-orange);
    width: 25px;
    text-align: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  .mobile-social-nova .mobile-social-links {
    display: flex;
    justify-content: center; /* Sosyal ikonları ortala */
    gap: 25px;
  }

  .mobile-social-nova .mobile-social-links a {
    font-size: 30px;
    color: var(--nova-dark-green);
    transition: var(--nova-transition);
  }

  .mobile-social-nova .mobile-social-links a:hover {
    color: var(--nova-orange);
    transform: scale(1.1);
  }
}

/* Orta Boy Ekranlar için İyileştirmeler (Tablet vb.) */
@media (max-width: 1200px) and (min-width: 993px) {
  .navbar-contact-details {
    display: none; /* İletişim bilgileri bu aralıkta sığmıyorsa gizle */
  }
  .navbar-top-nova .container {
    justify-content: flex-end;
  }
  .navbar-brand-nova {
    margin-right: auto; /* Logoyu sola yasla */
  }
  .nav-link-nova {
    padding: 25px 15px; /* Menü elemanları aralığını azalt */
  }
}

/* ==========================================================================
   5. Slider Bölümü (YENİ TASARIM + MOBİL UYUMLU)
   ========================================================================== */

/* Ana Slider Konteyneri */
.korenel-slider-container {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 600px;
  background-color: #1a1a1a; /* Görsel yüklenene kadar koyu arka plan */
  /* overflow: hidden; -> Bu özelliği kaldırıyoruz, mobil navigasyonu engelliyor */
}

/* Arka plan görsellerini tutan slider */
.korenel-slider {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* Sadece slider bileşenine overflow: hidden ekliyoruz */
}

.korenel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-slow) ease-in-out;
}

.korenel-slide.active {
  opacity: 1;
  z-index: 1;
}

.korenel-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: zoomIn 20s infinite alternate;
}

/* Arka plan karartma efekti */
.korenel-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Soldaki sabit içerik alanı */
.korenel-static-content {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
  z-index: 10;
  color: var(--white);
  max-width: 650px;
}

.korenel-slide-title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: 0;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  opacity: 1; /* Başlangıçta görünür olsun */
  transition: opacity 0.3s ease-in-out; /* Opaklık geçişi */

  /* Layout Stability Fix */
  min-height: 2.4em; /* Reserve space for 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: flex; /* Fallback / Alternative centering if needed, but webkit-box usually overrides */
  align-items: flex-end; /* Text bottom align if single line, or similar preference? Usually top is better. Let's stick to standard block behavior inside fixed height */
  display: block; /* Reset display for standard line height behavior unless clamping requires webkit-box */
  display: -webkit-box; /* Re-apply for clamp */
}

.korenel-slide-title.fade-out {
  opacity: 0;
}

.korenel-slide-title.fade-in {
  opacity: 1;
}

/* ==========================================================================
   Slider Alt Başlık Stilleri - Basit ve Temiz
   ========================================================================== */

/* Ana slide alt başlığı */
.korenel-slide-subtitle {
  font-size: 2rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Alt başlık fade efektleri - title ile aynı sistem */
.korenel-slide-subtitle.fade-out {
  opacity: 0;
}

.korenel-slide-subtitle.fade-in {
  opacity: 1;
}

/* ==========================================================================
   Responsive Düzenlemeler
   ========================================================================== */

@media (max-width: 1200px) {
  .korenel-slide-subtitle {
    font-size: 1.8rem;
  }
}

@media (max-width: 992px) {
  .korenel-slide-subtitle {
    font-size: 1.6rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .korenel-slide-subtitle {
    font-size: 1.4rem;
  }
}

@media (max-width: 576px) {
  .korenel-slide-subtitle {
    font-size: 1.2rem;
  }
}

@media (max-width: 400px) {
  .korenel-slide-subtitle {
    font-size: 1rem;
  }
}

/* Başlık altındaki ayırıcı çizgi */
.slider-divider {
  border: none;
  height: 2px;
  width: 97%;
  background-color: rgba(255, 255, 255, 0.4);
  margin: var(--spacing-3xl) 0;
}

/* Masaüstü ve Mobil Görünüm Kontrolü */
.desktop-nav {
  display: flex;
}

.mobile-nav,
.korenel-slider-dots,
.mobile-slide-link,
.mobile-slider-arrows {
  display: none;
}

/* Navigasyon görsellerinin kapsayıcısı - Masaüstü */
.korenel-slider-navigation {
  display: flex;
  gap: var(--spacing-md);
}

.korenel-slider-nav-item {
  width: 200px;
  height: 250px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all var(--transition-fast) ease;
}

/* Navigasyon görselinin kendisi */
.nav-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast) ease;
}

/* Aktif ve hover durumları */
.korenel-slider-nav-item:hover .nav-item-image,
.korenel-slider-nav-item.active .nav-item-image {
  transform: scale(1.1);
  filter: grayscale(0%) brightness(1);
}

.korenel-slider-nav-item.active {
  box-shadow: var(--shadow-lg);
  filter: none; /* Bu satır varsa kalsın */

  /* DIŞ ÇİZGİ VE BOŞLUK KURALLARI */
  outline: 2px solid rgba(255, 255, 255, 0.47); /* Dışarıya 3px'lik çizgi çizer */
  outline-offset: 4px; /* Bu çizgi ile görsel arasına 4px boşluk koyar */
}

.slider-nav-link-arrow {
  position: absolute;
  top: 90%;
  right: 8px; /* Sağda konumlandır */
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 36px;
  color: var(--white);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.3);

  /* Varsayılan olarak gizle */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    background-color 0.3s ease;
  z-index: 5;
}

.korenel-slider-nav-item.active .slider-nav-link-arrow {
  opacity: 1;
  visibility: visible;
}

.slider-nav-link-arrow:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Mobil için nokta göstergeleri */
.korenel-slider-dots {
  display: none; /* Varsayılan olarak gizli */
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  flex-direction: row; /* Yatay sıralama */
  flex-wrap: nowrap;
}

.korenel-slider-dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease; /* Sadece renk ve boyut geçişi */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Görünürlüğü artıran gölge */
  display: inline-block;
}

.korenel-slider-dot.active {
  background-color: var(--nova-orange);
  transform: scale(1.2);
}

.korenel-slider-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Mobil için detayları gör butonu */
.mobile-slide-link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--nova-orange);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Mobil için oklar */
.mobile-slider-arrows {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
  pointer-events: none;
}

.mobile-arrow {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.mobile-arrow:hover {
  background-color: var(--nova-orange);
}

/* Dokunmatik kaydırma efekti */
.korenel-slider-container {
  touch-action: pan-y;
  user-select: none;
}

/* RESPONSIVE DÜZENLEMELER */
@media (max-width: 1200px) {
  .korenel-slider-navigation {
    gap: var(--spacing-sm);
  }

  .korenel-slider-nav-item {
    width: 180px;
    height: 220px;
  }

  .korenel-static-content {
    left: 10%;
    max-width: 600px;
  }
}

@media (max-width: 992px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block !important;
    position: absolute;
    z-index: 11; /* Diğer katmanların üzerine çıkması için z-index eklendi */
    width: 100%; /* Genişliği tam yaparak içindekileri ortalamayı kolaylaştırır */
    left: 50%; /* Yatayda ortalamak için */
    transform: translateX(-50%); /* Yatayda tam ortalamayı sağlar */
    text-align: center; /* İçindeki buton ve noktaları ortalar */
    bottom: 50px;
  }

  .korenel-slider-dots {
    display: flex; /* Mobilde göster */
  }

  .mobile-slide-link {
    display: inline-flex; /* Mobilde göster */
  }

  .mobile-slider-arrows {
    display: flex; /* Mobilde göster */
  }

  .korenel-slider-container {
    height: 70vh;
    min-height: 500px;
  }

  .korenel-static-content {
    width: 100%;
    left: 0;
    text-align: center;
    justify-self: anchor-center;
    padding: 0 20px;
    top: 45%;
  }

  .korenel-slide-title {
    font-size: var(--font-size-4xl);
  }

  .slider-divider {
    margin-left: auto;
    margin-right: auto;
    width: 120px;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
  }
}

@media (max-width: 768px) {
  .korenel-slider-container {
    height: 60vh;
    min-height: 450px;
  }

  .korenel-slide-title {
    font-size: var(--font-size-3xl);
  }

  .mobile-arrow {
    width: 36px;
    height: 36px;
  }

  .korenel-slider-dot {
    width: 10px;
    height: 10px;
  }

  .mobile-slide-link {
    padding: 8px 20px;
    font-size: 13px;
  }

  .mobile-nav {
    bottom: 20px;
  }
}

@media (max-width: 576px) {
  .korenel-slider-container {
    height: 50vh;
    min-height: 400px;
  }

  .korenel-slide-title {
    font-size: var(--font-size-2xl);
  }

  .slider-divider {
    width: 80px;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .mobile-arrow {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .korenel-slider-dot {
    width: 8px;
    height: 8px;
  }

  .mobile-slide-link {
    padding: 7px 16px;
    font-size: 12px;
  }

  .korenel-slider-dots {
    gap: 8px;
    margin-bottom: 10px;
  }

  .mobile-nav {
    bottom: 15px;
  }
}

@media (max-width: 400px) {
  .korenel-slider-container {
    height: 45vh;
    min-height: 350px;
  }

  .korenel-slide-title {
    font-size: var(--font-size-xl);
  }

  .slider-divider {
    width: 60px;
    height: 1px;
  }

  .mobile-nav {
    bottom: 12px;
  }

  .korenel-slider-dots {
    margin-bottom: 8px;
  }
}

/* Animasyonlar */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/* Slider içi ek animasyonlar */
.korenel-slide-bg {
  animation: zoomIn 20s infinite alternate;
}

.korenel-slider-nav-item:hover {
  transform: translateY(-5px);
}

.korenel-slider-dot:hover {
  transform: scale(1.2);
}

.mobile-arrow:active {
  transform: scale(0.9);
}

/* ==========================================================================
   6. Kategori ve Ürün Sayfaları
   ========================================================================== */
/* Page Header */
.page-header {
  background-color: var(--background-dark);
  color: var(--white);
  padding: var(--spacing-5xl) 0;
  margin-bottom: var(--spacing-4xl);
  position: relative;
  overflow: hidden;
}

.page-header,
.product-header {
  position: relative;
  overflow: hidden;
}

.header-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.4); /* Metinlerin okunabilirliği için karartma */
}

.page-header .container,
.product-header .container {
  position: relative;
  z-index: 1; /* İçeriğin görsel üzerine gelmesi için */
}

.header-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.page-title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-lg);
  animation: fadeInDown 1s ease;
}

.page-description {
  max-width: 800px;
  margin: 0 auto var(--spacing-2xl);
  font-size: var(--font-size-lg);
  opacity: 0.9;
  animation: fadeInUp 1s ease;
}

/* Kategori Seçici */
.category-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-4xl);
}

.category-item {
  width: calc(16.666% - var(--spacing-md));
  min-width: 180px;
  background-color: var(--white);
  border: none;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  position: relative;
  flex-grow: 1;
  animation: fadeIn var(--transition-slow) ease backwards;
  text-decoration: none;
}

/* Animasyon gecikmeleri */
.category-item:nth-child(1) {
  animation-delay: 0.1s;
}
.category-item:nth-child(2) {
  animation-delay: 0.2s;
}
.category-item:nth-child(3) {
  animation-delay: 0.3s;
}
.category-item:nth-child(4) {
  animation-delay: 0.4s;
}
.category-item:nth-child(5) {
  animation-delay: 0.5s;
}
.category-item:nth-child(6) {
  animation-delay: 0.6s;
}

.category-item:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.category-item.active {
  border: 3px solid var(--secondary-color);
}

.category-image {
  height: var(--item-height-md);
  overflow: hidden;
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.category-item:hover .category-image img {
  transform: scale(1.1);
}

.category-name {
  padding: var(--spacing-md) var(--spacing-sm);
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  position: relative;
}

.category-name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
  transition: width var(--transition-fast);
}

.category-item:hover .category-name::after {
  width: 80px;
}

/* Ürün Bölümü */
.products-container {
  position: relative;
  min-height: 800px;
  margin-bottom: var(--spacing-5xl);
}

.products-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-fast) ease,
    visibility var(--transition-fast) ease;
  pointer-events: none;
}

.products-section.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.products-title {
  font-size: var(--font-size-3xl);
  color: var(--text-dark);
  font-weight: var(--font-weight-bold);
}

.products-count {
  background-color: var(--secondary-color);
  color: var(--white);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-lg);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-2xl);
}

.product-card {
  background-color: transparent;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  transition: transform var(--transition-fast);
  animation: fadeInUp var(--transition-normal) ease backwards;
}

/* Ürün kartı animasyon gecikmeleri */
.product-card:nth-child(1) {
  animation-delay: 0.1s;
}
.product-card:nth-child(2) {
  animation-delay: 0.2s;
}
.product-card:nth-child(3) {
  animation-delay: 0.3s;
}
.product-card:nth-child(4) {
  animation-delay: 0.4s;
}
.product-card:nth-child(5) {
  animation-delay: 0.5s;
}
.product-card:nth-child(6) {
  animation-delay: 0.6s;
}

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

.product-image {
  height: var(--item-height-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform var(--transition-normal);
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-content {
  padding: var(--spacing-lg) 0;
}

.product-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-sm);
}

.product-description {
  color: var(--text-light);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
}

.product-button {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  font-weight: var(--font-weight-semibold);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.product-button:hover {
  color: var(--secondary-color);
  transform: translateY(-2px);
}

.no-products {
  padding: var(--spacing-3xl);
  text-align: center;
  background-color: var(--background-color);
  border-radius: var(--border-radius-md);
  color: var(--text-light);
  font-size: var(--font-size-lg);
}

/* ==========================================================================
   7. Ürün Detay Sayfası Stilleri
   ========================================================================== */

/* Ürün Başlık Bölümü */
.product-header {
  background-color: var(--primary-color);
  padding: var(--spacing-4xl) 0;
  color: var(--white);
  margin-bottom: var(--spacing-3xl);
  position: relative;
  text-align: center;
}

.product-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, var(--alpha-medium)),
      rgba(0, 0, 0, var(--alpha-medium))
    ),
    url("https://placehold.co/1920x500?text=Ürün+Banner");
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: zoomIn 20s infinite alternate linear;
}

.product-header .container {
  position: relative;
  z-index: 1;
}

.product-header .page-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  text-shadow: var(--text-shadow);
  animation: fadeInDown 1s ease;
}

/* Breadcrumb */
.product-breadcrumb {
  padding: var(--spacing-md) 0;
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-sm);
  color: var(--text-light);
  border-bottom: 1px solid var(--border-color);
}

.product-breadcrumb a {
  color: var(--text-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.product-breadcrumb a:hover {
  color: var(--secondary-color);
}

.product-breadcrumb span {
  color: var(--secondary-color);
  font-weight: var(--font-weight-medium);
}

/* Ürün Bileşeni */
.product-component {
  margin-bottom: var(--spacing-4xl);
  padding-bottom: var(--spacing-3xl);
  border-bottom: 1px solid var(--border-color);
  animation: fadeInUp var(--transition-normal) ease backwards;
}

.product-component:nth-child(odd) {
  animation-delay: 0.2s;
}
.product-component:nth-child(even) {
  animation-delay: 0.4s;
}

.product-component:last-child {
  border-bottom: none;
}

.component-title {
  font-size: var(--font-size-2xl);
  color: var(--text-dark);
  margin-bottom: var(--spacing-xl);
  font-weight: var(--font-weight-bold);
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.component-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
  transition: width var(--transition-fast);
}

.product-component:hover .component-title::after {
  width: 100px;
}

.component-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

.component-content.reversed {
  flex-direction: row-reverse;
}

.component-content.full-width {
  display: block;
}

.component-image {
  flex: 0 0 450px;
  max-width: 450px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  transition: none;
}

.product-component:hover .component-image {
  transform: none;
  box-shadow: none;
}

.component-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-normal);
}

.product-component:hover .component-image img {
  transform: none;
}

.component-description {
  flex: 1;
  min-width: 300px;
}

.component-description .component-title {
  margin-top: 0;
}

.component-description.full-width {
  width: 100%;
}

.component-description p {
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
  font-size: large;
  color: var(--text-color);
}

.component-description ul {
  margin-bottom: var(--spacing-lg);
  padding-left: var(--spacing-lg);
}

.component-description li {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-left: var(--spacing-md);
}

/* PDF Link */
.document-download {
  margin-top: var(--spacing-xl);
}

.pdf-link {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--primary-color);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  font-weight: var(--font-weight-medium);
}

.pdf-link:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.pdf-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M181.9 256.1c-5-16-4.9-46.9-2-46.9 8.4 0 7.6 36.9 2 46.9zm-1.7 47.2c-7.7 20.2-17.3 43.3-28.4 62.7 18.3-7 39-17.2 62.9-21.9-12.7-9.6-24.9-23.4-34.5-40.8zM86.1 428.1c0 .8 13.2-5.4 34.9-40.2-6.7 6.3-29.1 24.5-34.9 40.2zM248 160h136v328c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V24C0 10.7 10.7 0 24 0h200v136c0 13.2 10.8 24 24 24zm-8 171.8c-20-12.2-33.3-29-42.7-53.8 4.5-18.5 11.6-46.6 6.2-64.2-4.7-29.4-42.4-26.5-47.8-6.8-5 18.3-.4 44.1 8.1 77-11.6 27.6-28.7 64.6-40.8 85.8-.1 0-.1.1-.2.1-27.1 13.9-73.6 44.5-54.5 68 5.6 6.9 16 10 21.5 10 17.9 0 35.7-18 61.1-61.8 25.8-8.5 54.1-19.1 79-23.2 21.7 11.8 47.1 19.5 64 19.5 29.2 0 31.2-32 19.7-43.4-13.9-13.6-54.3-9.7-73.6-7.2zM377 105L279 7c-4.5-4.5-10.6-7-17-7h-6v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-74.1 255.3c4.1-2.7-2.5-11.9-42.8-9 37.1 15.8 42.8 9 42.8 9z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ==========================================================================
   8. Ürün Galeri Slider ve Modal
   ========================================================================== */
.product-gallery-slider {
  position: relative;
  margin: var(--spacing-xl) 0;
  padding: 0 var(--spacing-md);
}

.gallery-slider-container {
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
}

.gallery-slider-wrapper {
  display: flex;
  transition: transform var(--transition-normal) ease;
}

.gallery-slide {
  min-width: 100%;
  height: 500px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.gallery-slide:hover img {
  transform: scale(1.05);
}

/* Slider Okları */
.gallery-slider-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  z-index: 5;
}

.gallery-slider-arrow {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: var(--font-size-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.7;
}

.gallery-slider-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
}

.gallery-slider-arrow.prev {
  margin-right: auto;
}
.gallery-slider-arrow.next {
  margin-left: auto;
}

/* Slider Navigasyon Noktaları */
.gallery-slider-nav {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--border-color);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nav-dot.active,
.nav-dot:hover {
  background-color: var(--secondary-color);
  transform: scale(1.2);
}

/* Galeri Modal */
.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050; /* Bootstrap modal z-index'inden yüksek */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.gallery-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1;
}

.modal-container {
  position: relative;
  z-index: 2;
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: var(--shadow-xl);
  animation: fadeIn 0.5s ease;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 3;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.modal-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  z-index: 3;
}

.modal-prev,
.modal-next {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: var(--font-size-3xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-prev:hover,
.modal-next:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}

/* ==========================================================================
   9. Sondaj Kimyasalları Sayfası Stilleri
   ========================================================================== */
/* Kategori Seçim Bölümü */
.chemicals-category-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-4xl);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--white);
}

.chemicals-category-item {
  flex: 1;
  min-width: 200px;
  background-color: var(--white);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  animation: fadeIn var(--transition-slow) ease backwards;
  border-bottom: 3px solid transparent;
}

/* Animasyon gecikmeleri */
.chemicals-category-item:nth-child(1) {
  animation-delay: 0.1s;
}
.chemicals-category-item:nth-child(2) {
  animation-delay: 0.2s;
}
.chemicals-category-item:nth-child(3) {
  animation-delay: 0.3s;
}
.chemicals-category-item:nth-child(4) {
  animation-delay: 0.4s;
}
.chemicals-category-item:nth-child(5) {
  animation-delay: 0.5s;
}

.chemicals-category-item:hover {
  background-color: var(--background-color);
}

.chemicals-category-item.active {
  border-bottom-color: var(--secondary-color);
  background-color: var(--background-color);
}

.chemicals-category-name {
  padding: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark);
  transition: all var(--transition-fast);
}

.chemicals-category-item.active .chemicals-category-name {
  color: var(--text-dark);
  font-weight: var(--font-weight-bold);
}

/* Ürün Bölümü */
.chemicals-container {
  position: relative;
  margin-bottom: var(--spacing-5xl);
  transition: min-height 0.4s ease-out; /* Geçişi yumuşatmak için eklendi */
}

.chemicals-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-fast) ease,
    visibility var(--transition-fast) ease;
  pointer-events: none;
}

.chemicals-section.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chemicals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.chemicals-title {
  font-size: var(--font-size-2xl);
  color: var(--text-dark);
  font-weight: var(--font-weight-bold);
}

.chemicals-count {
  background-color: var(--secondary-color);
  color: var(--white);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-lg);
}

.chemicals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-2xl);
}

.chemical-card {
  background-color: transparent;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  transition: transform var(--transition-fast);
  animation: fadeInUp var(--transition-normal) ease backwards;
  display: flex;
  flex-direction: column;
}

/* Kart animasyon gecikmeleri */
.chemical-card:nth-child(1) {
  animation-delay: 0.1s;
}
.chemical-card:nth-child(2) {
  animation-delay: 0.2s;
}
.chemical-card:nth-child(3) {
  animation-delay: 0.3s;
}
.chemical-card:nth-child(4) {
  animation-delay: 0.4s;
}
.chemical-card:nth-child(5) {
  animation-delay: 0.5s;
}

.chemical-card:hover {
  transform: translateY(-2px);
}

.chemical-image {
  height: 300px;
  overflow: hidden;
  position: relative;
  background: #f8f9fa;
}

.chemical-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-normal);
}

.chemical-card:hover .chemical-image img {
  transform: scale(1.05);
}

.chemical-content {
  padding: var(--spacing-lg) 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.chemical-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-sm);
}

.chemical-description {
  color: var(--text-light);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
  flex-grow: 1;
}

.no-chemicals {
  padding: var(--spacing-3xl);
  text-align: center;
  background-color: var(--background-color);
  border-radius: var(--border-radius-md);
  color: var(--text-light);
  font-size: var(--font-size-lg);
  grid-column: 1 / -1;
}

/* ==========================================================================
   10. İletişim Sayfası Stilleri
   ========================================================================== */

/* İletişim Sayfası Ana Düzen */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--spacing-3xl);
  margin: var(--spacing-4xl) 0;
}

/* İletişim Bilgileri - Minimal Tasarım */
.contact-info {
  display: flex;
  flex-direction: column;
}

.contact-info-minimal {
  animation: fadeIn var(--transition-normal) ease backwards;
}

.contact-title-minimal {
  font-size: var(--font-size-xl);
  color: var(--text-dark);
  margin: 0 0 var(--spacing-xl) 0;
  font-weight: var(--font-weight-semibold);
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.contact-title-minimal::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--secondary-color);
}

.contact-content-minimal {
  display: flex;
  flex-direction: column;
}

/* İletişim Öğeleri - Minimal */
.contact-item-minimal {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
}

.contact-icon-minimal {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  font-size: var(--font-size-lg);
  margin-top: 2px;
}

.contact-icon-minimal i {
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Minimal İkon Renkleri */
.contact-icon-minimal .contact-icon-location {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23E65C00'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'%3E%3C/path%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'%3E%3C/path%3E%3C/svg%3E");
}

.contact-icon-minimal .contact-icon-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23E65C00'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E");
}

.contact-icon-minimal .contact-icon-phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23E65C00'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'%3E%3C/path%3E%3C/svg%3E");
}

.contact-text-minimal h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  margin: 0 0 var(--spacing-xs) 0;
}

.contact-text-minimal p,
.contact-text-minimal a {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--text-color);
  line-height: 1.6;
}

.contact-text-minimal a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* İletişim İkonları (SVG background) */
.contact-icon i {
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.contact-icon-location {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'%3E%3C/path%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'%3E%3C/path%3E%3C/svg%3E");
}
.contact-icon-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E");
}
.contact-icon-phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'%3E%3C/path%3E%3C/svg%3E");
}

/* Sosyal Medya Bölümü - Minimal */
.contact-social-minimal {
  margin-top: var(--spacing-2xl);
}
.contact-social-minimal h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}
.social-icons-minimal {
  display: flex;
  gap: var(--spacing-md);
}
.social-icon-minimal {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background-color: transparent;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.social-icon-minimal:hover {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
  background-color: var(--secondary-color);
}
.social-icon-minimal i {
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Minimal Sosyal Medya İkonları */
.social-icon-minimal .icon-facebook {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96C18.34 21.21 22 17.06 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/%3E%3C/svg%3E");
}

.social-icon-minimal .icon-twitter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E");
}

.social-icon-minimal .icon-instagram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.social-icon-minimal .icon-linkedin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");
}

.social-icon-minimal .icon-youtube {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/%3E%3C/svg%3E");
}

/* Hover durumunda ikonları beyaz yap */
.social-icon-minimal:hover .icon-facebook,
.social-icon-minimal:hover .icon-twitter,
.social-icon-minimal:hover .icon-instagram,
.social-icon-minimal:hover .icon-linkedin,
.social-icon-minimal:hover .icon-youtube {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96C18.34 21.21 22 17.06 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/%3E%3C/svg%3E");
}
.social-icon-minimal:hover .icon-twitter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E");
}
.social-icon-minimal:hover .icon-instagram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}
.social-icon-minimal:hover .icon-linkedin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");
}
.social-icon-minimal:hover .icon-youtube {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/%3E%3C/svg%3E");
}

/* Sosyal Medya Renkleri ve İkonları */
.social-icon.facebook {
  background-color: #1877f2;
}
.social-icon.twitter {
  background-color: #1da1f2;
}
.social-icon.instagram {
  background: linear-gradient(
    45deg,
    #405de6,
    #5851db,
    #833ab4,
    #c13584,
    #e1306c,
    #fd1d1d
  );
}
.social-icon.linkedin {
  background-color: #0a66c2;
}
.social-icon.youtube {
  background-color: #ff0000;
}

.icon-facebook {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96C18.34 21.21 22 17.06 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/%3E%3C/svg%3E");
}
.icon-twitter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E");
}
.icon-instagram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}
.icon-linkedin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");
}
.icon-youtube {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/%3E%3C/svg%3E");
}

/* Çalışma Saatleri */
.working-hours {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.working-hours-item {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}
.working-hours-item:last-child {
  border-bottom: none;
}
.working-hours-item .day {
  font-weight: var(--font-weight-medium);
  color: var(--text-dark);
}
.working-hours-item .hours {
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
}

/* Harita */
.contact-map {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  height: 100%;
  min-height: 400px;
  animation: fadeIn var(--transition-normal) ease backwards;
  animation-delay: 0.5s;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.contact-map:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.map-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CTA Bölümü */
.contact-cta {
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-3xl);
  margin: var(--spacing-4xl) 0;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: fadeIn var(--transition-normal) ease backwards;
  animation-delay: 0.7s;
}

.cta-content h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
}

.cta-content p {
  font-size: var(--font-size-lg);
  max-width: 600px;
  margin: 0 auto var(--spacing-2xl);
  opacity: 0.9;
}

.cta-button {
  display: inline-block;
  background-color: var(--secondary-color);
  color: var(--white);
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.cta-button:hover {
  background-color: var(--white);
  color: var(--primary-color);
  transform: translateY(-3px);
}

/* ==========================================================================
   11. Genel Responsive Tasarım Ayarlamaları
   ========================================================================== */

@media (max-width: 1200px) {
  .korenel-slider-navigation {
    left: 5%;
  }
  .category-item {
    width: calc(20% - var(--spacing-md));
  }
  .products-grid,
  .chemicals-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  /* Slider */
  .korenel-slider-navigation {
    flex-wrap: wrap;
    max-width: 90%;
    justify-content: center;
  }
  .korenel-slider-nav-item {
    width: 180px;
    height: 220px;
  }

  /* Kategori & Ürünler */
  .category-item {
    width: calc(25% - var(--spacing-md));
  }
  .products-grid,
  .chemicals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-header {
    padding: 80px 0;
  }
  .page-title {
    font-size: var(--font-size-4xl);
  }

  /* Ürün Detay */
  .gallery-slide {
    height: 400px;
  }
  .product-header .page-title {
    font-size: var(--font-size-3xl);
  }

  /* İletişim */
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
  .contact-map {
    min-height: 400px;
  }
  .contact-cta {
    padding: var(--spacing-2xl);
  }

  /* Kimyasallar */
  .chemicals-category-item {
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-5xl: 36px;
    --font-size-4xl: 32px;
    --font-size-3xl: 24px;
  }

  /* Slider */
  .korenel-slide-content {
    top: 10vh;
  }
  .korenel-slide-description {
    font-size: var(--font-size-md);
  }
  .korenel-slider-nav-item {
    width: 150px;
    height: 180px;
  }
  .korenel-slider-navigation {
    gap: var(--spacing-md);
  }

  /* Kategori & Ürünler */
  .category-item {
    width: calc(33.333% - var(--spacing-md));
  }
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
  .page-header {
    padding: 60px 0;
  }
  .page-description {
    font-size: var(--font-size-md);
  }
  .products-header,
  .chemicals-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  .product-image {
    height: 180px;
  }

  /* Ürün Detay */
  .component-content,
  .component-content.reversed {
    flex-direction: column;
  }
  .component-image,
  .component-description {
    width: 100%;
    min-width: 100%;
  }
  .component-image {
    max-width: 200px;
    margin: 0 auto var(--spacing-lg) auto;
  }
  .component-content.reversed .component-image {
    order: -1;
  }
  .product-header .page-title {
    font-size: var(--font-size-2xl);
  }
  .gallery-slide {
    height: 300px;
  }
  .gallery-slider-arrow {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-xl);
  }

  /* İletişim */
  .contact-wrapper {
    margin: var(--spacing-2xl) 0;
  }
  .cta-content h2 {
    font-size: var(--font-size-xl);
  }
  .cta-content p {
    font-size: var(--font-size-md);
  }

  /* Kimyasallar */
  .chemical-image {
    height: 200px;
  }
  .chemicals-category-selector {
    flex-direction: column;
  }
  .chemicals-category-item {
    width: 100%;
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-5xl: 28px;
    --font-size-4xl: 26px;
    --font-size-3xl: 22px;
  }

  /* Slider */
  .korenel-slide-content {
    top: 8vh;
  }
  .korenel-slider-nav-item {
    width: 120px;
    height: 140px;
  }
  .korenel-slider-navigation {
    gap: var(--spacing-sm);
  }

  /* Kategori & Ürünler */
  .category-item {
    width: calc(50% - var(--spacing-md));
  }
  .products-grid,
  .chemicals-grid {
    grid-template-columns: 1fr;
  }
  .page-header {
    padding: 50px 0;
  }
  .category-image {
    height: var(--item-height-sm);
  }

  /* Ürün Detay */
  .gallery-slide {
    height: 250px;
  }
  .product-header {
    padding: var(--spacing-2xl) 0;
  }
  .modal-nav {
    padding: 0 var(--spacing-sm);
  }
  .modal-prev,
  .modal-next {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-xl);
  }

  /* İletişim */
  .social-icons {
    flex-wrap: wrap;
  }
  .contact-cta {
    padding: var(--spacing-xl);
  }
  .contact-card-body {
    padding: var(--spacing-lg);
  }
}

@media (max-width: 400px) {
  .category-item {
    width: 100%;
  }
}

/* ==========================================================================
   13. Hizmetlerimiz Bölümü - Video Düzeni (Eksiksiz CSS Stilleri)
   ========================================================================== */

/* Ana bölüm stilleri */
.services-section {
  background-color: var(--white);
  padding: var(--spacing-5xl) 0;
  overflow: hidden;
}

/* Bölüm başlık stilleri */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-4xl);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}

.section-divider {
  width: 80px;
  height: 3px;
  background-color: var(--nova-orange);
  margin: 0 auto var(--spacing-xl);
}

.section-subtitle {
  color: var(--text-light);
  font-size: var(--font-size-lg);
  max-width: 800px;
  margin: 0 auto;
}

/* Özel video grid düzeni */
.services-video-grid {
  display: flex;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-4xl);
  height: 700px;
}

/* Sol büyük video öğesi */
.service-video-item.large {
  width: 50%; /* 1/2 oranında sol tarafta olacak */
  height: 100%;
  animation: fadeInLeft 0.8s ease backwards;
  animation-delay: 0.2s;
}

/* Sağ taraftaki videoları içeren konteyner */
.service-videos-right {
  width: 50%; /* 1/2 oranında sağ tarafta olacak */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Sağdaki her bir video öğesi */
.service-videos-right .service-video-item {
  height: calc(
    50% - var(--spacing-xl) / 2
  ); /* Aralarında boşluk bırakarak eşit bölme */
  animation: fadeInRight 0.8s ease backwards;
}

.service-videos-right .service-video-item:nth-child(1) {
  animation-delay: 0.4s;
}

.service-videos-right .service-video-item:nth-child(2) {
  animation-delay: 0.6s;
}

/* Video öğelerinin genel stilleri */
.service-video-item {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.service-video-item:hover {
  /* Efektler kapatıldı */
}

/* Video sarmalayıcı */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Video elementi */
.service-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

/* Video üzerinde overlay */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 0.2)
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--spacing-xl);
  transition: background var(--transition-fast);
  color: var(--white);
  cursor: pointer; /* Tüm overlay'i tıklanabilir yapma */
}

/* Play ikonuna aktif tıklama görünümü */
.video-play-icon:active {
  transform: translate(-50%, -50%) scale(0.9);
  background-color: var(--nova-orange);
}

/* Play ikonu hover ve aktif durumları */
.service-video-item:hover .video-play-icon {
  transform: translate(-50%, -50%) scale(0.9);
  background-color: var(--nova-orange);
  opacity: 1;
}

.service-video-item:hover .video-play-icon i {
  transform: scale(0.9);
}

/* Değişiklik 1: Video üzerine gelindiğinde overlay şeffaflaşıyor */
.service-video-item:hover .video-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0)
  );
}

/* Hata durumu animasyonu */
.video-play-icon.error-state {
  animation: errorPulse 0.5s ease;
}

@media (max-width: 768px) {
  .video-play-icon {
    min-width: 50px;
    min-height: 50px;
    font-size: 24px;
    place-self: center;
  }
}

@keyframes errorPulse {
  0% {
    background-color: rgba(230, 92, 0, 0.9);
  }
  50% {
    background-color: rgba(255, 0, 0, 0.9);
  }
  100% {
    background-color: rgba(230, 92, 0, 0.9);
  }
}

/* Video içeriği */
.video-content {
  position: relative;
  z-index: 3;
}

.video-content h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--white);
}

.video-content p {
  opacity: 0.9;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-md);
  max-width: 90%;
}

/* Video düğmesi */
.video-button {
  color: var(--nova-orange);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  position: relative;
  z-index: 15; /* Daha yüksek z-index değeri */
}

.video-button i {
  margin-left: var(--spacing-xs);
  transition: transform var(--transition-fast);
}

.video-button:hover {
  color: var(--white);
  transform: translateX(5px);
}

.video-button:hover i {
  transform: translateX(3px);
}

.nova-btn {
  display: inline-block;
  background-color: var(--nova-orange);
  color: var(--white);
  padding: 12px 30px;
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
  border: 2px solid var(--nova-orange);
}

.nova-btn:hover {
  background-color: transparent;
  color: var(--nova-orange);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Animasyonlar */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Dokunmatik cihazlar için özel stil düzenlemeleri */
@media (hover: none) {
  .video-play-icon {
    opacity: 1; /* Her zaman görünür */
    width: 30px; /* Daha büyük */
    height: 30px;
  }

  .video-play-icon i {
    font-size: 30px; /* Daha büyük ikon */
  }

  /* Tüm dokunmatik cihazlarda hover efektini gösterme */
  .service-video-item:hover .video-play-icon {
    transform: translate(-50%, -50%);
    background-color: rgba(230, 92, 0, 0.9);
  }

  /* Video içerik alanı her zaman görünür kalır */
  .video-content {
    opacity: 1;
  }
}

/* Responsive düzenlemeler */
@media (max-width: 1200px) {
  .services-video-grid {
    height: 500px;
  }
}

@media (max-width: 992px) {
  .services-video-grid {
    height: auto;
    flex-direction: column;
  }

  .service-video-item.large,
  .service-videos-right {
    width: 100%;
  }

  .service-video-item.large {
    height: 500px;
  }

  .service-videos-right .service-video-item {
    height: 300px;
  }

  .service-video-item {
    animation: fadeInUp 0.8s ease backwards !important;
  }

  .service-video-item.large {
    animation-delay: 0.2s !important;
  }

  .service-videos-right .service-video-item:nth-child(1) {
    animation-delay: 0.4s !important;
  }

  .service-videos-right .service-video-item:nth-child(2) {
    animation-delay: 0.6s !important;
  }
}

@media (max-width: 768px) {
  .service-video-item.large {
    height: 400px;
  }

  .service-videos-right .service-video-item {
    height: 250px;
  }

  .video-content h3 {
    font-size: var(--font-size-lg);
  }

  .video-content p {
    font-size: var(--font-size-sm);
  }

  .video-play-icon {
    width: 30px;
    height: 30px;
  }

  .video-play-icon i {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .service-video-item.large,
  .service-videos-right .service-video-item {
    height: 200px;
    margin-bottom: var(--spacing-md);
  }

  .video-content h3 {
    font-size: var(--font-size-md);
  }

  .video-content p {
    display: none; /* Mobilde açıklama metinlerini gizle */
  }

  .video-overlay {
    padding: var(--spacing-md);
  }

  .services-video-grid {
    gap: var(--spacing-md);
  }

  .service-videos-right {
    gap: var(--spacing-md);
  }
}
/* ==========================================================================
   Hakkımızda Sayfası Stilleri
   ========================================================================== */

/* Genel Bölüm Stilleri */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-4xl);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}

.section-divider {
  width: 80px;
  height: 3px;
  background-color: var(--nova-orange);
  margin: 0 auto var(--spacing-xl);
}

section {
  padding: var(--spacing-5xl) 0;
  border-bottom: 1px solid var(--border-color);
}

section:last-child {
  border-bottom: none;
}

/* Şirket Tanıtımı Bölümü */
.about-intro-section {
  padding-top: var(--spacing-4xl);
}

.about-intro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4xl);
  align-items: center;
}

.about-image {
  flex: 1;
  min-width: 300px;
}

.about-main-image {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-normal);
}

.about-image:hover .about-main-image {
  transform: scale(1.02);
}

.about-text {
  flex: 1;
  min-width: 300px;
}

.about-text .section-title,
.about-text .section-divider {
  margin-left: 0;
  text-align: left;
}

.about-content p {
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
  color: var(--text-color);
}

/* Misyon Vizyon Bölümü */

.mission-vision-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xl);
  justify-content: center;
}

.mission-vision-box {
  flex: 1;
  min-width: 300px;
  background-color: var(--white);
  padding: var(--spacing-3xl);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.mission-vision-box:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.icon-container {
  width: 80px;
  height: 80px;
  background-color: var(--nova-dark-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-xl);
  transition: background-color var(--transition-fast);
}

.mission-vision-box:hover .icon-container {
  background-color: var(--nova-orange);
}

.icon-container i {
  font-size: 32px;
  color: var(--white);
}

.mission-vision-box h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}

.mission-vision-box p {
  color: var(--text-color);
  line-height: 1.6;
}

/* Responsive Düzenlemeler */
@media (max-width: 992px) {
  .mission-vision-box {
    min-width: 250px;
  }
}

@media (max-width: 768px) {
  .about-intro {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .mission-vision-box {
    padding: var(--spacing-xl);
  }

  .section-title {
    font-size: var(--font-size-2xl);
  }
}

/* Nova Footer CSS Stilleri - style.css dosyasına eklenecek */

/* ==========================================================================
   Footer Stilleri
   ========================================================================== */

/* ==========================================================================
   NOVA Footer Stilleri (Benzersiz Sınıf İsimleriyle)
   ========================================================================== */

.nova-footer {
  background-color: var(--nova-dark-green);
  color: var(--white);
  position: relative;
}

/* Ana Footer Bölümü */
.nova-footer-main {
  padding: var(--spacing-5xl) 0 var(--spacing-4xl);
}

.nova-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3xl);
}

.nova-footer-column {
  display: flex;
  flex-direction: column;
}

/* Logo ve Hakkında Bölümü */
.nova-footer-branding {
  margin-bottom: var(--spacing-xl);
}

.nova-footer-logo {
  display: inline-block;
  margin-bottom: var(--spacing-xl);
}

.nova-footer-logo img {
  max-height: 60px;
  width: auto;
}

.nova-footer-logo-text {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  text-decoration: none;
  margin-bottom: var(--spacing-xl);
  display: inline-block;
}

.nova-footer-about-text {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-sm);
}

/* Sosyal Medya İkonları */
.nova-footer-social-links {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.nova-footer-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
  text-decoration: none;
  transition: var(--transition-fast);
}

.nova-footer-social-icon:hover {
  background-color: var(--nova-orange);
  color: var(--white);
  transform: translateY(-3px);
}

/* Footer Başlıkları */
.nova-footer-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  margin-bottom: var(--spacing-sm);
}

.nova-footer-divider {
  width: 50px;
  height: 3px;
  background-color: var(--nova-orange);
  margin-bottom: var(--spacing-xl);
}

/* Footer Menüleri */
.nova-footer-nav {
  margin-bottom: var(--spacing-xl);
}

.nova-footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nova-footer-menu li {
  margin-bottom: var(--spacing-sm);
}

.nova-footer-menu a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  position: relative;
  padding-left: var(--spacing-md);
  display: block;
}

.nova-footer-menu a:before {
  content: "→";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nova-orange);
  opacity: 0.8;
  transition: all var(--transition-fast);
}

.nova-footer-menu a:hover {
  color: var(--white);
  transform: translateX(5px);
}

.nova-footer-menu a:hover:before {
  opacity: 1;
}

/* İletişim Bilgileri */
.nova-footer-contact-info {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-xl);
}

.nova-footer-contact-item {
  display: flex;
  margin-bottom: var(--spacing-md);
  align-items: center;
}

.nova-footer-contact-icon {
  /* contact-icon -> nova-footer-contact-icon olarak değiştirildi */
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  color: var(--nova-orange);
  margin-top: 2px;
}

.nova-footer-contact-text {
  /* contact-text -> nova-footer-contact-text olarak değiştirildi */
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.nova-footer-contact-text a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nova-footer-contact-text a:hover {
  color: var(--white);
}

/* Alt Footer */
.nova-footer-bottom {
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-xl) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nova-footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nova-footer-copyright {
  /* copyright -> nova-footer-copyright olarak değiştirildi */
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* Duyarlı Tasarım */
@media (max-width: 992px) {
  .nova-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nova-footer-column.nova-footer-branding {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .nova-footer-main {
    padding: var(--spacing-4xl) 0 var(--spacing-3xl);
  }

  .nova-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .nova-footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .nova-footer-social-links,
  .nova-footer-divider {
    align-self: center;
  }

  .nova-footer-menu a {
    padding: 0;
  }

  .nova-footer-contact-item {
    justify-content: center;
  }

  .nova-footer-contact-icon {
    display: none;
  }

  .nova-footer-column {
    text-align: center;
  }

  .nova-footer-menu a:before {
    display: none;
  }
}

/* ==========================================================================
   Nova Slider Galeri Bölümü - style.css dosyasına eklenecek
   ========================================================================== */

/* Ana Slider Galeri Bölümü */
.nova-slider-gallery-section {
  background-color: var(--white);
  padding: var(--spacing-5xl) 0;
  overflow: hidden;
}

/* Slider Konteyner */
.nova-slider-gallery-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Slider Wrapper */
.nova-slider-gallery-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

/* Slider Slide */
.nova-slider-gallery-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  z-index: 1;
}

.nova-slider-gallery-slide.active {
  opacity: 1;
  z-index: 2;
}

/* Slide Görseli */
.nova-slider-slide-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nova-slider-slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease-out;
}

.nova-slider-gallery-slide.active .nova-slider-slide-image img {
  transform: scale(1.05);
}

/* Slide Overlay */
.nova-slider-slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  );
  color: var(--white);
  padding: var(--spacing-3xl);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.8s ease-out;
}

.nova-slider-gallery-slide.active .nova-slider-slide-overlay {
  transform: translateY(0);
  opacity: 1;
}

/* Slide İçeriği */
.nova-slider-slide-content h3 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--white);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.8s ease-out 0.2s;
}

.nova-slider-slide-content p {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.6;
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.8s ease-out 0.4s;
}

.nova-slider-gallery-slide.active .nova-slider-slide-content h3,
.nova-slider-gallery-slide.active .nova-slider-slide-content p {
  transform: translateY(0);
  opacity: 1;
}

/* Slider Kontrolleri */
.nova-slider-gallery-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-xl);
  z-index: 10;
}

.nova-slider-gallery-btn {
  width: 55px;
  height: 55px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--white);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  opacity: 0.8;
  backdrop-filter: blur(10px);
}

.nova-slider-gallery-btn:hover {
  background: rgba(230, 92, 0, 0.8);
  border-color: rgba(230, 92, 0, 0.8);
  opacity: 1;
  transform: scale(1.1);
}

.nova-slider-gallery-btn:active {
  transform: scale(0.95);
}

/* Slider Noktaları */
.nova-slider-gallery-dots {
  position: absolute;
  bottom: var(--spacing-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-sm);
  z-index: 10;
}

.nova-slider-gallery-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  position: relative;
}

.nova-slider-gallery-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--secondary-color);
  transition: all var(--transition-fast) ease;
}

.nova-slider-gallery-dot.active::before,
.nova-slider-gallery-dot:hover::before {
  width: 100%;
  height: 100%;
}

.nova-slider-gallery-dot.active {
  background: var(--secondary-color);
  transform: scale(1.2);
}

/* Otomatik Oynatma Kontrolü */
.nova-slider-gallery-autoplay-control {
  position: absolute;
  top: var(--spacing-xl);
  right: var(--spacing-xl);
  z-index: 10;
}

.nova-slider-gallery-autoplay-btn {
  width: 45px;
  height: 45px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--white);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  backdrop-filter: blur(10px);
}

.nova-slider-gallery-autoplay-btn:hover {
  background: rgba(230, 92, 0, 0.8);
  border-color: rgba(230, 92, 0, 0.8);
  transform: scale(1.1);
}

.nova-slider-gallery-autoplay-btn.paused {
  background: rgba(230, 92, 0, 0.8);
  border-color: rgba(230, 92, 0, 0.8);
}

/* Progress Bar */
.nova-slider-gallery-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.nova-slider-gallery-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary-color), #ff7b24);
  width: 0;
  transition: width 0.1s linear;
}

/* Fade Animasyonu */
@keyframes novaSliderSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nova-slider-gallery-slide.active .nova-slider-slide-content h3,
.nova-slider-gallery-slide.active .nova-slider-slide-content p {
  animation: novaSliderSlideIn 0.8s ease-out;
}

/* ==========================================================================
   Responsive Düzenlemeler
   ========================================================================== */

@media (max-width: 1200px) {
  .nova-slider-gallery-wrapper {
    height: 550px;
  }

  .nova-slider-slide-content h3 {
    font-size: var(--font-size-2xl);
  }

  .nova-slider-slide-content p {
    font-size: var(--font-size-md);
  }

  .nova-slider-gallery-controls {
    padding: 0 var(--spacing-lg);
  }

  .nova-slider-gallery-btn {
    width: 50px;
    height: 50px;
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .nova-slider-gallery-section {
    padding: var(--spacing-4xl) 0;
  }

  .nova-slider-gallery-wrapper {
    height: 450px;
  }

  .nova-slider-slide-overlay {
    padding: var(--spacing-2xl);
  }

  .nova-slider-slide-content h3 {
    font-size: var(--font-size-xl);
  }

  .nova-slider-slide-content p {
    font-size: var(--font-size-sm);
  }

  .nova-slider-gallery-btn {
    width: 45px;
    height: 45px;
    font-size: 14px;
  }

  .nova-slider-gallery-autoplay-btn {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .nova-slider-gallery-dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 768px) {
  .nova-slider-gallery-wrapper {
    height: 400px;
  }

  .nova-slider-slide-overlay {
    padding: var(--spacing-xl);
  }

  .nova-slider-slide-content h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
  }

  .nova-slider-slide-content p {
    font-size: var(--font-size-xs);
    line-height: 1.4;
  }

  .nova-slider-gallery-controls {
    padding: 0 var(--spacing-md);
  }

  .nova-slider-gallery-btn {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .nova-slider-gallery-autoplay-control {
    top: var(--spacing-md);
    right: var(--spacing-md);
  }

  .nova-slider-gallery-autoplay-btn {
    width: 35px;
    height: 35px;
    font-size: 10px;
  }

  .nova-slider-gallery-dots {
    bottom: var(--spacing-md);
    gap: var(--spacing-xs);
  }

  .nova-slider-gallery-dot {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 576px) {
  .nova-slider-gallery-wrapper {
    height: 350px;
  }

  .nova-slider-slide-overlay {
    padding: var(--spacing-lg);
  }

  .nova-slider-slide-content h3 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
  }

  .nova-slider-slide-content p {
    font-size: 12px;
    line-height: 1.3;
  }

  .nova-slider-gallery-btn {
    width: 35px;
    height: 35px;
    font-size: 10px;
  }

  .nova-slider-gallery-autoplay-btn {
    width: 30px;
    height: 30px;
    font-size: 8px;
  }

  .nova-slider-gallery-dots {
    bottom: var(--spacing-sm);
  }
}

@media (max-width: 400px) {
  .nova-slider-gallery-wrapper {
    height: 300px;
  }

  .nova-slider-slide-content h3 {
    font-size: var(--font-size-sm);
  }

  .nova-slider-slide-content p {
    font-size: 11px;
  }

  .nova-slider-gallery-controls {
    padding: 0 var(--spacing-sm);
  }
}

/* Mobil kategori düzenlemeleri */

/* Products-container için düzeltmeler */
.products-container {
  position: relative;
  min-height: 400px; /* Minimum başlangıç yüksekliği */
  margin-bottom: var(--spacing-5xl);
  overflow: hidden; /* Taşan içeriği gizle */
}

/* Products section konumlandırma düzeltmesi */
.products-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Otomatik yükseklik */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
}

.products-section.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative; /* Aktif bölümü normal akışa çevir */
}

/* Mobil kategori düzenlemeleri */
@media (max-width: 768px) {
  .category-selector::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .category-name {
    font-size: 14px;
    padding: var(--spacing-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Touch feedback için */
  .category-item.touching {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }

  /* Aktif kategori vurgusu */
  .category-item.active {
    border: 2px solid var(--secondary-color);
    box-shadow: var(--shadow-md);
  }

  /* Ürün bölümü düzenlemeleri */
  .products-container {
    min-height: 300px;
    margin-bottom: var(--spacing-3xl);
  }

  .products-header {
    margin-bottom: var(--spacing-xl);
  }

  .products-grid {
    gap: var(--spacing-xl);
  }

  .product-card {
    margin-bottom: var(--spacing-md);
  }
}

/* Çok küçük mobil cihazlar için */
@media (max-width: 480px) {
  .category-item {
    min-width: 120px;
  }

  .category-image {
    height: 100px;
  }

  .category-name {
    font-size: 12px;
    padding: var(--spacing-xs);
  }

  .products-container {
    min-height: 250px;
  }
}

/* Animasyon iyileştirmeleri */
.products-section.show .product-card {
  animation-name: fadeInUp;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

/* Safari için ek düzeltmeler */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .products-container {
      transform: translateZ(0);
    }

    .products-section {
      -webkit-backface-visibility: hidden;
    }
  }
}

/* Dropdown Menü Stilleri */
.category-dropdown-container {
  position: relative;
  margin-bottom: var(--spacing-2xl);
  display: none; /* Varsayılan olarak gizli, mobilde gösterilecek */
  z-index: 100;
}

.category-dropdown-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.category-dropdown-select:hover {
  box-shadow: var(--shadow-md);
}

.selected-category {
  font-weight: var(--font-weight-medium);
  color: var(--text-dark);
}

.dropdown-icon {
  color: var(--secondary-color);
  transition: transform 0.3s ease;
}

.category-dropdown-container.active .dropdown-icon {
  transform: rotate(180deg);
}

.category-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  margin-top: 5px;
  box-shadow: var(--shadow-md);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 101;
}

.category-dropdown-container.active .category-dropdown-menu {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
}

.category-dropdown-item {
  padding: 12px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: var(--text-color);
}

.category-dropdown-item:hover,
.category-dropdown-item.active {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--secondary-color);
}

.category-dropdown-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Container pozisyonlama düzeltmesi */
.products-container {
  position: relative;
  min-height: 400px;
}

/* Bölüm pozisyonlama düzeltmesi */
.products-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
}

.products-section.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative; /* Aktif bölümü normal akışa çevir */
}

/* Responsive ayarları */
@media (max-width: 768px) {
  .category-dropdown-container {
    display: block;
  }

  .category-selector.desktop-only {
    display: none;
  }
}

/* Masaüstü */
@media (min-width: 769px) {
  .category-dropdown-container {
    display: none;
  }

  .category-selector.desktop-only {
    display: flex;
  }
}

/* =============================================== */
/* NAVBAR DROPDOWN STYLES - CLEAN & SIMPLE */
/* =============================================== */

/* Dropdown wrapper styles */
.catalog-dropdown-wrapper,
.language-dropdown-wrapper {
  position: relative;
  display: inline-block;
  align-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dropdown arrow styles */
.dropdown-arrow {
  font-size: 10px !important;
  margin-left: 6px;
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.catalog-dropdown-wrapper.active .dropdown-arrow,
.language-dropdown-wrapper.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* Catalog dropdown menu */
.catalog-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  margin-top: 6px;
  overflow: hidden;
}

.catalog-dropdown-wrapper.active .catalog-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.catalog-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 14px;
  font-weight: 500;
}

.catalog-dropdown-item:last-child {
  border-bottom: none;
}

.catalog-dropdown-item:hover {
  background-color: var(--text-light);
  color: var(--white);
}

.catalog-dropdown-item i {
  font-size: 16px;
  color: var(--secondary-color);
  width: 18px;
  text-align: center;
  transition: color 0.2s ease;
}

.catalog-dropdown-item:hover i {
  color: var(--white);
}

/* Language dropdown menu */
.language-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  margin-top: 6px;
  overflow: hidden;
}

.language-dropdown-wrapper.active .language-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.language-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 14px;
  font-weight: 500;
}

.language-item:last-child {
  border-bottom: none;
}

.language-item:hover {
  background-color: var(--text-light);
  color: var(--white);
}

/* Mobile dropdown styles */
.mobile-dropdown {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin-top: 10px !important;
  background: transparent !important;
}

.mobile-catalog .catalog-dropdown-item {
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-catalog .catalog-dropdown-item:hover {
  background: var(--secondary-color);
  color: var(--white);
}

.mobile-language .language-item {
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  justify-content: center;
}

.mobile-language .language-item:hover {
  background: var(--secondary-color);
  color: var(--white);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .catalog-dropdown-menu {
    min-width: 220px;
    right: 0;
    left: auto;
  }

  .language-dropdown-menu {
    min-width: 140px;
  }
}

/* Close dropdown when clicking outside */
.dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: transparent;
}

/* =============================================== */
/* NAVBAR NOVA SPECIFIC STYLES */
/* =============================================== */

/* Navbar slogan styles */
.navbar-slogan-nova {
  flex: 1;
  margin-top: 7px;
}

.company-slogan {
  font-size: 1.2rem;
  margin: 0;
  color: var(--primary-color, #e65c00);
  font-weight: 500;
  font-style: italic;
}

/* Mobile catalog dropdown */
.mobile-catalog .catalog-dropdown-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  margin-top: 10px;
  background: transparent;
}

.mobile-catalog .catalog-dropdown-item {
  background: #f8f9fa;
  border-radius: var(--border-radius-md);
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
}

.mobile-catalog .catalog-dropdown-item:hover {
  background: var(--secondary-color);
  color: var(--white);
}

/* Mobile language selector */
.mobile-language .language-toggle {
  padding: 10px 16px;
  background: #f8f9fa;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  width: 100%;
  justify-content: space-between;
  color: var(--text-color);
}

.mobile-language .language-dropdown {
  position: static;
  margin-top: 8px;
  box-shadow: none;
  border: 1px solid var(--border-color);
}

/* JavaScript interactions */
.catalog-dropdown.active .catalog-dropdown-menu,
.language-selector.active .language-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 992px) {
  .company-slogan {
    font-size: 1rem;
  }
}

/* Product Specification Table */
.product-component.full-width-table {
  width: 100%;
  margin-top: 40px;
}

.product-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  table-layout: auto; /* Ensure browser calculates widths */
}

.product-spec-table th,
.product-spec-table td {
  padding: 15px 20px;
  border-bottom: 1px solid #dbe2e8; /* Slightly darker border for better visibility */
  text-align: left;
  vertical-align: middle; /* Better alignment */
}

/* Header Styles (Distinct look) */
.product-spec-table th {
  font-weight: 700;
  color: var(--nova-dark-green);
  background-color: #f1f4f6; /* Darker/Cooler gray */
  border-right: 2px solid #fff; /* Separator */
}

/* Apply specific width ONLY to the first column (Labels) */
.product-spec-table tr > th:first-child,
.product-spec-table tr > td:first-child {
  width: 25%;
  min-width: 180px; /* Prevent crushing on smaller screens */
  background-color: #e9ecef; /* Slightly darker for row headers */
}

/* If the top row is headers, style them nicely but don't force width */
.product-spec-table thead th,
.product-spec-table tr:first-child th {
  background-color: var(--nova-dark-green);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* Reset width for top row headers except the first one */
.product-spec-table tr:first-child th:not(:first-child) {
  width: auto;
}

.product-spec-table td {
  color: #555;
  background-color: #fff;
}

/* Striped effect for better readability */
.product-spec-table tr:nth-child(even) td {
  background-color: #fcfcfc;
}

.product-spec-table tr:last-child th,
.product-spec-table tr:last-child td {
  border-bottom: 1px solid #dbe2e8; /* Keep border on last element */
}

/* Responsive Table */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 15px;
  border-right: 1px solid #dbe2e8; /* Add border to indicate scroll end */
}

/* Scrollbar styles for table */
.table-responsive::-webkit-scrollbar {
  height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

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

@media (max-width: 768px) {
  /* Keep table structure, allow scrolling */
  .product-spec-table {
    min-width: 600px; /* Force minimum width to trigger scroll */
  }

  /* Adjust sizing for mobile */
  .product-spec-table th,
  .product-spec-table td {
    padding: 10px 12px; /* Smaller padding */
    font-size: 13px; /* Smaller font */
    white-space: normal; /* Allow text wrapping within cells */
  }

  /* Ensure the first column (headers) is visible and sticky if possible, 
     but standard scroll is often safer for complex tables */
  .product-spec-table tr > th:first-child,
  .product-spec-table tr > td:first-child {
    width: auto;
    min-width: 120px;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #e9ecef; /* Ensure background covers content behind */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); /* Shadow to separate frozen column */
  }

  /* Reset other sticky behaviors if any */
  .product-spec-table td {
    background-color: #fff;
  }

  .product-spec-table tr:nth-child(even) td {
    background-color: #fcfcfc;
  }
}