body { margin: 0; font-family: Arial, sans-serif; background:rgb(0,0,0,0.0); color:#ffffff; }
.container { max-width:600px; margin:0 auto; padding:10px; }




/* ===================================================0 */
/* Header */
header { display:flex; 
justify-content:space-between; 
align-items:center; 
position: fixed;   top:0;
  left:0;
background:rgb(209, 209, 17, 0.5); color:#ffffff; padding:10px; 
  position: fixed;  /* SABİT */ 
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: 0.3s;
}
header h1 { font-size:1em; margin:0; }
.menu-icon, .profile-icon { font-size:1.0em; cursor:pointer; 

}



/* =======================209, 209, 17, 0.5============================0 */



/* Menüler */
.side-menu, .right-menu {
  position: fixed; top:0; height:100%; width:250px; padding-top:50px; transition:0.3s; z-index:1000; background:rgba(255,255,255,0.95); color:black; 
  overflow-y: auto;           /* 🔥 SCROLL EKLER */
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}
.side-menu { left:-250px; }
.right-menu { right:-250px; }
.side-menu a, .right-menu a { display:block; padding:10px; color:black; text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.1); }
.side-menu a:hover, .right-menu a:hover { background:rgba(0,0,0,0.05); }

/* ===================================================0 */
/* Global Kapatma İkonu */
.global-close {
  position:fixed; top:20px; font-size:3em; color:black; cursor:pointer; z-index:1500; display:none;
}


/* Hamburger ve profil ikonları */
.menu-icon,
.profile-icon {
  font-size: 13px;           /* ikon boyutu */
  cursor: pointer;           /* tıklanabilir gösterir */
  color: #3A3A3A;            /* başlangıç rengi */
  transition: transform 0.3s, color 0.3s; /* animasyon efektleri */
}

/* Hover / flash efekti */
.menu-icon:hover,
.profile-icon:hover {
  color: #ffffff;            /* renk değişimi */
  transform: scale(1.3) rotate(0 deg); /* hafif büyüme ve dönme */
}


/* Bölüm1 ======================================================= */

#endustriyel-epoksi-zemin-kaplama {
    background-color:rgba(255,255,255,0.95); /* İstediğin renk */
    padding: 40px 20px;
    border-radius: 8px;

}

.epoksi {
  padding: 80px 20px;
  background: #111;
  color: #111;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
}

.text {
  flex: 1;
}
.text h1 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #111;
}
.text h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #111;
}
.text h3 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #111;
}

.text p {
  color: #ccc;
  margin-bottom: 20px;
  color: #111;
}

.text ul {
  margin-bottom: 20px;
  color: #111;
}

.text li {
  margin-bottom: 10px;
  color: #111;
}

.image {
  flex: 1;
  color: #111;
}

.image img {
  width: 100%;
  border-radius: 10px;
}

.btn {
  background: #f39c12;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}


/* Bölüm2 ======================================================= */

/* ===================================================0 */

/* ------------------------------ */
/*  #endustriyel-epoksi-zemin-boyama Alanı  */
/* ------------------------------ */
/* ------------------------------ */
/*  #endustriyel-epoksi-zemin-boyama Alanı  */
/* ------------------------------ */
#endustriyel-epoksi-zemin-boyama {
    background-color: rgba(209, 209, 17, 0.5); /* Arka plan rengi, hafif saydam beyaz */
    padding-top: 0px;  /* Üstten boşluk */
    padding-right: 0;   /* Sağdan boşluk */
    padding-bottom: 0;  /* Alttan boşluk */
    padding-left: 0;    /* Soldan boşluk */
    border-radius: 8px; /* Köşeleri yuvarlatır */
}

/* ------------------------------ */
/*  .container Alanı  */
/* ------------------------------ */
.container {
    display: flex;               /* Elemanları yatay dizmek için flexbox */
    align-items: center;         /* Dikey eksende ortala */
    justify-content: space-between; /* Elemanları uçlara hizala, arayı eşit boşlukla doldur */
    gap: 40px;                   /* Elemanlar arasındaki boşluk */
    max-width: 1100px;           /* Maksimum genişlik */
    margin: auto;                /* Sayfa ortasında */
    flex-wrap: wrap;             /* Küçük ekranda elemanları alt alta sarması için */
}

/* ------------------------------ */
/*  Mobil Uyumluluk  */
/* ------------------------------ */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Yatay yerine dikey dizim */
        align-items: center;    /* Elemanları ortala */
        gap: 20px;              /* Aradaki boşluğu küçült */
    }

.btn {
  padding: 8px 16px;
  font-size: 12px;
  display: block;
  margin: 0 auto;
}
.container {
  display: flex;
  justify-content: center;
  }

}

