/* Genel */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0,0,0,0.8);
    padding: 15px 40px;
    display: flex;
    justify-content: center;
    z-index: 1000;
    
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
}
.navbar .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
}
.nav-links a {
    color: #fff;
    text-decoration: none;
}
.nav-links a:hover {
    color: #0d6efd;
}

/* Hero */
.hero {
    background: url('../images/slider.jpg') center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    position: relative;
    margin-top: 70px;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.hero-content { position: relative; z-index: 1; }

/* Hizmetler */
.hizmetler .section-title { font-size: 2.2rem; margin-bottom:10px; text-align:center; }
.hizmetler .section-subtitle { font-size: 1rem; color: #555; margin-bottom:40px; text-align:center; }
.service-card { background:#fff; transition: transform 0.3s, box-shadow 0.3s; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
.icon-circle { width:80px; height:80px; display:flex; justify-content:center; align-items:center; border-radius:50%; margin:0 auto; transition: transform 0.3s, box-shadow 0.3s;}
.icon-circle img { width:40px; height:40px;}
.icon-circle:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.icon-circle.blue{ background:#007bff;}
.icon-circle.green{ background:#28a745;}
.icon-circle.orange{ background:#fd7e14;}
.icon-circle.red{ background:#dc3545;}
.icon-circle.purple{ background:#6f42c1;}
.icon-circle.yellow{ background:#ffc107;}
.icon-circle.brown{ background:#993300;}
.icon-circle.pink{ background:#FF00FF;}
.icon-circle.turquoise{ background:#3399FF;}

/* Projeler */
.project-card { transition: transform 0.3s, box-shadow 0.3s; background:#fff;}
.project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
.project-img { width:100%; height:250px; object-fit:cover; transition: transform 0.3s;}
.project-card:hover .project-img { transform: scale(1.05); }

/* Hakkımızda */
.hakkimizda h2 { font-size:2rem; margin-bottom:20px; }
.hakkimizda p { font-size:1rem; color:#555; line-height:1.6; }

/* İletişim */
.contact-info h5 { font-size:1.1rem; margin-top:15px;}
.contact-info p { font-size:0.95rem; color:#555;}
.map iframe { border-radius:10px; }

/* Footer */
.footer {
            background: #111;
            color: #fff;
            padding: 50px 20px 20px;
        }

        .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-col {
            flex: 1;
            min-width: 280px;
        }

        .footer-col h3 {
            margin-bottom: 15px;
            font-size: 1.2rem;
            border-bottom: 2px solid #0d6efd;
            display: inline-block;
            padding-bottom: 5px;
        }

        .footer-col p,
        .footer-col a {
            font-size: 0.95rem;
            color: #ddd;
            text-decoration: none;
        }

        .footer-col a:hover {
            color: #0d6efd;
        }

        .footer-bottom {
            text-align: center;
            border-top: 1px solid #333;
            margin-top: 20px;
            padding-top: 15px;
            font-size: 0.9rem;
            color: #aaa;
        }

/* Sıkça Sorulan Sorular */
.sss {
    background: #f8f9fa;
    padding: 80px 20px;
}

.sss .section-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 10px;
}

.sss .section-subtitle {
    font-size: 1rem;
    color: #555;
    text-align: center;
    margin-bottom: 40px;
}

.accordion {
    max-width: 900px;
    margin: 0 auto;
}

.accordion-item {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.accordion-header {
    width: 100%;
    padding: 15px 20px;
    background: #0d6efd;
    color: #fff;
    font-size: 1.1rem;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.accordion-header:hover {
    background: #084298;
}

.accordion-body {
    display: none;
    padding: 20px;
    background: #fff;
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

.accordion-body .faq-img {
    width: 60px;
    float: right;
    margin-left: 15px;
}

.accordion-item.active .accordion-body {
    display: block;
}

.icon {
    font-size: 1.4rem;
}


/* Sayfa Banner */
.page-banner {
  background: #333;
  color: #fff;
  padding: 100px 0;
  margin-bottom: 40px;
}

.page-banner h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.page-banner p {
  font-size: 1.1rem;
  margin: 0;
}


.vision-mission-card {
  background: #f8f9fa;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vision-mission-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.vision-mission-card h3 {
  color: #0072ff;
  margin-bottom: 15px;
}

.vision-mission-card p {
  font-size: 1rem;
  color: #333;
}



        .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .gallery img {
      width: 250px;   /* Küçük resim boyutu */
      height: 200px;
      object-fit: cover;
      cursor: pointer;
      border-radius: 8px;
      transition: transform 0.2s;
    }

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

    /* Lightbox (popup) */
    .lightbox {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 10px;
      box-shadow: 0 0 15px #000;
    }

    .close-btn {
      position: absolute;
      top: 30px;
      right: 40px;
      font-size: 30px;
      font-weight: bold;
      color: white;
      cursor: pointer;
      transition: 0.3s;
    }

    .close-btn:hover {
      color: red;
    }

    /* Ok butonları */
    .nav-btn {
      position: absolute;
      top: 50%;
      font-size: 50px;
      color: white;
      cursor: pointer;
      user-select: none;
      transform: translateY(-50%);
      padding: 15px;
    }

    .prev {
      left: 30px;
    }

    .next {
      right: 30px;
    }

    .nav-btn:hover {
      color: #f00;
    }



/* Menü butonu için CSS */
.menu-button {
    display: none; /* Masaüstünde gizle */
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
}

.menu-button .bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    border-radius: 5px;
}

/* Aktif menü için stil (JavaScript ile eklenecek) */
.nav-links.active {
    display: flex;
}

/* @media sorgusu: Ekran boyutu 768px'in altına düştüğünde geçerli olacak stiller */
@media (max-width: 768px) {
    .navbar .container {
        justify-content: space-between;
    }
    
    .nav-links {
        display: none; /* Mobil görünümde menü bağlantılarını gizle */
        flex-direction: column;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 70px; /* Navbar'ın yüksekliğine göre ayarlanabilir */
        left: 0;
        background: rgba(0,0,0,0.95);
        padding: 20px 0;
        gap: 15px;
    }
    
    .nav-links li a {
        padding: 10px;
        display: block;
    }
    
    .menu-button {
        display: flex; /* Mobil görünümde menü butonunu göster */
    }
}

.social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
.social-icons img {
  width: 24px;
  height: 24px;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.social-icons a:hover img {
  opacity: 0.8;
}