/* ==========================================================================
   NASIL ÇALIŞIR — solda üç adım, sağda arka planda dönen kontrol turu paneli
   ========================================================================== */

.how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}

.how__copy { display: grid; gap: 40px; }
.how__copy .section-head { margin-bottom: 0; }

/* ---------- Dikey adımlar ---------- */
.steps { display: grid; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 20px;
  padding: 14px 0;
}

/* Bir adımın numarasından sonrakinin numarasına uzanan bağlantı: soluk iz + sırayla dolan çizgi */
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 58px;     /* üst boşluk 14 + numara 44 */
  bottom: -14px; /* sonraki adımın numarasına kadar */
  width: 2px;
  background: var(--line);
}
.step:not(:last-child)::after {
  background: var(--red-600);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s var(--ease-in-out) .2s;
}
.steps.is-in .step::after { transform: scaleY(1); }
.steps.is-in .step:nth-child(2)::after { transition-delay: .9s; }

.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  grid-row: span 2;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  transition: background-color .4s, color .4s, border-color .4s;
}
.steps.is-in .step__num { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.steps.is-in .step:nth-child(2) .step__num { transition-delay: .7s; }
.steps.is-in .step:nth-child(3) .step__num { transition-delay: 1.4s; }

.step h3 { padding-top: 9px; font-size: 1.1875rem; }
.step p { margin-top: 6px; color: var(--muted); font-size: 15px; max-width: 46ch; }

/* ---------- Panelin çevresi ---------- */
.how__visual { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 14px; }

.how__note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  font-size: 13.5px;
  color: var(--muted);
}
.how__note .i { color: var(--navy-700); }

@media (max-width: 960px) {
  .how { grid-template-columns: 1fr; }
  .how__visual { position: static; }
}

/* ---------- Otomatik kontrol paneli ---------- */
.sync {
  --row-h: 46px;
  --rows-visible: 6;
  --c-ok: #3fd39b;
  --c-warn: #ffbf4d;
  --c-alert: #ff6b72;

  position: relative;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgb(255 255 255 / .06), transparent 60%),
    linear-gradient(180deg, #0e2552 0%, #0a1b3c 100%);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .07),
    inset 0 1px 0 rgb(255 255 255 / .1),
    0 2px 4px rgb(7 19 40 / .1),
    0 48px 96px -32px rgb(7 19 40 / .55);
}

.sync__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 16px;
}

.sync__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: rgb(255 255 255 / .07);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.06em;
}
.sync__mark b { color: var(--red-500); font-weight: 700; }

.sync__title { display: grid; line-height: 1.3; min-width: 0; }
.sync__title strong { font-size: 15px; font-weight: 600; }
.sync__title span { font-size: 12px; color: rgb(255 255 255 / .55); }


.sync__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: rgb(255 255 255 / .045);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05);
}

.ring { position: relative; width: 60px; height: 60px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring__track { stroke: rgb(255 255 255 / .09); }
.ring__bar {
  stroke: var(--c-ok);
  stroke-linecap: round;
  stroke-dasharray: 169.65;
  stroke-dashoffset: 169.65;
  transition: stroke-dashoffset .7s var(--ease-out);
}
.ring__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sync__progress { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.sync__progress b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sync__records { font-size: 12px; color: rgb(255 255 255 / .55); font-variant-numeric: tabular-nums; }

.sync__status {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / .07);
  font-size: 12px;
  font-weight: 500;
  color: rgb(255 255 255 / .7);
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.sync__status[data-state="running"] { background: rgb(255 191 77 / .14); color: var(--c-warn); }
.sync__status[data-state="done"] { background: rgb(63 211 155 / .14); color: var(--c-ok); }

/* Liste: sabit yükseklikte bir pencere, içindeki satırlar yukarı kayar */
.sync__list {
  position: relative;
  height: calc(var(--row-h) * var(--rows-visible));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

.sync__track { transition: transform .7s var(--ease-out); }

.sync-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: var(--row-h);
  padding-inline: 10px 8px;
  border-radius: 12px;
  font-size: 14px;
  opacity: .36;
  transition: opacity .4s, background-color .4s;
}

.sync-row__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sync-row__result {
  font-size: 12.5px;
  color: rgb(255 255 255 / .62);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out);
}

/* Durum göstergesi: sırada (kesik çember) → çalışıyor (dönen) → bitti (tik / uyarı) */
.sync-row__state {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px dashed rgb(255 255 255 / .35);
  transition: background-color .3s, border-color .3s;
}

.sync-row.is-running { opacity: 1; background: rgb(255 255 255 / .05); }
.sync-row.is-running .sync-row__state {
  border: 2px solid rgb(255 255 255 / .14);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.sync-row.is-running .sync-row__result {
  opacity: 1;
  transform: none;
  color: transparent;
  border-radius: 4px;
  background: linear-gradient(90deg, rgb(255 255 255 / .06) 0%, rgb(255 255 255 / .2) 50%, rgb(255 255 255 / .06) 100%) 0 0 / 200% 100%;
  animation: shimmer 1s linear infinite;
}

@keyframes shimmer { to { background-position: -200% 0; } }

.sync-row.is-done { opacity: 1; }
.sync-row.is-done .sync-row__result { opacity: 1; transform: none; }
.sync-row.is-done .sync-row__state {
  border: 0;
  background: var(--c-ok);
  animation: pop .45s var(--ease-spring);
}
/* Tik işareti */
.sync-row.is-done .sync-row__state::after {
  content: "";
  position: absolute;
  left: 6.5px; top: 4px;
  width: 4px; height: 8px;
  border: solid #0a1b3c;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Dikkat gerektiren sonuçlar: ünlem + renkli etiket */
.sync-row.is-done[data-tone="warn"] .sync-row__state { background: var(--c-warn); }
.sync-row.is-done[data-tone="alert"] .sync-row__state { background: var(--c-alert); }
.sync-row.is-done[data-tone] .sync-row__state::after {
  content: "!";
  left: 0; top: 0;
  width: 100%; height: 100%;
  border: 0;
  transform: none;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #0a1b3c;
}

.sync-row.is-done[data-tone] .sync-row__result {
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 500;
}
.sync-row.is-done[data-tone="warn"] .sync-row__result { background: rgb(255 191 77 / .13); color: var(--c-warn); }
.sync-row.is-done[data-tone="alert"] .sync-row__result { background: rgb(255 107 114 / .14); color: var(--c-alert); }

.sync__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 6px 2px;
  border-top: 1px solid rgb(255 255 255 / .07);
  margin-top: 6px;
  font-size: 13px;
  color: rgb(255 255 255 / .55);
}

.sync__pending {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--red-600);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-spring);
}
.sync__pending b { font-weight: 600; }
.sync__pending.is-visible { opacity: 1; transform: none; }


/* Koyu panelde "Canlı" rozeti */
.sync .live { background: rgb(63 211 155 / .14); color: var(--c-ok); }

@media (max-width: 480px) {
  .sync { --row-h: 42px; --rows-visible: 5; padding: 12px; border-radius: 20px; }
  .sync__summary { gap: 12px; padding: 12px; }
  .ring { width: 52px; height: 52px; }
  .sync__progress { font-size: 13px; }
  .sync__status { display: none; }
  .sync-row { font-size: 13px; gap: 10px; padding-inline: 8px 4px; }
  .sync-row__result { font-size: 11.5px; }
  .sync__foot { font-size: 12px; }
  .sync__foot > span:first-of-type { display: none; }
}