@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');


html {

    --color-dodge : #0839bc;
    --color : #1778F2;
    --light : #f2f9ff; 
    
    
    --bg1 : #ecf2ff;
    --bg2 : #fef5e5;
    --bg3 : #e8f7ff;
    --bg4 : #fdede8;
    --bg5 : #e6fffa;
     
    --clr1 : #5d87ff;
    --clr2 : #ffae1f;
    --clr3 : #49beff;
    --clr4 : #eb0000;
    --clr5 : #13deb9;
    
    --shadow1 : 0px 0px 38px -22px rgba(5,189,250,0.61);
    --fontGoogle :    "Manrope", sans-serif;
    --img: brightness(0) saturate(100%) invert(33%) sepia(92%) saturate(2966%) hue-rotate(203deg) brightness(100%) contrast(91%);
    }
  
    body {
        font-family: "Manrope", sans-serif;
        background: var(--bg1);
        margin: 0;
        padding: 0;
    
    }

a {
    text-decoration: none;
    color: #000;
}


.okundu-0 { background: var(--bg5); border: 1px solid var(--clr5); }
.okundu-1 { background: var(--bg2); border: 1px solid var(--clr2); }


input,
textarea,
select {
    font-family: "Manrope", sans-serif;
}
h1,h2,h3,h4,h5,p,ul,ul li { padding: 0px; margin: 0px;}

 
.content-line { max-width: 1200px; margin: 0 auto; }

