/* =========================================================
   Yıldız Mekatronik · 2026 modern UI/UX
   Lacivert (Navy) brand theme · Glass · Microinteractions
   ========================================================= */

:root {
  /* --- BACKGROUNDS (navy gradient layers) --- */
  --bg-0:        #050d22;            /* deepest navy/black */
  --bg-1:        #0a1633;            /* dark navy */
  --bg-2:        #102047;            /* navy panel */
  --surface:     #16285a;            /* elevated surface navy */
  --surface-2:   rgba(255, 255, 255, 0.028);
  --line:        rgba(170, 200, 255, 0.10);
  --line-2:      rgba(170, 200, 255, 0.18);

  /* --- TEXT --- */
  --text:        #eaf0fb;
  --text-2:      #b4c1d8;
  --muted:       #8493b0;

  /* --- BRAND NAVY (matches Yıldız Mekatronik logo) --- */
  --navy-1:      #0d1f4a;            /* logo lacivert */
  --navy-2:      #18306b;            /* mid navy */
  --navy-3:      #1e3a7e;            /* highlight navy */
  --accent:      #3b6fd1;            /* bright accent blue */
  --accent-2:    #ffffff;
  --accent-3:    #a8c0ea;
  --accent-glow: rgba(59, 111, 209, 0.35);

  /* --- GRADIENTS --- */
  --grad-acc:    linear-gradient(135deg, #ffffff 0%, #b8cdec 50%, #3b6fd1 100%);
  --grad-navy:   linear-gradient(135deg, #0d1f4a 0%, #1e3a7e 50%, #3b6fd1 100%);
  --grad-navy-soft: linear-gradient(135deg, rgba(13,31,74,.85) 0%, rgba(30,58,126,.65) 100%);
  --grad-border: linear-gradient(135deg, rgba(59,111,209,.55), rgba(170,200,255,.12));

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;

  --shadow-sm: 0 4px 14px rgba(0, 8, 28, 0.35);
  --shadow:    0 18px 50px -20px rgba(0, 8, 28, 0.65);
  --shadow-lg: 0 30px 80px -30px rgba(0, 8, 28, 0.75);

  --t: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html, body {
  background: var(--bg-0);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  width: 100%;
  position: relative;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(59,111,209,.18), transparent 60%),
    radial-gradient(1000px 500px at 110% 30%, rgba(30,58,126,.20), transparent 55%),
    radial-gradient(800px 400px at -10% 80%, rgba(13,31,74,.30), transparent 60%),
    var(--bg-0);
}
/* subtle film grain */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .035; mix-blend-mode: overlay;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; transition: color .2s var(--t); }
a:hover { color: #fff; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  color: #fff; font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700; letter-spacing: -.02em;
}
p { color: var(--text-2); line-height: 1.7; font-weight: 400; }

.container { max-width: 1240px; }

/* ===== Selection ===== */
::selection { background: var(--accent); color: #fff; }

/* =========================================================
   Buttons
   ========================================================= */
.btn-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px; border-radius: 999px;
  font-weight: 500; font-size: 14px; letter-spacing: .01em;
  transition: transform .25s var(--t), box-shadow .25s var(--t), background .25s var(--t), color .25s var(--t), border-color .25s var(--t);
  overflow: hidden; isolation: isolate;
}
.btn-pill i.bi { font-size: 14px; transition: transform .25s var(--t); }
.btn-pill:hover i.bi { transform: translate(2px, -2px); }

.btn-light-pill {
  background: #fff; color: var(--navy-1); border: 1px solid #fff;
  box-shadow: 0 8px 24px -8px rgba(255,255,255,.35);
}
.btn-light-pill:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(255,255,255,.45); color: var(--navy-1); }

.btn-outline-pill {
  background: transparent; color: #fff;
  border: 1px solid rgba(170,200,255,.35);
  backdrop-filter: blur(8px);
}
.btn-outline-pill:hover { background: rgba(59,111,209,.15); border-color: var(--accent); transform: translateY(-2px); color: #fff; }

.btn-grad-pill {
  color: #fff; border: 0;
  background: var(--grad-navy);
  box-shadow: 0 14px 36px -10px var(--accent-glow);
}
.btn-grad-pill:hover { transform: translateY(-2px); filter: brightness(1.10); color: #fff; box-shadow: 0 22px 50px -10px var(--accent-glow); }
.btn-grad-pill::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform .8s var(--t); z-index: -1;
}
.btn-grad-pill:hover::after { transform: translateX(100%); }

/* =========================================================
   Header / Navbar
   ========================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  transition: all .3s var(--t);
  background: transparent;
}
.site-header.scrolled {
  background: rgba(8, 18, 48, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .navbar { padding: 14px 0; }
.site-header .navbar > .container { gap: 12px; flex-wrap: nowrap; }
.site-header .nav-logo {
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: inline-flex; align-items: center;
  box-shadow: none;
}
.site-header .nav-logo img {
  width: 168px; height: auto;
  transition: transform .25s var(--t);
}
.site-header .nav-logo:hover img { transform: scale(1.04); }
.site-header.scrolled .nav-logo { background: transparent; }

.site-header .nav-link {
  color: var(--text-2) !important; font-weight: 500; font-size: 13.5px;
  padding: 9px 11px !important; position: relative; white-space: nowrap;
  transition: color .2s var(--t);
}
.site-header .nav-link:hover { color: #fff !important; }
.site-header .nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--grad-acc); transform: scaleX(0); transform-origin: center;
  transition: transform .25s var(--t);
}
.site-header .nav-link:hover::after { transform: scaleX(1); }
.site-header .nav-link.active { color: #fff !important; }
.site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .nav-link i.bi { font-size: 10px; margin-left: 3px; opacity: .7; }

/* Custom hamburger */
.hamburger {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(59,111,209,.10);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; position: relative;
  transition: background .2s var(--t), border-color .2s var(--t);
}
.hamburger:hover { background: rgba(59,111,209,.18); border-color: var(--line-2); }
.hamburger .bar {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform .3s var(--t), top .3s var(--t), opacity .2s var(--t), width .3s var(--t);
}
.hamburger .bar:nth-child(1) { top: 14px; }
.hamburger .bar:nth-child(2) { top: 21px; width: 14px; }
.hamburger .bar:nth-child(3) { top: 28px; }
.hamburger.open .bar:nth-child(1) { top: 21px; transform: rotate(45deg); width: calc(100% - 24px); }
.hamburger.open .bar:nth-child(2) { opacity: 0; }
.hamburger.open .bar:nth-child(3) { top: 21px; transform: rotate(-45deg); width: calc(100% - 24px); }

/* ABB Robotic badge near logo */
.abb-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px;
  background: linear-gradient(135deg, rgba(13,31,74,.92), rgba(30,58,126,.92));
  border: 1px solid rgba(170,200,255,.25);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  color: #fff;
  letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
}
.abb-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff3a3a; box-shadow: 0 0 8px #ff3a3a;
  margin-left: 4px;
}
.abb-pill strong {
  background: #ff1f1f; color: #fff;
  font-weight: 800; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px;
  font-size: 10px;
}
.abb-pill .label-long { display: none; }
@media (min-width: 1400px) {
  .abb-pill .label-long { display: inline; }
}

