body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}

h1 {
    text-align: center;
}

form {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 500px; /* Maksimum genişlik */
    margin: 0 auto; /* Otomatik margin */
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
textarea,
#datepicker,
select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* ========================
   🎯 SPECIAL EXCEPTION DAYS STYLES
   ======================== */

/* İstisna günleri için yeşil stil */
.exception-day {
    background-color: #4CAF50 !important;
    color: white !important;
    font-weight: bold !important;
    border: 2px solid #45a049 !important;
}

.exception-day:hover {
    background-color: #45a049 !important;
    transform: scale(1.02);
}

/* Normal kapalı günler için stil */
.blocked-day {
    background-color: #f44336 !important;
    color: white !important;
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Admin panel için özel stiller */
.special-exception-indicator {
    display: inline-block;
    padding: 2px 8px;
    background: #4CAF50;
    color: white;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 5px;
}

/* jQuery UI Datepicker exception day override */
.ui-datepicker .exception-day a {
    background-color: #4CAF50 !important;
    color: white !important;
    border: 2px solid #45a049 !important;
    text-decoration: none !important;
}

.ui-datepicker .exception-day a:hover {
    background-color: #45a049 !important;
    color: white !important;
}
form {
    width: 80%; /* Form genişliğini ekranın %80'i yap */
    margin: 0 auto; /* Merkeze hizalama */
    /* Diğer stiller... */
}

/* Media sorguları */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    form {
        padding: 15px;
    }

    input[type="text"],
    input[type="email"],
    textarea,
    #datepicker,
    select,
    button {
        padding: 8px;
        font-size: 14px;
    }
}



#appointment-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    max-width: 800px;
    width: 100%;
    background-color: white; /* Container arka plan rengini beyaz yap */
    border-radius: 15px; /* Container köşelerini yuvarla */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Container'a hafif bir gölge ekle */
    font-family: 'Arial', sans-serif; /* Yazı tipini Arial olarak ayarla */
    font-weight: bold; /* Yazıları kalın yap */
    font-size: 18px; /* Yazı boyutunu 18px yap */
}
@media (max-width: 600px) {
    #appointment-details {
        font-size: 14px;
    }
}



.language-selection {
    text-align: center; /* Butonları merkeze hizalar */
}

.language-selection button {
    background-color: #ff7f00; /* Butonların arka plan rengi turuncu */
    color: white; /* Butonların yazı rengi */
    border: none; /* Butonların çerçevesini kaldırır */
    padding: 15px 32px; /* Butonların iç boşluğunu ayarlar */
    text-align: center; /* Butonların yazılarını merkeze hizalar */
    text-decoration: none; /* Butonların altını çizmeyi kaldırır */
    display: inline-block; /* Butonları yan yana getirir */
    font-size: 16px; /* Butonların yazı boyutunu ayarlar */
    margin: 4px 2px; /* Butonların etrafındaki boşluğu ayarlar */
    cursor: pointer; /* Butonların üzerine gelindiğinde imleci el şekline döndürür */
    width: 100%; /* Butonların genişliğini form ile aynı genişlikte olacak şekilde ayarlar */
    box-sizing: border-box; /* Padding ve border genişliği toplam genişliği etkilemez */
}


#whatsapp-message {
    color: #ecf0ec; /* Text color */
    font-size: 1.5em; /* Font size */
    margin-bottom: 20px; /* Space below the paragraph */
    border: 1px solid #008000; /* Border around the paragraph */
    padding: 10px; /* Space between the border and the text */
    text-align: center; /* Center the text */
    background-color: #25D366; /* WhatsApp green color */
    font-weight: bold; /* Make the text bold */
}