:root {
  --siyah: #121212;
  --koyugri: #181818;
  --acikgri: #323232;
  --beyaz: #fff;
  --altin: #FFC800;
  --kirmizi: #a80000;
}
.time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.time-slot {
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--altin);
    background: var(--koyugri);
    font-weight: 500;
    transition: .2s;
}

.time-slot:hover {
    background: var(--acikgri);
}

.time-slot.active {
    background: var(--altin);
    color: black;
}

.time-slot.disabled {
    color: var(--kirmizi);
    cursor: not-allowed;
}

.logo {
  width: 100px;
  height: 100px;
  border-radius: 9999px;
  aspect-ratio: 1 / 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.primeheader {
  border: 1px solid var(--acikgri);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}
body {
  background-color: var(--siyah);
  font-family: "Poppins", sans-serif;
}
.baslik {
  font-family: "Akira Expanded", sans-serif;
  color: #FFC800;
}
.ilkicerik {
  height: 300px;
}
.kart {
  border-radius: 12px;
  border: 1px solid var(--acikgri);
  color: #fff;
  padding: 12px 30px;
}
.kart-2 {
  border-radius: 12px;
  border: 1px solid var(--acikgri);
  color: #fff;
  background-color: var(--koyugri);
  padding: 12px 30px;
}

.login-kart {
  border-radius: 12px;
  border: 1px solid var(--acikgri);
  color: #fff;
  backdrop-filter: blur(20px);
  padding: 12px 30px;
}

/* Form Wrapper - Arka plan ve gölge */
.form-wrapper {
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* --- GRID SİSTEMİ BURADA BAŞLIYOR --- */
.form-grid {
    display: grid;
    /* Yan yana 2 eşit sütun oluşturur */
    grid-template-columns: 1fr 1fr; 
    /* Kutular arası boşluk */
    gap: 20px; 
}

/* Her bir input grubu için stil */
.input-box {
    display: flex;
    flex-direction: column; /* Label üstte, input altta olsun */
}

/* Label Stilleri */
.input-box label {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--altin);
    font-size: 0.9rem;
}

/* Input ve Select Stilleri */
.randevuinput {
    padding: 12px 15px;
    background-color: var(--koyugri);
    border: 1px solid var(--acikgri);
    border-radius: 999px;
    color: white  ;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    width: 100%; /* Kendi kutusuna tam otursun */
    box-sizing: border-box; /* Padding taşmasını engeller */
}
.logininput {
    padding: 12px 15px;
    background: none;
    border: 1px solid var(--acikgri);
    border-radius: 999px;
    color: white  ;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    width: 100%; /* Kendi kutusuna tam otursun */
    box-sizing: border-box; /* Padding taşmasını engeller */
}
.logininput:focus {
  outline: none;
  border: 1px solid var(--altin);
}
.submit-btn {
  border: 1px solid var(--altin);
  border-radius: 99999px;
  padding: 15px 25px;
  background-color: transparent;
  color: var(--altin);
  font-weight: 600;
  transition: 0.2s ease-in-out;
  font-size: 1rem;
  cursor: pointer;
  width: 100%; /* Kendi kutusuna tam otursun */
}
.submit-btn:hover {background-color: var(--altin);
  color: var(--koyugri);
}
/* Buton Alanı */
.form-footer {
    margin-top: 25px;
    text-align: center;
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 600px) {
    .form-grid {
        /* Küçük ekranda tek sütuna düşür */
        grid-template-columns: 1fr; 
    }
}
.randevuinput::placeholder {
  color: #aaa;
}
.randevuinput:focus {
  outline: none;
  border-color: var(--altin);
  transition: 0.2s ease-in-out;
}
.inputgroup {
  border-radius: 12px;
  border: 1px solid var(--acikgri);
  color: #fff;
  background-color: var(--koyugri);
  padding: 12px 30px;
  height: 100%;
  width: auto;
  display: grid;
  grid-template-columns: 160px 320px; /* label | input */
  gap: 12px 16px;
  align-items: center;
}

.page-content {
  flex: 1;
}
footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #121212;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-link {
  color: #aaa;
  text-decoration: none;
  font-size: 14px;
}

.footer-link:hover {
  color: #fff;
}

.icerik {
  background-color: var(--koyugri);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.maincontainer {
  background-image: url(../img/bggif.gif);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.primeheader__menu__item {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease-in-out;
}
.rezervasyon_tablo {
  border: 1px solid var(--altin);
}
.rezervasyon_tablo th,td {
  padding: 12px 35px;
}
.primeheader__menu__item:hover {
  color: #fff;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}
.randevubtn {
  background-color: #FFC800;
  border-radius: 9999px;
  text-decoration: none;
  color: black;
  font-weight: 600;
  padding: 12px 20px;
  text-wrap: nowrap;
}

.cikisbtn {
  background-color: var(--kirmizi);
  border-radius: 9999px;
  text-decoration: none;
  color: white;
  font-weight: 600;
  padding: 12px 20px;
  text-wrap: nowrap;
}

.iletisim_target {
 font-weight: 600; 
}
.iletisim_target:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}
/* Mobil görünüm */
@media (max-width: 576px) {
  .inputgroup {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .randevuinput {
    max-width: 200px;
  }
  .logo {
    max-width: 64px;
    max-height: 64px;
  }
  
  footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 450px;
    background-color: #121212;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}