:root{
  --bg:#f6f6f6; --card:#fff; --ink:#111; --muted:#777;
  --line:#e4e4e7; --shadow:0 4px 12px rgba(0,0,0,.06);
  --radius:18px; --maxw:1100px; --accent:#111; --hover:rgba(0,0,0,.07);
  --header-blur:8px; --header-border:rgba(0,0,0,.05);
  --active-bg:#111; --active-ink:#fff;
}

html{ scroll-behavior:smooth; color-scheme: light; }
*{ box-sizing:border-box }
body{
  margin:0; background:#f6f6f6!important; color:#111!important;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:-0.05em;
}

/* Sticky header */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(var(--header-blur));
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--header-border);
  transition: box-shadow .25s ease;
}
.site-header.scrolled{ box-shadow: var(--shadow); }

.nav-bar{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:12px; align-items:center;
}

/* Logo */
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo img{ height:32px !important; width:auto; display:block; }

/* Nav pills */
.nav{ justify-self:center; display:flex; align-items:center; gap:0; }
.nav a{
  position:relative; text-decoration:none; color:var(--ink); font-size:14px;
  padding:8px 18px; margin:4px; border-radius:999px; transition: color .2s ease;
}
.nav a::before{
  content:""; position:absolute; inset:0; border-radius:999px; background:transparent;
  transition: background .2s ease, transform .2s ease; transform: scale(0.98); z-index:-1;
}
.nav a:hover::before{ background:var(--hover); }
.nav a.active{ color:var(--active-ink); }
.nav a.active::before{ background:var(--active-bg); transform: scale(1); }

.signin{
  text-decoration:none; color:var(--active-ink); background:var(--accent);
  border-radius:999px; padding:8px 18px; font-size:14px; justify-self:end;
}
.signin:hover{ filter:brightness(0.9); }

/* Hero */
.hero{
  text-align:center; padding:12px 20px; gap:8px;
  display:flex; flex-direction:column; align-items:center; scroll-margin-top:76px;
}
.headline{ margin:8px 0 6px; font-weight:600; font-size:clamp(28px,4.6vw,44px); line-height:1.08; }
.lead{ margin:0 auto; max-width:680px; font-size:16.5px; line-height:1.5; color:var(--muted); }

/* Sections */
section{ max-width:var(--maxw); margin:0 auto; padding:22px 20px 40px; text-align:center; scroll-margin-top:76px; }
section h2{ margin:0 0 14px; font-size:26px; font-weight:600; }
.product{ margin-bottom:26px; }
.product h3{ font-size:20px; margin:8px 0 6px; }
.product p{ max-width:640px; margin:0 auto 8px; color:var(--muted); line-height:1.55; }
.product a{ display:inline-block; margin-top:6px; color:var(--ink); text-decoration:underline; }

/* Footer (yarım PROSECA) */
footer{ scroll-margin-top:76px; }
.footer-section{
  position:relative; padding:70px 20px 90px;
  display:flex; justify-content:center; overflow:hidden;
}
.footer-section::before{
  content:"PROSECA"; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-70px; font-size:200px; font-weight:400; letter-spacing:-0.05em;
  color:#111; opacity:.05; line-height:1; white-space:nowrap; pointer-events:none; user-select:none;
}
.footer-card{
  position:relative; z-index:1; width:100%; max-width:var(--maxw);
  background:#fff; border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(0,0,0,.08); padding:22px; text-align:center;
}
.footer-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:14px; }
.footer-grid h3{ margin:0 0 6px; font-size:22px; font-weight:600; }
.about p{ max-width:700px; margin:6px auto; color:#777; line-height:1.55; }
.footer-bottom{ color:#777; font-size:13px; margin-top:10px; }
.footer-bottom a{ color:inherit; }

/* Responsive */
@media (min-width:880px){
  .footer-grid{ grid-template-columns:1fr 1fr; text-align:left; }
  .about{text-align:left}
}
@media (max-width:640px){
  .nav-bar{ grid-template-columns:auto 1fr auto; }
}