/* Genel sıfırlama ve body ayarları */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
}

/* Container maksimum genişlik ve ortalama */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header düzeni */
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; 
  padding: 10px 0;
  border-bottom: 1px solid #808080; /* header alt çizgi gri */
}

/* Sol logo */
.left-logo .logo {
  width: 360px;
  height: auto;
}

/* Sağ logo */
.right-logo .flag-tr {
  width: 260px;
  height: auto;
}

/* Contact alanı */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
}

/* Alt satır: Email ve GSM kutular */
.contact .bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.contact .bottom p {
  margin: 0;
  padding: 5px 10px;
  background-color: #007BFF;
  color: white;
  border-radius: 5px;
  font-weight: bold;
}

/* Üst satır: İletişim butonu */
.contact .top {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact .top button {
  padding: 5px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.contact .top button:hover {
  background-color: #1e7e34;
}

/* SOYLAMETAL yazısı */
.contact .soylametal {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
  color: #FF4500;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  text-align: center;
  letter-spacing: 1.5px;
}

/* Menü container: sticky, max 1200px içerik, alt çizgi 1200px */
.main-menu {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1000;
}

.main-menu .container {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* menü solda, arama sağda */
  align-items: center;
  border-bottom: 1px solid #808080; /* alt çizgi sadece menü genişliğinde */
}

/* Menü listesi yatay ve aralıklı */
.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}

/* Menü elemanları */
.main-menu li {
  position: relative;
  transition: background-color 0.3s;
}

/* Hover: li üzerine gelince hafif belli */
.main-menu li:hover {
  background-color: rgba(230, 230, 230, 0.9); /* daha koyu kirli beyaz */
  border-radius: 3px;
}

.main-menu a {
  display: block;
  padding: 15px 10px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: 0.3s;
}

.main-menu a:hover {
  color: #007BFF;
}

/* Dropdown alt menü */
.main-menu .dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  min-width: 180px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: border-bottom 0.3s;
}

/* Hover ile dropdown açılması ve alt çizgi */
.main-menu .dropdown:hover .dropdown-menu {
  display: block;
  border-bottom: 2px solid #808080; /* gri çizgi */
}

.main-menu .dropdown .dropdown-menu li {
  width: 100%;
}

.main-menu .dropdown .dropdown-menu a {
  padding: 10px 15px;
  white-space: nowrap;
}

/* Dropdown alt menü linkleri hover */
.main-menu .dropdown .dropdown-menu li:hover {
  background-color: rgba(230, 230, 230, 0.9); /* daha koyu kirli beyaz */
}

/* Arama formu sağa yaslı */
.search-form {
  display: flex;
  gap: 5px;
}

.search-form input {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
}

.search-form input:focus {
  border-color: #007BFF;
}

.search-form button {
  padding: 5px 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.search-form button:hover {
  background-color: #0056b3;
}

/* Responsive: küçük ekranlarda menü dikey, dropdown statik */
@media (max-width: 768px) {
  .main-menu .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .main-menu ul {
    flex-direction: column;
    gap: 0;
  }
  
  .main-menu .dropdown .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
  }
}






/* Slider Container */
.slider-container {
  max-width: 1200px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* Slider Wrapper */
.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Her bir Slide */
.slide {
  min-width: 100%;
  box-sizing: border-box;
  position: relative; /* caption için */
}

/* Slide resimleri */
.slide img {
  width: 100%;
  height: 350px; /* sabit dikey */
  object-fit: cover; /* taşmaları kırpar, tam sığdırır */
  display: block;
}

/* Slide Caption (üstteki yazı) */
.slide-caption {
  position: absolute;
  top: 20px; /* üstten boşluk */
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background-color: rgba(0,0,0,0.4); /* yarı transparent */
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 20px;
  text-align: center;
  max-width: 90%;
  letter-spacing: 1px;
}

/* Kontrol Butonları */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 30px;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 100;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.7);
}

/* Responsive */
@media (max-width: 768px) {
  .slide img {
    height: 250px;
  }
  .slide-caption {
    font-size: 16px;
    padding: 5px 10px;
  }
  .prev, .next {
    font-size: 24px;
    padding: 8px 12px;
  }
}






