body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hero Slider Animasyonları */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    filter: blur(8px);
    transform: scale(1.05);
}

    .hero-slide.active {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        z-index: 10;
    }

/* Mexico Wave Slider CSS */
.gallery-viewport {
    width: 100%;
    overflow: hidden;
    padding: 80px 0;
    touch-action: pan-y;
    cursor: grab;
}

    .gallery-viewport:active {
        cursor: grabbing;
    }

.gallery-track {
    display: flex;
    gap: 32px;
    padding-left: 64px;
    transition: transform 1.1s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

.gallery-card {
    width: 300px;
    flex-shrink: 0;
    border-radius: 3rem;
    opacity: 0.45;
    transform: scale(0.9);
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s ease;
    overflow: hidden;
    background: #e2e8f0;
    /* Görsel yüklenene kadar gri arka plan */
}

    .gallery-card.active {
        transform: scale(1.08);
        opacity: 1;
        z-index: 20;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

.view-section {
    display: none;
}

    .view-section.active {
        display: block;
        animation: fadeIn 0.8s ease-out forwards;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

a {
    color: #2563eb;
    text-decoration: none;
}

.container {
    width: 1600px;
    margin: 40px auto;
    padding: 20px;
}

.card {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.badge {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .gallery-track {
        padding-left: 0;
    }

    .gallery-card {
        width: 80vw;
        max-width: 340px;
        opacity: 0.35;
        transform: scale(0.88);
    }

        .gallery-card.active {
            opacity: 1;
            transform: scale(1);
        }
}