/* =========================================================
   MEGA MENU
   ========================================================= */
.nav-item.has-mega { position: relative; }
.nav-item.has-mega > .nav-link { cursor: pointer; }
.nav-item.has-mega > .nav-link i.bi-chevron-down {
  transition: transform .25s var(--t);
}
.nav-item.has-mega.open > .nav-link i.bi-chevron-down,
.nav-item.has-mega:hover > .nav-link i.bi-chevron-down {
  transform: rotate(180deg);
}

.mega-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(calc(-50% + var(--mega-shift, 0px))) translateY(-6px);
  min-width: 760px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(10,22,58,.985), rgba(6,14,38,.985));
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  padding: 26px 30px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--t), transform .25s var(--t), visibility .25s var(--t);
  z-index: 1040;
  scrollbar-width: thin;
  scrollbar-color: rgba(170,200,255,.20) transparent;
}
.mega-panel::-webkit-scrollbar { width: 6px; }
.mega-panel::-webkit-scrollbar-thumb { background: rgba(170,200,255,.18); border-radius: 4px; }
.nav-item.has-mega.open > .mega-panel,
.nav-item.has-mega:hover > .mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(calc(-50% + var(--mega-shift, 0px))) translateY(0);
}
/* Lang dropdown: anchor right (rightmost item) */
.nav-item.has-lang .mega-panel {
  left: auto; right: 0;
  transform: translateX(0) translateY(-6px);
}
.nav-item.has-lang.open > .mega-panel,
.nav-item.has-lang:hover > .mega-panel {
  transform: translateX(0) translateY(0);
}
/* Bridge so mouse can reach panel without flicker (top-only, panel overflow hidden) */
.nav-item.has-mega > .mega-panel::before {
  content: ''; position: sticky; top: 0; display: block;
  margin: -18px -30px 0; height: 18px;
  background: transparent;
}
/* Wider hover-bridge between trigger and panel */
.nav-item.has-mega::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%;
  height: 18px; pointer-events: none;
}
.nav-item.has-mega:hover::after,
.nav-item.has-mega.open::after { pointer-events: auto; }

.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 20px;
}
.mega-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mega-link {
  display: flex; gap: 14px;
  padding: 14px 14px;
  border-radius: 12px;
  color: var(--text-2);
  transition: background .2s var(--t), color .2s var(--t), transform .2s var(--t);
}
.mega-link:hover {
  background: rgba(59,111,209,.10);
  color: #fff;
}
.mega-link .ic {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(59,111,209,.12);
  border: 1px solid var(--line);
  color: #fff;
  transition: background .2s var(--t), border-color .2s var(--t), transform .25s var(--t);
}
.mega-link:hover .ic {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  transform: rotate(90deg);
}
.mega-link .text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mega-link .text strong {
  color: #fff; font-size: 14px; font-weight: 600;
  letter-spacing: -.005em;
}
.mega-link .text span {
  color: var(--muted); font-size: 12px; line-height: 1.5;
}

.mega-cta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 16px 14px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  transition: color .2s var(--t);
}
.mega-cta:hover { color: #fff; }
.mega-cta .ic {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--grad-navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}
.mega-cta .text strong { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.mega-cta .text span { font-size: 12px; color: var(--muted); }
.mega-cta .arr { margin-left: auto; opacity: .4; transition: transform .2s var(--t), opacity .2s var(--t); }
.mega-cta:hover .arr { opacity: 1; transform: translate(3px, -3px); }

/* Lang dropdown (compact) */
.nav-item.has-lang .mega-panel {
  min-width: 160px;
  padding: 8px;
}
.nav-item.has-lang .lang-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text-2); font-size: 13px;
}
.nav-item.has-lang .lang-link:hover { background: rgba(59,111,209,.10); color: #fff; }
.nav-item.has-lang .lang-link.active { color: #fff; background: rgba(59,111,209,.10); }
.nav-item.has-lang .lang-link .flag {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(59,111,209,.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding-bottom: 120px;
}
.hero video, .hero .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 60% at 0% 100%, rgba(30,58,126,.30), transparent 60%),
    radial-gradient(40% 50% at 100% 0%, rgba(59,111,209,.20), transparent 60%);
  mix-blend-mode: screen;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,13,34,.50) 0%, rgba(5,13,34,.60) 50%, rgba(5,13,34,.95) 100%);
}
.hero .container { position: relative; z-index: 3; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: rgba(59,111,209,.12);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; color: var(--text-2);
  letter-spacing: .15em; text-transform: uppercase;
  backdrop-filter: blur(10px);
  margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-navy);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(59,111,209,.18);
}
.hero-eyebrow .dot::after {
  content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%;
  animation: pulse 1.8s infinite;
}
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.7);} 50%{ box-shadow: 0 0 0 8px rgba(255,255,255,0);} }

