/**
 * Modül: Süreç Adımları (Sadece Tasarım)
 */
.p-steps {
    margin: 30px 0;
    width: 100%;
}

.ps-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.ps-item:last-child { margin-bottom: 0; }

.ps-number {
    width: 40px;
    height: 40px;
    background: var(--p-blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.ps-body h4 { margin: 0 0 8px 0; font-size: 18px; color: #1e293b; }
.ps-desc { color: #64748b; font-size: 14px; line-height: 1.6; }

/* 1. Dikey Bağlantılı Stil */
.ps-vertical .ps-item::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: -30px;
    width: 2px;
    background: #e2e8f0;
    z-index: 1;
}
.ps-vertical .ps-item:last-child::before { display: none; }

/* 2. Yatay Akış (Masaüstü) */
@media (min-width: 769px) {
    .ps-horizontal { display: flex; gap: 30px; }
    .ps-horizontal .ps-item { flex: 1; flex-direction: column; text-align: center; margin-bottom: 0; }
    .ps-horizontal .ps-number { margin: 0 auto 15px; }
    .ps-horizontal .ps-item::after {
        content: '';
        position: absolute;
        left: calc(50% + 25px);
        top: 20px;
        width: calc(100% - 50px);
        height: 2px;
        background: #e2e8f0;
        z-index: 1;
    }
    .ps-horizontal .ps-item:last-child::after { display: none; }
}

/* 3. Kartlı Stil */
.ps-card .ps-item {
    background: #f8fafc;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}
.ps-card .ps-number { background: #1e293b; }

/* 4. Minimal Stil */
.ps-minimal .ps-number { background: transparent; color: var(--p-blue); border: 2px solid var(--p-blue); box-shadow: none; }
.ps-minimal .ps-item { border-left: 2px solid #f1f5f9; padding-left: 30px; margin-left: 19px; }
.ps-minimal .ps-number { margin-left: -40px; }