/* hero ======================================================= */
/* HERO */
* {
  margin: 0;
  padding: 22;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Temel ayarlar zaten var */
.hero {
  height: 250px; /* masaüstü yüksekliği */
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
              url("epoksi-zemin-kaplama-boya-m2-fiyatlari.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.hero-container {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Animasyonlar */
.hero h1, .hero p, .btn {
  animation: fadeIn 1.5s ease-in-out;
}

/* Responsive ayarlar */
@media (max-width: 1024px) {
  .hero {
    height: 400px; /* tablet */
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero p {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .hero {
    height: 300px; /* küçük ekran */
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 14px;
  }

  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 250px; /* telefon ekranı */
  }

  .hero h1 {
    font-size: 22px;
  }

  .hero p {
    font-size: 12px;
  }

  .btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* Buton temel stil */
.btn {
  padding: 12px 30px;
  background: #ff6600;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s, transform 0.3s;
  display: inline-block; /* önemli: blok değil, ortalama kolay */
}

/* Hover efekti */
.btn:hover {
  background: #e65c00;
  transform: translateY(-2px); /* hafif yukarı kalkma efekti */
}

/* Responsive – mobilde küçültme */
@media (max-width: 768px) {
  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}


/* /hero ======================================================= */



/* HİZMETLER */
#hizmetler {
  padding: 60px 0;
  text-align: center;
}

#hizmetler h2 {
  margin-bottom: 40px;
  color: #1e2a38;
}

.row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 300px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: 0.3s;
}

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

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card h3 {
  margin: 15px 0 10px;
  color: #1e2a38;
}

.card p {
  padding: 0 15px 20px;
  color: #666;
}

/* SEO İÇERİK */
#seo-icerik {
  padding: 60px 0;
  background: #f7f9fb;
}

#seo-icerik h2 {
  color: #1e2a38;
  margin-bottom: 20px;
}

#seo-icerik p {
  color: #555;
  line-height: 1.7;
}

/* NEDEN BİZ */
#neden-biz {
  padding: 60px 0;

  height: 250px; /* masaüstü yüksekliği */
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
              url("endustriyel-epoksi-zemin-kaplama-boya-m2-fiyatlari.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;

}

#neden-biz ul {
  list-style: none;
  padding: 0;
}

#neden-biz li {
  margin-bottom: 10px;
  font-size: 16px;
}

/* CTA */
#cta {
  background: rgb( 209, 209, 17, 0.5);
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}

#cta h2 {
  margin-bottom: 10px;
}

#cta p {
  margin-bottom: 20px;
}

/* FOOTER */
footer {
  background: #f1f1f1;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 24px;
  }

  .row {
    flex-direction: column;
  }

  .card img {
    height: 180px;
  }
}




/* /özel link ======================================================= */
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 0;
  margin: 14px 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: "›";
  margin: 0 2px;
  color: #141414;
}

.breadcrumb a {
  text-decoration: none;
  color: rgb(115, 115, 16);
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #4fd13d;
}

.breadcrumb span[aria-current="page"] {
  color: #555;
  font-weight: bold;
}


/* /epoksi-uygulama-hizmeti-iller ===rgb(115, 115, 16)==================================================== */
* 
.epoksi-uygulama-hizmeti-iller {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color:rgb(209, 200, 17, 0.8);
  color: #fff;
  padding: 40px 20px;
  margin-top: 20px;
  gap: 40px;
}

.epoksi-uygulama-hizmeti-iller-section {
  flex: 1 1 200px;
  margin: 10px;
  font-size: 14px;
}

.epoksi-uygulama-hizmeti-iller-section h3 {
  margin-bottom: 15px;
  font-size: 18px;
  border-bottom: 2px solid #8886ff;
  padding-bottom: 5px;
}

.epoksi-uygulama-hizmeti-iller-section p, 
.footer-section li {
  font-size: 14px;
  line-height: 1.6;
}

.epoksi-uygulama-hizmeti-iller-section ul {
  list-style: none;
  padding: 0;
}

.epoksi-uygulama-hizmeti-iller-section ul li a {
  color: #666666;
  text-decoration: none;
  transition: color 0.3s;
}

.epoksi-uygulama-hizmeti-iller-section ul li a:hover {
  color: #fff;
  text-decoration: underline;
  }

/* /özel link ======================================================= */

/* /footer ======================================================= */


.footer {
  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;
}

.footer-section {
  flex: 1 1 200px;
  margin: 10px;
}

.footer-section h3 {
  margin-bottom: 15px;
  font-size: 18px;
  border-bottom: 2px solid #8886ff;
  padding-bottom: 5px;
}

.footer-section p, 
.footer-section li {
  font-size: 14px;
  line-height: 1.6;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section ul li a:hover {
  color: #fff;
  text-decoration: underline;
}


/* /özel link ======================================================= */




/* /özel link logo satıra yerleştirme ======================================================= */
.letter {
  height: 1em;   /* yazı boyutuna logo göre otomatik */
  width: auto;
  vertical-align: middle;
}

/* /hr çizgi yazı ======================================================= */

.cizgi {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  border-color: currentColor;
}

.cizgi::before,
.cizgi::after {
  content: "";
  border-bottom: 2px solid currentColor;
}

.cizgi h2 {
  margin: 0;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Renk seçenekleri */
.cizgi.endustriyel-epoksi-zemin-kaplama-boyama-siyah { color: #000; }   /* Açık arka plan */
.cizgi.endustriyel-epoksi-zemin-kaplama-boyama-beyaz { color: #fff; }   /* Koyu arka plan */
.cizgi.endustriyel-epoksi-zemin-kaplama-boyama-kirmizi { color: #8f0f0d; } /* Özel vurgu */
.cizgi.endustriyel-epoksi-zemin-kaplama-boyama-yesil { color: #1db86d; } /* Özel vurgu */
.cizgi.endustriyel-epoksi-zemin-kaplama-boyama-sari { color: #ffff66; } /* Özel vurgu */
.cizgi.endustriyel-epoksi-zemin-kaplama-boyama-mavi { color: #1ebffa; } /* Özel vurgu */
}

/* /hr çizgi2 ======================================================= */



/* /hr çizgi2/ ======================================================= */