.hero h1 {
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 300; line-height: 1.16; letter-spacing: -.025em;
  max-width: 900px;
  margin-bottom: 32px;
}
.hero h1 .grad-text { font-weight: 700; display: inline-block; padding-bottom: .08em; }

.grad-text {
  background: var(--grad-acc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block; line-height: inherit;
}
.grad-text-strong { font-weight: 800; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 4; color: var(--text-2);
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll .line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.6), transparent);
  animation: scrollLine 2.4s infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-12px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* =========================================================
   Section commons
   ========================================================= */
section.block { padding: 110px 0; position: relative; }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  background: rgba(59,111,209,.10);
  border: 1px solid rgba(170,200,255,.18);
  border-radius: 999px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #d8dee6;
  margin-bottom: 18px;
}
.section-eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px rgba(59,111,209,.7); }
.section-title {
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  margin-bottom: 18px;
}
.section-sub { color: var(--text-2); max-width: 640px; }

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--t), transform .8s var(--t); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

/* =========================================================
   Glass card
   ========================================================= */
.glass {
  background: linear-gradient(180deg, rgba(59,111,209,.06) 0%, rgba(59,111,209,.018) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  transition: transform .35s var(--t), border-color .35s var(--t), box-shadow .35s var(--t);
}
.glass:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}

/* Media (image) card */
.media-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.media-card img { width: 100%; height: auto; display: block; transition: transform .8s var(--t); }
.media-card:hover img { transform: scale(1.06); }
.media-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(5,13,34,.55) 100%);
}
.media-card .badge-corner {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(8,18,48,.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  color: #fff; font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
}

/* =========================================================
   Tabs (Çözümlerimiz / Hizmetler)
   ========================================================= */
.cozum-tabs {
  display: inline-flex; gap: 6px; padding: 6px;
  background: rgba(59,111,209,.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  list-style: none; margin: 24px auto 40px;
  flex-wrap: wrap; justify-content: center;
}
.cozum-tabs li button {
  background: transparent; color: var(--text-2);
  border: 0; border-radius: 999px;
  padding: 10px 22px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .25s var(--t);
}
.cozum-tabs li button:hover { color: #fff; }
.cozum-tabs li button.active {
  background: var(--grad-navy); color: #fff; font-weight: 600;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
.cozum-pane { display: none; animation: fadeUp .5s var(--t); }
.cozum-pane.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cozum-card-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: relative; }
.cozum-card-img img { width: 100%; height: auto; display: block; transition: transform .8s var(--t); }
.cozum-card-img:hover img { transform: scale(1.05); }

/* =========================================================
   Müşterilerimiz – pure CSS marquee
   ========================================================= */
.clients-section {
  padding: 90px 0;
  position: relative;
}
.clients-section::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(59,111,209,.04) 30%, rgba(59,111,209,.04) 70%, transparent);
  pointer-events: none;
}
.clients-head { text-align: center; margin-bottom: 40px; }
.clients-head .section-title { font-size: clamp(24px, 2.4vw, 34px); }
.clients-head .section-sub { max-width: 760px; line-height: 1.75; }

/* Referans rozeti — tek ABB Robotics logosu (gizlilik politikası nedeniyle
   müşteri listesi yerine yetkili partner logosu gösterilir) */
.ref-abb-badge {
  max-width: 380px; margin: 0 auto; text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px 26px;
  box-shadow: var(--shadow);
  position: relative; z-index: 1;
}
.ref-abb-badge img {
  display: block; margin: 0 auto;
  width: 100%; max-width: 230px; height: auto;
}
.ref-abb-badge span {
  display: block; margin-top: 18px;
  font-weight: 600; font-size: 13.5px; letter-spacing: .02em;
  color: #0d2350;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row {
  display: flex;
  width: max-content;
  gap: 18px;
  padding: 12px 9px;
  animation: marquee 45s linear infinite;
}
.marquee-row.reverse { animation-direction: reverse; animation-duration: 55s; margin-top: 18px; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-card {
  flex: 0 0 auto;
  width: 200px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(59,111,209,.08), rgba(59,111,209,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  transition: transform .35s var(--t), border-color .35s var(--t), background .35s var(--t);
  position: relative; overflow: hidden;
}
.marquee-card::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit; padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--t);
}
.marquee-card:hover { transform: translateY(-4px); }
.marquee-card:hover::before { opacity: 1; }
.marquee-card img {
  max-height: 50px; max-width: 100%; width: auto; height: auto;
  background: #fff; padding: 6px 10px; border-radius: 8px;
  opacity: .92;
  transition: opacity .25s var(--t), transform .25s var(--t);
}
.marquee-card:hover img { opacity: 1; transform: scale(1.04); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 9px)); }
}

/* =========================================================
   Yenilikçi Zihniyet image
   ========================================================= */
.yz-image { border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow); }
.yz-image img { width: 100%; height: auto; display: block; transition: transform .8s var(--t); }
.yz-image:hover img { transform: scale(1.04); }
.yz-image::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(59,111,209,.10), transparent 40%);
}

