py2d .map-wrapper { position: relative; width: 420px; height: 300px; margin: 50px auto; direction: rtl; } .step { position: absolute; display: flex; flex-direction: column; /* تغییر جهت به عمودی */ align-items: center; justify-content: center; gap: 6px; /* فاصله بین آیکون و متن */ padding: 12px 24px; background: #F4F4F4; color: #1E1E1E; font-size: 14px; border: 2px solid #D1D5DB; border-radius: 12px; cursor: pointer; transform: perspective(600px) rotateX(12deg); box-shadow: 0 8px 0 #E5E7EB, 0 10px 20px rgba(0,0,0,0.06); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s, color 0.2s; z-index: 2; text-align: center; } .step:active { background: #6B7280; color: white; transform: perspective(600px) rotateX(12deg) translateY(4px); box-shadow: 0 4px 0 #D1D5DB, 0 6px 12px rgba(0,0,0,0.1); } .step svg { width: 22px; height: 22px; fill: #6B7280; transition: fill 0.2s; } .step:active svg { fill: white; } .s1 { top: 0; right: 0; } .s2 { top: 0; right: 200px; } .s3 { top: 140px; right: 200px; } .s4 { top: 140px; right: 0; } .map-line { position: absolute; top: 0; right: 0; width: 420px; height: 300px; z-index: 1; } .map-line path { fill: none; stroke: #D1D5DB; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } مرحله اول است مرحله است دوم مرحله ۳ مرحله ۴