/*
  Ne: smsyaz.com tanitim yuzu (ana sayfa, API dokumani) TEK stil dosyasi.
  Ne yapar: Eski smsyaz sitesinin paleti (lacivert #24405d, yesil #00d084, koyu camgobegi #006f78, mavi #1f6de0) ve bolum duzeni; uydurma
  logo / musteri yorumu / istatistik yok (yalnizca gercek ozellikler). Harici font/CSS yok (Inter kuruluysa kullanilir).
  Neden var: Panel tasarimi (panel.css) ile karismasin, tanitim sayfasi hafif kalsin.
  Etkilesim: Pages/Shared/_SiteLayout.cshtml, Pages/Index.cshtml, Pages/Gelistirici.cshtml.
*/
:root {
  --ink: #24405d;
  --dark: #151515;
  --muted: #6f8194;
  --green: #00d084;
  --green-dark: #006f78;
  --blue: #1f6de0;
  --cyan: #4fb4ff;
  --line: #e8eef4;
  --soft: #f5f9fb;
  --shadow: 0 22px 55px rgba(35, 64, 93, 0.1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: #fff; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }

.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: 1180px; margin: 0 auto; padding: 18px 24px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.brand, .topbar nav, .navActions, .heroActions, .chips, .stats, .footerBottom { display: flex; align-items: center; }
.brand { gap: 9px; justify-self: start; font-size: 22px; font-weight: 800; }
.brandIcon { display: grid; place-items: center; width: 30px; height: 24px; color: var(--green); font-weight: 900; font-size: 28px; transform: skew(-20deg); }
.topbar nav { gap: 26px; justify-self: center; font-size: 13px; font-weight: 800; }
.topbar nav a:hover { color: var(--green-dark); }
.navActions { justify-self: end; gap: 18px; font-size: 13px; font-weight: 800; }
.btnGreen { border: 0; border-radius: 9px; color: #fff; background: var(--green-dark); font-weight: 800; cursor: pointer; font-family: inherit; font-size: 14px; }
.btnGreen:hover { background: #005a62; }
.navCta { padding: 9px 16px; }

.hero { max-width: 1180px; min-height: 440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; padding: 64px 24px 90px; }
.eyebrow { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: #e9fff5; color: var(--green-dark); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.hero h1 { max-width: 520px; margin-bottom: 18px; font-size: clamp(38px, 5vw, 56px); line-height: 1.04; }
.hero h1 span { color: var(--green-dark); }
.hero p { max-width: 500px; color: var(--muted); line-height: 1.65; font-size: 16.5px; }
.heroActions { gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.textLink { color: var(--green-dark); font-weight: 800; }
.primaryButton { padding: 13px 20px; display: inline-block; }
.heroMock { position: relative; min-height: 340px; }
.phoneMock, .routeCard, .statusCard { position: absolute; border: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.phoneMock { left: 40px; top: 30px; width: 150px; height: 270px; padding: 18px 12px; border-radius: 24px; transform: rotate(-5deg); }
.phoneHeader { width: 44px; height: 5px; margin: 0 auto 22px; border-radius: 999px; background: #c9d8e4; }
.bubble { margin-bottom: 12px; padding: 12px; border-radius: 13px; background: #e9fff5; font-size: 12px; line-height: 1.45; }
.bubble.muted { background: #f1f5f9; color: var(--green-dark); }
.routeCard { right: 16px; top: 0; width: 260px; padding: 20px; border-radius: 18px; transform: rotate(2deg); display: grid; gap: 10px; }
.routeCard b { font-size: 15px; }
.routeRow { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--soft); }
.routeRow i { font-style: normal; font-weight: 800; font-size: 12px; }
.routeRow .bad { color: #b91c1c; }
.routeRow .ok { color: var(--green-dark); }
.statusCard { right: 90px; bottom: 6px; display: grid; gap: 8px; width: 250px; padding: 18px; border-radius: 18px; transform: rotate(-2deg); }
.statusCard b { font-size: 16px; }
.statusCard span { color: var(--muted); font-size: 13px; }
.statusCard span::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 900; }

.section { max-width: 1080px; margin: 0 auto; padding: 60px 24px; }
.section h2 { font-size: 28px; margin-bottom: 10px; text-align: center; }
.section .lead { color: var(--muted); text-align: center; max-width: 680px; margin: 0 auto 34px; line-height: 1.6; }

.greenBand { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; color: #fff; padding: 70px 24px; max-width: 1080px; margin: 20px auto; }
.greenBand::before { content: ""; position: absolute; inset: 20px -8vw; z-index: -1; background: var(--green-dark); transform: skewY(-3deg); }
.flow { display: grid; gap: 12px; }
.flow div { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 14px; }
.flow i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--green); color: #053b40; font-style: normal; font-weight: 900; }
.flow b { display: block; margin-bottom: 3px; }
.flow span { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.5; }
.greenContent h3 { font-size: 26px; margin-bottom: 12px; }
.greenContent p { color: rgba(255,255,255,.9); line-height: 1.65; }
.greenContent a { display: inline-block; margin-top: 12px; padding: 11px 16px; border: 1px solid #fff; border-radius: 9px; font-weight: 800; }

.chips { justify-content: center; flex-wrap: wrap; gap: 14px; }
.chips span { display: grid; place-items: center; min-width: 130px; min-height: 52px; padding: 0 18px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); font-weight: 800; }
.chips small { display: block; color: var(--muted); font-weight: 600; font-size: 11px; }

.devBlock { max-width: 1000px; margin: 0 auto; padding: 30px 24px 70px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.codeWindow { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #0f172a; box-shadow: var(--shadow); }
.codeTop { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; color: #b8c7d9; font-size: 13px; }
.codeTop span { width: 10px; height: 10px; border-radius: 999px; background: #38bdf8; }
.codeTop span:first-child { background: #ef4444; }
.codeTop span:nth-child(2) { background: #f59e0b; }
pre { margin: 0; padding: 20px; overflow: auto; color: #e2e8f0; font-size: 13px; line-height: 1.7; font-family: Consolas, "Cascadia Mono", monospace; }
.devList { display: grid; gap: 16px; }
.devList article b { display: block; margin-bottom: 4px; }
.devList article span { color: var(--muted); line-height: 1.5; font-size: 14.5px; }

.statsBand { padding: 70px 24px; text-align: center; color: #fff; background: linear-gradient(135deg, #14306b, var(--blue)); }
.statsBand h2 { margin-bottom: 34px; font-size: 26px; }
.stats { justify-content: center; flex-wrap: wrap; gap: 54px; }
.stats strong { display: block; font-size: 38px; line-height: 1.1; }
.stats span { display: block; max-width: 170px; margin: 8px auto 0; color: rgba(255,255,255,.85); font-weight: 700; font-size: 14px; }

.featureGrid { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; padding: 60px 24px; }
.featureGrid article { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; }
.featureGrid i { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #8fc9ff; border-radius: 999px; color: var(--blue); font-style: normal; font-weight: 900; }
.featureGrid span { color: var(--muted); line-height: 1.5; font-size: 14.5px; }

.priceBlock { max-width: 1080px; margin: 0 auto; padding: 10px 24px 70px; }
.priceBlock h2 { text-align: center; font-size: 28px; margin-bottom: 26px; }
.priceGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.priceGrid article { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: #fff; }
.priceGrid span { color: var(--muted); line-height: 1.5; font-size: 14.5px; }

.ctaBand { max-width: 820px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 26px; border-radius: 18px; color: #fff; background: var(--cyan); padding: 30px 38px; }
.ctaBand h2 { margin-bottom: 8px; }
.ctaBand p { margin: 0; color: rgba(255,255,255,.92); }
.ctaBand a { flex: 0 0 auto; padding: 12px 18px; border: 1px solid #fff; border-radius: 9px; font-weight: 800; }

.contactSection { max-width: 800px; margin: 0 auto; padding: 78px 24px 80px; }
.contactSection h2 { font-size: 30px; }
.contactNote { color: var(--muted); line-height: 1.6; }
.leadForm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px; }
.leadForm label { display: grid; gap: 7px; font-size: 13px; font-weight: 800; }
.leadForm .full, .leadForm .actions, .formStatus { grid-column: 1 / -1; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.leadForm input, .leadForm select, .leadForm textarea { width: 100%; border: 1px solid #cfd9e3; border-radius: 8px; background: #fff; color: var(--ink); padding: 12px; font: inherit; }
.leadForm input:focus, .leadForm select:focus, .leadForm textarea:focus { outline: 2px solid #b6e3de; border-color: var(--green-dark); }
.leadForm textarea { min-height: 120px; resize: vertical; }
.leadForm .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.leadForm button { padding: 12px 22px; }
.formStatus { margin: 0; padding: 12px 14px; border-radius: 10px; font-weight: 700; }
.formStatus.ok { background: #e9fff5; color: #0f6f4a; }
.formStatus.error { background: #fef2f2; color: #b91c1c; }

.siteFooter { margin-top: 30px; color: #fff; background: var(--dark); }
.footerInner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: 54px; padding: 54px 24px; }
.footerBrand { display: grid; gap: 14px; align-content: start; }
.footerBrand p, .footerColumn a, .footerBottom { color: rgba(255,255,255,.72); line-height: 1.55; }
.footerColumn { display: grid; align-content: start; gap: 10px; }
.footerColumn h3 { margin-bottom: 6px; color: #fff; font-size: 16px; }
.footerColumn a:hover { color: var(--green); }
.footerBottom { max-width: 1000px; margin: 0 auto; justify-content: space-between; gap: 20px; padding: 20px 24px 36px; font-size: 12px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }

/* ---- API dokumani ---- */
.docs { max-width: 980px; margin: 0 auto; padding: 30px 24px 80px; line-height: 1.65; }
.docs h1 { font-size: 34px; margin-bottom: 8px; }
.docs h2 { font-size: 22px; margin: 42px 0 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.docs h3 { font-size: 16px; margin: 22px 0 8px; }
.docs p, .docs li { color: #3b556f; }
.docs code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; background: var(--soft); padding: 1px 6px; border-radius: 5px; color: var(--green-dark); }
.docs pre { background: #0f172a; border-radius: 14px; margin: 10px 0 18px; }
.docs pre code { background: none; color: #e2e8f0; padding: 0; }
.docs table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 14px; }
.docs th, .docs td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.docs th { background: var(--soft); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.docs .toc { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0; font-weight: 700; font-size: 14px; }
.docs .toc a { color: var(--green-dark); }
.docs .note { background: #fffaeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 16px; color: #92400e; }

@media (max-width: 980px) {
  .topbar, .hero, .greenBand, .featureGrid, .devBlock, .priceGrid, .footerInner { grid-template-columns: 1fr; }
  .topbar { justify-items: start; }
  .topbar nav, .navActions { flex-wrap: wrap; justify-self: start; }
  .heroMock { min-height: 360px; }
  .greenBand { padding: 60px 24px; }
}
@media (max-width: 700px) {
  .topbar nav { gap: 14px; }
  .heroMock { min-height: 0; display: grid; gap: 14px; }
  .phoneMock, .routeCard, .statusCard { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; transform: none; }
  .phoneMock { height: auto; }
  .stats { gap: 28px; }
  .leadForm { grid-template-columns: 1fr; }
  .ctaBand { flex-direction: column; align-items: flex-start; }
}