/* Web Site Yap — yeni tasarım
   Token kaynağı: design-report (design.sitestudyo.com analizi) — sadece
   renk/tipografi/spacing/radius sistemi referans alındı, içerik özgündür. */

:root{
  --bg: #0c0c0e;
  --bg-raised: #14171c;
  --bg-card: #191c21;
  --text: #f4f0e7;
  --muted: #a5a6aa;
  --muted-2: #74777e;
  --border: rgba(244,240,231,0.14);
  --border-strong: rgba(244,240,231,0.28);
  --lime: #c8ff00;
  --lime-2: #c8ff36;
  --on-lime: #111111;
  --footer-bg: #f4f0e7;
  --footer-text: #14171c;
  --footer-muted: #5b5d63;

  --font-display: 'Syne', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r-1: 3px; --r-2: 4px; --r-3: 5px; --r-4: 6px; --r-5: 8px; --r-pill: 999px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --dur-hover: 0.17s;
  --dur-enter: 0.5s;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: 0.2px; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img,svg{ display:block; max-width: 100%; }
button{ font-family: inherit; cursor: pointer; }

.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-5); }
@media (max-width: 640px){ .wrap{ padding: 0 var(--sp-4); } }

.kicker{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.kicker::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--lime);
  flex: none;
}

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 40;
  background: rgba(12,12,14,0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap{ display:flex; align-items:center; justify-content: space-between; height: 64px; }
.brand{ font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: 0.6px; }
.brand span{ color: var(--lime); }
.nav-links{ display:flex; gap: var(--sp-6); list-style:none; margin:0; padding:0; }
.nav-links a{ font-size: 13px; color: var(--muted); transition: color var(--dur-hover) var(--ease); }
.nav-links a:hover{ color: var(--text); }
.nav-cta{ display:flex; align-items:center; gap: var(--sp-4); }
.nav-toggle{ display:none; background:none; border:1px solid var(--border-strong); border-radius: var(--r-2); width:36px; height:36px; color:var(--text); }
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  padding: 11px 18px; border-radius: var(--r-3); border: 1px solid transparent;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--lime); color: var(--on-lime); }
.btn-primary:hover{ background: var(--lime-2); }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover{ border-color: var(--lime); color: var(--lime-2); }
.btn-sm{ padding: 8px 14px; font-size: 12px; }

/* ---------- Hero ---------- */
.hero{ padding: var(--sp-9) 0 var(--sp-8); border-bottom: 1px solid var(--border); }
.hero .wrap{ display:grid; grid-template-columns: 1.05fr 0.85fr; gap: var(--sp-8); align-items:center; }
@media (max-width: 900px){ .hero .wrap{ grid-template-columns: 1fr; gap: var(--sp-7); } }
.hero-copy h1{
  font-size: 44px; line-height: 1.1; letter-spacing: -0.3px; margin: var(--sp-4) 0 var(--sp-4);
  max-width: 12ch;
}
@media (max-width: 640px){ .hero-copy h1{ font-size: 32px; } }
.hero-copy p{ font-size: 16px; color: var(--muted); max-width: 46ch; margin-bottom: var(--sp-6); }
.hero-actions{ display:flex; gap: var(--sp-4); flex-wrap: wrap; }

.hero-panel{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--sp-5);
  box-shadow: rgba(0,0,0,0.35) 0px 24px 60px 0px;
}
.hero-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.hero-panel-head .dot-row{ display:flex; gap:6px; }
.hero-panel-head .dot-row span{ width:8px; height:8px; border-radius:var(--r-pill); background: var(--border-strong); }
.hero-panel-head .label{ font-size: 11px; color: var(--muted-2); letter-spacing: 1px; text-transform: uppercase; }
.status-line{ display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.status-line:last-child{ border-bottom:none; }
.status-line .k{ color: var(--muted-2); min-width: 108px; }
.status-line .v{ color: var(--text); }
.status-line .v.ok{ color: var(--lime-2); }
.progress{ height: 4px; background: var(--border); border-radius: var(--r-pill); overflow:hidden; margin-top: var(--sp-4); }
.progress i{ display:block; height:100%; width:72%; background: var(--lime); }

/* ---------- Stat strip ---------- */
.stats{ border-bottom: 1px solid var(--border); }
.stats .wrap{ display:grid; grid-template-columns: repeat(3,1fr); }
@media (max-width: 760px){ .stats .wrap{ grid-template-columns: 1fr; } }
.stat{ padding: var(--sp-6) var(--sp-5); border-left: 1px solid var(--border); }
.stat:first-child{ border-left:none; padding-left:0; }
@media (max-width: 760px){ .stat{ border-left:none; border-top: 1px solid var(--border); padding: var(--sp-5) 0; } .stat:first-child{ border-top:none; } }
.stat .num{ font-family: var(--font-display); font-size: 30px; color: var(--lime-2); }
.stat .desc{ font-size: 13px; color: var(--muted); margin-top: var(--sp-2); max-width: 30ch; }

/* ---------- Section shell ---------- */
section{ padding: var(--sp-8) 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: var(--sp-5); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.section-head h2{ font-size: 28px; margin-top: var(--sp-2); max-width: 20ch; }
.section-head .lead{ font-size: 14px; color: var(--muted); max-width: 38ch; }

/* ---------- Services (asymmetric grid, not 3 identical cards) ---------- */
.services-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-4); }
.services-grid .feature-large{ grid-row: span 2; }
@media (max-width: 900px){ .services-grid{ grid-template-columns: 1fr 1fr; } .services-grid .feature-large{ grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 620px){ .services-grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-4);
  padding: var(--sp-5); transition: border-color var(--dur-hover) var(--ease);
}
.card:hover{ border-color: var(--border-strong); }
.card .icon{ width: 34px; height: 34px; color: var(--lime); margin-bottom: var(--sp-4); }
.card h3{ font-size: 18px; margin-bottom: var(--sp-2); }
.card p{ font-size: 13.5px; color: var(--muted); }
.feature-large{ display:flex; flex-direction: column; justify-content: space-between; }
.feature-large h3{ font-size: 22px; }
.feature-large .icon{ width: 40px; height: 40px; }
.feature-large .tag-row{ display:flex; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; }
.tag{
  font-size: 11px; letter-spacing: 0.4px; color: var(--muted); border: 1px solid var(--border-strong);
  border-radius: var(--r-2); padding: 4px 8px;
}