/* =========================================================
   Stats
   ========================================================= */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.stat-card {
  padding: 36px 28px;
  background: linear-gradient(180deg, rgba(59,111,209,.06), rgba(59,111,209,.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  position: relative; overflow: hidden;
  transition: transform .35s var(--t), border-color .35s var(--t);
}
.stat-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.stat-card::before {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170,200,255,.6), transparent);
  transform: translateX(-50%);
}
.stat-num {
  font-family: 'Space Grotesk'; font-size: clamp(48px, 5vw, 72px);
  font-weight: 700; line-height: 1;
  background: var(--grad-acc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-label { color: var(--text-2); margin-top: 10px; font-size: 14px; letter-spacing: .02em; }

/* =========================================================
   News & Blog cards
   ========================================================= */
.news-card, .blog-card {
  display: flex; flex-direction: column; height: 100%;
  background: linear-gradient(180deg, rgba(59,111,209,.05), rgba(59,111,209,.012));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s var(--t), border-color .35s var(--t), box-shadow .35s var(--t);
}
.news-card:hover, .blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.news-card .card-img, .blog-card .card-img {
  aspect-ratio: 16/10; overflow: hidden; position: relative;
  background: var(--grad-navy);
}
.news-card .card-img img, .blog-card .card-img img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--t);
}
.news-card:hover .card-img img, .blog-card:hover .card-img img { transform: scale(1.06); }
.news-card .card-img::after, .blog-card .card-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5,13,34,.55));
}
.news-card .card-body, .blog-card .card-body {
  padding: 20px 22px 24px; flex: 1;
  display: flex; flex-direction: column;
}
.news-card .meta, .blog-card .meta {
  color: var(--accent-3); font-size: 11px; margin-bottom: 10px;
  letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
}
.news-card h5, .blog-card h5 {
  font-size: 16px; line-height: 1.4; margin: 0 0 16px;
  color: #fff;
}
.news-card .card-link, .blog-card .card-link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-2); font-size: 13px; font-weight: 500;
  transition: color .2s var(--t);
}
.news-card .card-link i.bi, .blog-card .card-link i.bi {
  transition: transform .25s var(--t);
}
.news-card .card-link:hover, .blog-card .card-link:hover { color: var(--accent); }
.news-card .card-link:hover i.bi, .blog-card .card-link:hover i.bi { transform: translate(3px, -3px); }

/* Ürün kartı CTA butonu (ör. "Fiyat Talep Et"): kart yükseklikleri eşit
   olduğu için butonu en alta sabitle → bir satırdaki tüm butonlar aynı hizada.
   Açıklama uzunluğu kart yüksekliğini değiştirse bile buton hizası bozulmaz. */
.blog-card .card-body .btn { margin-top: auto; }
.blog-card .card-body p { margin-bottom: 16px; }

/* =========================================================
   CTA section
   ========================================================= */
.cta-section {
  position: relative; padding: 130px 0; text-align: center;
  overflow: hidden;
}
.cta-section .bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--grad-navy);
  filter: brightness(.7);
  transform: scale(1.05);
}
.cta-section .glow-1, .cta-section .glow-2 {
  position: absolute; z-index: 1; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  filter: blur(80px); opacity: .35;
}
.cta-section .glow-1 { top: -120px; left: -120px; background: var(--accent); opacity: .25; }
.cta-section .glow-2 { bottom: -160px; right: -160px; background: var(--navy-3); opacity: .35; }
.cta-section .container { position: relative; z-index: 3; }
.cta-section h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700; line-height: 1.15; margin-bottom: 36px;
}

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter {
  position: relative; padding: 110px 0; overflow: hidden;
}
.newsletter .bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(110deg, rgba(5,13,34,.94) 0%, rgba(13,31,74,.75) 55%, rgba(30,58,126,.35) 100%),
    radial-gradient(800px 400px at 30% 50%, rgba(59,111,209,.25), transparent 70%);
  background-color: var(--bg-1);
}
.newsletter .container { position: relative; z-index: 1; }
.newsletter h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700; line-height: 1.15; margin-bottom: 14px;
}
.newsletter .lead { color: var(--text-2); max-width: 560px; }
.newsletter form {
  display: flex; gap: 10px; max-width: 520px; margin-top: 24px;
  padding: 6px;
  background: rgba(59,111,209,.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.newsletter input[type="email"] {
  flex: 1; min-width: 180px;
  background: transparent; color: #fff;
  border: 0; border-radius: 999px;
  padding: 10px 18px; font-size: 14px; outline: none;
  font-family: inherit;
}
.newsletter input::placeholder { color: rgba(255,255,255,.5); }
.newsletter form .btn { padding: 10px 22px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  position: relative;
  padding: 80px 0 0;
  color: var(--text-2);
  font-size: 14px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(800px 400px at 80% 100%, rgba(30,58,126,.20), transparent 60%),
    linear-gradient(180deg, transparent, rgba(13,31,74,.30) 100%);
}
.site-footer h5 {
  font-size: 12px; font-weight: 600; color: #fff;
  margin-bottom: 20px;
  letter-spacing: .2em; text-transform: uppercase;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: #fff; }
.site-footer .footer-logo img {
  width: 220px; margin-bottom: 18px;
  filter: drop-shadow(0 2px 8px rgba(59,111,209,.30));
}
.site-footer .group-logos { display: flex; flex-direction: column; gap: 14px; }
.site-footer .contact-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.site-footer .contact-list i.bi { color: var(--accent); font-size: 14px; margin-top: 4px; flex-shrink: 0; }
.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 56px; padding: 22px 0;
  color: var(--muted); font-size: 13px;
}
.social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(59,111,209,.10);
  border: 1px solid var(--line);
  border-radius: 50%;
  margin-right: 8px; color: #fff;
  transition: all .25s var(--t);
}
.social-icons a:hover {
  background: var(--grad-navy); color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

/* =========================================================
   Scroll-to-top
   ========================================================= */
.to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad-navy); color: #fff;
  display: none; align-items: center; justify-content: center;
  z-index: 1000;
  box-shadow: 0 14px 36px -10px var(--accent-glow);
  cursor: pointer; border: 0; font-size: 16px;
  transition: transform .25s var(--t);
}
.to-top.show { display: inline-flex; }
.to-top:hover { transform: translateY(-3px) scale(1.05); }

