@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  src: url('../fonts/Inter-VariableFont_wght.ttf') format('truetype');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  background-color: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin-top:20px;
}

/* Konteyner */
.container {
  align-content: center;
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0px;
  height: min-content;
  justify-content: center;
  overflow: visible;
  padding: 0 120px;
  position: relative;
  width: 100%;
}
main img{margin-bottom:100px;}
main{align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 36px; display:block;
  justify-content: flex-end;
  max-width: 1366px;
  overflow: visible;
  padding: 0px 0 80px;
  position: relative;
  transform: perspective(1200px);
  width: 100%;}
/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.theme-toggle {
  display: flex;
  gap: 10px;
}

.theme-toggle span {
  font-size: 20px;
  cursor: pointer;
}

.con-title{    gap: 24px;}
/* Başlık */
h1 {
  font-size: 64px;
  font-weight: 600;
  line-height:74px;
  font-style:normal;
  text-align: left;
  max-width: 750px;
}

.subtitle {
  font-size: 24px;
  line-height:34px;
  font-weight:700px;
  color:rgba(0, 0, 0, 0.5);
  margin-top: 15px;
  text-align: left;
}

/* Butonlar */
.buttons {
  margin-top: 40px;
  text-align: left;
  gap:16px;
}

.twitter {
  padding: 12px 40px;
  border: none;
  font-size: 16px;
  line-height:26px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 10px;
  margin-right: 16px;
}
.email {
  padding: 15px 35px;
  border: none;
  font-size: 16px;
  line-height:26px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 10px;
  margin-right: 16px;
  text-decoration: none;
}

.twitter {
  background-color: #000;
  color: #fff;box-shadow:rgba(0, 0, 0, 0.01) 0px 0.711334px 1.56494px 0px, rgba(0, 0, 0, 0.027) 0px 1.93715px 4.26173px 0px, rgba(0, 0, 0, 0.063) 0px 4.25329px 9.35723px 0px, rgba(0, 0, 0, 0.137) 0px 9.44132px 20.7709px 0px, rgba(0, 0, 0, 0.35) 0px 24px 52.8px 0px
}

.email {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #000;
}

/* Footer */
footer {
  margin-top: 40px;
}

.info {
  margin-top: 50px;
  display: flex;
  justify-content: flex-start;
  gap: 350px;
  font-size: 16px;
  color: #333;
}

.label {
  font-weight: 400;
  color: #888;
  display: block;
  font-size:15px;
  line-height:21px;
}

.value {
  font-weight: 700;
  font-size:21px;
  line-height:30px;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
  h1 {
    font-size: 44px;
    font-weight: 600;
    line-height:55px;
    font-style:normal;
  }
  .container {
    width: 100%;
    padding: 0 20px; /* Sol ve sağ boşluk eklendi */
  }
  main img{margin-bottom:40px;}
  .info {
    flex-direction: column;
    gap: 15px;
  }

}


.youtube-shorts {
  width: 100%;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 0;
  box-sizing: border-box;
  margin-top:90px;
}

.youtube-shorts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.youtube-shorts ul li {
  flex: 0 0 calc(28% - 20px); /* Sayfada 5 tane sığacak şekilde ayar */
  list-style: none;
}

.youtube-shorts ul li a {
  text-decoration: none;
  color: inherit;
  display: block;
  text-align: center;
}

.youtube-shorts .thumbnail {
  width: 100%;
  aspect-ratio: 9 / 16; /* YouTube Shorts için ideal oran */
  overflow: hidden;
  border-radius: 8px;
  background: #f0f0f0;
}

.youtube-shorts .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.youtube-shorts h5 {
  font-size: 14px;
  margin: 10px 0 0;
  color: #333;
}
/* CSS'e ekleyin */
.appointment-sidebar {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: white;
  padding: 30px 120px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  transition: bottom 0.3s ease;
  z-index: 1000;
  max-height: 90vh;
  overflow-y: auto;
}

