* {margin:0; padding:0; box-sizing:border-box;}
body {
  background:#;
  color:#fff;
  font-family:'Poppins', sans-serif;
}

header {
  background:#111; /* siyah ton */
  width:100%;
  padding:10px 0
}

/* Top Bar */
.top-bar {
  background:#f3c300; /* siyah ton */
  color:#000;
  font-size:14px;
  text-align:center;
  padding:10px 0;
  font-size:14px;
  font-weight:600;
}

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

.logo {
  font-size:22px;
  font-weight:600;
  color:#fff;
  letter-spacing:0.5px;
}

.logo span{
background:#f3c300;
padding:0 5px;
border-radius:0px;
color:#000;
font-weight:700
}

nav ul {
  list-style:none;
  display:flex;
  gap:50px;
}
nav ul li a {
  color:#fff;
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  position:relative;
  transition:.3s;
}
nav ul li a::after {
  content:"";
  position:absolute;
  left:0; bottom:-5px;
  width:0%; height:2px;
  background:#f1c40f;
  transition:width .3s;
}
nav ul li a:hover::after {
  width:100%;
}

/* Hamburger menü */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.hamburger div {
  width:28px;
  height:3px;
  background:#fff;
}

@media(max-width:768px){
  nav {
    display:none;
    position:absolute;
    top:100px;
    right:0;
    background:#111;
    width:200px;
	
  }
  nav ul {
    flex-direction:column;
    padding:15px;
	gap:0px;
  }
  nav ul li {
    padding:10px 0;
  }
  nav.active {display:block;}
  .hamburger {display:flex;}
}


/* Hero / Slayt Alani */
.hero {
  z-index:-1;
  position:relative;
  height:600px;
  background:url("../images/slayt.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
}

.hero .overlay {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5); /* karartma */
}

.hero-content {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column; /* alt alta siralama */
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:15px; /* baslik ve paragraf arasi bosluk */
}

.hero-content h1 {
  font-size:36px;
  font-weight:700;
  margin:0;
}

.hero-content p {
  font-size:18px;
  max-width:700px;
  margin:0;
}

/* Vurgu kelimeler */
.highlight {
  background: rgba(241, 196, 15, 0.8); /* hafif sari arka plan */
  color: #111; /* kontrast için koyu yazi */
  padding: 2px 6px;
  border-radius: 3px;
}

/* Hero içerik responsive */
@media(max-width:768px){
  .hero {
    padding:0 15px;
  }

  .hero-content h1 {
    font-size:26px;
    line-height:2;
  }

  .hero-content p {
    font-size:16px;
  }
}

/* Hizmetler Bölümü */
.services {
  margin:20px 0;
}

.services .container {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:5px;
}

.service-card {
  background:#fff;
  color:#111;
  text-align:center;
  padding:25px 15px;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition:all 0.3s ease;
}

.service-card img {
  width:60px;
  height:60px;
  margin-bottom:15px;
}

.service-card h3 {
  font-size:20px;
  margin-bottom:10px;
}

.service-card p {
  font-size:15px;
  line-height:1.5;
}

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

.service-icon {
  font-size:48px;
  color:#f1c40f; /* sari vurgu */
  margin-bottom:15px;
}

/* Mobil uyumlu */
@media(max-width:768px){
  .services .container {
    grid-template-columns:1fr;
  }
}

.services-header {
  margin-bottom:30px;
}

.services-header h2 {
  font-size:28px;
  font-weight:700;
  margin-bottom:10px;
  color:#000;
}

.services-header p {
  font-size:16px;
  color:#555;
  max-width:700px;
  margin:0 auto;
}

/* Hizmet kartlari grid */
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}


.why-us {
  background:#f4f4f4;
  padding:20px 0;
  color:#111;
}

.section-header {
  text-align:center;
  margin-bottom:50px;
}

.section-header h2 {
  font-size:28px;
  font-weight:700;
  margin-bottom:10px;
}

.section-header p {
  font-size:16px;
  color:#555;
  max-width:700px;
  margin:0 auto;
}

.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

/* Renkli bloklar */
.why-card {
  padding:25px 20px;
  border-radius:10px;
  text-align:center;
  color:#fff;
  transition:all 0.3s ease;
}

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

