.saat-wrapper{width:100%;box-sizing:border-box}
.saat-wrapper *,.saat-wrapper *:before,.saat-wrapper *:after{box-sizing:border-box}

/* Heading */
.saat-heading{
    margin:0 0 70px;
    text-align:center;
    line-height:1.2;
}

/* Desktop timeline */
.saat-timeline{
    position:relative;
    width:100%;
    padding:0px;
}

.saat-items{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
}

.saat-line{
    position:absolute;
    z-index:0;
    top:25px;
    left:calc(54px + 25px);
    right:calc(54px + 25px);
    height:2px;
    background:#777;
}

.saat-item{
    position:relative;
    z-index:1;
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.saat-number{
    width:50px;
    height:50px;
    flex:0 0 50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2F94E6;
    color:#fff;
    font-size:18px;
    font-weight:700;
    line-height:1;
    position:relative;
    z-index:3;
    margin-bottom:22px;
    transition:transform .25s ease,box-shadow .25s ease;
}

/* Connector from number to card */
.saat-number:after{
    content:"";
    position:absolute;
    left:50%;
    top:50px;
    transform:translateX(-50%);
    width:2px;
    height:22px;
    background:#777;
    z-index:-1;
}

/* Cards */
.saat-card{
    width:210px;
    min-height:134px;
    max-width:100%;
    padding:24px 16px;
    border-radius:16px;
    background:#2F94E6;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:18px;
    font-weight:700;
    line-height:1.35;
    text-decoration:none;
    box-shadow:0 7px 16px rgba(30,120,200,.30);
    position:relative;
    z-index:99!important;
    transform:translateY(0) scale(1);
    transition:transform .25s ease,box-shadow .25s ease;
}

.saat-card:hover{
    color:#fff;
    text-decoration:none;
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 13px 28px rgba(47,148,230,.48),0 0 14px rgba(47,148,230,.22);
}

/* When the card is hovered, the number also gently grows/glows */
.saat-item:has(.saat-card:hover) .saat-number{
    transform:scale(1.10);
    box-shadow:0 0 0 4px rgba(47,148,230,.12),0 0 18px rgba(47,148,230,.55);
}

/* Arrow between number circles */
.saat-arrow{
    position:absolute;
    z-index:4;
    top:19px;
    right:-19px;
    width:13px;
    height:13px;
    border-right:2px solid #777;
    border-top:2px solid #777;
    transform:rotate(45deg);
    pointer-events:none;
    background:transparent;
}

/* Tablet */
@media(max-width:1024px){
    .saat-timeline{padding:0 36px}
    .saat-line{left:61px;right:61px}
    .saat-items{gap:16px}
    .saat-card{font-size:16px;padding:20px 12px}
    .saat-arrow{right:-12px}
}

/* Mobile: exactly the vertical flow requested */
@media(max-width:767px){
    .saat-heading{margin-bottom:35px}
    .saat-timeline{padding:0}

    .saat-line{
        left:25px;
        right:auto;
        top:0;
        bottom:0;
        width:2px;
        height:auto;
    }

    .saat-items{
        display:flex;
        flex-direction:column;
        gap:28px;
    }

    .saat-item{
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:0;
    }

    .saat-number{
        width:50px;
        height:50px;
        flex:0 0 50px;
        margin:0 0 10px;
    }

    .saat-number:after{
        top:50px;
        height:10px;
    }

    .saat-card{
        width:calc(100% - 26px)!important;
        max-width:none;
        min-height:100px;
        text-align:center;
        justify-content:center;
        margin:0;
    }

    .saat-arrow{
        display:none;
    }

    /* Keep the mobile connector visually behind the cards */
    .saat-line{
        z-index:0;
    }

    .saat-number,
    .saat-card{
        z-index:2;
    }
}

/* Disable hover lifting on touch-sized layouts */
@media(hover:none) and (max-width:767px){
    .saat-card:hover{
        transform:none;
        box-shadow:0 7px 16px rgba(30,120,200,.30);
    }
    .saat-item:has(.saat-card:hover) .saat-number{
        transform:none;
        box-shadow:none;
    }
}