/* Tailwind-Only CSS - Minimal Custom Styles */

/* Import Tailwind Base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Minimal Custom Styles - NO !important */
.font-display { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.font-sans { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.font-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Simple Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes float-reverse {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(10px); }
}

.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-reverse { animation: float-reverse 8s ease-in-out infinite; }

/* Slider Styles */
.slider-dot.active {
    background-color: #2563eb;
    transform: scale(1.2);
}

.slide {
    transition: opacity 0.8s ease-in-out;
}

/* Hero Title Fixed Height - Prevents Layout Shift */
.hero-title {
    min-height: 14rem; /* Fixed height for all screen sizes */
}

@media (max-width: 640px) {
    .hero-title {
        min-height: auto; /* No fixed height for mobile - let content flow naturally */
    }
}

@media (min-width: 1024px) {
    .hero-title {
        min-height: 16rem; /* Larger height for desktop */
    }
    
    /* Desktop: 2 satır başlık */
    .hero-title .block:nth-child(1) {
        display: inline-block;
        margin-right: 0.5rem;
    }
    
    .hero-title .block:nth-child(2) {
        display: inline-block;
        margin-right: 0.5rem;
    }
    
    .hero-title .block:nth-child(3) {
        display: block;
        margin-top: 0.5rem;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}
