*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, Arial, sans-serif;
  background: linear-gradient(135deg, #0b1a2b, #0f243d);
  color:#e5e7eb;
}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:18px}

.card{
  background:white;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  color:#0f172a;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.btn{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700;
  background:linear-gradient(135deg,#1e40af,#2563eb);
  color:white;
  transition:transform .2s, filter .2s;
  display:inline-flex;
  align-items:center;
  gap:8px;
  will-change: transform;
}

@media (hover:hover){
  .btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
  .kart:hover{transform:translateY(-3px)}
}

.btn-turuncu{background:linear-gradient(135deg,#f97316,#fb923c)}

.input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #cbd5e1;
  font-size:15px;
}

.grid{display:grid;gap:12px}

.hero{
  background:linear-gradient(135deg,#0b1a2b,#0f243d);
  border-radius:24px;
  padding:26px;
  color:white;
  text-align:center;
}
.hero h1{font-size:34px;margin:10px 0}
.hero p{opacity:.9}

@keyframes gel{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.anim{animation:gel .5s ease}

.kart{
  display:flex;
  gap:14px;
  align-items:flex-start;
  transition:transform .2s;
  will-change: transform;
}

.logo-kutu{
  width:84px;
  height:84px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  flex: 0 0 auto;
}

/* Mobil */
@media (max-width: 640px){
  .container{padding:12px}
  .kart{gap:10px}
  .logo-kutu{width:56px;height:56px;border-radius:14px}
  .hero{padding:18px}
  .hero h1{font-size:26px}
}