/* ============================================================
   TECHQRA — Fintech Infrastructure Solutions
   Design system
   ============================================================ */

:root {
  /* Brand */
  --brand:        #3a5fc4;
  --brand-600:    #2e4ba0;   /* logo blue */
  --brand-700:    #243a82;
  --brand-ink:    #0e1437;   /* deep navy */
  --indigo:       #5b5be0;
  --violet:       #7a5cf0;
  --accent:       #8fd16a;   /* soft green */

  /* Neutrals */
  --ink:          #0c1024;
  --body:         #3d4257;
  --muted:        #6b7187;
  --line:         #e7e9f1;
  --bg:           #ffffff;
  --bg-alt:       #f6f7fb;
  --bg-soft:      #eef1f9;

  /* Effects */
  --radius:       18px;
  --radius-lg:    26px;
  --shadow-sm:    0 1px 2px rgba(16,20,55,.06), 0 2px 8px rgba(16,20,55,.05);
  --shadow-md:    0 8px 24px rgba(16,20,55,.08), 0 2px 6px rgba(16,20,55,.05);
  --shadow-lg:    0 24px 60px rgba(16,20,55,.16);
  --ring:         0 0 0 4px rgba(58,95,196,.16);

  --maxw:         1180px;
  --ease:         cubic-bezier(.22,.61,.36,1);

  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display:      'Sora', 'Inter', sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 56px; }
