/* urun-dongu: tek bir bulgunun üç duraklı yolculuğu; bağlantı çizgisi girişte bir kez çizilir. */
.bolum-urun-dongu { background: radial-gradient(60% 60% at 50% 100%, rgba(227,179,65,.08), transparent 70%), linear-gradient(180deg, var(--gece), var(--gece-2)); border-top: 1px solid var(--cizgi-soluk); }
.bolum-urun-dongu .bolum-bas { margin-bottom: clamp(44px, 7vh, 80px); }
.ud-yol { --g: clamp(32px, 4vw, 72px); }
html.js .ud-yol[data-ac] { opacity: 1; transform: none; transition: none; }
.ud-adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.ud-adim { position: relative; display: grid; gap: 28px; align-content: start; }
.ud-dugum { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 6px; border: 1px solid var(--cizgi); background: var(--yuzey); transition: box-shadow .8s ease, border-color .8s ease; }
.ud-dugum img { width: 52px; height: 52px; }
.ud-metin { display: grid; gap: 12px; padding-inline-end: 8px; }
.ud-ad { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--altin); }
.ud-metin h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.15; text-wrap: balance; }
.ud-metin .govde { font-size: 17px; max-width: 28em; }
.ud-not { margin-top: clamp(40px, 6vh, 64px); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

/* çizgi: bir düğümden sonrakine */
.ud-adim:not(:last-child)::after { content: ''; position: absolute; top: 36px; inset-inline-start: 84px; width: calc(100% + var(--g) - 96px); height: 1px; background: linear-gradient(90deg, var(--altin), rgba(227,179,65,.55)); transform: scaleX(0); transform-origin: left center; }
.ud-adim:not(:last-child)::before { content: ''; position: absolute; z-index: 1; top: 32px; inset-inline-start: calc(100% + var(--g) - 17px); width: 8px; height: 8px; border-top: 1px solid var(--altin); border-right: 1px solid var(--altin); transform: rotate(45deg); opacity: 0; }
html[dir="rtl"] .ud-adim:not(:last-child)::after { transform-origin: right center; }
html[dir="rtl"] .ud-adim:not(:last-child)::before { border-right: 0; border-left: 1px solid var(--altin); transform: rotate(-45deg); }

html.js .ud-dugum, html.js .ud-metin { opacity: 0; translate: 0 16px; }
html.js .ud-yol.gorundu .ud-dugum, html.js .ud-yol.gorundu .ud-metin { opacity: 1; translate: 0 0; transition: opacity .7s var(--yay) calc(var(--s) * 750ms), translate .7s var(--yay) calc(var(--s) * 750ms), box-shadow .8s ease calc(var(--s) * 750ms), border-color .8s ease; }
html.js .ud-yol.gorundu .ud-metin { transition-delay: calc(var(--s) * 750ms + 250ms); }
.ud-yol.gorundu .ud-dugum { box-shadow: 0 0 0 1px rgba(227,179,65,.12), 0 0 36px -6px rgba(227,179,65,.4); transition-delay: calc(var(--s) * 750ms), calc(var(--s) * 750ms), calc(var(--s) * 750ms + 300ms); }
.ud-yol.gorundu .ud-adim:not(:last-child)::after { transform: scaleX(1); transition: transform .6s cubic-bezier(.5, 0, .2, 1) calc(var(--s) * 750ms + 400ms); }
.ud-yol.gorundu .ud-adim:not(:last-child)::before { opacity: 1; transition: opacity .2s ease calc(var(--s) * 750ms + 950ms); }

@media (max-width: 860px) {
  .ud-adimlar { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ud-adim { grid-template-columns: 72px minmax(0, 1fr); gap: 0 24px; padding-bottom: 48px; }
  .ud-adim:last-child { padding-bottom: 0; }
  .ud-metin { padding-top: 4px; }
  .ud-adim:not(:last-child)::after { top: 84px; inset-inline-start: 36px; width: 1px; height: calc(100% - 96px); transform: scaleY(0); transform-origin: center top; background: var(--altin); }
  .ud-adim:not(:last-child)::before { top: auto; bottom: 8px; inset-inline-start: 32px; border: 0; border-bottom: 1px solid var(--altin); border-right: 1px solid var(--altin); transform: rotate(45deg); }
  html[dir="rtl"] .ud-adim:not(:last-child)::before { border-left: 0; border-right: 1px solid var(--altin); transform: rotate(45deg); }
  html[dir="rtl"] .ud-adim:not(:last-child)::after { transform-origin: center top; }
  .ud-yol.gorundu .ud-adim:not(:last-child)::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .ud-dugum, html.js .ud-metin { opacity: 1 !important; translate: none !important; transition: none !important; }
  .ud-adim:not(:last-child)::after { transform: none !important; transition: none !important; }
  .ud-adim:not(:last-child)::before { opacity: 1 !important; transition: none !important; }
}