/* ---------- Process ---------- */
.process-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
@media (max-width: 900px){ .process-list{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process-list{ grid-template-columns: 1fr; } }
.process-item{ border-top: 2px solid var(--border-strong); padding-top: var(--sp-4); }
.process-item .idx{ font-family: var(--font-mono); font-size: 12px; color: var(--lime-2); letter-spacing: 1px; }
.process-item h3{ font-size: 16px; margin: var(--sp-2) 0 var(--sp-2); }
.process-item p{ font-size: 13px; color: var(--muted); }

/* ---------- Packages (2 asymmetric cards) ---------- */
.packages{ display:grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-4); }
@media (max-width: 860px){ .packages{ grid-template-columns: 1fr; } }
.pkg{ border: 1px solid var(--border); border-radius: var(--r-4); padding: var(--sp-6); background: var(--bg-raised); }
.pkg.is-highlight{ background: var(--bg-card); border-color: var(--lime); box-shadow: rgba(200,255,0,0.12) 0px 0px 0px 1px inset; }
.pkg .kicker{ margin-bottom: var(--sp-3); }
.pkg h3{ font-size: 22px; margin-bottom: var(--sp-2); }
.pkg .price{ font-family: var(--font-display); font-size: 30px; margin: var(--sp-3) 0; }
.pkg .price small{ font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); font-weight: 500; }
.pkg ul{ list-style:none; margin: var(--sp-5) 0; padding: 0; display:flex; flex-direction:column; gap: var(--sp-3); }
.pkg li{ font-size: 13px; color: var(--muted); display:flex; gap: var(--sp-2); align-items:flex-start; }
.pkg li::before{ content: "—"; color: var(--lime-2); flex: none; }

/* ---------- Lead form ---------- */
.form-section{ background: var(--bg-raised); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.form-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 900px){ .form-grid{ grid-template-columns: 1fr; gap: var(--sp-6); } }
.form-card{
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-4); padding: var(--sp-6);
}
.field{ margin-bottom: var(--sp-4); }
.field label{ display:block; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--sp-2); }
.field input, .field textarea{
  width: 100%; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-2);
  color: var(--text); font-family: var(--font-mono); font-size: 13.5px; padding: 11px 12px;
  transition: border-color var(--dur-hover) var(--ease);
}
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--lime); }
.field textarea{ min-height: 96px; resize: vertical; }
.form-note{ font-size: 12px; color: var(--muted-2); margin-top: var(--sp-3); }
.form-status{ font-size: 13px; margin-top: var(--sp-3); display:none; }
.form-status.show{ display:block; color: var(--lime-2); }

/* ---------- References ---------- */
.ref-row{ display:flex; gap: var(--sp-4); overflow-x:auto; padding-bottom: var(--sp-2); }
.ref-card{
  flex: 0 0 auto; width: 260px; border: 1px solid var(--border); border-radius: var(--r-4);
  padding: var(--sp-5); background: var(--bg-card);
}
.ref-card .quote{ font-size: 13.5px; color: var(--text); }
.ref-card .who{ margin-top: var(--sp-4); font-size: 12px; color: var(--muted-2); }

/* ---------- Footer ---------- */
footer{ background: var(--footer-bg); color: var(--footer-text); padding: var(--sp-8) 0 var(--sp-5); }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(20,23,28,0.14); }
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
.footer-top h4{ font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--footer-muted); margin-bottom: var(--sp-4); }
.footer-top ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--sp-3); }
.footer-top a, .footer-top p{ font-size: 13px; color: var(--footer-text); }
.footer-top a:hover{ color: var(--lime-2) ; }
.footer-brand .brand{ color: var(--footer-text); font-size: 16px; }
.footer-brand p{ font-size: 13px; color: var(--footer-muted); margin-top: var(--sp-3); max-width: 34ch; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: var(--sp-5); flex-wrap: wrap; gap: var(--sp-3); }
.footer-bottom p{ font-size: 12px; color: var(--footer-muted); }
.footer-bottom .legal{ display:flex; gap: var(--sp-5); }
.footer-bottom .legal a{ font-size: 12px; color: var(--footer-muted); }
.footer-bottom .legal a:hover{ color: var(--footer-text); }

/* ---------- Motion (two distinct entrance techniques) ---------- */
.reveal-mask{
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path var(--dur-enter) var(--ease), opacity 0.3s linear;
}
.reveal-mask.is-in{ clip-path: inset(0 0 0% 0); opacity: 1; }

.reveal-fade{
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal-fade.is-in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal-mask, .reveal-fade{ transition: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
}

/* preview banner (this build) */
.preview-banner{
  background: var(--lime); color: var(--on-lime); font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; text-align:center; padding: 8px 12px; letter-spacing: 0.3px;
}