/* Custom CSS for Marmaris Apart Hotel */

/* Import Google Fonts - Inter is loaded via HTML, but good practice to include here if needed */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap'); */

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

/* Container for consistent padding and max-width */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Custom styles for sections to ensure good spacing */
section {
    padding-top: 4rem; /* Equivalent to py-16 in Tailwind */
    padding-bottom: 4rem; /* Equivalent to py-16 in Tailwind */
}

/* Hero Section Specific Styles */
#home {
    background-size: cover;
    background-position: center;
    min-height: 80vh; /* Ensure it takes up a good portion of the viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add text shadow for readability */
}

#home .bg-opacity-40 {
    background-color: rgba(0, 0, 0, 0.4); /* Darker overlay for text readability */
    padding: 2.5rem; /* Equivalent to p-6 */
    border-radius: 0.75rem; /* Equivalent to rounded-lg */
}

/* Scroll to Top Button */
#scroll-to-top {
    display: none; /* Hidden by default, controlled by JS */
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #3B82F6; /* blue-600 */
    color: white;
    padding: 1rem;
    border-radius: 9999px; /* full rounded */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    border: none;
    cursor: pointer;
}

#scroll-to-top:hover {
    background-color: #2563EB; /* blue-700 */
    transform: translateY(-2px);
}

/* Form Styling Enhancements */
input[type=text], input[type=email], input[type=date], input[type=number], textarea, select {
    border: 1px solid #D1D5DB; /* gray-300 */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    width: 100%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type=text]:focus, input[type=email]:focus, input[type=date]:focus, input[type=number]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #3B82F6; /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* ring-2 ring-blue-500 */
}

/* Button Styling (already handled by Tailwind, but custom touches can go here) */
button {
    cursor: pointer;
}

/* General Link Styling */
a {
    text-decoration: none;
}

/* Responsive adjustments for images in sections */
img {
    max-width: 100%;
    height: auto;
}

/* Custom animations (if needed beyond Tailwind's transitions) */
/* Example for a fade-in effect on scroll */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Mobil Menüye Özel CSS Ayarlamaları --- */
/* Tailwind'in 'md' breakpoint'i 768px'tir, bu nedenle bu kısım daha küçük ekranları hedefler. */
@media (max-width: 767px) {
    #mobile-menu {
        position: absolute; /* Menüyü sayfa akışından çıkarır ve diğer elementlerin üzerine gelmesini sağlar */
        top: 64px; /* Header yüksekliğinize göre menünün başlangıç konumunu ayarlar (örn: header 64px ise) */
        left: 0;
        width: 100%; /* Menünün tam ekran genişliğinde olmasını sağlar */
        max-height: calc(100vh - 64px); /* Ekran yüksekliğinden header'ı çıkararak menünün maksimum yüksekliğini belirler */
        overflow-y: auto; /* Eğer menü içeriği çok uzunsa dikey kaydırma çubuğu ekler */
        z-index: 45; /* Menünün diğer içeriklerin üzerinde olmasını sağlar ancak header'ın altında kalır (header z-50) */
        background-color: white; /* Menünün arka plan rengini belirler */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Menüye hafif bir gölge ekler */
        padding-bottom: 1rem; /* Menünün altına biraz boşluk ekler */
    }

    /* JavaScript 'hidden' sınıfını kaldırdığında menünün görünür olmasını sağlar */
    #mobile-menu:not(.hidden) {
        display: block; /* Menüyü blok seviyesinde görünür yapar */
    }

    /* Header'ın mobil menüden daha yüksek bir z-index'e sahip olduğundan emin olun */
    header {
        z-index: 30; /* Header'ın her zaman en üstte kalmasını sağlar */
    }
}