/* ====== Temel Tasarım Değerleri ====== */
:root{
  --bg:#0b1220;          /* arka plan degrade için koyu katman */
  --surface:#ffffff;     /* kart/zemin (light) */
  --text:#0c1b2a;
  --muted:#64788a;
  --brand:#0d4d8c;       /* ana marka rengi */
  --accent:#11a1ff;      /* vurgu */
  --border:#0c1b2a1f;
  --card:#f7fbff;

  --radius:14px;
  --shadow:0 10px 30px rgba(17, 35, 52, .08);
  --shadow-strong:0 20px 50px rgba(17, 35, 52, .14);

  --container:1100px;

  /* Fluid tipografi */
  --step--1: clamp(0.88rem, 0.83rem + 0.2vw, 0.98rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.3vw, 1.10rem);
  --step-1:  clamp(1.25rem, 1.14rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.56rem, 1.40rem + 0.8vw, 1.92rem);
  --step-3:  clamp(2.00rem, 1.80rem + 1.2vw, 2.50rem);
  --step-4:  clamp(2.50rem, 2.20rem + 1.8vw, 3.10rem);
}

/* Dark theme vars */
:root[data-theme="dark"]{
  --surface:#0d1526;
  --text:#e8f0f7;
  --muted:#92a6b7;
  --brand:#4aa3ff;
  --accent:#7cc8ff;
  --border:rgba(208,230,255,.12);
  --card:#111b2e;
  --shadow:none;
  --shadow-strong:none;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(17,161,255,.20), transparent 60%),
    radial-gradient(800px 600px at -10% 20%, rgba(13,77,140,.20), transparent 60%),
    #f8fbff;
}
:root[data-theme="dark"] body{
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(17,161,255,.18), transparent 60%),
    radial-gradient(800px 600px at -10% 20%, rgba(12,60,110,.25), transparent 60%),
    #0b1220;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}

/* ====== Layout ====== */
.container{width:min(var(--container),92%);margin-inline:auto}