/* =========================================================
   Subpage banner
   ========================================================= */
.page-banner {
  position: relative;
  padding: 180px 0 90px;
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(59,111,209,.15), transparent 60%),
    radial-gradient(600px 320px at 10% 100%, rgba(30,58,126,.20), transparent 60%),
    var(--bg-1);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-banner::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 50% 50%, rgba(59,111,209,.08), transparent 70%);
}
.page-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,13,34,.3) 0%, rgba(5,13,34,.6) 70%, rgba(5,13,34,.92) 100%);
}
.page-banner .container { position: relative; z-index: 2; }
.breadcrumb-nav {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.breadcrumb-nav a { color: var(--text-2); transition: color .2s var(--t); }
.breadcrumb-nav a:hover { color: var(--accent); }
.breadcrumb-nav i { font-size: 10px; opacity: .5; }
.page-banner h1 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 300; line-height: 1.05; letter-spacing: -.03em;
  margin-bottom: 0;
}
.page-banner h1 b { font-weight: 700; }
.page-banner .lead {
  color: var(--text-2); font-size: 17px; line-height: 1.7;
  max-width: 720px; margin-top: 22px;
}

/* Service intro */
.service-intro p { font-size: 16px; line-height: 1.85; }

/* Sector cards */
.sector-card {
  position: relative;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(59,111,209,.06), rgba(59,111,209,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
  transition: transform .35s var(--t), border-color .35s var(--t), background .35s var(--t);
  overflow: hidden;
}
.sector-card:hover { transform: translateY(-6px); border-color: var(--line-2); background: linear-gradient(180deg, rgba(59,111,209,.10), rgba(59,111,209,.02)); }
.sector-card .num {
  font-family: 'Space Grotesk'; font-size: 14px;
  color: var(--accent-3); letter-spacing: .2em;
  margin-bottom: 14px;
}
.sector-card .ic {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(59,111,209,.12);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  margin-bottom: 18px;
  transition: background .25s var(--t), border-color .25s var(--t), transform .35s var(--t);
}
.sector-card:hover .ic { background: var(--grad-navy); color: #fff; border-color: var(--accent); transform: rotate(-6deg); }
.sector-card h3 {
  font-size: 18px; font-weight: 700;
  margin-bottom: 10px; color: #fff;
}
.sector-card p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.65; }

/* Process steps */
.process-step {
  position: relative;
  padding: 26px 24px 26px 80px;
  background: linear-gradient(180deg, rgba(59,111,209,.05), rgba(59,111,209,.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s var(--t), border-color .3s var(--t);
  height: 100%;
}
.process-step:hover { transform: translateY(-3px); border-color: var(--line-2); }
.process-step .step-num {
  position: absolute; left: 24px; top: 24px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--grad-navy); color: #fff;
  font-family: 'Space Grotesk'; font-weight: 700; font-size: 16px;
}
.process-step h4 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.process-step p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.65; }

/* Feature highlight strip */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-strip .item {
  padding: 32px 26px;
  background: var(--bg-1);
  transition: background .25s var(--t);
}
.feature-strip .item:hover { background: var(--bg-2); }
.feature-strip .item i {
  font-size: 28px; color: var(--accent); margin-bottom: 14px;
  display: block;
}
.feature-strip .item strong {
  display: block; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px;
  letter-spacing: -.005em;
}
.feature-strip .item span {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
}

/* Showcase image with caption */
.showcase-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 16/10;
  background: var(--grad-navy);
}
.showcase-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--t);
}
.showcase-img:hover img { transform: scale(1.04); }
.showcase-img .caption {
  position: absolute; left: 24px; bottom: 24px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(8,18,48,.78); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  font-size: 12px; color: #fff;
  letter-spacing: .12em; text-transform: uppercase;
}

/* =========================================================
   Department cards (iletisim)
   ========================================================= */
.dept-card {
  background: linear-gradient(180deg, rgba(59,111,209,.07), rgba(59,111,209,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--t), border-color .35s var(--t), box-shadow .35s var(--t);
}
.dept-card::before {
  content: ''; position: absolute; inset: 0; left: auto; width: 4px;
  background: var(--grad-navy);
  opacity: .6; transition: opacity .3s var(--t);
}
.dept-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow); }
.dept-card:hover::before { opacity: 1; }
.dept-card .dept-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(59,111,209,.15);
  border: 1px solid var(--line-2);
  font-size: 10.5px; color: var(--accent-3);
  letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 14px;
}
.dept-card h3 {
  font-size: 20px; font-weight: 700; color: #fff;
  margin-bottom: 4px; line-height: 1.3;
}
.dept-card .dept-title {
  font-size: 13px; color: var(--accent-3);
  letter-spacing: .04em; margin-bottom: 18px;
}
.dept-card .dept-info { display: flex; flex-direction: column; gap: 10px; }
.dept-card .dept-info a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-2); font-size: 14px;
  transition: color .2s var(--t);
}
.dept-card .dept-info a:hover { color: #fff; }
.dept-card .dept-info i.bi {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(59,111,209,.15);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--accent);
  flex-shrink: 0;
}

/* =========================================================
   ABB partner badge banner
   ========================================================= */