body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { color: var(--ink); font-family: var(--display); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
::selection { background: rgba(91,91,224,.22); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: all .25s var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 6px 18px rgba(58,95,196,.35);
}
.btn--primary:hover { background: var(--brand-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(58,95,196,.42); }
.btn--ghost {
  background: rgba(255,255,255,.06); color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--bg-soft); transform: translateY(-2px); }
/* Ghost buttons on dark backgrounds (hero / cta band) */
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.08); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.16); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.2); padding: 7px 14px; border-radius: 999px;
  backdrop-filter: blur(8px); background: rgba(255,255,255,.05);
}
.kicker {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 16px;
}
.kicker--light { color: #9fb4ec; }
.grad-text {
  background: linear-gradient(100deg, #a9b8ff 0%, #c9b2ff 45%, #8fd16a 110%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.muted { color: var(--muted); }
.center { margin-left: auto; margin-right: auto; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: all .3s var(--ease);
  padding: 14px 0;
}
.nav.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--line);
  padding: 9px 0;
}
.nav__inner { display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; letter-spacing: .04em; font-size: 21px; color: #fff; }
.nav.scrolled .brand { color: var(--brand-600); }
.brand__mark { color: var(--accent); display: inline-flex; }
.nav.scrolled .brand__mark { color: var(--brand); }
.brand__word { line-height: 1; }

/* ---- Logo image (light = white letters for dark bg, dark = grey letters for white bg) ---- */
.brand__logo { height: 27px; width: auto; display: block; }
.brand__logo--dark { display: none; }
.nav.scrolled .brand__logo--light { display: none; }
.nav.scrolled .brand__logo--dark { display: block; }
.brand--footer .brand__logo { height: 30px; }
@media (max-width: 480px) { .brand__logo { height: 24px; } }

.nav__links { display: flex; align-items: center; gap: 22px; margin-left: 10px; }
.nav__links a {
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,.85);
  position: relative; transition: color .2s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--accent); transition: width .25s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
.nav.scrolled .nav__links a { color: var(--body); }
.nav.scrolled .nav__links a:hover { color: var(--brand-600); }
.nav.scrolled .nav__links a::after { background: var(--brand); }

/* ---- Q — Quantum & Quality nav badge (glyph only) ---- */
.nav__q { display: inline-flex; align-items: center; }
.nav__q::after { display: none !important; }
.nav__q-badge {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1; color: var(--brand-ink);
  background: linear-gradient(140deg, #b6e892 0%, var(--accent) 52%, #6fc049 100%);
  box-shadow: 0 4px 12px rgba(111,192,73,.4), inset 0 0 0 1px rgba(255,255,255,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.nav__q:hover .nav__q-badge {
  transform: translateY(-1px); filter: saturate(1.12);
  box-shadow: 0 7px 18px rgba(111,192,73,.5), 0 0 0 4px rgba(143,209,106,.2), inset 0 0 0 1px rgba(255,255,255,.4);
}

.nav__cta { display: flex; gap: 10px; margin-left: auto; }
.nav .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.nav.scrolled .btn--ghost { color: var(--ink); border-color: var(--line); background: #fff; }

.nav__burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; width: 30px; height: 24px; position: relative; }
.nav__burger span { position: absolute; left: 0; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: all .3s var(--ease); }
.nav.scrolled .nav__burger span { background: var(--ink); }
.nav__burger span:nth-child(1) { top: 2px; }
.nav__burger span:nth-child(2) { top: 11px; }
.nav__burger span:nth-child(3) { top: 20px; }
.nav__burger.open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column; gap: 4px;
  background: #fff; border-top: 1px solid var(--line);
  padding: 14px 28px 22px; box-shadow: var(--shadow-md);
}
.mobile-menu a { padding: 12px 4px; font-weight: 500; color: var(--body); border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 14px; }
.mobile-menu.open { display: flex; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 80% -10%, #2b3aa0 0%, #141a45 45%, #0b1030 100%);
  padding: 128px 0 0;
  color: #fff;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.hero__glow--1 { width: 540px; height: 540px; top: -120px; right: -80px; background: radial-gradient(circle, #5b5be0, transparent 70%); }
.hero__glow--2 { width: 480px; height: 480px; bottom: -160px; left: -120px; background: radial-gradient(circle, #7a5cf0, transparent 70%); opacity: .4; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
}
.hero__inner {
  position: relative; z-index: 1; text-align: center; max-width: 880px;
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 12px;
}
.hero__title {
  color: #fff; font-size: clamp(2.3rem, min(5.7vw, 8.4vh), 4.6rem); margin: 16px 0 16px;
  letter-spacing: -.03em; font-weight: 800; line-height: 1.05;
}
.hero__lead { font-size: clamp(1.02rem, 1.9vw, 1.26rem); color: rgba(255,255,255,.8); max-width: 620px; margin: 0 auto 22px; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__tags {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px;
}
.hero__tags span {
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.82);
  padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

.hero__stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 0;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-bottom: none;
}
.stat { background: rgba(12,16,40,.55); backdrop-filter: blur(6px); padding: 26px 22px; text-align: center; }
.stat__num { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: #fff; letter-spacing: -.02em; }
.stat__label { font-size: 14px; color: rgba(255,255,255,.66); margin-top: 8px; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.strip { background: var(--brand-ink); color: #fff; padding: 26px 0; }
.strip .container { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.strip__label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; }
.strip__items { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-weight: 600; font-size: 15.5px; color: rgba(255,255,255,.9); }
.strip__items .dot { color: var(--accent); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 66px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--brand-ink); color: #fff; position: relative; overflow: hidden; }
.section--dark .section__title { color: #fff; }

.section__head { max-width: 720px; margin: 0 auto 38px; text-align: center; }
.section__title { font-size: clamp(2rem, 4vw, 3rem); }
.section__lead { font-size: 1.18rem; color: var(--muted); margin-top: 18px; }
.section--dark .section__lead { color: rgba(255,255,255,.7); }
.section__lead.center { max-width: 620px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-2--top { align-items: start; }
.grid-2 .section__lead { font-size: 1.12rem; color: var(--body); margin: 18px 0; }

/* ---------- About ---------- */
.about-cards { display: grid; gap: 16px; }
.mini-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow-sm); transition: all .3s var(--ease);
}
.mini-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d7dcf0; }
.mini-card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.mini-card p { color: var(--muted); font-size: 15.5px; }

/* ---------- Vizyon / Misyon ---------- */
.vm-head { text-align: center; margin-bottom: 56px; }
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vm-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: 420px; display: flex; align-items: flex-end;
  background: radial-gradient(120% 100% at 30% 0%, #243a82, #0b1030);
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vm-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--brand), var(--violet), var(--accent));
}
.vm-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.vm-card__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: center 36%;
  mix-blend-mode: screen; filter: saturate(1.12) brightness(1.06);
  transition: transform .6s var(--ease);
}
.vm-card:hover .vm-card__bg { transform: scale(1.05); }
/* Misyon görseli: üstten kırpıp yukarı al ki MISSION yazısı metnin üstünde kalsın */
.vm-card:nth-child(2) .vm-card__bg { transform: scale(1.24) translateY(-12%); }
.vm-card:nth-child(2):hover .vm-card__bg { transform: scale(1.29) translateY(-12%); }
.vm-card__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, #0b1030 16%, rgba(11,16,48,.92) 44%, rgba(11,16,48,.45) 70%, rgba(11,16,48,.12) 100%);
}
.vm-card__body { position: relative; z-index: 2; padding: 36px 40px 40px; }
.vm-card__body h3 { color: #fff; font-size: 1.6rem; margin-bottom: 12px; text-shadow: 0 2px 10px rgba(11,16,48,.7); }
.vm-card__body p { color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(11,16,48,.8); }

@media (max-width: 620px) {
  .vm-card { min-height: 360px; }
  .vm-card__bg { object-position: center 26%; }
  .vm-card__scrim { background: linear-gradient(to top, #0b1030 30%, rgba(11,16,48,.94) 56%, rgba(11,16,48,.55) 78%, rgba(11,16,48,.15) 100%); }
  .vm-card__body { padding: 28px 28px 32px; }
}

/* ---------- Cards grid (Ürünler) ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 30px; box-shadow: var(--shadow-sm);
  transition: all .35s var(--ease); position: relative; overflow: hidden;
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 120% at 0% 0%, rgba(58,95,196,.06), transparent 50%);
  opacity: 0; transition: opacity .35s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #d2d8f2; }
.card:hover::after { opacity: 1; }
.card__icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; margin-bottom: 20px;
  background: linear-gradient(135deg, #eef2ff, #e6ecff); color: var(--brand);
  border: 1px solid #dbe2fb;
}
.card__icon svg { width: 26px; height: 26px; }
.card:hover .card__icon { transform: scale(1.06) rotate(-2deg); transition: transform .35s var(--ease); }
.card h3 { font-size: 1.22rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card__more {
  display: inline-flex; align-items: center; margin-top: 16px;
  font-weight: 600; font-size: 14.5px; color: var(--brand);
  transition: gap .25s var(--ease), color .2s; gap: 0;
}
.card:hover .card__more { color: var(--brand-600); gap: 4px; }
/* stretched link: whole card clickable */
.card__more::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.card--cta {
  background: linear-gradient(150deg, var(--brand-600), var(--brand-ink));
  color: #fff; border: none; display: flex; flex-direction: column; justify-content: center;
}
.card--cta h3 { color: #fff; }
.card--cta p { color: rgba(255,255,255,.78); margin-bottom: 22px; }
.card--cta .btn { align-self: flex-start; background: #fff; color: var(--brand-600); box-shadow: none; }
.card--cta .btn:hover { background: var(--accent); color: var(--brand-ink); }

/* ---------- Solutions (dark) ---------- */
.section--dark::before {
  content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,91,224,.35), transparent 70%);
  top: -200px; right: -150px; filter: blur(60px);
}
.solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 1; }
.solution {
  position: relative;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  padding: 38px 32px; background: rgba(255,255,255,.03);
  transition: all .35s var(--ease);
}
.solution { overflow: hidden; }
.solution:hover { background: rgba(255,255,255,.07); transform: translateY(-5px); border-color: rgba(143,209,106,.4); }
/* cursor-follow spotlight */
.solution::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, -20%), rgba(143,209,106,.16), rgba(91,91,224,.12) 42%, transparent 72%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.solution:hover::before { opacity: 1; }
/* top accent line grows on hover */
.solution::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.solution:hover::after { transform: scaleX(1); }
.solution__ic, .solution h3, .solution p, .solution__more { position: relative; z-index: 1; }
.solution__ic {
  width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; margin-bottom: 26px;
  color: #d8f1c6;
  background: linear-gradient(150deg, rgba(143,209,106,.2), rgba(91,91,224,.16));
  border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .3s var(--ease);
}
.solution__ic svg { width: 27px; height: 27px; }
.solution:hover .solution__ic {
  transform: translateY(-2px) scale(1.06); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(143,209,106,.5), inset 0 1px 0 rgba(255,255,255,.14);
}
.solution h3 { color: #fff; font-size: 1.35rem; margin-bottom: 12px; letter-spacing: -.01em; }
.solution p { color: rgba(255,255,255,.72); font-size: 15.5px; }
.solution__more {
  display: inline-block; margin-top: 18px; font-weight: 600; font-size: 14px;
  color: var(--accent); transition: opacity .2s;
}
.solution:hover .solution__more { opacity: .85; }
.solution__more::after { content: ''; position: absolute; inset: 0; z-index: 2; }

/* ---------- Why grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 38px 32px; box-shadow: var(--shadow-sm); transition: all .35s var(--ease);
}
.why:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.why__num {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--violet)); margin-bottom: 20px;
  box-shadow: 0 8px 18px rgba(58,95,196,.32);
}
.why h3 { font-size: 1.3rem; margin-bottom: 12px; }
.why p { color: var(--muted); }

.techbar {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 56px;
  padding-top: 48px; border-top: 1px dashed var(--line);
}
.techbar span {
  font-size: 14px; font-weight: 600; color: var(--brand-600);
  padding: 8px 18px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid #e0e5f6;
}

/* ---------- Capabilities ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 34px; box-shadow: var(--shadow-sm);
  transition: all .3s var(--ease); display: flex; gap: 18px; align-items: flex-start;
}
.cap__ic {
  flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef2ff, #e6ecff); border: 1px solid #dbe2fb; color: var(--brand);
  transition: transform .3s var(--ease);
}
.cap__ic svg { width: 25px; height: 25px; }
.cap:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cap:hover .cap__ic { transform: scale(1.07) rotate(-2deg); }
.cap h3 { font-size: 1.28rem; margin-bottom: 10px; }
.cap p { color: var(--muted); }

/* ---------- Value props ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; z-index: 1; }
.value {
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  padding: 36px 28px; background: rgba(255,255,255,.03); transition: all .35s var(--ease);
}
.value:hover { background: rgba(255,255,255,.07); transform: translateY(-5px); }
.value__metric {
  font-family: var(--display); font-weight: 800; font-size: 2.8rem; letter-spacing: -.03em;
  background: linear-gradient(120deg, #fff, #b9c6ff); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px;
}
.value--accent { border-color: rgba(143,209,106,.45); background: rgba(143,209,106,.08); }
.value--accent .value__metric { background: linear-gradient(120deg, #c7f0a8, #8fd16a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.value h3 { color: #fff; font-size: 1.18rem; margin-bottom: 10px; }
.value p { color: rgba(255,255,255,.7); font-size: 15px; }

/* ---------- Process ---------- */
.process-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.process {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px; transition: all .3s var(--ease);
}
.process:hover { background: #fff; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.process h3 { font-size: 1.12rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.process h3::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); }
.process p { color: var(--muted); font-size: 15px; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #2b3aa0 0%, #141a45 55%, #0b1030 100%);
  padding: 52px 0;
}
.cta-band__bg { position: absolute; inset: 0; z-index: 0; }
.cta-band__inner { position: relative; z-index: 1; max-width: 760px; }
.cta-band h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.cta-band > .container > p, .cta-band__inner p { color: rgba(255,255,255,.78); font-size: 1.18rem; margin-bottom: 40px; }
.cta-band__contacts { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.contact-pill {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 18px 26px; min-width: 200px; transition: all .3s var(--ease);
  backdrop-filter: blur(8px);
}
.contact-pill:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); border-color: rgba(143,209,106,.5); }
.contact-pill__label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.contact-pill__val { font-weight: 700; font-size: 1.05rem; color: #fff; font-family: var(--display); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #070b22; color: rgba(255,255,255,.7); padding: 70px 0 30px; }
.footer__inner { display: grid; grid-template-columns: 1.3fr 2fr; gap: 60px; }
.brand--footer { color: #fff; margin-bottom: 16px; }
.brand--footer .brand__mark { color: var(--accent); }
.footer__brand p { font-size: 15px; max-width: 320px; color: rgba(255,255,255,.55); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer__cols h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.footer__cols a { display: block; font-size: 15px; color: rgba(255,255,255,.6); padding: 6px 0; transition: color .2s; }
.footer__cols a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 50px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 14px; color: rgba(255,255,255,.45);
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* nav: drop CTA buttons first (≤1080), collapse links to burger only when truly narrow (≤858) */
@media (max-width: 1080px) { .nav__cta { display: none; } }
@media (max-width: 858px) { .nav__links { display: none; } .nav__burger { display: block; } }

@media (max-width: 980px) {
  .grid-2, .vm-grid, .footer__inner { grid-template-columns: 1fr; gap: 36px; }
  .about-row {
    grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; scrollbar-width: none;
  }
  .about-row::-webkit-scrollbar { display: none; }
  .about-row .mini-card { scroll-snap-align: start; }
  .arch-panel { min-height: 300px; }
  .cards-grid, .solutions, .why-grid { grid-template-columns: 1fr 1fr; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .cap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding: 76px 0; }
  .container { padding: 0 20px; }
  .cards-grid, .solutions, .why-grid, .value-grid, .process-list { grid-template-columns: 1fr; }
  .hero { padding-top: 130px; }
  .hero__stats { grid-template-columns: 1fr 1fr; margin-top: 60px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .vm-card, .card, .why, .solution { padding: 30px 26px; }
  .strip .container { gap: 14px; }
}

/* ============================================================
   ENHANCEMENTS — Q brand, motion, imagery
   ============================================================ */

/* ---- Hakkımızda floating cube (transparent) ---- */
.cube-float { position: relative; display: grid; place-items: center; min-height: 380px; }
.cube-float::before {
  content: ''; position: absolute; width: 72%; height: 64%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(91,91,224,.2), transparent 70%); filter: blur(46px);
}
.cube-float img {
  position: relative; z-index: 1; width: min(86%, 430px); height: auto;
  animation: floatA 11s ease-in-out infinite;
}

/* ---- Hakkımızda cube panel (legacy) ---- */
.arch-panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); min-height: 380px;
  background: radial-gradient(120% 120% at 22% 8%, #2b3aa0, #141a45 58%, #0b1030);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,.08);
}
.arch-panel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(78% 78% at 50% 45%, #000, transparent 76%);
  mask-image: radial-gradient(78% 78% at 50% 45%, #000, transparent 76%);
}
.arch-panel__glow { position: absolute; z-index: 0; width: 320px; height: 320px; border-radius: 50%; filter: blur(70px); background: radial-gradient(circle, #5b5be0, transparent 70%); opacity: .5; }
.arch-panel__img { position: relative; z-index: 1; width: 88%; max-width: 420px; mix-blend-mode: screen; filter: saturate(1.08) brightness(1.05); animation: floatA 11s ease-in-out infinite; }

.about-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }

/* ---- Section rhythm: alternating header alignment ---- */
.section__head--left { text-align: left; margin-left: 0; margin-right: auto; max-width: 680px; }
.section__head--left .section__lead { margin-left: 0; }

/* ---- Decorative backgrounds (break visual monotony) ---- */
.section--orb { position: relative; overflow: hidden; }
.section--orb > .container { position: relative; z-index: 1; }
.section--orb::before {
  content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(91,91,224,.10), transparent 70%);
  top: -200px; right: -160px;
}
.section--orb-left::before { left: -180px; right: auto; top: auto; bottom: -220px; background: radial-gradient(circle, rgba(122,92,240,.09), transparent 70%); }

.section--dots { position: relative; }
.section--dots > .container { position: relative; z-index: 1; }
.section--dots::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(72% 70% at 82% 26%, #000, transparent 72%);
  mask-image: radial-gradient(72% 70% at 82% 26%, #000, transparent 72%);
}

/* ---- "Neden Techqra" editorial (asymmetric) layout ---- */
.why-more { margin-top: 52px; text-align: center; }
.why-more p { color: var(--muted); margin-bottom: 18px; font-size: 1.05rem; }
.why-editorial { display: grid; grid-template-columns: 360px 1fr; gap: 60px; align-items: start; }
.why-editorial__head { position: sticky; top: 110px; }
.why-editorial__head .section__title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.why-editorial__head .section__lead { margin-top: 16px; font-size: 1.08rem; }
.why-list { display: grid; }
.why-item { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid var(--line); align-items: start; transition: transform .3s var(--ease); }
.why-item:first-child { border-top: none; padding-top: 4px; }
.why-item:hover { transform: translateX(6px); }
.why-item__num {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: #fff;
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--violet)); box-shadow: 0 10px 22px rgba(58,95,196,.3);
}
.why-item h3 { font-size: 1.35rem; margin-bottom: 8px; }
.why-item p { color: var(--muted); }

@media (max-width: 900px) {
  .why-editorial { grid-template-columns: 1fr; gap: 36px; }
  .why-editorial__head { position: static; }
}
@media (max-width: 560px) {
  .why-item { grid-template-columns: 1fr; gap: 12px; }
  .why-item__num { width: 48px; height: 48px; font-size: 1.3rem; }
}

/* ---- Scroll progress bar (injected by JS) ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 200;
  background: linear-gradient(90deg, var(--brand), var(--violet) 55%, var(--accent));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---- Q accent in wordmark ---- */
.brand__word .q { color: var(--accent); }
.nav.scrolled .brand__word .q { color: var(--accent); }

/* ---- Language toggle (TR / EN) ---- */
.lang-toggle { display: inline-flex; align-items: center; height: 34px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; }
.nav.scrolled .lang-toggle { border-color: var(--line); }
.nav__inner > .lang-toggle { margin-left: auto; }
.nav__inner > .lang-toggle + .nav__cta { margin-left: 12px; }
.lang-toggle button {
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; padding: 0 13px; height: 100%;
  background: transparent; border: 0; color: rgba(255,255,255,.82); cursor: pointer; transition: background .2s, color .2s;
}
.nav.scrolled .lang-toggle button { color: var(--body); }
.lang-toggle button.active { background: var(--brand); color: #fff; }
.mobile-menu > .lang-toggle { align-self: flex-start; margin: 2px 0 14px; border-color: var(--line); }
.mobile-menu > .lang-toggle button { color: var(--body); }
@media (max-width: 858px) {
  .nav__inner > .lang-toggle { display: inline-flex; margin-left: auto; height: 30px; }
  .nav__inner > .lang-toggle button { padding: 0 11px; font-size: 12px; }
  .nav__inner > .lang-toggle + .nav__burger { margin-left: 14px; }
  .mobile-menu > .lang-toggle { display: none; }
}

/* ---- Nav dropdown (sub-pages on hover) ---- */
.nav__group { position: relative; display: inline-flex; align-items: center; }
.nav__caret { width: 13px; height: 13px; margin-left: 5px; transition: transform .25s var(--ease); }
.nav__group:hover .nav__caret, .nav__group:focus-within .nav__caret { transform: rotate(180deg); }
.nav__dropdown {
  position: absolute; top: 100%; left: 50%; min-width: 340px; margin-top: 10px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease); z-index: 130;
}
.nav__dropdown::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.nav__group:hover .nav__dropdown, .nav__group:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__dd-item { display: block; padding: 11px 14px; border-radius: 10px; transition: background .18s; }
.nav__dd-item::after { display: none !important; }
.nav__dd-item:hover { background: var(--bg-soft); }
.nav__dd-item strong { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.nav__dd-item span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* child sub-product item (IP/GPRS POS Gateway under QTN POS Networking) */
.nav__dd-item--child { margin-left: 14px; padding-left: 16px; position: relative; }
.nav__dd-item--child::before {
  content: ""; position: absolute; left: 2px; top: 12px; bottom: 12px; width: 1px;
  background: var(--line);
}
.nav__dd-item--child strong { font-weight: 600; }
.nav__dd-item--child strong::before {
  content: "↳"; color: var(--brand); margin-right: 6px; font-weight: 700;
}

/* Mobile: sub-page list */
.mobile-menu__sub { display: flex; flex-direction: column; }
.mobile-menu__sub a { padding: 10px 4px 10px 20px; font-size: 14.5px; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 500; }

/* ---- Animated gradient text shimmer ---- */
.grad-text {
  background-size: 220% 100%;
  animation: shimmer 7s linear infinite;
}
.grad-text--ink {
  background: linear-gradient(100deg, var(--brand) 0%, var(--violet) 45%, var(--brand) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes shimmer { to { background-position: 220% 0; } }

/* ---- Hero flowing gradient (Stripe-style) ---- */
.hero__aurora {
  position: absolute; inset: -18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 46% at 16% 22%, rgba(91,91,224,.62), transparent 62%),
    radial-gradient(40% 52% at 84% 14%, rgba(122,92,240,.55), transparent 62%),
    radial-gradient(46% 56% at 78% 84%, rgba(56,140,210,.52), transparent 62%),
    radial-gradient(42% 52% at 20% 90%, rgba(143,209,106,.3), transparent 62%);
  filter: blur(64px); opacity: .92; animation: heroAurora 22s ease-in-out infinite;
}
@keyframes heroAurora {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(4%, -3%) scale(1.08); }
  50% { transform: translate(-3%, 4%) scale(1.05); }
  75% { transform: translate(3%, 2%) scale(1.1); }
}

/* ---- Hero network canvas ---- */
.hero__net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .55; }

/* ---- Full-bleed statement band (diagonal, animated gradient) ---- */
.statement {
  position: relative; overflow: hidden; color: #fff; background: #0b1030;
  padding: clamp(60px, 7.5vw, 104px) 0;
}
.statement__bg {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 50% at 20% 26%, rgba(91,91,224,.7), transparent 60%),
    radial-gradient(40% 55% at 82% 18%, rgba(122,92,240,.62), transparent 60%),
    radial-gradient(46% 56% at 74% 86%, rgba(56,140,210,.55), transparent 62%),
    radial-gradient(40% 50% at 24% 90%, rgba(143,209,106,.32), transparent 62%);
  filter: blur(60px); animation: heroAurora 20s ease-in-out infinite;
}
.statement__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(100% 78% at 50% 50%, #000, transparent 76%);
  mask-image: radial-gradient(100% 78% at 50% 50%, #000, transparent 76%);
}
.statement__inner { position: relative; z-index: 1; text-align: center; max-width: 820px; }
.statement__inner .eyebrow { color: rgba(255,255,255,.82); }
.statement h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 22px 0 18px; letter-spacing: -.025em; font-weight: 800; }
.statement p { color: rgba(255,255,255,.82); font-size: 1.15rem; max-width: 620px; margin: 0 auto 34px; }
.statement__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.statement__chips span {
  font-size: 13.5px; font-weight: 600; color: #fff; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); backdrop-filter: blur(8px);
}
/* Second band — cooler theme + top diagonal */
.statement--alt { }
.statement__bg--alt {
  background:
    radial-gradient(36% 50% at 18% 24%, rgba(56,140,210,.62), transparent 60%),
    radial-gradient(40% 54% at 82% 18%, rgba(46,170,160,.55), transparent 60%),
    radial-gradient(46% 56% at 74% 84%, rgba(91,91,224,.5), transparent 62%),
    radial-gradient(42% 52% at 24% 90%, rgba(143,209,106,.34), transparent 62%);
}

/* ---- Animate dark-section glow ---- */
.section--dark::before { animation: floatB 26s ease-in-out infinite; }

/* ---- Diagonal section cuts (Stripe-style flowing rhythm) ---- */
.diag { margin: -1px 0; }
.diag--rev { margin: -1px 0; }
.diag-top { margin-top: -1px; }

/* #deger sits beneath a dark statement band — keep the diagonal bottom but flatten the
   top so it no longer reveals the white page background. The two dark sections meet
   seamlessly and are separated by an elegant luminous seam instead. */

/* ---- Elegant luminous diagonal seam between two dark sections ---- */
.vseam { position: relative; height: 0; z-index: 4; pointer-events: none; }
.vseam::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  transform: none;
  background: linear-gradient(90deg,
    transparent 4%, rgba(125,145,255,0) 8%, rgba(125,145,255,.42) 32%,
    rgba(176,154,255,.78) 50%, rgba(125,145,255,.42) 68%, rgba(125,145,255,0) 92%, transparent 96%);
}
.vseam::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: -11px; height: 22px;
  transform: none;
  background: radial-gradient(58% 100% at 50% 50%, rgba(120,135,255,.28), transparent 72%);
  filter: blur(7px);
}
@media (max-width: 858px) { .vseam::before { transform: none; } .vseam::after { transform: none; } }

/* ---- Ürünler bento layout ---- */
.cards-grid--bento .card--wide { grid-column: span 2; display: flex; flex-direction: column; }
.card--wide p { font-size: 1.02rem; max-width: 580px; }
/* Öne çıkan ürün kartı — diğerlerinden hafif ama şık biçimde ayrışır */
.card--wide {
  background: linear-gradient(158deg, #f3f6ff 0%, #ffffff 58%);
  border-color: #d3ddfa;
  box-shadow: 0 22px 50px -30px rgba(58,95,196,.4), var(--shadow-sm);
}
.card--wide::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--brand), var(--violet) 55%, var(--accent));
}
.card--wide:hover { border-color: var(--brand); }
.card--wide .card__icon {
  background: linear-gradient(150deg, var(--brand), var(--brand-700)); color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(46,75,160,.6);
}
.card__badge {
  position: absolute; top: 22px; right: 22px; z-index: 3;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--violet)); border: 1px solid transparent;
  padding: 6px 13px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(91,91,224,.6);
}
.card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.card__chips span {
  font-size: 12.5px; font-weight: 600; color: var(--brand-600);
  background: var(--bg-soft); border: 1px solid #e0e5f6; padding: 6px 12px; border-radius: 999px;
}
.card--wide .card__more { margin-top: auto; padding-top: 20px; }
.card--banner {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 28px; text-align: left; padding: 30px 40px;
}
.card--banner p { margin-bottom: 0; color: rgba(255,255,255,.78); }
.card--banner .btn { flex: none; }
@media (max-width: 900px) {
  .cards-grid--bento .card--wide { grid-column: 1 / -1; }
  .card--banner { flex-direction: column; align-items: flex-start; }
}

