/* sera-tec — static site. No build step, no framework. */
:root{
  --teal:#167C7A; --teal-700:#0F5F5D; --teal-900:#0A3E3D;
  --teal-50:#EDF7F6; --teal-100:#D6ECEA;
  --ink:#0E1F1E; --body:#41544F; --muted:#6E827E;
  --bg:#FFFFFF; --surface:#F6FAF9; --line:#E1EDEB;
  --accent:#E4B84B;
  --radius:18px; --maxw:1140px;
  --shadow:0 1px 2px rgba(14,31,30,.04), 0 12px 32px -12px rgba(14,31,30,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); line-height:1.15; letter-spacing:-.022em; margin:0 0 .5em; font-weight:650}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.4rem)}
h3{font-size:1.16rem}
p{margin:0 0 1rem}
a{color:var(--teal-700); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section{padding:88px 0}
.section--tint{background:var(--surface); border-block:1px solid var(--line)}
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); margin-bottom:14px;
}
.lead{font-size:1.13rem; color:var(--body); max-width:64ch}
.center{text-align:center}
.center .lead{margin-inline:auto}
.muted{color:var(--muted); font-size:.92rem}

/* ---------- language switch: duplicated content, one visible ---------- */
html[data-lang="tr"] body [lang="en"]{display:none}
html[data-lang="en"] body [lang="tr"]{display:none}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; gap:28px; height:74px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand svg,.brand img{width:34px;height:auto;display:block}
.brand small{display:block; font-size:.66rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a{color:var(--body); font-size:.95rem; font-weight:550}
.nav a:hover{color:var(--teal); text-decoration:none}
.langs{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#fff}
.langs button{
  border:0; background:transparent; padding:7px 13px; font:inherit; font-size:.8rem;
  font-weight:700; letter-spacing:.06em; color:var(--muted); cursor:pointer;
}
.langs button[aria-pressed="true"]{background:var(--teal); color:#fff}
.menu-btn{display:none; margin-left:auto; border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:9px 12px; cursor:pointer; font-size:1.1rem; line-height:1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px;
  font-weight:600; font-size:.97rem; border:1px solid transparent; cursor:pointer; transition:.18s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn--primary{background:var(--teal); color:#fff; box-shadow:0 10px 24px -12px rgba(22,124,122,.9)}
.btn--primary:hover{background:var(--teal-700)}
.btn--ghost{border-color:var(--line); background:#fff; color:var(--ink)}
.btn--ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn--light{background:#fff; color:var(--teal-900)}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; padding:96px 0 84px;
  background:
    radial-gradient(1100px 460px at 78% -8%, var(--teal-100), transparent 62%),
    radial-gradient(760px 380px at 6% 106%, #F3F8E9, transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero__art{display:flex; justify-content:center}
.hero__art svg,.hero__art img{width:min(320px,80%); filter:drop-shadow(0 24px 44px rgba(10,62,61,.18))}
.badge{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--teal-100);
  color:var(--teal-700); border-radius:999px; padding:7px 15px; font-size:.83rem; font-weight:600;
}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:56px;
  border-top:1px solid var(--line); padding-top:30px}
.stat b{display:block; color:var(--ink); font-size:1.5rem; letter-spacing:-.02em}
.stat span{font-size:.9rem; color:var(--muted)}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:22px; margin-top:44px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  transition:.2s;
}
.card:hover{border-color:var(--teal-100); box-shadow:var(--shadow); transform:translateY(-3px)}
.card p:last-child{margin-bottom:0}
.card__ico{
  width:44px; height:44px; border-radius:13px; background:var(--teal-50); color:var(--teal);
  display:grid; place-items:center; margin-bottom:16px; font-size:1.25rem;
}
.card--tier{display:flex; flex-direction:column}
.tier__tag{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); margin-bottom:10px}
.list{list-style:none; margin:14px 0 0; padding:0}
.list li{position:relative; padding-left:26px; margin-bottom:9px; font-size:.96rem}
.list li::before{
  content:""; position:absolute; left:0; top:.55em; width:14px; height:8px;
  border-left:2.5px solid var(--teal); border-bottom:2.5px solid var(--teal);
  transform:rotate(-45deg);
}
.steps{counter-reset:s; display:grid; gap:22px; grid-template-columns:repeat(4,1fr); margin-top:44px}
.step{position:relative; padding-top:52px}
.step::before{
  counter-increment:s; content:counter(s); position:absolute; top:0; left:0;
  width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.95rem;
}
.step::after{content:""; position:absolute; top:19px; left:48px; right:-22px; height:1px;
  background:linear-gradient(90deg,var(--teal-100),transparent)}
.step:last-child::after{display:none}

/* ---------- feature split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.panel{
  background:var(--teal-900); color:#CFE4E2; border-radius:24px; padding:40px;
  background-image:radial-gradient(500px 240px at 100% 0,rgba(255,255,255,.09),transparent 60%);
}
.panel h3,.panel h2{color:#fff}
.panel .list li::before{border-color:var(--accent)}
.quote{border-left:3px solid var(--teal); padding-left:20px; font-size:1.06rem; color:var(--ink)}

/* ---------- animated explainer ---------- */
/* One 16s loop, four 4s stages. Everything is CSS: no JS, no video file, no
   autoplay prompt. Stage highlighting is opacity; the packets and the fan run
   continuously so the scene never looks frozen. */
.exp{
  --loop:16s;
  display:block; width:100%; height:auto; margin-top:36px;
  background:linear-gradient(180deg,#fff,var(--surface));
  border:1px solid var(--line); border-radius:22px;
}
.exp text{font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.exp .stage{opacity:.38; animation:exp-stage var(--loop) infinite}
.exp .s2{animation-delay:4s}
.exp .s3{animation-delay:8s}
.exp .s4{animation-delay:12s}
@keyframes exp-stage{0%,1%{opacity:.38} 4%,22%{opacity:1} 25%,100%{opacity:.38}}

.exp .cap{opacity:0; animation:exp-cap var(--loop) infinite}
.exp .c2{animation-delay:4s}
.exp .c3{animation-delay:8s}
.exp .c4{animation-delay:12s}
@keyframes exp-cap{0%,1%{opacity:0} 4%,22%{opacity:1} 25%,100%{opacity:0}}

.exp .led{animation:exp-led 2.6s ease-in-out infinite}
.exp .led2{animation-delay:.65s}
.exp .led3{animation-delay:1.3s}
@keyframes exp-led{0%,100%{r:2; opacity:.5} 50%{r:3.2; opacity:1}}

.exp .wave{animation:exp-wave 2.4s ease-out infinite}
.exp .w2{animation-delay:.35s}
.exp .w3{animation-delay:.7s}
@keyframes exp-wave{0%{opacity:0} 22%{opacity:.95} 70%,100%{opacity:0}}

.exp .packet{animation:exp-flow 3.2s linear infinite}
.exp .p2{animation-delay:1.1s}
.exp .p3{animation-delay:2.2s}
@keyframes exp-flow{from{transform:translateX(0); opacity:0} 12%{opacity:1} 88%{opacity:1} to{transform:translateX(var(--travel)); opacity:0}}

.exp .fan{transform-box:fill-box; transform-origin:center; animation:exp-spin 3s linear infinite}
@keyframes exp-spin{to{transform:rotate(360deg)}}

.exp .drop{animation:exp-drop 2.4s ease-in infinite}
.exp .d2{animation-delay:.8s}
.exp .d3{animation-delay:1.6s}
@keyframes exp-drop{0%{transform:translateY(0); opacity:0} 20%{opacity:.9} 100%{transform:translateY(26px); opacity:0}}

.exp .blink{animation:exp-blink 1.6s steps(1,end) infinite}
.exp .b2{animation-delay:.8s}
@keyframes exp-blink{0%,49%{opacity:1} 50%,100%{opacity:.25}}

.exp .trace{stroke-dasharray:120; stroke-dashoffset:120; animation:exp-trace 6s ease-in-out infinite}
@keyframes exp-trace{0%{stroke-dashoffset:120} 45%,100%{stroke-dashoffset:0}}

@media (prefers-reduced-motion: reduce){
  .exp *{animation:none !important}
  .exp .stage{opacity:1}
  .exp .cap{opacity:0}
  .exp .c1{opacity:1}
  .exp .trace{stroke-dashoffset:0}
}

/* ---------- sensor chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px}
.chip{
  display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:10px 18px; font-size:.95rem; font-weight:550; color:var(--ink);
}
.chip i{font-style:normal; font-size:1.05rem}

/* ---------- forms ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px; box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; transition:.15s;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px var(--teal-50);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--muted); margin:6px 0 18px}
.consent input{width:18px; height:18px; margin-top:2px; accent-color:var(--teal); flex:none}
.form-msg{display:none; border-radius:12px; padding:14px 16px; font-size:.94rem; margin-bottom:16px}
.form-msg.ok{display:block; background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-100)}
.form-msg.err{display:block; background:#FDF1EC; color:#A8442A; border:1px solid #F3D6CB}
.hp{position:absolute; left:-9999px; opacity:0}
@media (max-width:640px){.field-row{grid-template-columns:1fr} .form-card{padding:24px}}

/* ---------- team ---------- */
.person{text-align:center}
.avatar{
  width:88px; height:88px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(140deg,var(--teal),var(--teal-900)); color:#fff;
  display:grid; place-items:center; font-size:1.5rem; font-weight:700; letter-spacing:.02em;
}
.person h3{margin-bottom:2px}
.person .role{font-size:.9rem; color:var(--teal); font-weight:600}

/* ---------- cta ---------- */
.cta{background:var(--teal-900); color:#CFE4E2; padding:80px 0;
  background-image:radial-gradient(700px 300px at 15% 0,rgba(255,255,255,.08),transparent 60%)}
.cta h2{color:#fff}
.cta .lead{color:#BCD6D4}

/* ---------- footer ---------- */
.site-foot{background:#08312F; color:#9DBAB8; padding:56px 0 28px; font-size:.94rem}
.site-foot a{color:#CFE4E2}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.site-foot h4{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:8px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.86rem}

@media (max-width:960px){
  .hero__grid,.split{grid-template-columns:1fr; gap:36px}
  .hero__art{order:-1}
  .g3,.g4,.steps,.foot-grid{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .g2,.g3,.g4,.steps,.stats,.foot-grid{grid-template-columns:1fr}
  .menu-btn{display:block}
  .nav{
    display:none; position:absolute; top:74px; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start;
    gap:0; padding:12px 24px 20px;
  }
  .nav.open{display:flex}
  .nav a{padding:11px 0; width:100%}
  .langs{margin-top:10px}
}