.abb-banner {
  position: relative;
  padding: 50px 0;
  background:
    linear-gradient(135deg, rgba(255,58,58,.08), rgba(59,111,209,.10) 60%, transparent),
    linear-gradient(180deg, rgba(13,31,74,.4), rgba(13,31,74,.2));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.abb-banner .row { align-items: center; }
.abb-banner .abb-mark {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px;
  background: rgba(8,18,48,.85);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  margin-bottom: 14px;
}
.abb-banner .abb-mark .abb-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 12px; border-radius: 9px;
  background: #fff; color: #e30613;
  /* Kurumsal logo metin yedeği — site geneliyle uyumlu, sade tipografi */
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
}
.abb-banner .abb-mark .abb-logo img { height: 22px; width: auto; display: block; }
.abb-banner .abb-mark span {
  color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.abb-banner h2 {
  font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.2; margin-bottom: 8px;
}
.abb-banner p { color: var(--text-2); margin: 0; max-width: 640px; }

/* =========================================================
   Brand spotlight (Mech-Mind vb. partner vurgu bloğu)
   Ana sayfadaki ABB banner görünümüyle uyumlu, yeşil aksanlı.
   .brand-spotlight  → kart varyantı (Partnerlikler sayfası)
   .mech-banner      → tam genişlik banner varyantı (Ana sayfa)
   Ortak iç öğeler: .brand-logo-card · .brand-eyebrow · .brand-feats
   ========================================================= */
.brand-spotlight {
  position: relative;
  padding: 40px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(28,53,120,.18), rgba(59,111,209,.10) 60%, transparent),
    linear-gradient(180deg, rgba(13,31,74,.45), rgba(13,31,74,.22));
  border: 1px solid var(--line);
  overflow: hidden;
}
.mech-banner {
  position: relative;
  padding: 50px 0;
  background:
    linear-gradient(135deg, rgba(28,53,120,.16), rgba(59,111,209,.12) 60%, transparent),
    linear-gradient(180deg, rgba(13,31,74,.4), rgba(13,31,74,.2));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.mech-banner .row, .brand-spotlight .row { align-items: center; }

/* Beyaz logo kartı — koyu zeminde lacivert Mech-Mind logosunu okunur kılar */
.brand-logo-card {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; padding: 12px 20px;
  margin-bottom: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.brand-logo-card img { height: 40px; width: auto; display: block; }
.brand-logo-card .brand-wordmark {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #0a1f4d;
}
.brand-eyebrow {
  display: block; color: #fff; opacity: .85;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 10px;
}
.mech-banner h2, .brand-spotlight h2 { font-size: clamp(22px, 2.5vw, 34px); font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
.mech-banner p, .brand-spotlight p { color: var(--text-2); margin: 0 0 10px; max-width: 640px; }
.brand-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.brand-feats .glass { padding: 16px; border-radius: 14px; }
.brand-feats i { font-size: 22px; color: #4f9cff; }
.brand-feats strong { display: block; font-size: 13px; color: #fff; font-weight: 600; margin-top: 8px; }
.brand-feats span { font-size: 11.5px; color: var(--muted); }
@media (max-width: 575px){ .brand-spotlight { padding: 26px 20px; } }

/* =========================================================
   Career / Job card
   ========================================================= */
.job-card {
  background: linear-gradient(180deg, rgba(59,111,209,.06), rgba(59,111,209,.012));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  transition: transform .3s var(--t), border-color .3s var(--t), box-shadow .3s var(--t);
  display: flex; flex-direction: column; gap: 8px; height: 100%;
}
.job-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow); }
.job-card .job-type {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: rgba(59,111,209,.15);
  font-size: 10.5px; color: var(--accent-3);
  letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}
.job-card h3 { font-size: 18px; color: #fff; margin: 6px 0 4px; }
.job-card .job-loc { font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.job-card .job-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: 13px; font-weight: 600;
}

/* =========================================================
   Mobile / Tablet (hamburger up to xl) — Slide-in Drawer
   ========================================================= */
/* Body lock when drawer open (iOS-safe via JS sets top/position).
   NOT: Body'ye `touch-action:none` VERİLMEZ — bir ata öğede touch-action:none
   olması, içindeki kaydırılabilir drawer listesinde (.navbar-nav) parmakla
   dikey kaydırmayı da iptal eder (Chrome/Safari). Arka plan kaydırması zaten
   JS'teki position:fixed kilidi ile engellendiğinden buna gerek yoktur. */
body.nav-open { overflow: hidden; }
body.nav-open::before { display: none !important; } /* Disable noise overlay over drawer */

/* Drawer-only sections — hidden by default (only show in mobile drawer) */
.nav-drawer-head, .nav-drawer-foot { display: none; }

/* Backdrop (injected by JS) — must sit BELOW .site-header (z:1030)
   so drawer (inside header at z:1050 within header's stacking context)
   can paint above it. */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(3, 8, 22, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--t), visibility .35s var(--t);
}
.nav-backdrop.show { opacity: 1; visibility: visible; }

/* When drawer is open, lift header so its drawer child paints above backdrop */
body.nav-open .site-header { z-index: 1045; }

/* When drawer is open: hide the hamburger (drawer has its own X)
   and floating contact widgets to avoid double UI */
body.nav-open .hamburger,
body.nav-open .yz-float,
body.nav-open .tkn-float { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--t), visibility .2s var(--t); }

@media (max-width: 1199.98px) {
  .site-header .nav-link::after { display: none; }
  .site-header.scrolled { background: rgba(8,18,48,.92); }
  .site-header .nav-logo { padding: 0; }
  .site-header .nav-logo img { width: 148px; }
  .abb-pill { font-size: 10px; }

  /* Keep hamburger above drawer */
  .hamburger { position: relative; z-index: 1060; }

  /* === Drawer (override Bootstrap collapse) === */
  .site-header .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 92vw);
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important; padding: 0 !important;
    border: 0; border-radius: 0;
    border-left: 1px solid var(--line);
    background:
      radial-gradient(700px 360px at 90% -20%, rgba(59,111,209,.22), transparent 55%),
      linear-gradient(180deg, #061233 0%, #04091c 100%);
    box-shadow: -30px 0 80px -10px rgba(0,0,0,.7);
    transform: translateX(100%);
    visibility: hidden;
    /* Çerçeve SABİTtir, kendisi kaydırmaz (overflow:hidden). Başlık ve footer
       flex ile sabit kalır; YALNIZCA ortadaki .navbar-nav listesi kaydırılır.
       Tek kaydırıcı = iç içe scroller çakışması ve sticky taşması olmaz. */
    overflow: hidden !important;
    z-index: 1050;
    transition: transform .42s var(--t), visibility .42s var(--t);
    isolation: isolate;
  }
  .site-header .navbar-collapse.show,
  .site-header .navbar-collapse.collapsing {
    transform: translateX(0);
    visibility: visible;
  }

  /* === Drawer header (injected by JS) ===
     Sabit üst bölüm (flex-shrink:0) — logo + kapat (X) her zaman görünür,
     kaymaz. (Eski sticky yaklaşımı içerikle çakışıp taşıyordu.) */
  .nav-drawer-head {
    flex: 0 0 auto;
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line);
    background: #061233;
  }
  .nav-drawer-head .nav-drawer-logo {
    background: transparent; border-radius: 0;
    padding: 0;
    display: inline-flex; align-items: center;
    box-shadow: none;
  }
  .nav-drawer-head .nav-drawer-logo img {
    height: 34px; width: auto; max-width: 160px;
  }
  .nav-drawer-close {
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(170,200,255,.08);
    border: 1px solid var(--line);
    color: #fff; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s var(--t), border-color .2s var(--t), transform .25s var(--t);
  }
  .nav-drawer-close:hover {
    background: rgba(59,111,209,.22);
    border-color: var(--line-2);
    transform: rotate(90deg);
  }

  /* === Drawer footer: quick contact (injected by JS, optional) === */
  .nav-drawer-foot {
    flex-shrink: 0;
    display: flex !important; gap: 8px;
    padding: 12px 16px 18px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  }
  .nav-drawer-foot .qa {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(170,200,255,.05);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 12.5px; font-weight: 600;
    transition: background .2s var(--t), color .2s var(--t), border-color .2s var(--t);
  }
  .nav-drawer-foot .qa i { font-size: 15px; }
  .nav-drawer-foot .qa:hover {
    background: rgba(59,111,209,.15);
    border-color: var(--line-2);
    color: #fff;
  }
  .nav-drawer-foot .qa.wa { color: #25d366; }
  .nav-drawer-foot .qa.wa:hover { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.4); color: #fff; }

  /* Nav listesi — TEK ve YEGÂNE kaydırıcı:
     Çerçeve (collapse) sabit; başlık/footer flex ile sabit; taşan menü
     içeriğini SADECE bu liste kaydırır. `min-height:0` flex çocuğunun
     içeriğinin altına küçülüp kaydırılabilmesi için ZORUNLUDUR (iOS/Android
     dahil tüm modern tarayıcılarda güvenilir kaydırma). */
  .site-header .navbar-collapse > .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 16px 14px 18px !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(170,200,255,.20) transparent;
    list-style: none;
  }
  .site-header .navbar-collapse > .navbar-nav::-webkit-scrollbar { width: 6px; }
  .site-header .navbar-collapse > .navbar-nav::-webkit-scrollbar-thumb {
    background: rgba(170,200,255,.18); border-radius: 4px;
  }

  /* Nav items */
  .site-header .navbar-nav .nav-item { width: 100%; margin: 0 !important; }
  .site-header .navbar-nav > .nav-item > .nav-link {
    display: flex !important; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 14px 16px !important;
    border-radius: 12px;
    background: rgba(170,200,255,.04);
    border: 1px solid rgba(170,200,255,.06);
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -.005em;
    transition: background .25s var(--t), border-color .25s var(--t), color .25s var(--t), transform .2s var(--t);
  }
  .site-header .navbar-nav > .nav-item > .nav-link:hover {
    background: rgba(59,111,209,.18);
    border-color: var(--line-2);
    color: #fff !important;
    transform: translateX(2px);
  }
  .site-header .navbar-nav > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, rgba(59,111,209,.28), rgba(30,58,126,.18));
    border-color: rgba(59,111,209,.45);
    color: #fff !important;
  }
  .nav-item.has-mega > .nav-link i.bi-chevron-down {
    font-size: 11px; opacity: .8; margin-left: auto;
    transition: transform .3s var(--t);
  }
  .nav-item.has-mega.open > .nav-link {
    background: linear-gradient(135deg, rgba(59,111,209,.28), rgba(30,58,126,.18)) !important;
    border-color: rgba(59,111,209,.5) !important;
    color: #fff !important;
  }
  .nav-item.has-mega.open > .nav-link i.bi-chevron-down { transform: rotate(180deg); }

  /* Accordion panel */
  .mega-panel {
    position: static !important;
    transform: none !important;
    left: auto !important; top: auto !important;
    min-width: 0 !important; width: 100% !important;
    margin: 0;
    padding: 0 6px;
    border: 0; border-radius: 12px;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    max-height: 0; overflow: hidden;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    transition: max-height .4s var(--t), padding .3s var(--t), margin .3s var(--t);
  }
  .nav-item.has-mega.open > .mega-panel {
    max-height: 2400px;
    padding: 6px 6px 2px;
    margin: 4px 0 2px;
  }
  /* KRİTİK: Akordeon paneli overflow:hidden olduğu için, parmak panelin
     üstündeyken bazı mobil tarayıcılar dokunma hareketini panele "hapsedip"
     kaydırılabilir ata öğeye (nav) iletmiyordu → açılır menü içeriği kaymıyordu.
     touch-action:pan-y, dikey kaydırmanın her zaman tek kaydırıcı olan
     .navbar-nav'a iletilmesini garanti eder (animasyon korunur, tuzak kalkar). */
  .site-header .navbar-collapse .mega-panel,
  .site-header .navbar-collapse .mega-grid,
  .site-header .navbar-collapse .mega-link,
  .site-header .navbar-collapse .mega-cta,
  .site-header .navbar-collapse .lang-link {
    touch-action: pan-y;
    overscroll-behavior: auto;
  }
  .mega-panel::before { display: none; }
  .mega-grid, .mega-grid.cols-3 { grid-template-columns: 1fr !important; gap: 4px; }
  .mega-link {
    padding: 11px 12px !important;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(170,200,255,.02);
    align-items: center;
  }
  .mega-link:hover {
    background: rgba(59,111,209,.10);
    border-color: var(--line);
    transform: none;
  }
  .mega-link .ic {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--grad-navy);
    border: 0; color: #fff;
  }
  .mega-link:hover .ic { transform: none; background: var(--grad-navy); color: #fff; }
  .mega-link .text strong { font-size: 13.5px; }
  .mega-link .text span {
    font-size: 11.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mega-cta {
    margin: 8px 4px 2px; padding: 12px 12px;
    border-top: 1px solid var(--line);
  }
  .mega-cta .ic { width: 36px; height: 36px; font-size: 14px; }
  .mega-cta .text strong { font-size: 13.5px; }
  .mega-cta .text span { font-size: 11.5px; }

  /* Lang dropdown */
  .nav-item.has-lang .mega-panel { padding: 0 6px; }
  .nav-item.has-lang.open > .mega-panel { padding: 6px 6px 2px; }
  .nav-item.has-lang .lang-link {
    padding: 11px 12px; font-size: 13.5px;
    border-radius: 9px;
    border: 1px solid transparent;
  }
  .nav-item.has-lang .lang-link:hover {
    background: rgba(59,111,209,.10);
    border-color: var(--line);
  }

  /* CTA inside nav list at bottom */
  .site-header .navbar-nav > .nav-item:last-child {
    margin-top: 12px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--line);
  }
  .site-header .navbar-nav > .nav-item:last-child .btn-grad-pill {
    width: 100%; justify-content: center;
    padding: 14px 22px; font-size: 14px;
    box-shadow: 0 14px 36px -10px var(--accent-glow);
  }

  /* Disable desktop hover behaviour on touch */
  .nav-item.has-mega:hover > .mega-panel { transform: none !important; }
  .hero { min-height: 88vh; padding-bottom: 80px; padding-top: 110px; align-items: center; }
  .hero h1 { font-size: clamp(28px, 7vw, 38px); }
  .hero h1 br { display: none; }
  .hero-scroll { display: none; }
  section.block { padding: 70px 0; }
  .clients-section { padding: 60px 0; }
  .cta-section { padding: 90px 0; }
  .cta-section h2 br { display: none; }
  .newsletter { padding: 80px 0; }
  .newsletter h2 br { display: none; }
  .newsletter form { flex-direction: column; align-items: stretch; padding: 14px; border-radius: var(--radius); gap: 10px; }
  .newsletter input[type="email"] { padding: 12px 14px; }
  .newsletter form .btn { width: 100%; justify-content: center; }
  .footer-bottom { text-align: center; }
  .footer-bottom > div { justify-content: center !important; }
  .news-card h5, .blog-card h5 { min-height: auto; }
  .to-top { bottom: 18px; right: 18px; width: 44px; height: 44px; }

  /* Sağa-sola kayma engelleme */
  .container, .row { max-width: 100%; }
  /* Mobilde kenar boşluğunu artır: içerik ekran kenarına çok bitişik durmasın */
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .row > [class*="col"] { padding-left: 12px; padding-right: 12px; }
  img, video { max-width: 100%; height: auto; }
  h1, h2, h3, h4, h5, p { word-wrap: break-word; overflow-wrap: break-word; }

  .marquee-card { width: 160px; height: 84px; padding: 12px 16px; }
  .marquee-card img { max-height: 36px; }
  .stat-card { padding: 28px 20px; }

  .page-banner { padding: 130px 0 60px; }
  .page-banner h1 { font-size: clamp(30px, 7vw, 44px); }
  .process-step { padding: 26px 20px 26px 70px; }
}

