@font-face {
    font-family: 'Gilroy';
    src: url('../gilroy/Gilroy-Light.ttf') format('truetype');
    font-weight: 300; 
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../gilroy/Gilroy-Regular.ttf') format('truetype');
    font-weight: 900; 
    font-style: normal;
    font-display: swap;
}




.hizli-yonlendirme-section {
    padding: 80px 20px;
    background-color: #f7f7f7;
    font-family: 'Gilroy', sans-serif; 
    overflow-x: hidden; 
}

.hizli-yonlendirme-container {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px; 
}

.yonlendirme-item {
    display: flex;
    align-items: center;
    position: relative;
    padding: 25px 0;
    text-decoration: none;
    color: #222;
}


.yonlendirme-text,
.yonlendirme-icon {
    opacity: 0; 
    transform: translateY(30px); 
}

.yonlendirme-text {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 900; 
    position: relative;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.yonlendirme-icon {
    margin-left: 25px;
    width: 1em;
    height: 1em;
    font-size: clamp(3rem, 7vw, 5.5rem);
    color: #222;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s ease;
}

.yonlendirme-item:hover .yonlendirme-text {
    transform: translateX(15px);
}
.yonlendirme-item:hover .yonlendirme-icon {
    transform: translateX(10px);
    color: #1e608b;
}


.yonlendirme-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 5px;
    background-color: #222;
    transform-origin: left;
    transform: translateY(-50%) scaleX(0); 
}


.yonlendirme-item.start-animation .yonlendirme-text::before {
    animation-name: fill-line;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-fill-mode: forwards;
}

.yonlendirme-item.start-animation .yonlendirme-text,
.yonlendirme-item.start-animation .yonlendirme-icon {
    animation-name: fade-in-up;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
}

.yonlendirme-item:hover .yonlendirme-text::before {
    background-color: #1e608b;
}


.yonlendirme-item:nth-child(1) .yonlendirme-text { padding-left: 350px; }
.yonlendirme-item:nth-child(1) .yonlendirme-text::before { width: 330px; }
.yonlendirme-item:nth-child(1).start-animation .yonlendirme-text::before { animation-delay: 0.2s; }
.yonlendirme-item:nth-child(1).start-animation .yonlendirme-text       { animation-delay: 0.4s; }
.yonlendirme-item:nth-child(1).start-animation .yonlendirme-icon       { animation-delay: 0.5s; }

.yonlendirme-item:nth-child(2) .yonlendirme-text { padding-left: 450px; }
.yonlendirme-item:nth-child(2) .yonlendirme-text::before { width: 430px; }
.yonlendirme-item:nth-child(2).start-animation .yonlendirme-text::before { animation-delay: 0.4s; }
.yonlendirme-item:nth-child(2).start-animation .yonlendirme-text       { animation-delay: 0.6s; }
.yonlendirme-item:nth-child(2).start-animation .yonlendirme-icon       { animation-delay: 0.7s; }

.yonlendirme-item:nth-child(3) .yonlendirme-text { padding-left: 550px; }
.yonlendirme-item:nth-child(3) .yonlendirme-text::before { width: 530px; }
.yonlendirme-item:nth-child(3).start-animation .yonlendirme-text::before { animation-delay: 0.6s; }
.yonlendirme-item:nth-child(3).start-animation .yonlendirme-text       { animation-delay: 0.8s; }
.yonlendirme-item:nth-child(3).start-animation .yonlendirme-icon       { animation-delay: 0.9s; }



@keyframes fill-line {
    to { transform: translateY(-50%) scaleX(1); }
}

@keyframes fade-in-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@media (max-width: 768px) {
    .hizli-yonlendirme-container {
        gap: 0;
    }
    .yonlendirme-item {
        padding: 15px 0;
    }

    .yonlendirme-text {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
        font-weight: 900; 
        white-space: nowrap;
    }
    
    .yonlendirme-text::before {
        height: 4px;
    }

    .yonlendirme-item:nth-child(1) .yonlendirme-text { padding-left: 20vw; }
    .yonlendirme-item:nth-child(1) .yonlendirme-text::before { width: calc(20vw - 10px); }

    .yonlendirme-item:nth-child(2) .yonlendirme-text { padding-left: 28vw; }
    .yonlendirme-item:nth-child(2) .yonlendirme-text::before { width: calc(28vw - 10px); }

    .yonlendirme-item:nth-child(3) .yonlendirme-text { padding-left: 36vw; }
    .yonlendirme-item:nth-child(3) .yonlendirme-text::before { width: calc(36vw - 10px); }

    .yonlendirme-icon {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
        margin-left: 10px;
    }
}