:root{
  --bg:#0b0b0c;
  --bg-soft:#111214;
  --card:#141518;
  --muted:#9aa0a6;
  --text:#f2f3f5;
  --accent:#6df0ff;
  --accent-2:#9b8cff;
  --accent-3:#23f0c7;
  --grad: linear-gradient(135deg,var(--accent),var(--accent-2) 60%, var(--accent-3));
  --radius:14px;
  --gap:20px;
  --max:1200px;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1000px 600px at 80% -10%, rgba(109,240,255,.16), transparent 60%), var(--bg);
  letter-spacing:.2px;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.section-pad{padding:80px 0}
.section-pad.alt{background:linear-gradient(180deg,transparent, rgba(255,255,255,.02) 30%, transparent)}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px}
.section-head h2{font-size:28px; margin:0}
.link-more{opacity:.8}
.link-more:hover{opacity:1; text-decoration:underline}

.display{font-family:"Space Grotesk", Inter, sans-serif; line-height:1.05; font-size: clamp(36px, 6vw, 68px); margin:0 0 14px}
.lead{font-size: clamp(16px, 2vw, 20px); color:var(--muted); max-width:56ch}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid rgba(255,255,255,.14); padding:12px 18px; border-radius:100px;
  transition:.25s ease; position:relative; overflow:hidden
}
.btn-primary{
  background: radial-gradient(200% 140% at 0% 0%, rgba(109,240,255,.25), transparent 50%), var(--grad);
  color:#001015; border:0; box-shadow: 0 6px 30px rgba(109,240,255,.18)
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-primary:hover{filter:saturate(1.1) brightness(1.1); transform: translateY(-1px)}
.magnetic{will-change: transform}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px);
  background:rgba(11,11,12,.4); border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center
}
.site-header .brand{display:flex; align-items:center; gap:10px; padding:14px 20px}
.brand-mark{width:22px; height:22px; border-radius:6px; background:var(--grad); box-shadow:0 6px 18px rgba(109,240,255,.3)}
.brand-text{font-weight:800; letter-spacing:.4px}
.site-nav{margin-left:auto; padding-right:20px; display:flex; align-items:center; gap:12px}
.site-nav ul{display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0}
.site-nav a{display:inline-flex; padding:10px 12px; border-radius:100px}
.site-nav a.active, .site-nav a:hover{background:rgba(255,255,255,.06)}
.nav-toggle{display:none}
.lang-switch{display:flex; gap:6px}
.lang-btn{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#dbe4ea; padding:8px 10px; border-radius:10px; font-size:12px}
.lang-btn.active, .lang-btn:hover{background:rgba(255,255,255,.14); color:#0a1220}

/* Hero */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-2; overflow:hidden}
.orb{position:absolute; width:46vw; aspect-ratio:1/1; border-radius:50%; filter: blur(60px) saturate(140%); opacity:.22; mix-blend: screen}
.orb-a{background: radial-gradient(circle at 30% 30%, #6df0ff, transparent 60%); left:-10vw; top:-10vh}
.orb-b{background: radial-gradient(circle at 70% 40%, #9b8cff, transparent 55%); right:-14vw; top:-12vh}
.orb-c{background: radial-gradient(circle at 50% 80%, #23f0c7, transparent 55%); left:10vw; bottom:-20vh}
.grain{position:absolute; inset:-20%; background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22500%22 height=%22500%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%223%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.04%22/></svg>'); pointer-events:none}

.hero-canvas-wrap{position:absolute; inset:0; z-index:-1; overflow:hidden}
#hero3d{width:100%; height:100%}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px}
.cta-row{display:flex; gap:12px; margin:20px 0 10px}
.regions{display:flex; gap:14px; list-style:none; padding:0; margin:22px 0 0; color:var(--muted)}
.stat-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:18px 18px 16px; box-shadow:var(--shadow)}
.stat{font-size:34px; font-weight:800; letter-spacing:.5px}
.stat-label{color:var(--muted)}
.hero-cards{display:grid; gap:14px; align-content:start}

/* Cards and grids */
.grid{display:grid; gap:var(--gap)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{
  border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden; isolation:isolate;
}
.card h3{margin:0 0 8px}
.card p{margin:0 0 14px; color:var(--muted)}
.card::after{content:""; position:absolute; inset:-1px; background:radial-gradient(400px 120px at 20% -20%, rgba(109,240,255,.08), transparent 40%); z-index:-1}
.card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.16)}

.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:100px; background:rgba(255,255,255,.06); margin-right:6px; font-size:12px; color:#dbe4ea}

.proj-card{min-height:160px; border-radius:var(--radius); display:flex; flex-direction:column; justify-content:flex-end}
.swiper{--swiper-theme-color: var(--accent)}

/* Logo wall */
.logo-wall{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.logo-tile{aspect-ratio: 16/9; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#cbd5e1; font-weight:600; letter-spacing:.3px}

/* Contact / Forms */
.contact-cta{display:flex; align-items:center; justify-content:space-between; gap:20px}
.contact-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:30px}
.contact-list{list-style:none; padding:0; margin:20px 0; color:var(--muted)}
.map-embed .fake-map{height:240px; border-radius:14px; border:1px dashed rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; color:var(--muted)}

.form-card label{display:block; font-size:14px; color:#cbd5e1; margin:10px 0}
.form-card input, .form-card textarea, .form-card select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); outline:none; background:rgba(255,255,255,.03); color:var(--text)
}
.form-actions{display:flex; align-items:center; gap:10px; margin-top:10px}
.form-note{font-size:13px; color:var(--muted)}

.detail{display:grid; grid-template-columns: 2fr 1fr; gap:30px}
.detail h1, .detail h2{margin-top:0}
.detail .side{position:sticky; top:90px; align-self:start}
.crumb{display:inline-block; margin-bottom:10px; color:var(--muted)}
.crumb:hover{color:var(--text)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:30px 0 24px; background:rgba(0,0,0,.2)}
.footer-grid{display:grid; grid-template-columns: 1.2fr .6fr .6fr; gap:20px; padding:20px 0}
.foot-links{list-style:none; padding:0; margin:0}
.foot-links li{margin:8px 0}
.brand--foot .brand-mark{opacity:.9}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; color:var(--muted); font-size:13px}

/* Scroll / reveal */
.scroll-indicator{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--muted); letter-spacing:.3em; text-transform:uppercase}
.reveal{opacity:0; transform:translateY(10px)}

/* Page overlay for Barba transitions */
.page-overlay{
  position:fixed; inset:0; background: radial-gradient(1200px 800px at 100% 0%, rgba(109,240,255,.1), transparent 60%), #0b0b0c;
  transform:translateY(100%); z-index:100; pointer-events:none;
}

/* i18n: FOUC engelleme */
body.i18n-pending [data-i18n]{ visibility: hidden; }

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .cards-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .site-nav ul{display:none; position:absolute; right:10px; top:60px; background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; backdrop-filter: blur(8px)}
  .site-nav ul[aria-expanded="true"], .site-nav ul.open{display:flex; flex-direction:column; width:calc(100vw - 20px)}
  .nav-toggle{display:inline-flex; margin-right:8px; border:1px solid rgba(255,255,255,.12); width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.04)}
  .site-nav{display:flex; align-items:center; justify-content:flex-end}
}