.marquee-container {
  width: 900px;
  height: 50px; /* isteğe göre azaltabilirsin */
  margin: 0 auto;
  background-color: #007BFF; /* email mavisi */
  border-radius: 5px; /* yuvarlatılmış köşeler */
  overflow: hidden; /* taşan metni kırpar */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
  top: -50px; /* slider ile üst üste gelmesi için */
}

.marquee-container marquee {
  width: 100%;
  font-size: 20px;
  color: #fff;
}





.expertise {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0 20px;
  text-align: center;
}

.expertise h2 {
  font-size: 32px;
  margin-bottom: 40px;
  font-weight: bold;
}

.expertise-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px; /* sütunlar arası boşluk */
  max-width: 1100px;
  margin: 50px auto;
}
.expertise h2 {
  font-size: 28px;       /* isteğe göre boyutu */
  font-weight: bold;     /* kalın */
  text-align: center;    /* ortala */
  margin: 0px 0 0px 0; /* üstten 10px, alttan 20px boşluk */
  color: #333;           /* isteğe göre renk */
}

.left-column,
.right-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  flex: 1;
}

.center-image {
  flex: 0 0 120px; /* resim genişliği */
  display: flex;
  align-items: center;
}

.center-image img {
  display: block;
  border-radius: 5px; /* istersen bunu da kaldırabilirsin */
}


/* Her bir kutu */
.expert-box {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  flex: 1; /* eşit yükseklik için */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.expert-box h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #007BFF;
}

.expert-box p {
  margin: 0;
  color: #333;
}

/* Responsive */
@media (max-width: 992px) {
  .expertise-container {
    flex-direction: column;
    align-items: center;
  }

  .center-image {
    width: 80%;
    margin: 20px 0;
  }

  .left-column, .right-column {
    width: 100%;
    gap: 15px;
  }
  
  /* Her bir kutu */
  .expertise-container .box {
    background-color: #f5f5f5; /* hafif kirli beyaz */
    padding: 10px;
    border-radius: 5px;
  }

  /* Başlık */
  .expertise-container .box strong,
  .expertise-container .box:first-line {
    font-size: 18px; /* başlık boyutu küçültüldü */
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
  }

  /* Yazı */
  .expertise-container .box span {
    font-size: 14px; /* alt metin başlığa göre daha küçük */
    font-weight: normal;
    line-height: 1.4;
  }
}

/* Kutu başlığı */
.expertise-container .box h3 {
  font-size: 15px;  /* başlık boyutu */
  font-weight: bold;
  margin-bottom: 8px;
}

/* Kutu alt metni */
.expertise-container .box p {
  font-size: 13px;  /* yazı boyutu */
  line-height: 1.5;
  margin: 0;
}






/* Ana Konteyner */
.new-section {
  display: flex;
  max-width: 1200px;
  margin: 50px auto;
  gap: 20px;
}

/* Sol Büyük Resim */
.new-section .left-side img {
  width: 700px; /* isteğe göre ayarla */
  height: auto;
  border-radius: 5px;
}

/* Sağ Div */
.new-section .right-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Sağ Alt Divler */
.new-section .info-box {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* resim solda, text sağda */
  background-color: #f5f5f5; /* hafif kirli beyaz */
  padding: 10px 15px;
  border-radius: 5px;
  gap: 15px;
}

/* Küçük Resimler */
.new-section .info-box .info-img {
  width: 175px;
  height: 175px;
  object-fit: cover; /* kutuya sığdırır ve kırpar */
  border-radius: 5px;
  flex-shrink: 0; /* küçülmesini engeller */
}

/* Başlık ve Yazı */
.new-section .info-box .text-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: -90px; /* yazıları yukarı kaydırır */
  /* veya padding-top: 0; ile iç boşluğu kaldırabilirsin */
}

.new-section .info-box h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.new-section .info-box p {
  margin: 10;
  font-size: 14px;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
  .new-section {
    flex-direction: column;
    align-items: center;
  }
  
  .new-section .right-side {
    width: 100%;
  }

  .new-section .info-box {
    flex-direction: column; /* resim üstte, text altta */
    align-items: center;
    text-align: center;
  }


}


