/* CSS Değişkenleri */
[id^='appointment-wrapper'] {
  --wbooking-color-selected: #4d616f;
  --wbooking-color-light: #bde2ff;
  --wbooking-color-light-hover: #98b8d1;
  --wbooking-light-gray: lightgray;
  --wbooking-error: red;
}

/* Gizli slotlar */
[id^='selected-slot'].hide {
  display: none;
}

/* Ana kapsayıcı */
[id^='appointment-wrapper'] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw;
  margin: 10px 0;
}

/* Takvim kapsayıcısı */
[id^='appointment-wrapper'] [id^='calendar-container'] {
  width: 100%; /* Tam genişlik */
}

/* Ay seçimi */
[id^='appointment-wrapper'] [id^='calendar-container'] [id^='month-select'] {
  display: block;
  margin: 5px auto;
  width: 80%;
  max-width: 200px;
}

/* Haftanın günleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .week-days {
  display: -webkit-grid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 14px;
}

/* Takvim günleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-days {
  display: -webkit-grid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 8px;
}

/* Gün hücreleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day {
  font-size: 14px;
  color: var(--wbooking-light-gray);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.available {
  color: black;
  background-color: var(--wbooking-color-light);
  cursor: pointer;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.available:hover {
  background-color: var(--wbooking-color-light-hover);
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.no-slots {
  background-color: var(--wbooking-light-gray);
  color: black;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.active {
  color: white;
  background-color: var(--wbooking-color-selected);
}

/* Slot kapsayıcısı */
[id^='appointment-wrapper'] [id^='slots-container'] {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 250px;
  gap: 5px;
  overflow-y: auto; /* Kaydırma çubuğu */
  width: 100%;
}

