/* ==========================================================================
   Hakkımızda — page styles
   Everything is scoped under .about-* (page-only classes). Core components
   (.split, .features, .steps, .modgrid, .btn …) are only adjusted inside
   these scopes, never globally.
   ========================================================================== */

/* ---------- Hero ---------- */
.about-hero__title { max-width: 15ch; }
/* Keep the phrase together where the column is wide enough to hold it */
@media (min-width: 1200px) {
  .about-hero__title { max-width: none; }
  .about-hero__nb { white-space: nowrap; }
}

/* Wider measure: the positioning paragraph sets in four even lines, not five ragged ones */
.about-hero .page-hero__lead { max-width: 48ch; }

/* In-page index: one segmented rule per cell (same treatment as .step / .stat) */
.about-toc { margin-top: clamp(56px, 7vw, 112px); }
.about-toc__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
@media (min-width: 700px) { .about-toc__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* seven entries sit in one row once every label fits on a single line */
@media (min-width: 1280px) { .about-toc__list { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.about-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 14px 18px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 500;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.about-toc__list a span {
  font-size: var(--fs-micro);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--ease);
}
.about-toc__list a::after {
  content: "↓";
  margin-left: auto;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease-out);
}
.about-toc__list a:hover { color: var(--accent); border-top-color: var(--accent); }
.about-toc__list a:hover span { color: var(--accent); }
.about-toc__list a:hover::after { opacity: 1; transform: none; }
@media (max-width: 699px) {
  .about-toc__list a { padding-block: 12px 14px; }
}

/* ---------- Manifesto ---------- */
.about-manifesto { padding-top: clamp(56px, 8vw, 136px); }
.about-manifesto__statement {
  font-size: clamp(1.75rem, 1.1rem + 2.3vw, 3.25rem);
  line-height: 1.17;
  letter-spacing: -0.02em;
}
.about-manifesto__statement em { font-style: italic; }

.about-manifesto__col {
  margin-top: clamp(28px, 5vw, 80px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.about-manifesto__col + .about-manifesto__col { margin-top: 12px; }
.about-manifesto__kicker {
  margin-bottom: 12px;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.about-manifesto__col p { color: var(--ink-2); line-height: 1.6; max-width: 46ch; }
@media (min-width: 900px) {
  .about-manifesto__col { grid-column: 4 / span 4; }
  .about-manifesto__col + .about-manifesto__col { grid-column: 8 / span 4; margin-top: clamp(28px, 5vw, 80px); }
}

/* ---------- Yeni bir stüdyo (concept demos instead of references) ---------- */
.about-new__title { max-width: 18ch; }
.about-new__lead { margin-top: clamp(20px, 2.2vw, 28px); color: var(--ink-2); max-width: 38ch; }
.about-new__text { display: grid; gap: 1.05em; margin-top: clamp(28px, 3vw, 44px); }
.about-new__text p { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.62; max-width: 40rem; }

/* Six demos as a compact index: one segmented rule per cell, square in the demo colour */
.about-new__body { margin-top: clamp(28px, 3.6vw, 56px); }
.about-new__demos {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap);
}
@media (min-width: 600px) { .about-new__demos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .about-new__demos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-new__demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 8px;
  column-gap: 16px;
  padding-block: 16px 24px;
  border-top: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}
.about-new__co { grid-column: 1; grid-row: 1; color: var(--muted); }
/* light demo colours (lime, amber) need an edge on the off-white band */
.about-new__co::before { box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.1); }
.about-new__name {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-sans);
  font-size: min(var(--fs-h4), 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
  transition: color 0.2s var(--ease);
}
.about-new__demo::after {
  content: "→";
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1;
  opacity: 0.35;
  transition: transform 0.4s var(--ease-out), opacity 0.25s var(--ease), color 0.2s var(--ease);
}
.about-new__demo:hover { border-top-color: var(--accent); }
.about-new__demo:hover .about-new__name,
.about-new__demo:hover::after { color: var(--accent); }
.about-new__demo:hover::after { opacity: 1; transform: translateX(4px); }
@media (max-width: 599px) {
  .about-new__demo { padding-block: 14px 18px; row-gap: 6px; }
}
.about-new__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: clamp(32px, 4vw, 56px);
}

/* ---------- Modül (brand moment, dark) ---------- */
.about-mod {
  --about-slot: #6b75ff; /* cobalt, lifted for contrast on ink */
  overflow: clip; /* clip (not hidden) so the sticky mark still sticks */
}
.about-mod__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(40px, 7vw, 64px);
}
.about-mod__layout > * { grid-column: 1 / -1; }
.about-mod__head { display: grid; gap: clamp(20px, 2.4vw, 32px); justify-items: start; }
.about-mod__title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.038em;
}
@media (min-width: 900px) {
  .about-mod__layout { grid-template-rows: auto 1fr; row-gap: clamp(32px, 3.4vw, 56px); }
  .about-mod__figure { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .about-mod__head { grid-column: 8 / -1; grid-row: 1; }
  .about-mod__body { grid-column: 8 / -1; grid-row: 2; }
}

/* Caption hangs directly under the mark, like a plate caption.
   On wide screens the mark stays in view while the module list scrolls past,
   so the list <-> module hover pairing is always visible. */
.about-mod__figure { display: grid; gap: 24px; justify-items: start; align-content: start; }
@media (min-width: 900px) {
  .about-mod__figure { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}
/* Phones: the mark spans the full text measure so its right edge lines up with the copy */
.about-mod__mark { --size: min(calc(100vw - 2 * var(--gutter)), 400px); color: var(--paper); }
@media (min-width: 900px) { .about-mod__mark { --size: min(44vw, 660px); } }
.about-mod__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.about-mod__body .lead { color: var(--ink-2); max-width: 34ch; }

/* The empty ninth slot — shared by the big mark and the careers mark */
.about-slot {
  --slot: var(--about-slot, var(--accent));
  position: relative;
  grid-row: 2;
  grid-column: 3;
  aspect-ratio: 1;
  border-radius: 10.7%;
  border: max(1.5px, calc(var(--size) * 0.005)) dashed var(--slot);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.about-slot::before,
.about-slot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24%;
  height: max(1.5px, 3%);
  border-radius: 1px;
  background: var(--slot);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s var(--ease);
}
.about-slot::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Module list laid out as the mark itself: 3×3, item 09 sits in the empty slot */
.about-mod__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(40px, 4.4vw, 64px);
}
.about-mod__list li {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px 0 20px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
@media (max-width: 699px) { .about-mod__list li { font-size: 0.875rem; } }
.about-mod__list li span {
  font-size: var(--fs-micro);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s var(--ease);
}
.about-mod__list li:nth-child(6) { grid-column: 1; }
.about-mod__list .about-mod__yours {
  grid-row: 2;
  grid-column: 3;
  color: var(--about-slot);
  border-top: 1px dashed var(--about-slot);
}
.about-mod__list .about-mod__yours span { color: inherit; }

/* Reveal: modules assemble one by one, then the empty slot appears */
.js:not(.shot) .about-mod__figure:not(.is-in) .about-mod__mark > * { opacity: 0; }
.about-mod__figure.is-in .about-mod__mark i { animation: mod-in 1s var(--ease-out) backwards; }
.about-mod__figure.is-in .about-mod__mark i:nth-child(1) { animation-delay: 0.10s; }
.about-mod__figure.is-in .about-mod__mark i:nth-child(2) { animation-delay: 0.18s; }
.about-mod__figure.is-in .about-mod__mark i:nth-child(3) { animation-delay: 0.26s; }
.about-mod__figure.is-in .about-mod__mark i:nth-child(4) { animation-delay: 0.34s; }
.about-mod__figure.is-in .about-mod__mark i:nth-child(5) { animation-delay: 0.42s; }
.about-mod__figure.is-in .about-mod__mark i:nth-child(6) { animation-delay: 0.50s; }
.about-mod__figure.is-in .about-mod__mark i:nth-child(7) { animation-delay: 0.58s; }
.about-mod__figure.is-in .about-mod__mark i:nth-child(8) { animation-delay: 0.66s; }
.about-mod__figure.is-in .about-mod__mark .about-slot { animation: about-slot-in 0.9s var(--ease-out) 1s backwards; }
@keyframes about-slot-in {
  from { opacity: 0; transform: scale(1.3); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .about-mod__mark > * { animation: none !important; }
}

/* Hover: list item <-> module (pointer devices only).
   While any part is hovered everything dims; the matching pair lights up.
   Highlight selectors repeat the :has() prefix so they outrank the dim rule. */
.about-mod__mark > * { transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .about-mod__list li { cursor: default; }
  .about-mod:has(.about-mod__list li:hover, .about-mod__mark > :hover) .about-mod__mark > * { opacity: 0.22; }
  .about-mod:has(.about-mod__list li:hover, .about-mod__mark > :hover) .about-mod__list li { color: var(--muted); }

  /* list -> module */
  .about-mod:has(.about-mod__list li:nth-child(1):hover) .about-mod__mark i:nth-child(1),
  .about-mod:has(.about-mod__list li:nth-child(2):hover) .about-mod__mark i:nth-child(2),
  .about-mod:has(.about-mod__list li:nth-child(3):hover) .about-mod__mark i:nth-child(3),
  .about-mod:has(.about-mod__list li:nth-child(4):hover) .about-mod__mark i:nth-child(4),
  .about-mod:has(.about-mod__list li:nth-child(5):hover) .about-mod__mark i:nth-child(5),
  .about-mod:has(.about-mod__list li:nth-child(6):hover) .about-mod__mark i:nth-child(6),
  .about-mod:has(.about-mod__list li:nth-child(7):hover) .about-mod__mark i:nth-child(7),
  .about-mod:has(.about-mod__list li:nth-child(8):hover) .about-mod__mark i:nth-child(8),
  .about-mod:has(.about-mod__mark > :hover) .about-mod__mark i:hover { opacity: 1; background: var(--about-slot); }
  .about-mod:has(.about-mod__list li:nth-child(9):hover) .about-mod__mark .about-slot,
  .about-mod:has(.about-mod__mark > :hover) .about-mod__mark .about-slot:hover {
    --slot: var(--paper);
    opacity: 1;
    background: var(--about-slot);
    border-color: var(--about-slot);
  }

  /* module -> list */
  .about-mod:has(.about-mod__mark > :nth-child(1):hover) .about-mod__list li:nth-child(1),
  .about-mod:has(.about-mod__mark > :nth-child(2):hover) .about-mod__list li:nth-child(2),
  .about-mod:has(.about-mod__mark > :nth-child(3):hover) .about-mod__list li:nth-child(3),
  .about-mod:has(.about-mod__mark > :nth-child(4):hover) .about-mod__list li:nth-child(4),
  .about-mod:has(.about-mod__mark > :nth-child(5):hover) .about-mod__list li:nth-child(5),
  .about-mod:has(.about-mod__mark > :nth-child(6):hover) .about-mod__list li:nth-child(6),
  .about-mod:has(.about-mod__mark > :nth-child(7):hover) .about-mod__list li:nth-child(7),
  .about-mod:has(.about-mod__mark > :nth-child(8):hover) .about-mod__list li:nth-child(8),
  .about-mod:has(.about-mod__list li:hover) .about-mod__list li:hover { color: var(--paper); border-top-color: var(--paper); }
  .about-mod:has(.about-mod__mark > :nth-child(9):hover) .about-mod__list li:nth-child(9),
  .about-mod:has(.about-mod__list li:hover) .about-mod__list li:nth-child(9):hover { color: var(--about-slot); border-top-color: var(--about-slot); }
}

/* ---------- İlkeler ---------- */
.about-principles__title { max-width: 22ch; }
.about-principles .features {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(40px, 5vw, 80px);
  border-bottom: 1px solid var(--line);
}
.about-principles .feature {
  row-gap: 8px;
  padding-block: clamp(20px, 2vw, 28px) clamp(24px, 2.8vw, 40px);
}
.about-principles .feature h3 { font-size: var(--fs-h3); }
.about-principles .feature p { color: var(--ink-2); font-size: var(--fs-body); max-width: 44ch; }
@media (min-width: 900px) {
  /* 9 columns = the split body's share of the page grid, so rows stay on the grid */
  .about-principles .feature {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
  }
  .about-principles .feature::before { grid-column: 1; }
  .about-principles .feature h3 { grid-column: 2 / span 4; padding-right: 1em; }
  .about-principles .feature p { grid-column: 6 / span 4; }
}

/* ---------- Süreç ---------- */
.about-process__lead { margin-top: clamp(20px, 2.2vw, 28px); color: var(--ink-2); max-width: 34ch; }
.about-process__steps { margin-top: clamp(56px, 7vw, 112px); }
.about-process__steps .step { grid-template-rows: auto auto 1fr auto; }
.about-process__steps .step p { color: var(--ink-2); max-width: 32ch; }
.about-process__steps .step__time { padding-top: 12px; }
.about-process__foot { margin-top: clamp(40px, 5vw, 72px); }
.about-process__demo {
  font-size: var(--fs-lead);
  line-height: 1.38;
  letter-spacing: -0.005em;
  max-width: 36ch;
}
.about-process__aside { margin-top: 20px; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; }
.about-process__aside .link { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }

/* ---------- Disiplinler ---------- */
.about-disc__lead { margin-top: clamp(20px, 2.2vw, 28px); color: var(--ink-2); max-width: 40ch; }
.about-disc__list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(56px, 7vw, 112px);
  border-top: 1px solid var(--line-strong);
}
.about-disc__item {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-block: 20px clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.about-disc__num {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.about-disc__name { font-size: clamp(1.4rem, 1.15rem + 0.6vw, 1.75rem); line-height: 1.12; letter-spacing: -0.025em; }
.about-disc__text { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; max-width: 40ch; }
.about-disc__tags {
  list-style: none;
  display: grid;
  gap: 6px;
  align-content: start;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.about-disc__tags li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.35;
}
.about-disc__tags li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.4;
}
/* Rows below 1100px: tags run inline under the text, no second hairline */
@media (max-width: 1099px) {
  .about-disc__tags { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 6px; border-top: 0; }
  .about-disc__text { max-width: 52ch; }
}
/* Tablet: number sits in the page's label column, content on the split body (cols 4–12) */
@media (min-width: 700px) and (max-width: 1099px) {
  .about-disc__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 10px;
    align-items: baseline;
  }
  .about-disc__num { grid-column: 1 / span 3; grid-row: 1; }
  .about-disc__name { grid-column: 4 / -1; grid-row: 1; }
  .about-disc__text { grid-column: 4 / -1; grid-row: 2; }
  .about-disc__tags { grid-column: 4 / -1; grid-row: 3; }
}
@media (min-width: 1100px) {
  .about-disc__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    border-bottom: 1px solid var(--line);
  }
  .about-disc__item {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 14px;
    padding: 20px clamp(16px, 1.7vw, 28px) 36px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }
  .about-disc__item:first-child { padding-left: 0; border-left: 0; }
  .about-disc__item:last-child { padding-right: 0; }
  .about-disc__tags { margin-top: 12px; }
}
.about-disc__foot { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- Kariyer ---------- */
.about-careers__label { display: grid; gap: 32px; align-content: start; justify-items: start; }
.about-careers__mark { --size: 72px; color: var(--ink); }
.about-careers__mark .about-slot::before,
.about-careers__mark .about-slot::after { display: none; }
@media (max-width: 899px) { .about-careers__mark { display: none; } }
.about-careers__title { max-width: 22ch; }
.about-careers__lead { margin-top: clamp(20px, 2.2vw, 28px); color: var(--ink-2); max-width: 40ch; }
.about-careers__list {
  list-style: none;
  display: grid;
  gap: 28px var(--col-gap);
  margin-top: clamp(48px, 5.5vw, 88px);
}
@media (min-width: 760px) { .about-careers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-careers__list li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.about-careers__list h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-h4);
}
.about-careers__list h3::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateY(-0.12em);
}
.about-careers__list p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; max-width: 34ch; }
.about-careers__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: clamp(48px, 5.5vw, 88px);
}
.about-careers__mail { font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.about-careers__mail .link { color: var(--ink); font-weight: 500; }
.about-careers__mail a { white-space: nowrap; }