.reminder-section {
	max-width: 1200px;  /* Maksimum genişlik */
  display: flex;
  flex-wrap: wrap; /* satır dolunca alt satıra geçer */
  gap: 10px; /* divler arası boşluk */
  justify-content: center; /* ortalar */
  margin: 40px auto;
}

.reminder-box {
  background-color: #f5f5f5; /* hafif kirli beyaz */
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap; /* Satır kırmadan göster */
  border: 1px solid #808080; /* gri çerçeve eklendi */
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
  cursor: default;
}

.reminder-box:hover {
  background-color: #007BFF; /* Hover rengi */
  color: white;
  transform: scale(1.05);    /* Hafif büyütme efekti */
}


.mail-list-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid #808080;
  padding: 10px;
  box-sizing: border-box;
   border-radius: 15px;
}

.mail-list-container .mail-logo {
  width: 600px;   /* başlangıç boyu */
  max-width: 50%; /* container genişliğine göre büyür */
  height: 100px;
  object-fit: contain;
   border-radius: 10px;
}

.mail-list-container .mail-input {
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 25px;
  outline: none;
  width: 300px;
}

.mail-list-container .mail-input:focus {
  border-color: #007BFF;
}

.mail-list-container .mail-button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.mail-list-container .mail-button:hover {
  background-color: #0056b3;
}
.mail-list-container .mail-list {
  flex-shrink: 0;
}







.three-columns-container {
  max-width: 1150px;
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background-color: #e6f2ff; /* çok açık mavi arka fon */
  padding: 30px;
  border-radius: 5px;
}

.three-columns-container .column {
  width: 400px;
  background-color: #f5f5f5; /* isteğe bağlı kutu rengi */
  padding: 20px;
  border-radius: 5px;
  box-sizing: border-box;
}

.three-columns-container h3 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}

.three-columns-container p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Çalışma saatleri hizalama */
.work-hours {
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-hours li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 5px;
  text-align: left; /* hizalama */
}

/* Linkler */
.links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.links-list li {
  margin-bottom: 5px;
}

.links-list li a {
  text-decoration: none;
  color: #007BFF; /* email mavisi */
  font-weight: bold;
  padding: 5px 10px; /* hover arka plan için padding */
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block; /* arka planın düzgün görünmesi için */
}

.links-list li a:hover {
  background-color: #dceeff; /* çok çok açık mavi */
  color: #0056b3; /* hover yazı rengi isteğe bağlı */
}

/* Responsive: Küçük ekranlarda alt alta */
@media (max-width: 992px) {
  .three-columns-container {
    flex-direction: column;
    align-items: center;
  }

  .three-columns-container .column {
    width: 90%;
    margin-bottom: 20px;
  }
}




/* Footer */
.site-footer {
  width: 100%;
  background-color: #e6f2ff; /* çok çok açık mavi */
  color: #333;
  text-align: center;
  padding: 15px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  border-top: 1px solid #c0d9ff; /* opsiyonel */
}

.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px;
}

.site-footer a {
  color: #007BFF;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Back to Top Button */
#backToTop {
  display: none; /* başlangıçta gizli */
  position: fixed;
  bottom: 80px; /* footer üstünde */
  right: 30px;
  z-index: 1000;
  font-size: 24px;
  background-color: #007BFF; /* email mavisi */
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background-color 0.3s;
}

#backToTop:hover {
  background-color: #0056b3;
}




.about-us {
  padding: 60px 20px;
  background-color: #f5f5f5;
  text-align: center;
}

.about-us h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
  margin-top: -50px; /* 50px yukarı kaydırma */
  position: relative; /* Eğer transform kullanacaksanız gerekli */
  /* Alternatif transform ile: */
  /* transform: translateY(-50px); */
}

.about-us p {
  font-size: 16px;
  color: #555;
  max-width: 800px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
}

.about-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.about-cards .card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 250px;
  transition: transform 0.3s;
}

.about-cards .card:hover {
  transform: translateY(-5px);
}

.about-cards .card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  margin-bottom: 10px;
  color: #111;
}

.about-cards .card p {
  font-size: 14px;
  color: #555;
}
.menu-banner {
  text-align: center; /* Ortalamak için */
  margin: 20px 0; /* Üst ve alt boşluk */
}

