/*.install-flow {
    display: flex;
    justify-content: center;
    gap: 0
}

.install-step {
    position: relative;
    background: #0dcaf0; 
    color: #fff;
    padding: 20px 40px;
    font-weight: 600;
    text-align: center;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
    transition: background .4s;
}

    .install-step.active {
        background: #22c55e;
    }*/

/* === GENEL === */
.install-flow {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px; /* mobilde nefes alanı */
    flex-wrap: wrap; /* tek satıra zorlamayı bırak */
    margin: 0 auto;
    max-width: 100%;
    padding: 8px 0;
}

.install-step {
    position: relative;
    background: #0dcaf0; /* mavi */
    color: #fff;
    /* sabit değer yerine clamp ile akışkan padding & font */
    padding: clamp(12px, 3vw, 20px) clamp(20px, 4vw, 40px);
    font-weight: 600;
    text-align: center;
    /* küçük ekranlarda okunabilir genişlik */
    min-width: min(280px, 100%);
    max-width: 100%;
    /* ok ucu daha küçük ekranlarda biraz içe gelsin */
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    transition: background .3s ease, transform .2s ease;
    border-radius: 10px; /* ok gövdesine hafif radius hoş durur */
}

    .install-step.active {
        background: #22c55e;
    }
/* yeşil */

/* hover/active feedback (dokunmatik dışı) */
@media (hover:hover) {
    .install-step:hover {
        transform: translateY(-2px);
    }
}

/* === MOBIL DOSTU KIRILIM === */
@media (max-width: 768px) {
    .install-flow {
        justify-content: stretch;
    }

    .install-step {
        text-align: left;
        padding: 14px 18px;
        clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    }
}