.why-icon {
  font-size:48px;
  margin-bottom:15px;
}

.why-card h3 {
  font-size:20px;
  margin-bottom:10px;
}

.why-card p {
  font-size:15px;
  line-height:1.5;
}

/* Blok renkleri */
.bg1 {background:#f39c12;} /* turuncu */
.bg2 {background:#27ae60;} /* yesil */
.bg3 {background:#2980b9;} /* mavi */

/* Mobil uyumlu */
@media(max-width:768px){
  .why-us .container {
    display:flex;
    flex-direction:column;
    align-items:center; /* tüm içerik ortalanacak */
  }

  .section-header {
    text-align:center;
    margin-bottom:30px;
  }

  .why-grid {
    grid-template-columns:1fr;
    width:100%;
  }

  .why-card {
    width:100%;
    max-width:800px; /* kutular çok genis olmasin */
  }
}


.our-work {
  padding:10px;
}

.our-work .carousel-cell {
  width:90vw; /* genisligi ekranin %90’i */
  max-width:600px; /* masaüstünde çok büyük olmasin */
  margin-right:15px;
  margin-left:15px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.our-work .carousel-cell img {
  width:100%;
  display:block;
  height:500px;
  object-fit:cover;
  transition:transform 0.3s ease;
}

.our-work .carousel-cell:hover img {
  transform:scale(1.05);
}

/* Mobilde slider full width */
@media(max-width:768px){
  .our-work .carousel-cell {
    width:95vw;
    height:450px;
  }
}


.faq {
  background:#f9f9f9;
  padding:20px 0;
  display:none;
}

.faq .section-header {
  text-align:center;
  margin-bottom:10px;
}

.faq .section-header h2 {
  font-size:28px;
  font-weight:700;
  margin-bottom:10px;
  color:#000
}

.faq .section-header p {
  font-size:16px;
  color:#555;
  max-width:700px;
  margin:0 auto;
}

.faq-item {
  margin-bottom:15px;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.faq-question {
  width:100%;
  padding:15px 20px;
  text-align:left;
  font-size:16px;
  font-weight:500;
  line-height:24px;
  border:none;
  outline:none;
  background:#fff;
  cursor:pointer;
  position:relative;
  transition: background 0.3s ease;
}

.faq-question::after {
  content:'\002B';
  position:absolute;
  right:20px;
  font-size:20px;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
  transform:rotate(45deg);
}

.faq-answer {
  max-height:0;
  overflow:hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  padding:0 20px;
  color:#000
}

.faq-item.active .faq-answer {
  max-height:500px; /* yeterli yükseklik */
  padding:15px 20px;
}


@media(max-width:768px){
.faq {
    display:block;
  }
  .faq .container {
    display:flex;
    flex-direction:column; /* alt alta diz */
    align-items:center; /* ortala */
  }

  .faq-item {
    width:100%;
    max-width:500px; /* kutularin çok genis olmamasi için */
    margin-bottom:15px;
  }

  .faq-question {
    font-size:16px;
  }

  .faq-answer {
    font-size:15px;
  }
}


.site-footer {
  background:#111;
  color:#fff;
  padding:50px 0 20px 0;
  font-family:'Roboto', sans-serif;
}

.site-footer a {
  color:#fff;
  text-decoration:none;
  transition:color 0.3s ease;
}

.site-footer a:hover {
  color:#f1c40f;
}

.footer-top {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;
  max-width:1200px;
  margin:0 auto;
  padding-bottom:30px;
}

.footer-column h3,
.footer-column h4 {
  margin-bottom:15px;
  color:#f3c300;
}

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

.footer-column ul li {
  margin-bottom:10px;
}

.social-icons a {
  display:inline-block;
  margin-right:10px;
  font-size:18px;
  transition:transform 0.3s ease;
}

.social-icons a:hover {
  transform:scale(1.2);
}

.footer-bottom {
  text-align:center;
  font-size:14px;
  border-top:1px solid #333;
  padding-top:15px;
}

/* Mobil uyumlu */
@media(max-width:768px){
  .footer-top {
    grid-template-columns:1fr;
    text-align:center;
  }

  .social-icons {
    justify-content:center;
  }
}


.footer-column p{
padding:10px 0
}