/* ===================================================

   VEBİS — Design tokens

   =================================================== */

:root{

  --ink:#0F1720;

  --ink-2:#161F2B;

  --paper:#F6F4EF;

  --paper-2:#EFEBE2;

  --mint:#7CF29C;

  --coral:#FF6B4A;

  --sky:#8FB8FF;

  --slate:#3B4452;

  --slate-soft:#6B7684;

  --line-dark:rgba(255,255,255,0.09);

  --line-light:rgba(15,23,32,0.10);



  --font-display:'Space Grotesk', sans-serif;

  --font-body:'Inter', sans-serif;

  --font-mono:'JetBrains Mono', monospace;



  --radius:14px;

  --radius-sm:8px;

  --wrap:1120px;

}



*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){

  html{scroll-behavior:auto;}

  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}

}



body{

  font-family:var(--font-body);

  background:var(--paper);

  color:var(--slate);

  line-height:1.55;

  -webkit-font-smoothing:antialiased;

}



img{max-width:100%; display:block;}

a{color:inherit; text-decoration:none;}

ul,ol{list-style:none;}

button{font:inherit; cursor:pointer; background:none; border:none;}



.wrap{

  width:100%;

  max-width:var(--wrap);

  margin:0 auto;

  padding:0 24px;

}



h1,h2,h3{

  font-family:var(--font-display);

  color:var(--ink);

  line-height:1.12;

  letter-spacing:-0.01em;

}

h1{font-size:clamp(2.1rem, 5vw, 3.4rem); font-weight:700;}

h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-weight:700; margin-bottom:.6rem;}

h3{font-size:1.15rem; font-weight:600;}



.eyebrow{

  font-family:var(--font-mono);

  font-size:.78rem;

  text-transform:uppercase;

  letter-spacing:.12em;

  color:var(--slate-soft);

  margin-bottom:.9rem;

}

.section-lede{max-width:640px; color:var(--slate-soft); margin-bottom:2.6rem; font-size:1.02rem;}

.accent{color:var(--coral);}



/* subtle grain overlay for texture, keeps flat colors from feeling flat */

.noise{

  position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode:overlay;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}



/* ===================================================

   Buttons

   =================================================== */

.btn{

  display:inline-flex; align-items:center; gap:8px;

  padding:13px 24px;

  border-radius:100px;

  font-weight:600;

  font-size:.94rem;

  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;

  white-space:nowrap;

}

.btn:hover{transform:translateY(-1px);}

.btn.full{width:100%; justify-content:center;}



.btn-primary{background:var(--coral); color:#fff; box-shadow:0 6px 16px rgba(255,107,74,.28);}

.btn-primary:hover{box-shadow:0 10px 22px rgba(255,107,74,.36);}



.btn-outline{background:transparent; color:var(--ink); border:1.5px solid var(--line-light);}

.btn-outline:hover{border-color:var(--ink);}



.btn-ghost{color:var(--ink); border-bottom:1.5px solid var(--ink); border-radius:0; padding:13px 4px;}



.btn-whatsapp{background:var(--ink); color:var(--mint);}

.btn-whatsapp:hover{background:#000;}

.btn-whatsapp.large{margin-top:1.8rem;}



/* ===================================================

   Header

   =================================================== */

.site-header{

  position:sticky; top:0; z-index:100;

  background:rgba(246,244,239,.85);

  backdrop-filter:blur(10px);

  border-bottom:1px solid var(--line-light);

}

.header-inner{display:flex; align-items:center; justify-content:space-between; height:76px;}

.logo{font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink);}

.logo .dot{color:var(--coral);}

.nav{display:flex; gap:2rem;}

.nav a{font-size:.94rem; font-weight:500; color:var(--slate);}

.nav a:hover{color:var(--ink);}

.header-cta{padding:10px 20px; font-size:.86rem;}

.nav-toggle{display:none; flex-direction:column; gap:5px; width:28px;}

.nav-toggle span{height:2px; background:var(--ink); border-radius:2px;}



/* ===================================================

   Hero + terminal signature element

   =================================================== */

.hero{padding:88px 0 96px;}

.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}