/* =========================================================
   Mobil/Tablet: tek kolona inen metin bloklarını ortala
   (sol kenara bitişik durmasın — yazılar ortalanır)
   ========================================================= */
@media (max-width: 991.98px) {
  /* Sayfa banner içeriği (breadcrumb + başlık + açıklama) */
  .page-banner .breadcrumb-nav { justify-content: center; }
  .page-banner h1,
  .page-banner .lead { text-align: center; }
  .page-banner .lead { margin-left: auto; margin-right: auto; }

  /* Tanıtım / departman / ilgili-bölüm metin kolonları tek kolona indiğinde ortala */
  .service-intro .col-lg-6,
  .service-intro .col-md-6,
  .block .row > [class*="col-lg-6"] {
    text-align: center;
  }
  /* Buton gruplarını da ortala */
  .service-intro .d-flex.flex-wrap,
  .block .row > [class*="col-lg-6"] .d-flex.flex-wrap {
    justify-content: center;
  }
  /* Açıklama paragraflarının okunabilir genişlikte ortalanması */
  .service-intro .col-lg-6 > p,
  .block .row > [class*="col-lg-6"] > p {
    margin-left: auto; margin-right: auto; max-width: 620px;
  }
  /* Madde listeleri ortalanınca bozulmasın — sola dayalı kalsın */
  .block .row > [class*="col-lg-6"] ul,
  .block .row > [class*="col-lg-6"] ol { text-align: left; }
}

@media (max-width: 575.98px) {
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  .site-header .nav-logo { padding: 0; }
  .site-header .nav-logo img { width: 128px; }
  .abb-pill { font-size: 9px; padding: 3px 7px 3px 3px; }
  .abb-pill strong { font-size: 9px; padding: 3px 7px; }
  section.block { padding: 60px 0; }
  .marquee-card { width: 138px; height: 76px; padding: 10px 14px; }
  .marquee-card img { max-height: 30px; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .site-header .navbar-collapse { transition: none !important; }
  .nav-backdrop { transition: opacity .01ms !important; }
}