/* ---- Contact form (İletişim) ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; text-align: left; max-width: var(--maxw); }
.contact-info .eyebrow { color: rgba(255,255,255,.82); }
.contact-info h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 16px 0 14px; }
.contact-info > p { color: rgba(255,255,255,.8); font-size: 1.08rem; margin-bottom: 28px; max-width: 460px; }
.contact-info .cta-band__contacts { justify-content: flex-start; }
.contact-card {
  background: #fff; border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow-lg); text-align: left;
}
.contact-card h3 { font-size: 1.05rem; margin-bottom: 11px; color: var(--ink); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.field label { font-size: 12px; font-weight: 600; color: var(--body); }
.field input, .field textarea {
  font: inherit; font-size: 14px; padding: 7px 11px; width: 100%;
  border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); background: #fff; }
.field textarea { resize: vertical; min-height: 58px; }
.contact-form .btn { width: 100%; margin-top: 2px; padding: 10px 18px; font-size: 14.5px; }
.contact-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__status { margin: 14px 0 0; font-size: 14px; font-weight: 600; min-height: 1.1em; }
.contact-form__status.ok { color: #2f7d3a; }
.contact-form__status.err { color: #c0392b; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- 3D vector spot illustrations ---- */
.spot { display: grid; place-items: center; }

