:root{
  --bg:#0b1220;--panel:#111827;--border:#1f2937;--muted:#94a3b8;
  --brand:#2563eb;--brand-2:#3b82f6;--text:#e5e7eb;--ok:#22c55e;--err:#ef4444;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{text-decoration:none;color:inherit}
.container{max-width:1100px;margin:auto;padding:0 20px}

/* Header */
header{position:sticky;top:0;background:#0b1220cc;backdrop-filter:blur(8px);z-index:1000;border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{padding:8px 12px;border-radius:8px;transition:.2s ease}
.nav-links a:hover{background:var(--border)}
.hamburger{display:none;font-size:22px;background:none;border:none;color:#fff}

/* Hero */
.hero{padding:80px 0;text-align:center}
.hero h1{font-size:36px;font-weight:800;margin-bottom:16px}
.hero p{max-width:700px;margin:0 auto 24px;color:var(--muted)}

/* CTA buttons */
.cta{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
}
.btn{
  padding:12px 18px;border-radius:12px;font-weight:700;transition:all .18s ease;
  border:1px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;gap:10px;
}
.btn .icon{display:inline-flex}
.btn.primary{
  background:rgba(37,99,235,.25);color:#fff;backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.25)
}
.btn.primary:hover{background:rgba(37,99,235,.45);transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.btn.primary:active{transform:translateY(0);box-shadow:0 6px 22px rgba(0,0,0,.25)}

/* WhatsApp style */
.btn.whatsapp{
  background:#25D366;color:#fff;border-color:rgba(0,0,0,.05);
  box-shadow:0 6px 22px rgba(0,0,0,.25)
}
.btn.whatsapp:hover{background:#1ebe5d;transform:translateY(-1px)}
.btn.whatsapp:active{transform:translateY(0)}
/* ikonu yazı ile hizala */
.btn .icon svg{display:block}
.icon.wa svg{width:20px;height:20px}

/* Sections */
section{padding:80px 0}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{font-size:28px;font-weight:800;margin-bottom:8px}
.section-head span{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--border);padding:20px;border-radius:14px}

/* FAQ */
.faq{max-width:800px;margin:auto;display:grid;gap:12px}
details{background:var(--panel);padding:16px;border-radius:10px;border:1px solid var(--border)}
summary{font-weight:600;cursor:pointer}

/* Contact card & form */
#iletisim .contact-card{
  max-width:820px;margin:auto;background:linear-gradient(180deg, rgba(17,24,39,.9), rgba(17,24,39,.75));
  border:1px solid rgba(96,165,250,.18); border-radius:16px; padding:28px;
  box-shadow:0 20px 50px rgba(2,6,23,.35); backdrop-filter:blur(8px);
}
#iletisim .row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
#iletisim .row .full{grid-column:1/-1}
#iletisim input, #iletisim textarea{
  width:100%; padding:14px; border-radius:12px; border:1px solid var(--border);
  background:rgba(11,18,32,.6); color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
#iletisim textarea{min-height:160px; resize:vertical}
#iletisim input::placeholder, #iletisim textarea::placeholder{color:#9aa5b1}
#iletisim input:hover, #iletisim textarea:hover{background:rgba(11,18,32,.72)}
#iletisim input:focus, #iletisim textarea:focus{
  outline:none; border-color:rgba(59,130,246,.8);
  box-shadow:0 0 0 3px rgba(37,99,235,.25);
  background:rgba(11,18,32,.86)
}

/* Submit button + loading */
#iletisim .submit{
  margin-top:6px; width:100%; padding:14px 18px; border-radius:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(90deg, rgba(37,99,235,.45), rgba(59,130,246,.35));
  color:#fff; cursor:pointer; transition:all .18s ease; box-shadow:0 8px 26px rgba(0,0,0,.35)
}
#iletisim .submit:hover{
  background:linear-gradient(90deg, rgba(59,130,246,.75), rgba(37,99,235,.65));
  transform:translateY(-1px); box-shadow:0 14px 34px rgba(0,0,0,.45)
}
#iletisim .submit:active{transform:translateY(0); box-shadow:0 8px 26px rgba(0,0,0,.35)}
#iletisim .submit.loading{cursor:wait;opacity:.85;position:relative}
#iletisim .submit.loading::after{
  content:""; border:2px solid #fff; border-top-color:transparent; border-radius:50%;
  width:16px;height:16px; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* result badge */
#formResult{margin-top:10px;font-size:14px;color:var(--muted)}
#formResult.ok{color:var(--ok)}
#formResult.err{color:var(--err)}

/* Footer */
footer{padding:30px 20px;border-top:1px solid var(--border);color:var(--muted)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-inner a{color:#60a5fa}

/* Responsive */
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:block}

  /* CTA mobil: tam genişlik ve alt alta */
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{width:100%;justify-content:center}
}