.menu-banner img {
  max-width: 1200px; /* Maksimum genişlik */
  width: 100%; /* Küçük ekranlarda küçülsün */
  height: auto; /* Orantıyı koru */
  display: inline-block; /* Ortalanması için */
  border-radius: 8px; /* İsteğe bağlı: hafif yuvarlatma */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Hafif gölge isteğe bağlı */
}






.quality-section {
  padding: 60px 20px;
  background-color: #f5f5f5;
}

.quality-container {
  display: flex;
  flex-wrap: wrap; /* Mobilde alt alta gelsin */
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start; /* Metin üstten hizalanır */
  gap: 40px;
}

.quality-slider {
  flex: 1;
  position: relative;
  text-align: center;
}

.quality-slider img {
  max-width: 25%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: none; /* Başlangıçta tüm resimler gizli */
}

.quality-slider .active img {
  display: block; /* Aktif resim gösterilir */
}

.next-slide {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.quality-text {
  flex: 1;
}

.quality-text h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px;
  margin-bottom: 20px;
  color: #333;
}

.quality-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}





.quality-container {
  display: flex;
  flex-direction: column; /* Yazı üstte, fotoğraflar altta */
  align-items: center;
  gap: 20px;
}

.team-photos {
  display: flex;
  justify-content: center;
  gap: 15px; /* Fotoğraflar arası boşluk */
}

.team-photos img {
  width: 100px; /* Vesikalık boyut */
  height: 100px;
  object-fit: cover;
  border-radius: 8px; /* İstersen yuvarlatabilirsin */
  border: 2px solid #ccc;
}

.quality-container {
  display: flex;
  flex-direction: column; /* Yazı üstte, fotoğraflar altta */
  align-items: center;
  gap: 20px;
}

.team-photos {
  display: flex;
  justify-content: center;
  gap: 25px; /* Fotoğraflar arası boşluk */
}

.team-member {
  text-align: center; /* Alt yazıyı ortalar */
}

.team-member img {
  width: 120px;   /* Fotoğraf boyutu */
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ccc;
  transition: transform 0.3s ease; /* Geçiş efekti */
}

.team-member p {
  margin-top: 8px;
  font-weight: 500;
}

.team-member img {
  width: 20vw;  /* viewport genişliğinin %20'si */
  max-width: 200px;  /* çok büyük ekranlarda sınırlama */
  height: auto;  /* orantılı büyüme */
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ccc;
}

.team-member img:hover {
  transform: translateY(-10px); /* 10px yukarı kayar */
}







.automotive-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.automotive-columns {
  display: flex;
  gap: 20px; /* Sol ve sağ kolon arası boşluk */
   align-items: flex-start; /* Üst hizalama */
}

