/* Özel renkler ve yazı tipi */
:root {
    --primary-blue: #00bcd4; /* Turkuaz Mavisi */
    --primary-orange: #ff9800; /* Turuncu */
    --primary-white: #ffffff; /* Beyaz */
    --secondary-black: #1a202c; /* Siyah (koyu gri tonu) */
    --light-gray: #f7fafc; /* Açık gri */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-gray); /* Hafif gri arka plan */
    color: var(--secondary-black);
    line-height: 1;
}

.text-turkuaz {
    color: var(--primary-blue);
}

.bg-turkuaz {
    background-color: var(--primary-blue);
}

.text-turuncu {
    color: var(--primary-orange);
}

.bg-turuncu {
    background-color: var(--primary-orange);
}

.text-siyah {
    color: var(--secondary-black);
}

.bg-siyah {
    background-color: var(--secondary-black);
}

.border-turkuaz {
    border-color: var(--primary-blue);
}

.border-turuncu {
    border-color: var(--primary-orange);
}

/* Gölge efekti için genel sınıf */
.card-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Hero Section Arka Planı ve Overlay */
.hero-background {
    background-image: url('../img/120190929_103515.jpg'); /* Didim manzarası veya bisiklet temalı görsel */
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}

    .hero-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
        z-index: -1;
    }

/* Scroll Reveal Animation */
.reveal-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .reveal-item.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Custom Button Hover Effect */
.btn-gradient-hover {
    background-image: linear-gradient(to right, var(--primary-orange) 0%, var(--primary-blue) 100%);
    background-size: 200% auto;
    transition: background-position 0.5s ease;
}

    .btn-gradient-hover:hover {
        background-position: right center; /* Change the direction of the gradient */
    }

/* Özel Animasyonlar */
@keyframes bounce-y {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounce-x {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }
}

@keyframes spin-fast {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.group-hover\:animate-bounce-y:hover {
    animation: bounce-y 0.6s ease-in-out infinite;
}

.group-hover\:animate-bounce-x:hover {
    animation: bounce-x 0.6s ease-in-out infinite;
}

.group-hover\:animate-spin-fast:hover {
    animation: spin-fast 1s linear infinite;
}

/* Pulse for hero title */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media (max-width: 640px) {
  #countdown {
    flex-direction: row !important; /* Dikey dizilimi YATAY olmaya zorla! */
    flex-wrap: nowrap !important;   /* Elemanların alt satıra kaymasını engelle */
  }
}