.appointment-sidebar.active {
  bottom: 0;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.close-sidebar {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  padding: 0 15px;
}

.days-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.day {
  flex: 0 0 120px;
  text-align: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}

.day.active {
  border-color: #000;
  background: #000;
  color: #fff;
}

.time-slots h4 {
  margin-bottom: 20px;
  font-size: 18px;
  text-align: left;
}

.times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.time-btn {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.time-btn:hover {
  border-color: #000;
}

.appointment-form {
  display: none;
  margin-top: 30px;
}

.appointment-form h4{
text-align: left;
  margin-bottom: 30px;
}

.appointment-form.active {
  display: block;
}

.appointment-form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.cancel-form {
  background: #fff;
  border: 1px solid #ddd;
  padding: 12px 30px;
  cursor:pointer;
  border-radius: 5px;
}

.submit-form {
  background: #000;
  color: #fff;
  border: none;
  padding: 12px 30px;
  cursor:pointer;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .appointment-sidebar {
    padding: 20px;
  }

  .day {
    flex: 0 0 100px;
  }
}




/*POPUP*/

/* Popup'ın tam ekranı kaplaması için */
.popup {
  display: none; /* Başlangıçta gizle */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* Tamamen beyaz bir arka plan */
  z-index: 1000; /* Diğer tüm içeriklerden üstte olmalı */

  justify-content: center;
  align-items: center;
}

/* Popup içeriği */
.popup-content {
  background-color: white; /* Popup içeriği beyaz olacak */
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px; /* Maksimum genişlik */
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

/* Kapatma butonu */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.close-btn:hover {
  color: red;
}

/* Popup içeriği başlık */
h2 {
  margin-top: 0;
  font-size: 2rem;
}

/* Responsive için düzenlemeler */
@media (max-width: 768px) {
  .popup-content {
    width: 90%;  /* Mobil cihazlarda popup içeriği biraz daha geniş olmalı */
    padding: 15px; /* Mobil cihazda padding biraz daha küçük olabilir */
  }

  .close-btn {
    font-size: 25px; /* Kapatma butonu mobilde daha küçük olacak */
  }
}

@media (max-width: 480px) {
  .popup-content {
    width: 95%;  /* Daha küçük ekranlarda popup içeriği iyice genişler */
  }

  h2 {
    font-size: 1.5rem; /* Başlık mobilde biraz daha küçük */
  }
}
/*POPUP*/



/* CSS'e ekleyin */
.appointment-sidebar {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: white;
  padding: 30px 120px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  transition: bottom 0.3s ease;
  z-index: 1000;
  max-height: 90vh;
  overflow-y: auto;
}

.appointment-sidebar.active {
  bottom: 0;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.close-sidebar {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  padding: 0 15px;
}

.days-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.day {
  flex: 0 0 120px;
  text-align: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}

.day.closed{background: #ebebeb;color: #888888;}
.day.closed:hover {
  border-color: #ebebeb;
}

.day:hover {
  border-color: #000;
}

.day.active {
  border-color: #000;
  background: #000;
  color: #fff;
}

.time-slots h4 {
  margin-bottom: 20px;
  font-size: 18px;
}

.times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.time-btn {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.time-btn.disabled{background: #ebebeb;color: #888888;}
.time-btn.disabled:hover {
  border-color: #ebebeb;
}

.time-btn:hover {
  border-color: #000;
}

.time-btn.active {
  border-color: #000;
  background: #000;
  color: #fff;
}

.tsime-btn:hover {
  border-color: #000;
}

.appointment-form {
  display: none;
  margin-top: 30px;
}

.appointment-form.active {
  display: block;
}

.appointment-form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.cancel-form {
  background: #fff;
  border: 1px solid #ddd;
  padding: 12px 30px;
}

.submit-form {
  background: #000;
  color: #fff;
  border: none;
  padding: 12px 30px;
}

@media (max-width: 768px) {
  .appointment-sidebar {
    padding: 20px;
  }

  .day {
    flex: 0 0 100px;
  }
}

/* Başarılı Randevu Mesajı Konteyneri */
.cancel-appointment-success
{
  margin-top: 30px;
  text-align: center;
  padding: 20px; /* İsteğe bağlı iç boşluk */
  background: #f9f9f9; /* Hafif gri arka plan */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cancel-appointment-success h2 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

.cancel-appointment-success p.cancel-appointment-message {
  font-size: 16px;
  margin-bottom: 20px;
  color: #333;
}

.appointment-success {
  margin-top: 30px;
  text-align: center;
  padding: 20px; /* İsteğe bağlı iç boşluk */
  background: #f9f9f9; /* Hafif gri arka plan */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Başlık ve açıklama yazısı */
.appointment-success h2 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

.appointment-success p.appointment-message {
  font-size: 16px;
  margin-bottom: 20px;
  color: #333;
}

/* Butonlar genel yerleşim */
.appointment-success .form-buttons {
  display: flex;
  justify-content: center;  /* Ortada yerleştirmek için */
  gap: 15px;
}

/* "Randevuyu İptal Et" butonu */
.appointment-success .cancel-appointment {
  background: #000;
  color: #fff;
  border: 1px solid #ddd;
  padding: 12px 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 26px;
  transition: all 0.2s ease;
}

.appointment-success .cancel-appointment:hover {
  border-color: #000;
}

/* "Saati Değiştir" butonu */
.appointment-success .reschedule-appointment {
  background: #000;
  color: #fff;
  border: none; /* İsteğe göre 1px solid #000 da kullanabilirsiniz */
  padding: 12px 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 26px;
  transition: background 0.2s ease;
}
.cancel-appointment-success .return-home {
  background: #000;
  color: #fff;
  border: none; /* İsteğe göre 1px solid #000 da kullanabilirsiniz */
  padding: 12px 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 26px;
  transition: background 0.2s ease;
}

.cancel-appointment-success .form-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.appointment-success .reschedule-appointment:hover {
  background: #333;
}

/* Küçük Ekranlar */
@media (max-width: 768px) {
  .appointment-success {
    padding: 15px;
  }
  .appointment-success h2 {
    font-size: 20px;
  }
  .appointment-success p.appointment-message {
    font-size: 14px;
  }
  .appointment-success .form-buttons {
    flex-direction: column;
  }
  .appointment-success .cancel-appointment,
  .appointment-success .reschedule-appointment {
    width: 100%;
  }

  .cancel-appointment-success {
    padding: 15px;
  }
  .cancel-appointment-success h2 {
    font-size: 20px;
  }
  .cancel-appointment-success p.cancel-appointment-message {
    font-size: 14px;
  }
  .cancel-appointment-success .form-buttons {
    flex-direction: column;
  }
}


/* Popup overlay: Tam ekran kapanabilir alan */
.alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;  /* Başlangıçta gizli */
  opacity: 0;
  z-index: 9999;
}

/* Popup içeriği */
.alert-message {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 500px;

}

.alert-message h2 {
  margin: 0;
  font-size: 24px;
}

.alert-message p {
  font-size: 16px;
  margin: 25px 0;
  color: rgba(0, 0, 0, 0.5);
}

.alert-message button {
  background-color: #000;
  color: white;
  border: none;
  padding: 15px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  margin-top: 40px;
}

.alert-message button:hover {
  background-color: #000;
}

.alert-message .warning-img{
  width: 65px;
  margin-bottom: 40px;
}

.search-input{
  min-height: 50px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 9px 9px 9px 22px;
  font-size: 18px;
}