.lede{font-size:1.08rem; color:var(--slate-soft); max-width:520px; margin:1.3rem 0 2rem;}

.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:2.6rem;}

.hero-stats{display:flex; gap:2.4rem;}

.hero-stats li{display:flex; flex-direction:column;}

.hero-stats strong{font-family:var(--font-display); font-size:1.3rem; color:var(--ink);}

.hero-stats span{font-size:.82rem; color:var(--slate-soft);}



.terminal{

  background:var(--ink);

  border-radius:var(--radius);

  overflow:hidden;

  box-shadow:0 24px 60px rgba(15,23,32,.28);

}

.terminal-bar{

  display:flex; align-items:center; gap:7px;

  padding:12px 16px;

  background:var(--ink-2);

  border-bottom:1px solid var(--line-dark);

}

.tdot{width:10px; height:10px; border-radius:50%;}

.tdot.r{background:#FF6B4A;} .tdot.y{background:#F2C94C;} .tdot.g{background:#7CF29C;}

.terminal-title{margin-left:8px; font-family:var(--font-mono); font-size:.76rem; color:var(--slate-soft);}

.terminal-body{

  font-family:var(--font-mono);

  font-size:.86rem;

  color:#D7DEE6;

  padding:22px 20px;

  min-height:220px;

}

.terminal-body .line{margin-bottom:9px; opacity:0; animation:fadeIn .3s forwards;}

.terminal-body .ok{color:var(--mint);}

.terminal-body .cursor{display:inline-block; width:7px; height:1em; background:var(--mint); vertical-align:middle; animation:blink 1s steps(1) infinite;}

@keyframes fadeIn{to{opacity:1;}}

@keyframes blink{50%{opacity:0;}}



/* ===================================================

   Sections

   =================================================== */

.section{padding:96px 0;}

.section.alt{background:var(--paper-2);}



/* pricing */

.priority-note{

  display:flex; align-items:center; gap:14px; flex-wrap:wrap;

  background:var(--ink); color:#fff;

  padding:16px 22px; border-radius:var(--radius-sm);

  margin-bottom:2.6rem; font-size:.92rem;

}

.priority-badge{font-family:var(--font-mono); background:var(--mint); color:var(--ink); padding:5px 12px; border-radius:100px; font-size:.78rem; font-weight:600;}



.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

.price-card{

  background:#fff; border:1px solid var(--line-light); border-radius:var(--radius);

  padding:34px 28px; display:flex; flex-direction:column;

  position:relative;

}

.price-card.featured{

  background:var(--ink); border-color:var(--ink); color:#F2F1EC;

  transform:translateY(-10px);

  box-shadow:0 30px 60px rgba(15,23,32,.25);

}

.price-card.featured h3, .price-card.featured .price-tag{color:#fff;}

.price-card.featured .price-time{color:var(--mint);}

.price-card.featured .price-list li{color:#C9D1DB; border-color:var(--line-dark);}

.featured-tag{position:absolute; top:-13px; left:28px; background:var(--mint); color:var(--ink); font-family:var(--font-mono); font-size:.72rem; font-weight:600; padding:4px 12px; border-radius:100px;}

.price-tag{font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--ink); margin:.4rem 0 .1rem;}

.price-time{font-size:.82rem; color:var(--slate-soft); margin-bottom:1.6rem;}

.price-list{margin-bottom:2rem; flex:1;}

.price-list li{padding:10px 0; border-bottom:1px solid var(--line-light); font-size:.92rem; padding-left:22px; position:relative;}

.price-list li::before{content:"✓"; position:absolute; left:0; color:var(--coral); font-weight:700;}

.price-card.featured .price-list li::before{color:var(--mint);}

.price-card .btn + .btn{margin-top:12px;}



/* process */

.process{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}

.pnum{font-family:var(--font-mono); color:var(--coral); font-size:.85rem; font-weight:600;}

.process h3{margin:.6rem 0 .5rem;}

.process p{font-size:.92rem; color:var(--slate-soft);}



/* team */

.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}

.team-card{background:#fff; border:1px solid var(--line-light); border-radius:var(--radius); padding:30px;}

.avatar{

  width:56px; height:56px; border-radius:50%;

  background:var(--avatar-color);

  display:flex; align-items:center; justify-content:center;

  font-family:var(--font-display); font-weight:700; color:var(--ink);

  margin-bottom:1.2rem;

}

.team-card .role{font-size:.86rem; color:var(--coral); font-weight:600; margin:.2rem 0 .8rem;}

.team-card p{font-size:.92rem; color:var(--slate-soft); margin-bottom:1.2rem;}

.tags{display:flex; gap:8px; flex-wrap:wrap;}

.tags span{font-family:var(--font-mono); font-size:.72rem; background:var(--paper-2); padding:5px 10px; border-radius:100px; color:var(--slate);}



/* contact */

.contact-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}

.contact-list{margin:1.8rem 0;}

.contact-list li{display:flex; align-items:center; gap:12px; padding:10px 0; font-size:.94rem;}

.contact-list svg{color:var(--coral); flex-shrink:0;}

.contact-form{background:#fff; border:1px solid var(--line-light); border-radius:var(--radius); padding:32px;}

.field{margin-bottom:18px;}

.field label{display:block; font-size:.84rem; font-weight:600; color:var(--ink); margin-bottom:6px;}

.field input, .field select, .field textarea{

  width:100%; padding:12px 14px; border:1.5px solid var(--line-light); border-radius:8px;

  font-family:var(--font-body); font-size:.94rem; color:var(--ink); background:var(--paper);

}

.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent;}

.form-note{margin-top:12px; font-size:.86rem; color:var(--mint); font-weight:600; text-align:center; min-height:1.2em;}



/* footer */

.site-footer{border-top:1px solid var(--line-light); padding:36px 0;}

.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}

