/* ============================================================
   ÇAĞRI MERKEZİNDE DÖNÜŞÜM — staircase / cascade (2024→2026)
   ============================================================ */
.ccx-sec { background: var(--bg); }

/* staircase container — cards positioned diagonally */
.ccx {
  position: relative;
  height: 480px;
  margin: 0 auto;
}

.ccx-card {
  position: absolute;
  top: 0;
  width: 31%;
  box-sizing: border-box;
  padding: 15px 16px 16px;
  border-radius: 6px;
  background: #f5f5fa;
  border: 1px solid #ececf2;
  /* staircase Y is driven by scroll (inline transform); opacity fades in once */
  opacity: 0;
  transition: opacity .5s ease;
  transform: translateY(0);
  will-change: transform, opacity;
}
.ccx-card.is-in { opacity: 1; }

.ccx-card--1 { left: 0;   }
.ccx-card--2 { left: 35%; }
.ccx-card--3 {
  left: 69%;
  background: var(--ccx-accent-soft, #e9edfd);
  border-color: var(--ccx-accent-line, #cfd8fb);
}

.ccx-card__year {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink, #0b1526);
}
.ccx-card--3 .ccx-card__year { color: var(--accent); }

/* icon grid — 6 columns */
.ccx-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin: 11px 0 11px;
  min-height: 64px;
  align-content: start;
}

.ccx-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  /* hidden start-state — filled one-by-one by JS */
  opacity: 0;
  transform: scale(.4);
  transition: opacity .26s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.ccx-ico svg { width: 80%; height: 80%; display: block; }
.ccx-ico--person { color: #97a0b5; }
.ccx-ico--ai     { color: #0b1526; }

.ccx-ico.is-on   { opacity: 1; transform: scale(1); }
/* card-3 dramatic collapse states */
.ccx-ico.is-pop  { opacity: 1; transform: scale(1.2); }
.ccx-ico.is-gone { opacity: 0; transform: scale(0); transition: opacity .18s ease, transform .18s ease; }

/* 2026 card: after the collapse, center the 2 survivors
   (grid keeps its populated height so the card matches the others) */
.ccx-grid.is-collapsed {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ccx-grid.is-collapsed .ccx-ico.is-gone { display: none; }
.ccx-grid.is-collapsed .ccx-ico { width: 30px; height: 30px; }

.ccx-card__stat {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink, #0b1526);
  font-feature-settings: "tnum" 1;
}
.ccx-card--3 .ccx-card__stat { color: var(--accent); }

.ccx-card__desc {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #6b7280;
  text-wrap: pretty;
}
.ccx-card--3 .ccx-card__desc { color: color-mix(in oklab, var(--accent) 78%, #2a3550); }

/* legend */
.ccx-legend {
  display: flex;
  gap: 26px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.ccx-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
}
.ccx-legend__item svg { width: 18px; height: 18px; }
.ccx-legend__item--person { color: #97a0b5; }
.ccx-legend__item--ai     { color: #0b1526; }
.ccx-legend__item span { color: #6b7280; }

/* responsive — collapse staircase into a stack */
@media (max-width: 880px) {
  .ccx { height: auto; display: flex; flex-direction: column; gap: 16px; }
  .ccx-card { position: static; width: 100%; transform: none; }
}