:root {
  --blue: #3E7EA3;
  --mint: #8FB7B1;
  --coral: #D96B74;
  --mustard: #F0B24B;
  --bg: #f4f6fb;
}
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', sans-serif; }

body { background: var(--bg); overflow-x:hidden; }

#codeCanvas {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
  filter: blur(1px);
  opacity:0.35;
}

header { text-align:center; padding:30px; }
.logo { max-width:220px; }

.hero { text-align:center; padding:60px 20px; }
.hero h1 { color:var(--primary); font-size:2rem; margin-bottom:20px; }
.hero p { max-width:700px; margin:auto; line-height:1.6; }

.btn {
  display:inline-block;
  margin-top:25px;
  padding:12px 28px;
  background:var(--secondary);
  color:white;
  text-decoration:none;
  border-radius:30px;
  transition:.3s;
}
.btn:hover { background:var(--primary); }

.features {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  padding:50px 20px;
  max-width:1000px;
  margin:auto;
}

.card {
  background:white;
  padding:25px;
  border-radius:15px;
  text-align:center;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
  transition:.3s;
}
.card:hover { transform:translateY(-5px); }

.contact { padding:50px 20px; text-align:center; }
.contact iframe {
  width:100%;
  max-width:800px;
  height:300px;
  border-radius:15px;
  margin-top:20px;
}

footer {
  text-align:center;
  padding:25px;
  background:white;
}

.social a {
  margin:0 15px;
  text-decoration:none;
  color:var(--primary);
  font-weight:600;
}
.social a:hover { color:var(--secondary); }


.features {
  max-width:900px;
  margin:60px auto;
  padding:0 20px;
}

.features h2 {
  text-align:center;
  margin-bottom:30px;
  color:var(--primary);
}

.accordion-item {
  margin-bottom:15px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,0.05);
}

.accordion-header {
  width:100%;
  padding:18px;
  border:none;
  background:linear-gradient(135deg,#ffffff,#f3f4ff);
  cursor:pointer;
  font-size:16px;
  text-align:left;
  transition:.3s;
  font-weight:600;
}

.accordion-header:hover {
  background:linear-gradient(135deg,#f0f2ff,#ffffff);
}

.accordion-content {
  max-height:0;
  overflow:hidden;
  background:white;
  transition:max-height .4s ease;
  padding:0 18px;
}

.accordion-content p {
  padding:15px 0;
}

.accordion-item.active .accordion-content {
  max-height:200px;
  padding:15px 18px;
}


.hero {
  background: linear-gradient(135deg, var(--blue), var(--mint));
  color: white;
  padding: 80px 20px;
  border-radius: 0 0 40px 40px;
}

.features {
  background: linear-gradient(135deg, var(--mint), var(--coral));
  padding: 60px 20px;
  border-radius: 40px 40px 0 0;
  margin-top: -30px;
}

.contact {
  background: linear-gradient(135deg, var(--coral), var(--mustard));
  padding: 60px 20px;
  color: white;
}

/* Kart Genel Stil */
.accordion-item {
  margin-bottom: 15px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Her karta ayrı renk */
.accordion-item:nth-child(1) .accordion-header {
  background: #4A7BD6;
  color: white;
}

.accordion-item:nth-child(2) .accordion-header {
  background: #E35D6A;
  color: white;
}

.accordion-item:nth-child(3) .accordion-header {
  background: #F2994A;
  color: white;
}

.accordion-item:nth-child(4) .accordion-header {
  background: #F2C94C;
  color: #333;
}

.accordion-item:nth-child(5) .accordion-header {
  background: #6FCF97;
  color: white;
}

.accordion-item:nth-child(6) .accordion-header {
  background: #56CCF2;
  color: white;
}

.accordion-item:nth-child(7) .accordion-header {
  background: #9B7EDB;
  color: white;
}

/* Header Genel */
.accordion-header {
  width:100%;
  padding:18px;
  border:none;
  cursor:pointer;
  font-size:16px;
  text-align:left;
  font-weight:600;
  transition:.3s;
}

/* Açılan İçerik */
.accordion-content {
  background:white;
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  padding:0 18px;
}

.accordion-item.active .accordion-content {
  max-height:200px;
  padding:15px 18px;
}

.accordion-item:nth-child(2) .accordion-header {
  border-left-color: var(--mint);
}
.accordion-item:nth-child(3) .accordion-header {
  border-left-color: var(--coral);
}
.accordion-item:nth-child(4) .accordion-header {
  border-left-color: var(--mustard);
}
.btn {
  background: var(--mustard);
  color: white;
}

.btn:hover {
  background: var(--coral);
}

footer {
  background: var(--blue);
  color: white;
}