/* Sol Kolon */
.left-column {
  flex: 1; /* Daha geniş kolon */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.info-box {
  display: flex;
  align-items: flex-start; /* üst hizalama */
  gap: 15px;               /* resim ile yazı arası boşluk */
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  max-width: 400px;
  flex: 1;
}


.info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.info-text h3 {
  margin-top: 0;
  font-size: 1.1rem; /* önce 1.3rem idi, biraz küçültüldü */
}

.info-text p {
  margin-top: 5px;         /* başlık altına biraz boşluk */
  font-size: 0.7rem;
  line-height: 1.4;
  color: #555;
}

.info-image img {
  width: 150px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

/* Sağ Kolon */
.right-column {
  flex: 2; /* Daha dar kolon */
  display: flex;
  flex-direction: column;
  gap: 30px; /* Resimler arası boşluk */
  margin-left: 10px; /* daha sola yaklaşır */
}

.right-column img {
  width: 100%;
  height: 200px;           
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.right-column img:hover {
  transform: translateY(-10px);
}


.yenibagimsiz {
  max-width: 1200px;      /* maksimum genişlik */
  margin: 20px auto;       /* yatayda ortala, üstten boşluk */
  text-align: center;
  background-color: #f0f0f0; /* açık gri arka fon */
  padding: 20px 0;           /* üst-alt boşluk */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.yenibagimsiz .page-title {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin: 0;
}



.tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* balonlar arası boşluk */
}

.tag {
  background-color: #007BFF; /* mavi balon */
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;       /* yuvarlatılmış balon görünümü */
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-block;
  transition: transform 0.2s ease;
  cursor: default;
}

.tag:hover {
  transform: translateY(-3px); /* hover ile hafif yukarı kayma efekti */
}




.gallery-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  justify-items: center; /* Her sütunu ortala */
}

.gallery-item {
  width: 100%;
  max-width: 250px; /* Resimlerin maksimum genişliği */
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border-radius: 8px;
}

.gallery-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Responsive için */
@media (max-width: 900px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .gallery-container {
    grid-template-columns: 1fr;
  }
}





/* ==================== SOYLA İLETİŞİM SAYFASI CSS ==================== */

/* Genel Ayarlar */
.soyla-contact-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* ==================== FORM + MAP ==================== */
.soyla-contact-container {
  display: flex;
  flex-wrap: nowrap; /* Yan yana sabitle */
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
}

.soyla-contact-form, .soyla-contact-map {
  width: 600px;  /* Form ve map genişliği */
  box-sizing: border-box;
}

.soyla-contact-form h2, .soyla-contact-map h2 {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 28px;
}

/* Form alanları */
.soyla-contact-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.soyla-contact-form label {
  font-weight: bold;
  font-size: 16px;
}

.soyla-contact-form input, 
.soyla-contact-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 95%;  /* <-- genişliği %95 yaptık, map altına taşmıyor */
  box-sizing: border-box;
}

.soyla-contact-form button {
  padding: 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  width: 50%; /* Buton da daha küçük */
  transition: 0.3s;
}

.soyla-contact-form button:hover {
  background-color: #0056b3;
}

/* ==================== ADRES VE İLETİŞİM ==================== */
.soyla-contact-info {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.soyla-info-top, .soyla-info-bottom {
  display: flex;
  flex-wrap: nowrap; /* Yan yana sabitle */
  gap: 20px;
}

.soyla-info-box {
  width: 600px;  
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer; /* Hover hissi için */
}

.soyla-info-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.soyla-info-box p {
  font-size: 16px;
  color: #555;
  line-height: 1.5;
}
.soyla-info-box:hover {
  transform: translateY(-10px); /* Hafif yukarı kayma */
  box-shadow: 0 15px 25px rgba(0,0,0,0.2); /* Gölge büyür */
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1250px) {
  .soyla-contact-container, .soyla-info-top, .soyla-info-bottom {
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .soyla-contact-container, .soyla-info-top, .soyla-info-bottom {
    flex-direction: column;  /* Alt alta geçiş */
    align-items: center;
  }

  .soyla-contact-form, .soyla-contact-map, .soyla-info-box {
    width: 100%;
  }
}
/* Responsive */
@media (max-width: 900px) {
  .soyla-contact-container {
    flex-direction: column;  /* Alt alta geçiş */
    align-items: center;
  }

  .soyla-contact-form, .soyla-contact-map {
    width: 100%;
  }

  .soyla-contact-form input,
  .soyla-contact-form textarea,
  .soyla-contact-form button {
    width: 100%; /* Küçük ekranlarda tam genişlik */
  }










<script>
const images = document.querySelectorAll('.gallery-item');
let currentIndex = 0;

images.forEach((img, index) => {
  img.addEventListener('click', () => {
    currentIndex = index;
    showImage(currentIndex);
  });
});

function showImage(index) {
  const src = images[index].src;
  const overlay = document.createElement('div');
  overlay.classList.add('overlay');
  overlay.innerHTML = `
    <div class="overlay-content">
      <img src="${src}" alt="Büyütülmüş Resim">
      <button class="close-btn">&times;</button>
      <button class="next-btn">&#10095;</button>
    </div>
  `;
  document.body.appendChild(overlay);

  overlay.querySelector('.close-btn').addEventListener('click', () => {
    document.body.removeChild(overlay);
  });

  overlay.querySelector('.next-btn').addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    overlay.querySelector('img').src = images[currentIndex].src;
  });
}

/* Overlay CSS */
const style = document.createElement('style');
style.innerHTML = `
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.overlay-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}
.overlay-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.close-btn, .next-btn {
  position: absolute;
  top: 10px;
  font-size: 2rem;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
}
.close-btn { right: 10px; }
.next-btn { right: 50px; }
`;
document.head.appendChild(style);
</script>