.yeni-kasa-tablo { border: 1px solid #ddd; border-radius: 9px; overflow: hidden; background: #fff;}
.yeni-kasa-tablo .title { background: #f5f5f5; padding: 10px 0px;}
.yeni-kasa-tablo .list { border-bottom: 1px solid #ddd; display: flex; align-items: center; font-size: 14px;}
.yeni-kasa-tablo .list .min-info {  font-size: 11px; padding: 5px 0px; color:var(--clr1);}
.yeni-kasa-tablo > div > div { padding: 9px;}
.yeni-kasa-tablo .box .head { color: var(--clr1); padding-bottom: 6px;  }
.yeni-kasa-tablo .box .p { color: #808080; font-size: 12px;  }
.yeni-kasa-tablo .box .span { color: #10a65d; font-size: 12px;  }


.yeni-kasa-tablo .list .baslik {font-weight: 800; color: var(--color);  }
.yeni-kasa-tablo .list .tc{ font-size: 13px; color: #808080;}
.yeni-kasa-tablo .list .telefon { font-size: 13px;  padding: 7px 0px;}


.ofis-dolu { background:var(--bg4);}



.giris-login { display: flex; width: 100%; height: 100vh; align-items: center; align-content: center; background: var(--color);}
.giris-login > div  { width: 350px;   margin: 0 auto;


  background: #fff;
  padding:50px; 
  border-radius: 9px;
  box-shadow: 0px 20px 20px -30px rgba(22, 41, 167, 0.61);
  


}



.form-arama {
  display: flex;
  gap: 10px; /* input ile buton arasında boşluk */
  align-items: flex-end; /* buton input hizasında dursun */
}

.form-arama .app-form:first-child {
  flex: 1;
}

.form-arama .app-form:last-child {
  width: 150px;
}

.app-form input {
  width: 100%; /* input tam genişlik */
}

.btn.btn-3 {
  width: 100%; /* buton app-form içine tam otursun */
}





.bg-sw-1 { background: #fff; color: var(--clr1); padding: 30px; }
.bg-sw-3 { background: #fff; color: var(--clr3); padding: 30px; }


.content { max-width: 1500px; margin: 0 auto; } 

.header  {   display: flex; align-items: center; background: #fff; padding: 0px 50px;  }
 

.header .logo   { flex: 0 0 80px; padding: 10px 0px;  }
.header .logo img { width: 100%; filter: var(--img); }
.header .menu { flex: 1;   text-align: right  }
.header .menu a { display: inline-block; padding: 6px 10px; font-weight: 600; border-radius: 3px;     }
.header .menu a:hover { color: var(--color);  }
.header .menu a:last-child { background: var(--color); color: #fff;  }

.editbtonlar { position: absolute; right: 5px; height: 100%;   width: 25px; display: flex; align-items: center; top:0;}
.editbtonlar a i { display: inline-block; padding: 0px; width: 25px; height: 25px; line-height: 25px; background: var(--color); color: #fff ; border-radius: 3px; text-align: center; font-size: 14px; margin: 5px 0px; }


.etkinlik-content.aktif { left:0%;  }

.etkinlik-content { position: fixed; left:-100%; top: 0; z-index: 1000; transition: 0.5s; height: 100%; background: #fff; overflow-y: auto;  box-shadow: 20px 0px 20px -30px rgba(22, 41, 167, 0.61);  }
.etkinlik-content .etkinlik-kapat { display: inline-block; font-size: 22px; text-align: right; width: 100%;}
.etkinlik-content .etkinlik-kapat i { cursor: pointer; border-radius: 3px; display: inline-block;  width: 25px; height: 25px; text-align: center; line-height: 25px; background: var(--color); color: #fff;}

.buton-grup .btn-3 { background: var(--color); border: 1px solid var(--color);}




.tablo-1 { background: #fff; }
.tablo-1  .tablo { display: flex; align-items: center;  padding: 10px;  }
.tablo-1 .title { background: #000; color:  #fff; }

.tablo-1 details summary { border-bottom: 1px solid #ccc;}
.tablo-1  details summary::-webkit-details-marker,
.tablo-1  details summary::marker {
    display: none;
    content: "";
}
.tablo-1 details[open] { }

.tablo-1 details[open] summary {
    border-bottom: none
 
}
.tablo-1 details[open] .diger{
    border-bottom: 1px solid #ccc
 
}
.tablo-1 details .diger{
    padding: 30px;
 
}
.tablo-1 details:not([open]) {
     
}



.tablo-2 > div { margin-bottom: 5px; background: #f1f3f4;}



.month {
    width: calc(100% );
    


}
.month h3 { padding: 0px; margin: 0px;
    color: var(--color-dodge);
     font-size: 14px; padding-bottom: 10px; 
     
}
.weekdays, .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}
.weekdays div {
    
   
    font-size: 14px;
    font-weight: 600;
    padding: 5px;
}
.days div {
    
  
   
    font-size: 14px;
    padding: 5px;
    position: relative;
}




.bg-beyaz { 

  background: #fff;
  padding:20px; 
  border-radius: 9px;
  box-shadow: 0px 20px 20px -30px rgba(22, 41, 167, 0.61);

}



.takvim-style > div {         
    background: #fff;
    padding:20px; 
    border-radius: 9px;
    box-shadow: 0px 20px 20px -30px rgba(22, 41, 167, 0.61);
 
}

.days div span { display: inline-block;   width: 25px; height: 25px; line-height: 25px; text-align: center; border-radius: 4px; position: relative;}
.days div span:hover { background: var(--bg1); }
.days .bugun span { background:var(--clr5) !important; }	
.days .gecmis span {  color: #ccc;}	
.days span b { display: inline-block; position: absolute; background: var(--clr4); width: 15px; height: 15px; line-height: 15px; font-size: 11px; color: #fff; top:-7px; right: -7px; border-radius: 90px; }
.days .dolu span { background: var(--color); color: #fff; }
 
.takvim-detay {


    background: #fff;
    padding:20px; 
    border-radius: 9px;
    box-shadow: 0px 20px 20px -30px rgba(22, 41, 167, 0.61);
    

 }


.card-tema-1 { display: flex; padding: 20px; border-radius: 9px;  gap: 30px;     background: #fff;
  padding:0px; 
  border-radius: 9px;
  box-shadow: 0px 20px 20px -30px rgba(22, 41, 167, 0.61); position: relative ; z-index: 0; overflow: hidden;}
.card-tema-1 .tarih { flex: 0 0 100px;  align-items: center; display: flex;  align-content: center; border-radius: 5px; box-shadow: 20px 0px 20px -15px rgba(0,0,0,0.1);}
.card-tema-1 .tarih >div  {  width: 100%;  text-align: center; color: #000; font-size: 18px; font-weight: 800; }
.card-tema-1 .tarih >div span  {  width: 100%;  display: inline-block; font-size: 12px;}
.card-tema-1 .text { flex: 1; padding: 20px 0px; }

.card-tema-1 .text .min-date { color: #000; font-size: 13px; font-weight: 600;  position: absolute; top:10px; right: 10px; }
.card-tema-1 .text .min-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; }
.card-tema-1 .text .min-title span { display: inline-block; width: 15px; height: 15px; margin-right: 8px; border-radius: 30px;  }
.card-tema-1 .text .min-yer { font-size: 13px; font-weight: 400;   color: #555;}
.card-tema-1 .text .min-time { font-size: 13px; font-weight: 400;   color: #555;}

.card-tema-1 .text .min-fiyat { background: var(--clr5); color: #fff; position: absolute; bottom: 0px; right: 0px; padding: 6px; border-radius: 9px 0px 0px 0px; font-size: 13px;}
.card-tema-1 .info-card {  padding: 10px 0px;}
.card-tema-1 .info-card .min-info i {  display: inline-block; color: var(--color); width: 30px; display: inline-block; text-align: center; }
.card-tema-1 .info-card .min-info { font-size: 14px; color: #000; padding: 4px 0px; }

 




.i-card {   width: 100%; height: 100vh;  background: var(--color); padding: 50px 10px;}
.i-card > div  {max-width: 450px;   margin: 0 auto;

 

}




.card-tema-2 {   padding: 30px; border-radius: 9px;  gap: 30px;     background: #fff;
 
  border-radius: 9px;
  box-shadow: 0px 20px 20px -30px rgba(22, 41, 167, 0.61); position: relative ; z-index: 0; overflow: hidden; border: 3px dashed var(--color);}
.card-tema-2 .tarih {    align-items: center;   align-content: center; border-radius: 5px; box-shadow: 20px 0px 20px -15px rgba(0,0,0,0.1);}
.card-tema-2 .tarih >div  {  width: 100%;  text-align: center; color: #000; font-size: 18px; font-weight: 800; }
.card-tema-2 .tarih >div span  {  width: 100%;  display: inline-block; font-size: 12px;}
.card-tema-2 .text {   padding: 0px 0px; }

.card-tema-2 .text .min-date { color: #000; font-size: 13px; font-weight: 600;  position: absolute; top:10px; right: 10px; }
.card-tema-2 .text .min-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; }
.card-tema-2 .text .min-title span { display: inline-block; width: 15px; height: 15px; margin-right: 8px; border-radius: 30px;  }
.card-tema-2 .text .min-yer { font-size: 13px; font-weight: 400;   color: #555;}
.card-tema-2 .text .min-time { font-size: 13px; font-weight: 400;   color: #555;}

.card-tema-2 .text .min-fiyat { background: var(--clr5); color: #fff; position: absolute; bottom: 0px; right: 0px; padding: 6px; border-radius: 9px 0px 0px 0px; font-size: 13px;}
.card-tema-2 .info-card {  padding: 10px 0px;}
.card-tema-2 .info-card .min-info i {  display: inline-block; color: var(--color); width: 30px; display: inline-block; text-align: center; }
.card-tema-2 .info-card .min-info { font-size: 18px; color: #000; padding: 4px 0px; }

 .card-tema-2 .yer { text-align: center; background: #f5f5f5; padding: 20px; border-radius: 3px;}
.card-tema-2 .yer img { width: 90px; padding: 10px 0px;}
 .card-tema-2 .yer p { font-size: 12px; }
 .card-tema-2 .yer .buton-grup { padding: 20px; }














.renk-mavi { color: var(--color) !important; }





.bg-white {


  background: #fff;
  padding:20px; 
  border-radius: 9px;
  box-shadow: 0px 20px 20px -30px rgba(22, 41, 167, 0.61);
  

}


.etiketler span  { display: inline-block; font-size: 11px; padding: 4px 6px; background: var(--color); border-radius: 3px; color: #fff; margin-bottom: 4px; }


.time-takvim { border-bottom: 1px solid #f2f2f2;  display: flex;}
.time-takvim > div { height: 30px; line-height: 30px; text-align: center;    flex: 1; /* Diğer elemanlar otomatik genişleyecek */ display: flex; align-items: center; justify-content: center; font-size: 11px;}
.time-takvim > div i {   font-size: 18px;}
.time-takvim .dolu span  {  width: 100%; display: inline-block; height: 30px; border-radius: 4px; color: #fff; font-size: 12px; }
.time-takvim > div:first-child { background: #f5f5f5;       flex: 0 0 100px;  } 
.time-takvim .dolu {  text-align: center;}

.time-takvim .aktif { opacity: 1; background: var(--bg5); }
.time-takvim .pasif i { display: none;}

.time-takvim .odendi { color: #10a65d;}
.time-takvim .odenmedi { color:var(--clr4)}


 .head-tablo { background: var(--color); color: #fff; padding: 8px; text-align: center;}
 
 .head-tablo > div:first-child { background:none          } 


 .etinlikrengi > div { display: inline-block; width: 25px; height: 25px; border-radius: 90px; text-align: center; }
 .etinlikrengi > div:hover { opacity: 0.5; cursor: pointer;  }
.etinlikrengi > .secilirenk { border: 2px solid #000;}

.takvim-info { color: var(--color ); font-size: 25px; padding-bottom: 20px;}

  /* Wrapper: input + label ortak container */
  .app-form {
    position: relative;
 
    width: 100% /* Örnek genişlik */
  }

  .app-form  button {
    width: 100%;
    padding: 0px 15px;
    font-size: 14px;
 
    height: 50px;
    
    outline: none;
    border-radius: 5px;
    font-size: 14px;
    background: var(--color);
    border: 1px solid var(--color);
    color: #fff;
  }
  .app-form  button:hover { background: var(--color-dodge); cursor: pointer;}

  /* Stil vermek için isteğe bağlı temel input ayarları */
  .app-form input {
    width: 100%;
    padding: 0px 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    height: 50px;
    
    outline: none;
    border-radius: 5px;
    font-size: 14px;
  }
  .app-form textarea {
    width: 100%;
    padding: 15px 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    height: 150px;
    
    outline: none;
    border-radius: 5px;
  }
  .app-form select {
    width: 100%;
    padding: 0px 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    height: 50px;
    
    outline: none;
    border-radius: 5px;
    font-size: 14px;
  }

  /* label’ı input üzerine absolute konumlandırın. */
  .app-form label {
    position: absolute;
    left: 5px;
    top: 0px;
    pointer-events: none;  /* Label tıklanmasın, input tıklansın */
    transition: 0.2s ease all; /* Animasyon için geçiş */
    color: #202020;
    padding: 0px 10px; /* Input'ın yukarıdaki boşluğuyla hizalamak için */
    background: none;
    font-size: 14px;
    line-height: 50px;
    font-weight: 400;
  }

  /*
    input:focus ile label’ı yukarı taşıyoruz;
    ayrıca input boş değilse (placeholder-shown değilse)
    veya value girilmişse de label yukarı gitsin diye
    input:not(:placeholder-shown) ~ label kuralını ekliyoruz.
  */
  .app-form input:focus ~ label,
  .app-form input:not(:placeholder-shown) ~ label {
    top: -5px; /* Yukarı kaydırma miktarı */
    font-size: 12px; /* Yazı boyutunu biraz küçültme */
    color: #555;     /* İsteğe göre renk */
    padding: 0px 10px;
    line-height: 12px;
    background: #fff;
  }
  .app-form textarea:focus ~ label,
  .app-form textarea:not(:placeholder-shown) ~ label {
    top: -5px; /* Yukarı kaydırma miktarı */
    font-size: 12px; /* Yazı boyutunu biraz küçültme */
    color: #555;     /* İsteğe göre renk */
    padding: 0px 10px;
    line-height: 12px;
    background: #fff;
  }

  .app-form select:focus ~ label,
  .app-form select:not(:placeholder-shown) ~ label {
    top: -5px; /* Yukarı kaydırma miktarı */
    font-size: 12px; /* Yazı boyutunu biraz küçültme */
    color: #555;     /* İsteğe göre renk */
    padding: 0px 10px;
    line-height: 12px;
    background: #fff;
  }



  .sozlesmelistele { padding: 5px; border: 1px solid #f2f2f2; display: flex; align-items: center ;  justify-content: space-between; margin-bottom: 5px; background: #f5f5f5; border-radius: 4px;  }