/* ============================= */
/* ÖZEL ALAN - ÇAKIŞMA YOK */
/* ============================= */

.endustriyel-epoksi-zemin-kaplama-boyama-boyasi-renkleri {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: rgb(115, 115, 16);
  color: #fff;
  padding: 40px 20px;
  margin-top: 20px;
  gap: 40px;
}

/* Alt elemanlar SADECE bu alan içinde çalışır */
.endustriyel-epoksi-zemin-kaplama-boyama-boyasi-renkleri .section {
  flex: 1 1 200px;
  margin: 10px;
}

.endustriyel-epoksi-zemin-kaplama-boyama-boyasi-renkleri .section h3 {
  margin-bottom: 15px;
  font-size: 18px;
  border-bottom: 2px solid #8886ff;
  padding-bottom: 5px;
}

.endustriyel-epoksi-zemin-kaplama-boyama-boyasi-renkleri p,
.endustriyel-epoksi-zemin-kaplama-boyama-boyasi-renkleri li {
  font-size: 14px;
  line-height: 1.6;
}

.endustriyel-epoksi-zemin-kaplama-boyama-boyasi-renkleri ul {
  list-style: none;
  padding: 0;
}

.endustriyel-epoksi-zemin-kaplama-boyama-boyasi-renkleri a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.endustriyel-epoksi-zemin-kaplama-boyama-boyasi-renkleri a:hover {
  color: #fff;
  text-decoration: underline;
}





/* Ana kapsayıcı: tüm iller bölümü */
.epoksi-uygulama-hizmeti-iller {
  display: flex;                    /* İçerikleri yan yana dizmek için flex kullanıyoruz */
  flex-wrap: wrap;                  /* Eğer içerik satırı taşarsa alt satıra geçmesini sağlar */
  justify-content: space-between;   /* Kutular arası boşluğu eşitler */
  background-color: transparent;    /* Arka plan rengi, biraz transparan */
  color: #fff;                      /* Yazı rengi (başlık vb.) beyaz */
  padding: 40px 20px;               /* Dış boşluk: üst-alt 20px, sağ-sol 10px */
  gap: 2px;                        /* Flex elemanlar arası boşluk */
}

/* Her bir bölüm / box */
.epoksi-uygulama-hizmeti-iller-section {
  flex: 1 1 calc(20% - 20px);      /* 5 sütun için: %20 genişlik - boşluk */
  box-sizing: border-box;           /* Padding/margin dahil toplam genişlik hesaplanır */
  font-size: 14px;                  /* Yazı boyutu */
}

/* Başlıklar */
.epoksi-uygulama-hizmeti-iller-section h3 {
  margin-bottom: 10px;             /* Alt boşluk başlık ile linkler arasında */
  font-size: 16px;                  /* Başlık boyutu */
  border-bottom: 2px solid #ffffff; /* Alt çizgi renkli */
  color: #ffffff; 
  padding-bottom: 5px;              /* Alt çizgi ile başlık metni arası boşluk */
}

/* Linkler (her bir il) */
.epoksi-uygulama-hizmeti-iller-section a {
  display: block;                   /* Tüm kutu tıklanabilir olur */
  font-size: 12px;                  /* Link yazısı daha küçük */
  padding: 3px;                     /* Kutuyu da kompakt yapar */
  text-align: center;               /* Metin ortalanır */
  background-color: #fff;           /* Arka plan beyaz */
  color: #333;                      /* Yazı rengi koyu gri */
  border-radius: 2px;               /* Köşeler yuvarlak */
  text-decoration: none;            /* Alt çizgi yok */
  transition: all 0.3s ease;        /* Hover geçişleri yumuşak */
  margin-bottom: 10px;              /* Linkler arası boşluk */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Hafif gölge */
}

/* Hover efekti */
.epoksi-uygulama-hizmeti-iller-section a:hover {
  background-color: #333;           /* Hoverda arka plan koyulaşır */
  color: #fff;                      /* Yazı rengi beyaz olur */
  transform: translateY(-3px) scale(1.05); /* Yukarı kayma ve hafif büyüme */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);  /* Gölge artar, “flaş” etkisi */
}

/* Mobil uyum: tablet */
@media (max-width: 768px) {
  .epoksi-uygulama-hizmeti-iller-section {
    flex: 1 1 calc(50% - 20px);    /* Tablet: 2 sütun olacak şekilde daraltıyoruz */
  }
}

/* Mobil uyum: telefon */
@media (max-width: 480px) {
  .epoksi-uygulama-hizmeti-iller-section {
    flex: 1 1 100%;                /* Küçük ekran: 1 sütun olacak şekilde genişletiyoruz */
  }
}

/* Duvar yazısı (arka plan efekti) */
.wall-text {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* arkaya at */
  color: rgba(0, 0, 0, 0.0); /* yazı rengi ve şeffaflık */
  font-size: 40px; /* yazı boyutu */
  transform: rotate(-30deg); /* çapraz görünüm */
  line-height: 2; /* satır aralığı */
  pointer-events: none; /* üzerine tıklanamaz */
}