/* ====== Glass Header ====== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: saturate(150%) blur(10px);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0;
}
.logo img{height:34px; transition:transform .2s ease}
.logo img:hover{transform:translateY(-1px)}
.nav a{margin:0 12px; font-size:var(--step--1)}
.btn, .btn-primary, .btn-ghost{
  display:inline-block; padding:10px 16px; border-radius:12px; border:1px solid var(--border);
  font-weight:600; transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{background:var(--brand); color:#fff; border-color:transparent; box-shadow: var(--shadow)}
.btn-primary:hover{transform:translateY(-1px); box-shadow: var(--shadow-strong)}
.btn-ghost{background:transparent}
.nav-toggle, .theme-toggle{
  display:none; background:transparent; border:1px solid var(--border);
  padding:8px 12px; border-radius:10px; font-size:var(--step--1);
}

/* ====== Hero ====== */
.hero{padding:84px 0 48px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.hero h1{font-size:var(--step-4); line-height:1.05; letter-spacing:-.02em; margin:0 0 12px}
.hero p{font-size:var(--step-1); color:var(--muted); margin:0 0 18px}
.hero .accent{background: linear-gradient(90deg, var(--accent), var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent}
.badges{display:flex; gap:10px; list-style:none; padding:0; margin:14px 0 0}
.badges li{background: color-mix(in srgb, var(--card) 70%, var(--surface)); border:1px solid var(--border);
  padding:8px 12px; border-radius:999px; font-size:12px}

/* ====== Sections ====== */
.section{padding:64px 0}
.section.alt{
  background: color-mix(in srgb, var(--surface) 94%, #eaf5ff 6%);
}
h2{font-size:var(--step-3); letter-spacing:-.02em; margin:0 0 18px}

/* ====== Grids & Cards ====== */
.grid{display:grid; gap:20px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.cards{grid-template-columns:repeat(4,1fr)}
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform: translateY(-4px); box-shadow: var(--shadow-strong); border-color: color-mix(in srgb, var(--brand) 20%, var(--border))}
.card h3{margin:10px 0 6px; font-size:var(--step-1)}
.card p{color:var(--muted)}

/* ====== Forms ====== */
.track-form, .quote-form, .inline-form{display:grid; gap:12px}
.track-form{grid-template-columns:1fr auto}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 95%, #fff);
  color:var(--text); font-size:var(--step-0); transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{outline:none; border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent)}
label{display:grid; gap:6px; font-size:var(--step--1); color:var(--muted)}
.track-result{
  margin-top:12px; padding:14px; border:1px dashed var(--border); border-radius:12px; background: var(--surface)
}
.muted{color:var(--muted); font-size:var(--step--1)}

/* ====== Logos/Partners ====== */
.logos{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:center; opacity:.9; filter:saturate(0.8)}
.logos img{background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px}

/* ====== Contact Block ====== */
.contact-block{display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:start}
.map{width:100%; height:340px; border:0; border-radius:14px; box-shadow: var(--shadow)}

/* ====== Footer ====== */
.site-footer{border-top:1px solid var(--border); margin-top:40px; background: color-mix(in srgb, var(--surface) 96%, #eef6ff 4%)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:24px; padding:28px 0}
.footer-bottom{padding:12px 0 28px; border-top:1px solid var(--border)}
.logo-sm{height:28px; margin-bottom:8px; opacity:.95}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .grid.two{grid-template-columns:1fr}
  .contact-block{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{display:none; position:absolute; background: color-mix(in srgb, var(--surface) 92%, transparent);
       left:0; right:0; top:58px; border-bottom:1px solid var(--border); padding:10px}
  .nav a{display:block; padding:10px}
  .nav-toggle, .theme-toggle{display:inline-block}
}

/* ====== Animasyonlar ve Erişilebilirlik ====== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Küçük micro-interaction: buton basınca “pulse” */
.btn-primary:active{transform: translateY(0); box-shadow:none}

/* Floating Sosyal Çubuk */
.social-float{
  position:fixed;
  right:18px; top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px;
  z-index:60;
}
.sf-item{
  display:flex; align-items:center; gap:10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  padding:10px 12px; border-radius:999px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  text-decoration:none; color:var(--text);
  backdrop-filter: saturate(140%) blur(6px);
}
.sf-item svg{width:18px; height:18px; flex:0 0 18px; fill:currentColor; opacity:.9}
.sf-item span{font-size:12px; font-weight:600}

/* Renk vurgu */
.sf-whatsapp{color:#1fa855}
.sf-linkedin{color:#0a66c2}
.sf-instagram{color:#d6249f}
.sf-x{color:#111}
:root[data-theme="dark"] .sf-x{color:#e6e6e6}
.sf-youtube{color:#ff0033}

/* Hover */
.sf-item:hover{
  transform:translateY(-2px);
  box-shadow: var(--shadow-strong);
  border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
}

/* Mobilde alta sabit bar */
@media (max-width: 760px){
  .social-float{
    right:0; left:0; top:auto; bottom:14px; transform:none;
    flex-direction:row; justify-content:center;
    gap:8px; padding:0 8px;
  }
  .sf-item{padding:10px 12px}
  .sf-item span{display:none} /* mobilde yalnızca ikon göster */
}

/* Hareket azaltma */
@media (prefers-reduced-motion: reduce){
  .sf-item{transition:none}
}

.wa-fab{
  position:fixed; right:18px; bottom:18px; z-index:65;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#1fa855; color:#fff;
  box-shadow:0 10px 30px rgba(31,168,85,.35);
  transition:transform .1s ease, box-shadow .2s ease, opacity .2s ease;
}
.wa-fab svg{width:24px; height:24px; fill:currentColor}
.wa-fab:hover{transform:translateY(-2px); box-shadow:0 20px 50px rgba(31,168,85,.45)}
@media (max-width:760px){ .wa-fab{right:14px; bottom:70px} } /* sosyal bar ile çakışmasın */