.services-wrapper {
    padding: var(--space-m);
    width: 100%;
    max-width: var(--container);
    margin: auto;
    position: relative;

    @media(max-width: 768px) {
        padding: var(--space-m) 0;
    }

    /* CAROUSEL GÖRÜNÜMÜ */
    &.carousel {
        .carousel-nav-btn {
            position: absolute;
            top: calc(50% - 35px);
            transform: translateY(-50%);
            z-index: 10;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(var(--color-primary-rgb), 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(var(--color-primary-light-rgb), 0.25);
            color: var(--color-light-light);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.15rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

            &.prev-btn {
                left: -10px;
            }

            &.next-btn {
                right: -10px;
            }

            &:hover:not(:disabled) {
                background: var(--color-primary);
                color: var(--color-light-light);
                border-color: var(--color-primary-light);
                box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.6);
                transform: translateY(-50%) scale(1.1);
            }

            &:disabled,
            &.disabled {
                opacity: 0;
                pointer-events: none;
                cursor: default;
            }

            @media(max-width: 768px) {
                display: none !important;
            }
        }

        .services-track {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: var(--space-l);
            padding: var(--space-l) 0 var(--space-l) 0;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;

            &::-webkit-scrollbar {
                display: none;
            }

            @media(max-width: 768px) {
                padding: var(--space-s) var(--space-m) var(--space-l) var(--space-m);
                scroll-padding: 0 var(--space-m);
                gap: var(--space-m);
            }

            .service-card {
                flex: 0 0 340px;
                scroll-snap-align: start;

                @media(max-width: 768px) {
                    flex: 0 0 80vw;
                    max-width: 320px;
                }
            }
        }
    }

    /* GRID GÖRÜNÜMÜ */
    &.grid {
        .services-track {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: var(--space-l);
            padding: var(--space-xl) 0px;

            @media(max-width: 768px) {
                grid-template-columns: 1fr;
                gap: var(--space-l);
                padding: 0px var(--space-m);
            }
        }
    }

    /* KART TASARIMI */
    .service-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
        overflow: hidden;
        text-decoration: none;
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        position: relative;

        &:hover {

            .card-title {
                color: var(--color-primary-light);
            }

            .card-image-wrap img,
            .card-image-wrap picture img {
                transform: scale(1.05);
            }
        }

        .card-image-wrap {
            position: relative;
            aspect-ratio: 16 / 10;
            width: 100%;
            overflow: hidden;
            background-color: rgba(var(--color-dark-rgb), 0.5);

            picture {
                display: block;
                width: 100%;
                height: 100%;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.4s ease;
                display: block;
            }

            .card-no-img {
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(var(--color-dark-rgb), 0.8), rgba(var(--color-dark-dark-rgb), 0.9));
            }
        }

        .card-info {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);

            .card-header-row {
                display: flex;
                flex-direction: column;
                gap: var(--space-2xs);

                .card-title {
                    font-size: var(--fs-m);
                    font-weight: 600;
                    color: var(--color-light-light);
                    line-height: 1.4;
                    transition: color 0.3s;
                    margin: 0;
                }

                .card-date {
                    font-size: var(--fs-s);
                    color: var(--color-secondary-light);
                }
            }
        }
    }
}