/* === BASE === */
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:#0f1420;color:#d6e1ff;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif}
a{color:#4ac6ff;text-decoration:none} a:hover{opacity:.9}
img{max-width:100%;height:auto;display:block}
.container{width:92%;max-width:1180px;margin:0 auto}
button,input{font:inherit}

/* === GENERIC UI === */
.section-title{margin:0 0 18px;font-size:26px}
.card{background:#161c2a;border:1px solid #243049;padding:22px;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.24)}
.card.pro{border:1px solid rgba(110,145,230,.35);background:linear-gradient(180deg,#141b2b,#121826)}
.card.pro:hover{box-shadow:0 10px 36px rgba(0,0,0,.32)}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:#4ac6ff;color:#081019;font-weight:600;border:0}
.btn.ghost{background:transparent;border:1px solid #4ac6ff;color:#d6e1ff}
.btn:hover{transform:translateY(-1px)}

/* === HEADER (aynen kalsın) === */
.site-header{position:sticky;top:0;z-index:10;background:rgba(15,20,32,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #243049}
.header-row{display:flex;align-items:center;gap:16px;padding:10px 0}
.brand{display:inline-flex;align-items:center;line-height:0}
.brand img{height:32px;width:auto}
.main-nav{display:flex;align-items:center;justify-content:center;gap:14px;flex:1 1 auto;flex-wrap:wrap}
.nav-link{display:inline-flex;align-items:center;height:36px;padding:0 10px;border-radius:10px;color:#a8c3ff}
.nav-link:hover{color:#d6e1ff;background:rgba(255,255,255,.04)}
.nav-cta{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:10px;border:1px solid #2a3a59;color:#d6e1ff;font-weight:600}
.nav-cta:hover{border-color:#4ac6ff;box-shadow:0 0 0 2px rgba(74,198,255,.15)}
.site-search{position:relative;flex:0 0 320px;max-width:340px;width:100%;height:38px}
.site-search input[type="search"]{width:100%;height:100%;border-radius:10px;background:#0b0f19;border:1px solid #243049;color:#d6e1ff;padding:0 40px 0 12px;outline:none}
.site-search input::placeholder{color:#7a8cb2}
.icon-btn{appearance:none;-webkit-appearance:none;border:0;background:transparent;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;color:#b8c7ea}
.icon-btn svg{opacity:.85} .icon-btn:hover svg{opacity:1}

/* === HERO === */
.hero{padding:72px 0;background:radial-gradient(1200px 400px at 30% 0, rgba(74,198,255,.08), transparent)}
.hero h1{font-size:44px;margin:0 0 10px}
.hero h1 span{color:#4ac6ff}
.hero .cta{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}

/* === METRICS (güven sayaçları) === */
.metrics{padding:14px 0;border-top:1px solid #1a2235;border-bottom:1px solid #1a2235;background:linear-gradient(180deg,#0f1522,#0e1420)}
.metrics-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.metric{min-width:150px;text-align:center;padding:10px 14px;border:1px solid #1f2a44;border-radius:12px;background:#0e1523}
.metric strong{display:block;font-size:20px;color:#83e5a4}
.metric span{display:block;color:#9fb2e5;font-size:.92rem}

/* === TRI CARDS (özellikler ve planlar) === */
.cards{display:flex;flex-wrap:wrap;margin:0 -11px}
.cards > *{padding:0 11px;margin-bottom:22px}
.cards.tri > *{width:33.3333%;min-width:280px}
.equal{display:flex;flex-direction:column;height:100%}
.equal .btn{margin-top:auto} /* alt hizalama */
.features{padding:36px 0}
.plans{padding:24px 0}
.plan{background:#161c2a;border:1px solid #243049;padding:20px;border-radius:16px}
.plan.featured{border-color:#4ac6ff;box-shadow:0 10px 32px rgba(74,198,255,.08)}
.plan .price{font-size:22px;color:#83e5a4;margin-top:-6px}

/* === WHY BAND === */
.why{padding:40px 0;background:linear-gradient(180deg,#0f1420 0,#0c121d 100%)}
.why-row{display:flex;gap:22px;flex-wrap:wrap;align-items:stretch}
.why-row>div{flex:1 1 320px}
.why-card{border:1px solid #243049;background:#121a2a;border-radius:16px;padding:22px}

/* === FINAL CTA === */
.final-cta{padding:48px 0;text-align:center;background:radial-gradient(900px 260px at 70% 0, rgba(131,229,164,.08), transparent)}
.final-cta h2{margin:0 0 8px;font-size:28px}

/* === LISTS / FORMS === */
.check{list-style:none;padding:0;margin:0}
.check li{padding-left:28px;position:relative;margin:10px 0}
.check li:before{content:'✔';position:absolute;left:0;top:0;color:#83e5a4}
label{display:block;font-weight:600;color:#9fb2e5;margin-bottom:12px}
input,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #243049;background:#0b0f19;color:#d6e1ff}
input:focus,textarea:focus{outline:2px solid #4ac6ff;border-color:transparent}

/* === FOOTER === */
.site-main{padding-bottom:64px}
.site-footer{margin-top:64px;background:linear-gradient(180deg,#0f1420,#0b0e16);border-top:1px solid #243049;padding:36px 0}
.site-footer .cols{display:flex;flex-wrap:wrap;margin:0 -11px}
.site-footer .cols>div{padding:0 11px;width:33.3333%;min-width:240px;margin-bottom:22px}
.site-footer h4{margin-top:0}
.copy{margin-top:18px;color:#7a8cb2;font-size:.92rem}

/* === RESPONSIVE === */
@media (max-width:1100px){ .site-search{flex-basis:280px} }
@media (max-width:900px){
  .header-row{flex-wrap:wrap}
  .main-nav{order:2;width:100%;justify-content:flex-start;gap:10px}
  .site-search{order:3;width:100%;max-width:none;flex-basis:auto;height:40px}
  .cards.tri > *{width:100%;min-width:0} /* 3’lü kartlar tek sütun */
  .hero h1{font-size:36px}
  .site-footer .cols>div{width:100%}
}