/* === Genel Ayarlar === */
:root {
  --turuncu: #ff7b00;
  --mavi: #004aad;
  --acik-mavi: #f4f8ff;
  --gri: #f5f5f5;
  --metin: #333;
}

* {margin:0; padding:0; box-sizing:border-box;}
body {
  font-family: 'Inter', sans-serif;
  background: var(--acik-mavi);
  color: var(--metin);
  line-height: 1.6;
}

/* === Header === */
header {
  background: #fff;
  border-bottom: 3px solid var(--turuncu);
  position: sticky;
  top: 0;
  z-index: 1000;
}
header .container {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px;
}
.brand {display:flex; align-items:center; gap:10px; font-weight:800; color:var(--mavi);}
.menu-toggle {display:none; cursor:pointer;}
.menu {display:flex; gap:20px;}
.menu a {
  text-decoration:none;
  color:var(--mavi);
  font-weight:600;
  transition:.3s;
}
.menu a:hover, .menu a.active {color: var(--turuncu);}

/* === Hero Banner === */
.hero-banner {
  background: linear-gradient(rgba(0,74,173,.7), rgba(0,74,173,.7)), var(--hero) no-repeat center/cover;
  color:#fff;
  text-align:center;
  padding:80px 20px;
}
.hero-banner h1 {font-size:2.2rem; margin-bottom:15px;}
.hero-banner p {font-size:1.2rem; margin-bottom:20px;}
.btn-primary {
  background: var(--turuncu);
  color:#fff;
  padding:12px 24px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
}
.btn-primary:hover {background:#e66900;}

/* === Bölümler === */
.section {padding:60px 20px;}
.section h2 {
  text-align:center;
  color: var(--mavi);
  font-size:1.8rem;
  margin-bottom:40px;
}
.grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.card {
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:20px;
  text-align:center;
  transition:.3s;
}
.card:hover {
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-4px);
}
.card h3 {color:var(--turuncu); margin-bottom:10px;}
.card p {color:#555;}
.card-link {text-decoration:none;}

/* === Footer === */
footer {
  background: var(--mavi);
  color:#fff;
  text-align:center;
  padding:20px;
  margin-top:40px;
}
footer a {color:#fff; text-decoration:underline;}
footer a:hover {color:var(--turuncu);}

/* === WhatsApp FAB === */
.whatsapp-fab {
  position:fixed; bottom:20px; right:20px;
  background: var(--turuncu);
  color:#fff; padding:12px 18px;
  border-radius:50px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  transition:.3s;
}
.whatsapp-fab:hover {background:#e66900;}

/* === Responsive Menü === */
@media(max-width:768px){
  .menu {display:none; flex-direction:column; background:#fff; padding:10px;}
  .menu.open {display:flex;}
  .menu-toggle {display:block; color:var(--mavi);}
}