.footer-inner p{font-size:.84rem; color:var(--slate-soft);}

.footer-links{display:flex; gap:20px; font-size:.86rem;}



/* ===================================================

   Responsive

   =================================================== */

@media (max-width: 980px){

  .hero-inner{grid-template-columns:1fr; gap:40px;}

  .pricing-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;}

  .price-card.featured{transform:none;}

  .process{grid-template-columns:1fr 1fr;}

  .team-grid{grid-template-columns:1fr;}

  .contact-inner{grid-template-columns:1fr;}

  .mock-hero, .mock-split{grid-template-columns:1fr;}

  .mock-cards, .mock-strip{grid-template-columns:repeat(2,1fr);}

  .mock-grid{grid-template-columns:repeat(2,1fr);}

}



@media (max-width: 720px){

  .nav{

    position:absolute; top:76px; left:0; right:0;

    background:var(--paper); border-bottom:1px solid var(--line-light);

    flex-direction:column; padding:16px 24px; gap:0;

    display:none;

  }

  .nav.open{display:flex;}

  .nav a{padding:12px 0; border-bottom:1px solid var(--line-light);}

  .nav-toggle{display:flex;}

  .header-cta{display:none;}

  .process{grid-template-columns:1fr;}

}
/* Sabit WhatsApp Butonu - Site Genel Tasarımıyla Uyumlu */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* Sitedeki diğer modern kart gölgeleri gibi */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  /* Eğer .btn ve .btn-whatsapp sınıfları padding/flex özelliklerini vermiyorsa aşağıdakileri de ekle: */
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .wa-float span {
    display: none; /* Mobilde sadece modern ikon kalır */
  }
  .wa-float {
    padding: 14px;
    border-radius: 50%;
  }
}