:root {
  --accent: #f05252;
  --accent2: #f05252;
  --brand-cyan: #24b9c0;
  --brand-petrol: #075d70;
}

.brand {
  gap: 11px;
}

.brand-symbol {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.footer-brand .brand-symbol {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.symbol-story {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 42px;
  align-items: center;
  margin-top: 34px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(36,185,192,.06), rgba(240,82,82,.04));
}

.symbol-story img {
  width: 180px;
  height: 180px;
}

.symbol-story h3 {
  margin: 8px 0 12px;
  font-size: clamp(25px, 3vw, 38px);
  letter-spacing: -.035em;
}

.symbol-story p {
  margin: 0;
  max-width: 820px;
  font-size: 15px;
  line-height: 1.7;
}

.symbol-story .story-signature {
  margin-top: 12px;
  color: #f3f6f7;
  font-weight: 600;
}

.story-tr { display: none; }
html[lang="tr"] .story-en { display: none; }
html[lang="tr"] .story-tr { display: block; }

.lang-tr-inline,
.about-tr { display: none; }

.about-en { display: block; }

html[lang="tr"] .lang-en-inline,
html[lang="tr"] .about-en { display: none; }

html[lang="tr"] .lang-tr-inline { display: inline; }
html[lang="tr"] .about-tr { display: block; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.about-copy p:first-child { margin-top: 0; }

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 42px;
}

.about-values article {
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #12171b, #0e1215);
}

.about-values article > span {
  display: block;
  margin-bottom: 40px;
  color: #68747d;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

.about-values strong {
  font-size: 18px;
}

.about-values p {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .brand-symbol { width: 38px; height: 38px; flex-basis: 38px; }
  .symbol-story { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .symbol-story img { width: 128px; height: 128px; }
  .about-grid,
  .about-values { grid-template-columns: 1fr; gap: 14px; }
  .about-grid { gap: 28px; }
}

@media (min-width: 641px) and (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
}


/* v3.14 — ambient motion layer
   A restrained, brand-colour light-trace system. It never captures input,
   sits below the navigation, and respects reduced-motion preferences. */
body {
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
}

.ambient-lines {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: .96;
}

/* Keep site content above the decorative traces without changing layout. */
.shell {
  position: relative;
  z-index: 2;
}

.ambient-line {
  position: absolute;
  display: block;
  height: 2px;
  border-radius: 999px;
  opacity: .46;
  filter: blur(.15px);
  mix-blend-mode: screen;
  transform-origin: center;
  will-change: transform, opacity;
}

.ambient-line::after {
  content: "";
  position: absolute;
  inset: -12px 0;
  background: inherit;
  filter: blur(14px);
  opacity: .58;
}

.ambient-line-1 {
  top: 17%;
  left: -16vw;
  width: min(760px, 58vw);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(36,185,192,0) 14%,
    rgba(36,185,192,.92) 47%,
    rgba(7,93,112,.66) 68%,
    transparent 100%);
  transform: rotate(-8deg);
  animation: mamula-trace-a 18s ease-in-out infinite alternate;
}

.ambient-line-2 {
  top: 39%;
  right: -18vw;
  width: min(700px, 54vw);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240,82,82,0) 12%,
    rgba(240,82,82,.82) 46%,
    rgba(36,185,192,.50) 72%,
    transparent 100%);
  transform: rotate(10deg);
  animation: mamula-trace-b 22s ease-in-out infinite alternate;
}

.ambient-line-3 {
  bottom: 29%;
  left: -20vw;
  width: min(820px, 62vw);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(7,93,112,0) 16%,
    rgba(7,93,112,.82) 45%,
    rgba(36,185,192,.68) 66%,
    transparent 100%);
  transform: rotate(7deg);
  animation: mamula-trace-c 25s ease-in-out infinite alternate;
}

.ambient-line-4 {
  bottom: 9%;
  right: -15vw;
  width: min(620px, 50vw);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(36,185,192,0) 12%,
    rgba(36,185,192,.76) 44%,
    rgba(240,82,82,.62) 70%,
    transparent 100%);
  transform: rotate(-11deg);
  animation: mamula-trace-d 28s ease-in-out infinite alternate;
}

@keyframes mamula-trace-a {
  0%   { transform: translate3d(0,0,0) rotate(-8deg); opacity: .34; }
  52%  { opacity: .56; }
  100% { transform: translate3d(18vw,2vh,0) rotate(-5deg); opacity: .40; }
}

@keyframes mamula-trace-b {
  0%   { transform: translate3d(0,0,0) rotate(10deg); opacity: .32; }
  48%  { opacity: .52; }
  100% { transform: translate3d(-17vw,3vh,0) rotate(7deg); opacity: .38; }
}

@keyframes mamula-trace-c {
  0%   { transform: translate3d(0,0,0) rotate(7deg); opacity: .30; }
  55%  { opacity: .49; }
  100% { transform: translate3d(20vw,-2vh,0) rotate(10deg); opacity: .36; }
}

@keyframes mamula-trace-d {
  0%   { transform: translate3d(0,0,0) rotate(-11deg); opacity: .28; }
  45%  { opacity: .47; }
  100% { transform: translate3d(-16vw,-2vh,0) rotate(-8deg); opacity: .36; }
}

@media (max-width: 640px) {
  .ambient-lines { opacity: .76; }
  .ambient-line-3 { display: none; }
  .ambient-line-1,
  .ambient-line-2,
  .ambient-line-4 { width: 82vw; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-line {
    animation: none !important;
    will-change: auto;
  }
}