/* spot placements (floating decorative 3D spots) */
.hero__spot { position: absolute; z-index: 1; top: 70px; right: -20px; width: 300px; opacity: .85; pointer-events: none; animation: floatA 12s ease-in-out infinite; }
.hero__inner { z-index: 2; }
.sec-spot { position: absolute; z-index: 0; width: 230px; opacity: .5; pointer-events: none; animation: floatB 18s ease-in-out infinite; }
.sec-spot--tr { top: 44px; right: 40px; }
.sec-spot--bl { bottom: 50px; left: 40px; }
.section--dark > .container { position: relative; z-index: 1; }
.subhero__spot { position: absolute; z-index: 1; top: 50%; right: 5%; transform: translateY(-42%); width: 300px; opacity: .92; pointer-events: none; animation: floatA 11s ease-in-out infinite; }
.subhero__inner { position: relative; z-index: 2; }
.cta-spot { position: absolute; z-index: 0; bottom: 26px; right: 46px; width: 215px; opacity: .55; pointer-events: none; animation: floatB 16s ease-in-out infinite; }
.cta-band__inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero__spot, .sec-spot, .subhero__spot, .cta-spot { animation: none !important; } }
@media (max-width: 1024px) { .subhero__spot { display: none; } }
@media (max-width: 980px) { .hero__spot, .sec-spot, .cta-spot { display: none; } }
.spot--iso svg { width: min(88%, 360px); height: auto; animation: floatA 9s ease-in-out infinite; filter: drop-shadow(0 26px 44px rgba(58,95,196,.3)); }
.process-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 900px) { .process-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-row { grid-template-columns: 1fr; } .spot--iso svg { width: 66%; } }