/* Slot hücreleri */
[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot {
  padding: 5px 10px;
  border: 1px solid var(--wbooking-light-gray);
  text-align: center;
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot:hover {
  background-color: var(--wbooking-color-light);
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.available {
  cursor: pointer;
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.unavailable {
  background-color: var(--wbooking-light-gray);
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.selected {
  background-color: var(--wbooking-color-selected);
  color: white;
}

[id^='appointment-wrapper'] [id^='slots-container'].highlight {
  border: 1px dashed var(--wbooking-error);
}

/* PayPal düğmesi */
[id^='paypal-button-container'] {
  margin-top: 20px;
  max-width: 300px;
  width: 100%;
}

/* Hata mesajı */
.webform-booking-error {
  margin: 1em 0;
  padding: 15px;
  border: 1px solid #e62600;
  border-radius: 4px;
  color: #a51b00;
  background-color: #f9e6e6;
}

/* Küçük ekranlar için medya sorgusu */
@media (max-width: 576px) {
  [id^='appointment-wrapper'] {
    flex-direction: column;
    gap: 1.5vw;
    padding: 0 5px; /* Kenar boşluğu */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .week-days {
    grid-template-columns: repeat(7, minmax(30px, 1fr)); /* 7 sütun koru */
    font-size: 12px; /* Küçük yazı tipi */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .calendar-days {
    grid-template-columns: repeat(7, minmax(30px, 1fr)); /* 7 sütun koru */
    grid-gap: 5px; /* Daha küçük boşluk */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day {
    width: 25px; /* Daha küçük hücre */
    height: 25px;
    font-size: 12px; /* Daha küçük yazı tipi */
  }

  [id^='appointment-wrapper'] [id^='slots-container'] {
    max-height: 200px; /* Daha kısa yükseklik */
    gap: 3px;
  }

  [id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot {
    padding: 3px 6px; /* Daha küçük dolgu */
    font-size: 12px; /* Daha küçük yazı tipi */
  }

  [id^='paypal-button-container'] {
    max-width: 100%; /* Tam genişlik */
  }
}
```<xaiArtifact artifact_id="b9dab323-ec4d-40a7-ab35-3d5e8540eb4b" artifact_version_id="a1cf3096-6b1e-4b81-8f82-5dc8811c354f" title="appointment.css" contentType="text/css">
/* CSS Değişkenleri */
[id^='appointment-wrapper'] {
  --wbooking-color-selected: #4d616f;
  --wbooking-color-light: #bde2ff;
  --wbooking-color-light-hover: #98b8d1;
  --wbooking-light-gray: lightgray;
  --wbooking-error: red;
}

/* Gizli slotlar */
[id^='selected-slot'].hide {
  display: none;
}

/* Ana kapsayıcı */
[id^='appointment-wrapper'] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw;
  margin: 10px 0;
}

/* Takvim kapsayıcısı */
[id^='appointment-wrapper'] [id^='calendar-container'] {
  width: 100%; /* Tam genişlik */
}

/* Ay seçimi */
[id^='appointment-wrapper'] [id^='calendar-container'] [id^='month-select'] {
  display: block;
  margin: 5px auto;
  width: 80%;
  max-width: 200px;
}

/* Haftanın günleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .week-days {
  display: -webkit-grid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 14px;
}

/* Takvim günleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-days {
  display: -webkit-grid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 8px;
}

/* Gün hücreleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day {
  font-size: 14px;
  color: var(--wbooking-light-gray);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.available {
  color: black;
  background-color: var(--wbooking-color-light);
  cursor: pointer;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.available:hover {
  background-color: var(--wbooking-color-light-hover);
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.no-slots {
  background-color: var(--wbooking-light-gray);
  color: black;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.active {
  color: white;
  background-color: var(--wbooking-color-selected);
}

/* Slot kapsayıcısı */
[id^='appointment-wrapper'] [id^='slots-container'] {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 250px;
  gap: 5px;
  overflow-y: auto; /* Kaydırma çubuğu */
  width: 100%;
}

/* Slot hücreleri */
[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot {
  padding: 5px 10px;
  border: 1px solid var(--wbooking-light-gray);
  text-align: center;
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot:hover {
  background-color: var(--wbooking-color-light);
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.available {
  cursor: pointer;
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.unavailable {
  background-color: var(--wbooking-light-gray);
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.selected {
  background-color: var(--wbooking-color-selected);
  color: white;
}

[id^='appointment-wrapper'] [id^='slots-container'].highlight {
  border: 1px dashed var(--wbooking-error);
}

/* PayPal düğmesi */
[id^='paypal-button-container'] {
  margin-top: 20px;
  max-width: 300px;
  width: 100%;
}

/* Hata mesajı */
.webform-booking-error {
  margin: 1em 0;
  padding: 15px;
  border: 1px solid #e62600;
  border-radius: 4px;
  color: #a51b00;
  background-color: #f9e6e6;
}

/* Küçük ekranlar için medya sorgusu */
@media (max-width: 576px) {
  [id^='appointment-wrapper'] {
    flex-direction: column;
    gap: 1.5vw;
    padding: 0 5px; /* Kenar boşluğu */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .week-days {
    grid-template-columns: repeat(7, minmax(30px, 1fr)); /* 7 sütun koru */
    font-size: 12px; /* Küçük yazı tipi */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .calendar-days {
    grid-template-columns: repeat(7, minmax(30px, 1fr)); /* 7 sütun koru */
    grid-gap: 5px; /* Daha küçük boşluk */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day {
    width: 25px; /* Daha küçük hücre */
    height: 25px;
    font-size: 12px; /* Daha küçük yazı tipi */
  }

  [id^='appointment-wrapper'] [id^='slots-container'] {
    max-height: 200px; /* Daha kısa yükseklik */
    gap: 3px;
  }

  [id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot {
    padding: 3px 6px; /* Daha küçük dolgu */
    font-size: 12px; /* Daha küçük yazı tipi */
  }

  [id^='paypal-button-container'] {
    max-width: 100%; /* Tam genişlik */
  }
}
</xaiArtifact>```css
/* CSS Değişkenleri */
[id^='appointment-wrapper'] {
  --wbooking-color-selected: #4d616f;
  --wbooking-color-light: #bde2ff;
  --wbooking-color-light-hover: #98b8d1;
  --wbooking-light-gray: lightgray;
  --wbooking-error: red;
}

/* Gizli slotlar */
[id^='selected-slot'].hide {
  display: none;
}

/* Ana kapsayıcı */
[id^='appointment-wrapper'] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw;
  margin: 10px 0;
}

/* Takvim kapsayıcısı */
[id^='appointment-wrapper'] [id^='calendar-container'] {
  width: 100%; /* Tam genişlik */
}

/* Ay seçimi */
[id^='appointment-wrapper'] [id^='calendar-container'] [id^='month-select'] {
  display: block;
  margin: 5px auto;
  width: 80%;
  max-width: 200px;
}

/* Haftanın günleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .week-days {
  display: -webkit-grid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 14px;
}

/* Takvim günleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-days {
  display: -webkit-grid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 8px;
}

/* Gün hücreleri */
[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day {
  font-size: 14px;
  color: var(--wbooking-light-gray);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.available {
  color: black;
  background-color: var(--wbooking-color-light);
  cursor: pointer;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.available:hover {
  background-color: var(--wbooking-color-light-hover);
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.no-slots {
  background-color: var(--wbooking-light-gray);
  color: black;
}

[id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day.active {
  color: white;
  background-color: var(--wbooking-color-selected);
}

/* Slot kapsayıcısı */
[id^='appointment-wrapper'] [id^='slots-container'] {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 250px;
  gap: 5px;
  overflow-y: auto; /* Kaydırma çubuğu */
  width: 100%;
}

/* Slot hücreleri */
[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot {
  padding: 5px 10px;
  border: 1px solid var(--wbooking-light-gray);
  text-align: center;
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot:hover {
  background-color: var(--wbooking-color-light);
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.available {
  cursor: pointer;
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.unavailable {
  background-color: var(--wbooking-light-gray);
}

[id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot.selected {
  background-color: var(--wbooking-color-selected);
  color: white;
}

[id^='appointment-wrapper'] [id^='slots-container'].highlight {
  border: 1px dashed var(--wbooking-error);
}

/* PayPal düğmesi */
[id^='paypal-button-container'] {
  margin-top: 20px;
  max-width: 300px;
  width: 100%;
}

/* Hata mesajı */
.webform-booking-error {
  margin: 1em 0;
  padding: 15px;
  border: 1px solid #e62600;
  border-radius: 4px;
  color: #a51b00;
  background-color: #f9e6e6;
}

/* Küçük ekranlar için medya sorgusu */
@media (max-width: 576px) {
  [id^='appointment-wrapper'] {
    flex-direction: column;
    gap: 1.5vw;
    padding: 0 5px; /* Kenar boşluğu */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .week-days {
    grid-template-columns: repeat(7, minmax(30px, 1fr)); /* 7 sütun koru */
    font-size: 12px; /* Küçük yazı tipi */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .calendar-days {
    grid-template-columns: repeat(7, minmax(30px, 1fr)); /* 7 sütun koru */
    grid-gap: 5px; /* Daha küçük boşluk */
  }

  [id^='appointment-wrapper'] [id^='calendar-container'] .calendar-day {
    width: 25px; /* Daha küçük hücre */
    height: 25px;
    font-size: 12px; /* Daha küçük yazı tipi */
  }

  [id^='appointment-wrapper'] [id^='slots-container'] {
    max-height: 200px; /* Daha kısa yükseklik */
    gap: 3px;
  }

  [id^='appointment-wrapper'] [id^='slots-container'] .calendar-slot {
    padding: 3px 6px; /* Daha küçük dolgu */
    font-size: 12px; /* Daha küçük yazı tipi */
  }

  [id^='paypal-button-container'] {
    max-width: 100%; /* Tam genişlik */
  }
}