@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

body { margin:0; font-family:Poppins, sans-serif; background:#f4f4f4; color:#222; }

/* NAVBAR */
.navbar {
 background:#111; padding:15px 20px; display:flex; justify-content:space-between;
 align-items:center; animation:slideIn 0.7s ease;
}
.navbar ul { list-style:none; display:flex; gap:20px; }
.navbar a { color:white; text-decoration:none; font-weight:600; transition:0.3s; }
.navbar a:hover { color:#ff4747; transform:translateY(-2px); }
.navbar .aktif { color:#ff4747; }
.logo-img img { height:60px; animation:pop 0.6s ease; }

/* HERO */
.hero {
 height:70vh;
 background:url('hero.jpg') center/cover no-repeat;
 display:flex; flex-direction:column; justify-content:center; align-items:center;
 color:white; position:relative; text-align:center;
}

.overlay { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.55); top:0; left:0; }
.hero h1 { font-size:54px; z-index:2; }
.hero p { font-size:22px; z-index:2; }

.btn {
 padding:14px 26px; background:#e63946; color:white; text-decoration:none;
 border-radius:6px; font-weight:600; transition:0.3s; z-index:2;
}
.btn:hover { transform:scale(1.07); background:#a81520; }

.hizmetler { padding:50px; text-align:center; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:25px; margin-top:20px; }
.card {
 background:white; padding:25px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.15);
 transition:0.3s; animation:pop 0.6s ease;
}
.card:hover { transform:translateY(-8px); }

.icerik { padding:40px; max-width:900px; margin:auto; }

.whatsapp {
 position:fixed; bottom:20px; right:20px; background:#25D366; color:white;
 padding:14px 20px; border-radius:50px; font-weight:bold; text-decoration:none;
 box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:0.3s;
}
.whatsapp:hover { transform:scale(1.1); }

/* FOOTER */
footer { background:#111; color:#ccc; text-align:center; padding:15px; margin-top:40px; }

/* ANIMATIONS */
@keyframes fadeIn { from{opacity:0; transform:translateY(25px);} to{opacity:1; transform:translateY(0);} }
@keyframes pop { from{opacity:0; transform:scale(0.7);} to{opacity:1; transform:scale(1);} }
@keyframes slideIn { from{opacity:0; transform:translateX(-40px);} to{opacity:1; transform:translateX(0);} }

.ani-fade { animation:fadeIn 0.8s ease forwards; }
.ani-fade-delayed { animation:fadeIn 1.2s ease forwards; }
.ani-pop { animation:pop 0.7s ease forwards; }
.ani-card { animation:pop 0.6s ease forwards; }

/* Mobile hamburger menu */
.menu-toggle {
  display:none;
  font-size:28px;
  color:white;
  cursor:pointer;
}
@media(max-width:600px){
  .navbar ul{
    display:none;
    flex-direction:column;
    background:#111;
    width:100%;
  }
  .navbar ul.open{
    display:flex;
  }
  .menu-toggle{
    display:block;
  }
  .navbar{
    flex-wrap:wrap;
  }
}