@media (prefers-reduced-motion: reduce) {
  .hero__aurora, .statement__bg, .section--dark::before { animation: none !important; }
}
@media (max-width: 620px) {
  .statement { padding: 80px 0; }
  .diag, .diag--rev, .diag-top { margin: 0; }
}
/* float the glows for life */
.hero__glow--1 { animation: floatA 16s ease-in-out infinite; }
.hero__glow--2 { animation: floatB 20s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, 40px); } }
@keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, -30px); } }

/* ============================================================
   MARQUEE (infinite scrolling strips)
   ============================================================ */
.marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track--reverse { animation-direction: reverse; animation-duration: 44s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* strip marquee items */
.strip .marquee { margin-top: 18px; }
.strip .marquee__track span { font-weight: 600; font-size: 16px; color: rgba(255,255,255,.92); white-space: nowrap; }
.strip .marquee__track .dot { color: var(--accent); font-size: 10px; }

/* badges marquee (Neden Techqra) */
.marquee--badges { margin-top: 52px; padding-top: 44px; border-top: 1px dashed var(--line); }
.marquee--badges .marquee__track span {
  font-size: 14px; font-weight: 600; color: var(--brand-600); white-space: nowrap;
  padding: 8px 18px; border-radius: 999px; background: var(--bg-soft); border: 1px solid #e0e5f6;
}

/* ============================================================
   Q BAND — Quantum & Quality
   ============================================================ */
.qband {
  position: relative; overflow: hidden; color: #fff; padding: 110px 0;
  background: radial-gradient(130% 130% at 15% 0%, #243a82 0%, #131a47 50%, #0b1030 100%);
}
/* ---- Compact clickable transition band -> q.html ---- */
.qband:has(.qband__cta) { padding: 76px 0; }
.qband__cta {
  position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(22px, 4vw, 52px);
  text-decoration: none; padding: clamp(26px, 3vw, 40px) clamp(26px, 3.4vw, 48px);
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); backdrop-filter: blur(8px);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.qband__cta:hover { transform: translateY(-4px); border-color: rgba(143,209,106,.4); background: rgba(255,255,255,.07); box-shadow: 0 30px 60px -34px rgba(0,0,0,.6); }
.qband__cta-glyph { flex: none; display: grid; place-items: center; }
.qband__cta-glyph svg { filter: drop-shadow(0 12px 30px rgba(122,92,240,.45)); transition: transform .4s var(--ease); }
.qband__cta:hover .qband__cta-glyph svg { transform: rotate(-6deg) scale(1.05); }
.qband__cta-text { flex: 1 1 auto; min-width: 0; }
.qband__cta-text .kicker { color: rgba(201,178,255,.9); }
.qband__cta-text .qband__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin: 8px 0 12px; }
.qband__cta-text p { color: rgba(255,255,255,.76); font-size: 1.05rem; max-width: 560px; }
.qband__cta-btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-weight: 700; font-size: 1rem; color: var(--brand-ink);
  background: linear-gradient(140deg, #b6e892 0%, var(--accent) 52%, #6fc049 100%);
  padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(111,192,73,.35); transition: gap .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.qband__cta:hover .qband__cta-btn { gap: 13px; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(111,192,73,.5); }
@media (max-width: 820px) {
  .qband__cta { flex-direction: column; text-align: center; gap: 22px; }
  .qband__cta-text .qband__title { justify-content: center; }
  .qband__cta-text p { margin: 0 auto; }
}
.qband__bg { position: absolute; inset: 0; z-index: 0; }
.qband__aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(122,92,240,.45), transparent 70%),
    radial-gradient(35% 35% at 80% 20%, rgba(91,91,224,.4), transparent 70%),
    radial-gradient(45% 45% at 70% 80%, rgba(143,209,106,.28), transparent 70%);
  filter: blur(40px); animation: aurora 18s ease-in-out infinite;
}
@keyframes aurora {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(4%, -3%) scale(1.08); }
  66% { transform: translate(-3%, 4%) scale(1.04); }
}
.qband__rings { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); }
.qband__rings span {
  position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.qband__rings span:nth-child(1) { width: 360px; height: 360px; animation: pulse 6s ease-in-out infinite; }
.qband__rings span:nth-child(2) { width: 540px; height: 540px; animation: pulse 6s ease-in-out infinite .8s; }
.qband__rings span:nth-child(3) { width: 720px; height: 720px; animation: pulse 6s ease-in-out infinite 1.6s; }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

.qband__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
.qband__glyph { display: grid; place-items: center; }
.qband__glyph svg { filter: drop-shadow(0 16px 40px rgba(122,92,240,.45)); animation: floatA 14s ease-in-out infinite; }
.qband__content h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 18px; }
.qband__title { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.qband__divider { width: 2px; height: 1.05em; border-radius: 2px; background: linear-gradient(var(--violet), var(--accent)); opacity: .7; flex: none; }
.qband__lead { color: rgba(255,255,255,.78); font-size: 1.12rem; max-width: 620px; margin-bottom: 36px; }
.qband__lead strong { color: var(--accent); font-weight: 700; }

.q--xl {
  background: linear-gradient(120deg, #a9b8ff, #c9b2ff 50%, #8fd16a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.qband__pills { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qpill {
  display: flex; gap: 18px; align-items: flex-start;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 26px 26px; backdrop-filter: blur(8px);
  transition: all .35s var(--ease);
}
.qpill:hover { background: rgba(255,255,255,.09); transform: translateY(-4px); border-color: rgba(143,209,106,.4); }
.qpill__q {
  flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.7rem;
  background: linear-gradient(135deg, rgba(169,184,255,.25), rgba(143,209,106,.22));
  border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.qpill h3 { color: #fff; font-size: 1.25rem; margin-bottom: 8px; }
.qpill p { color: rgba(255,255,255,.72); font-size: 15px; }
.qpill__art {
  flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(169,184,255,.18), rgba(143,209,106,.16));
  border: 1px solid rgba(255,255,255,.2);
}
.qpill__art svg { width: 42px; height: 42px; }
.qa-spin, .qa-orbit, .qa-needle { transform-box: view-box; transform-origin: 50% 50%; }
.qa-spin  { animation: qaSpin 16s linear infinite; }
.qa-orbit { animation: qaOrbit 6s linear infinite; }
.qa-needle{ animation: qaNeedle 5s ease-in-out infinite; }
@keyframes qaSpin  { to { transform: rotate(360deg); } }
@keyframes qaOrbit { to { transform: rotate(360deg); } }
@keyframes qaNeedle { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) {
  .qa-spin, .qa-orbit, .qa-needle { animation: none !important; }
}

/* ---- Subtle dot pattern for light sections (depth/imagery) ---- */
.section--alt { position: relative; }
.section--alt::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(58,95,196,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
}
.section--alt > .container { position: relative; z-index: 1; }

/* ---- Reduced motion: stop all the new animations ---- */
@media (prefers-reduced-motion: reduce) {
  .grad-text, .grad-text--ink, .hero__glow--1, .hero__glow--2,
  .marquee__track, .qband__aurora, .qband__rings span, .qband__glyph svg { animation: none !important; }
  .hero__net { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---- Responsive for Q band ---- */
@media (max-width: 980px) {
  .qband__inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .qband__glyph svg { width: 180px; height: 180px; }
  .qband__title { justify-content: center; }
  .qband__lead { margin-left: auto; margin-right: auto; }
  .qband__rings { display: none; }
}
@media (max-width: 620px) {
  .qband { padding: 76px 0; }
  .qband__pills { grid-template-columns: 1fr; }
  .qpill { text-align: left; }
}

/* ============================================================
   Q — dedicated immersive page (q.html)
   ============================================================ */
.qpage-main { background: var(--brand-ink); }
.qhero {
  position: relative; overflow: hidden; color: #fff;
  min-height: calc(100vh - 70px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 110px 22px 96px;
  background: radial-gradient(125% 95% at 50% 0%, #1b2560 0%, var(--brand-ink) 54%, #070b20 100%);
}
.qhero__aurora {
  position: absolute; inset: -25%; z-index: 0; pointer-events: none; filter: blur(64px);
  background:
    radial-gradient(34% 44% at 30% 30%, rgba(122,92,240,.5), transparent 60%),
    radial-gradient(40% 50% at 72% 26%, rgba(56,140,210,.45), transparent 62%),
    radial-gradient(46% 56% at 60% 82%, rgba(143,209,106,.3), transparent 64%);
  animation: heroAurora 22s ease-in-out infinite;
}
.qhero__rings { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); z-index: 0; pointer-events: none; }
.qhero__rings span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border: 1px solid rgba(159,180,255,.15); border-radius: 50%;
}
.qhero__rings span:nth-child(1) { width: 360px; height: 360px; animation: pulse 6s ease-in-out infinite; }
.qhero__rings span:nth-child(2) { width: 600px; height: 600px; animation: pulse 6s ease-in-out infinite .8s; }
.qhero__rings span:nth-child(3) { width: 860px; height: 860px; animation: pulse 6s ease-in-out infinite 1.6s; }
.qhero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 78%);
  mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 78%);
}
.qhero__inner { position: relative; z-index: 1; max-width: 900px; }
.qhero__glyph svg { width: clamp(118px, 17vw, 188px); height: auto; filter: drop-shadow(0 22px 54px rgba(122,92,240,.5)); animation: floatA 14s ease-in-out infinite; }
.qhero__kicker {
  display: inline-block; margin: 26px 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(201,178,255,.9);
}
.qhero__title {
  font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em;
  font-size: clamp(2.7rem, 8.5vw, 5.6rem); margin: 0 0 24px;
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3.2vw, 42px); flex-wrap: wrap;
}
.qhero__div { width: 3px; height: .82em; border-radius: 3px; background: linear-gradient(var(--violet), var(--accent)); opacity: .75; flex: none; }
.qhero__lead { color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.65; max-width: 660px; margin: 0 auto; }
.qhero__lead strong { color: var(--accent); font-weight: 700; }
.qhero__scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 1;
  color: rgba(255,255,255,.5); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.qhero__scroll svg { animation: qBob 1.8s ease-in-out infinite; }
@keyframes qBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* pillars + families on the dedicated page */
.qsection { background: var(--brand-ink); padding: 96px 0; position: relative; }
.qsection .section__title { color: #fff; }
.qsection .section__lead { color: rgba(255,255,255,.72); }
/* Ardışık koyu bölümleri ayırmak için hafif ton farkı + ince ayraç */
.qsection--alt { background: #1c2860; }
.qsection + .qsection { border-top: 1px solid rgba(255,255,255,.1); }
/* Koyu içerik bölümünü komşusundan ayıran açık panel tonu (Değer Önerileri vb.) */
.section--panel { background: #1c2860; border-top: 1px solid rgba(255,255,255,.1); }
.qpage-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.qfamilies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.qfam {
  text-align: center; padding: 38px 22px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.qfam:hover { transform: translateY(-5px); border-color: rgba(143,209,106,.4); background: rgba(255,255,255,.07); }
.qfam__code {
  font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: .02em;
  background: linear-gradient(120deg, #a9b8ff, #c9b2ff 55%, #8fd16a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.qfam__code b { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.qfam h3 { color: #fff; font-size: 1.05rem; margin: 12px 0 6px; }
.qfam p { color: rgba(255,255,255,.66); font-size: 14px; }
@media (max-width: 820px) {
  .qpage-pills { grid-template-columns: 1fr; }
  .qfamilies { grid-template-columns: 1fr; }
  .qhero { min-height: auto; padding: 96px 20px 84px; }
  .qhero__scroll { display: none; }
}

/* ============================================================
   Team / "Biz Kimiz" — Who we are
   ============================================================ */
.team-intro { margin-bottom: 56px; }
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.team-card {
  position: relative; text-align: center; padding: 36px 18px 30px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.team-card::after {
  content: ""; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 0; height: 2px; border-radius: 2px; background: var(--brand);
  transition: width .35s var(--ease); opacity: .85;
}
.team-card:hover {
  transform: translateY(-6px); border-color: transparent;
  box-shadow: 0 26px 54px -28px rgba(14,20,55,.45);
}
.team-card:hover::after { width: 34px; }

.team-card__avatar {
  width: 132px; height: 132px; margin: 0 auto 22px; border-radius: 50%;
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--brand) 0%, #2aa7e0 100%);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line), 0 16px 32px -18px rgba(58,95,196,.55);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.team-card:hover .team-card__avatar {
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--brand), 0 18px 36px -14px rgba(58,95,196,.7);
}
.team-card__avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1;
}
/* When a real photo <img> is present, hide the initials placeholder */
.team-card__avatar:has(img) { background: var(--bg-soft); }
.team-card__avatar:has(img) .team-card__initials { display: none; }
.team-card__initials {
  font-family: var(--display); font-weight: 700; font-size: 2.1rem; color: #fff;
  letter-spacing: .01em; user-select: none;
}
.team-card__name { font-size: 1.16rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -.01em; }
.team-card__role { font-size: .95rem; color: var(--muted); }

@media (max-width: 1080px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .team-card { padding: 28px 12px 24px; }
  .team-card__avatar { width: 110px; height: 110px; }
}
@media (max-width: 380px) { .team-card__avatar { width: 96px; height: 96px; } .team-card__initials { font-size: 1.7rem; } }