:root{
      --brand:#0F212C;--brand-2:#113447;--accent:#12B886;
      --bg:#f5f7f9;--card:#fff;--text:#0f212c;--muted:#6b7b87;--line:#e6eef3;
      --radius:16px;--shadow:0 12px 34px rgba(0,0,0,.08)
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{
      font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);background:var(--bg);line-height:1.55
    }
    .container{max-width:1140px;margin:0 auto;padding:0 20px}
    a{text-decoration:none;color:inherit}

    .topbar{display:flex;align-items:center;justify-content:space-between;height:66px}
    .brand{display:flex;gap:10px;align-items:center;font-weight:800}
    .brand .dot{width:10px;height:10px;border-radius:999px;background:var(--accent)}
    nav.desktop{display:flex;gap:24px;align-items:center}
    @media (max-width:900px){ nav.desktop{display:none} }
    .mobile{display:none;background:var(--brand);border-top:1px solid #153042}
    .mobile.show{display:block}
    .mobile a{display:block;padding:14px 0;color:#eaf2f9}

    .hero{position:relative;color:#fff;overflow:hidden;background:var(--brand)}
    .hero .media{position:absolute;inset:0;
      
      filter:contrast(1.05) saturate(1.05)}
    .hero:after{content:"";position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(15,33,44,.55), rgba(15,33,44,.92))}
    .inner{position:relative;z-index:2;padding:90px 0}
    h1{margin:16px 0 6px;font-size:40px}
    .lead{max-width:760px;opacity:.92}

    section{padding:56px 0}
    .section-title{font-size:26px;margin:0 0 12px}
    .section-sub{color:var(--muted);margin:0 0 24px}

    .grid{display:grid;gap:18px}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    @media(max-width:900px){ .grid-3{grid-template-columns:1fr} }

    .card{background:var(--card);border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow);padding:22px}
    .iconlist{display:grid;gap:10px}
    .iconlist li{list-style:none;display:flex;gap:10px;align-items:flex-start}
    .dot{width:8px;height:8px;border-radius:999px;background:var(--accent);margin-top:8px}
    .cta{display:flex;gap:10px;flex-wrap:wrap}

    /* === Mobil uyum === */
    @media(max-width:768px){
      .inner{padding:70px 0}
      h1{font-size:28px}
      .lead{font-size:16px}
      .section-title{font-size:22px}
      .section-sub{font-size:15px}
    }
    @media(max-width:480px){
      .inner{padding:54px 0}
      h1{font-size:22px}
      .lead{font-size:15px}
      .card{padding:16px}
      .cta a{width:100%;text-align:center}
    }


    /* Hero rozet */
.eyebrow--chip{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: 8px 12px;
  border-radius: 999px;
  display: inline-block;
}

/* CTA buton */
.btn-accent{
  background: var(--accent);
  color: #08301d; /* koyu yeşil metin */
}
.btn-pill{
  border-radius: 999px;
  padding: 10px 16px;
}