/* urun-bas: ürün sayfası açılışı; üç adımlık döngü şeridi (bağlantı çizgileri ve dönüş çizgisi bir kez çizilir). */
.bolum-urun-bas { padding-top: calc(var(--ust-boy) + clamp(56px, 11vh, 128px)); padding-bottom: clamp(72px, 11vh, 130px); overflow: clip;
  background: radial-gradient(60% 55% at 82% 8%, rgba(227,179,65,.11), transparent 65%), radial-gradient(45% 45% at 6% 100%, rgba(227,179,65,.05), transparent 70%), var(--gece); }
.ub-bas { display: grid; gap: clamp(18px, 2.6vh, 28px); max-width: 980px; }
.ub-bas h1 { font-size: clamp(46px, 6.2vw, 96px); }
.ub-cumle { max-width: 36em; }
.ub-seri { --g: clamp(28px, 3.6vw, 60px); margin-top: clamp(48px, 8vh, 96px); }
html.js .ub-seri[data-ac] { opacity: 1; transform: none; transition: none; }
.ub-adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.ub-adim { position: relative; }
.ub-kart { display: grid; gap: 12px; align-content: start; height: 100%; padding: 22px 24px 28px; border-radius: 6px; border: 1px solid var(--cizgi-soluk); text-decoration: none;
  background: linear-gradient(180deg, rgba(27,21,14,.85), rgba(21,16,11,.55)); box-shadow: 0 0 0 1px rgba(227,179,65,.03) inset;
  transition: border-color .3s, transform .35s var(--yay), background .3s; }
.ub-kart:hover, .ub-kart:focus-visible { border-color: var(--cizgi); transform: translateY(-4px); background: linear-gradient(180deg, rgba(34,26,15,.9), rgba(21,16,11,.6)); }
.ub-ust { display: flex; align-items: flex-start; justify-content: space-between; }
.ub-ikon { width: 64px; height: 64px; transition: transform .5s var(--yay); }
.ub-kart:hover .ub-ikon { transform: scale(1.08) rotate(-4deg); }
.ub-no { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--metin-3); }
.ub-ad { margin-top: 6px; font-weight: 500; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
.ub-ad::after { content: '↓'; font-size: .7em; color: var(--altin); transition: transform .3s var(--yay); }
.ub-kart:hover .ub-ad::after { transform: translateY(4px); }
.ub-kart .govde { font-size: 17px; }

/* bağlantı çizgileri: kartların arasındaki boşlukta, simgelerin hizasında */
.ub-adim:not(:last-child)::after { content: ''; position: absolute; top: 54px; inset-inline-start: 100%; width: var(--g); height: 1px; background: var(--altin); transform: scaleX(0); transform-origin: left center; }
.ub-adim:not(:last-child)::before { content: ''; position: absolute; z-index: 1; top: 51px; inset-inline-start: calc(100% + var(--g) - 7px); width: 7px; height: 7px; border-top: 1px solid var(--altin); border-right: 1px solid var(--altin); transform: rotate(45deg); opacity: 0; }
html[dir="rtl"] .ub-adim:not(:last-child)::after { transform-origin: right center; }
html[dir="rtl"] .ub-adim:not(:last-child)::before { border-right: 0; border-left: 1px solid var(--altin); transform: rotate(-45deg); }
/* dönüş: Nucleus'tan Sense'e */
.ub-don { position: relative; height: 26px; margin-inline: calc(16.666% - var(--g) / 3); border: 1px solid var(--cizgi); border-top: 0; border-radius: 0 0 6px 6px; clip-path: inset(-12px 0 0 100%); }
.ub-don::before { content: ''; position: absolute; inset-inline-start: -4px; top: -6px; width: 8px; height: 8px; border-top: 1px solid var(--altin); border-left: 1px solid var(--altin); transform: rotate(45deg); }
html[dir="rtl"] .ub-don { clip-path: inset(-12px 100% 0 0); }
html[dir="rtl"] .ub-don::before { border-left: 0; border-right: 1px solid var(--altin); transform: rotate(-45deg); }

/* giriş: kartlar sırayla, çizgiler arkadan */
html.js .ub-adim .ub-kart { opacity: 0; translate: 0 18px; }
html.js .ub-seri.gorundu .ub-adim .ub-kart { opacity: 1; translate: 0 0; transition: opacity .7s var(--yay) calc(var(--s) * 380ms + 100ms), translate .7s var(--yay) calc(var(--s) * 380ms + 100ms), border-color .3s, transform .35s var(--yay), background .3s; }
.ub-seri.gorundu .ub-adim:not(:last-child)::after { transform: scaleX(1); transition: transform .45s cubic-bezier(.5, 0, .2, 1) calc(var(--s) * 380ms + 650ms); }
.ub-seri.gorundu .ub-adim:not(:last-child)::before { opacity: 1; transition: opacity .2s ease calc(var(--s) * 380ms + 1050ms); }
.ub-seri.gorundu .ub-don { clip-path: inset(-12px 0 0 0); transition: clip-path 1.1s cubic-bezier(.5, 0, .2, 1) 1.9s; }
html[dir="rtl"] .ub-seri.gorundu .ub-don { clip-path: inset(-12px 0 0 0); }
html:not(.js) .ub-don { clip-path: none; }

@media (max-width: 860px) {
  .ub-adimlar { grid-template-columns: minmax(0, 1fr); }
  .ub-don { display: none; }
  .ub-adim:not(:last-child)::after { top: 100%; inset-inline-start: 55px; width: 1px; height: var(--g); transform: scaleY(0); transform-origin: center top; }
  .ub-adim:not(:last-child)::before { top: calc(100% + var(--g) - 7px); inset-inline-start: 52px; border: 0; border-bottom: 1px solid var(--altin); border-right: 1px solid var(--altin); transform: rotate(45deg); }
  html[dir="rtl"] .ub-adim:not(:last-child)::after { transform-origin: center top; }
  html[dir="rtl"] .ub-adim:not(:last-child)::before { border-left: 0; border-right: 1px solid var(--altin); transform: rotate(45deg); }
  .ub-seri.gorundu .ub-adim:not(:last-child)::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .ub-adim .ub-kart { opacity: 1 !important; translate: none !important; transition: none !important; }
  .ub-adim:not(:last-child)::after { transform: none !important; transition: none !important; }
  .ub-adim:not(:last-child)::before { opacity: 1 !important; transition: none !important; }
  .ub-don { clip-path: none !important; transition: none !important; }
}