body{
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.5px;
}

.randevuContent{
    width:100%;
    float:left;
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-sizing:border-box;
    box-shadow:0 10px 40px rgba(0,0,0,.05);
}

.randevuTitle{
    width:100%;
    float:left;
    position:relative;
    text-align:center;
    margin-bottom:35px;
}

.randevuTitle h2{
    margin:0;
    font-size:34px;
    font-weight:800;
    color:#111;
}

.randevuTitle p{
    margin-top:10px;
    font-size:15px;
    color:#666;
}

.formArea{
    width:100%;
    float:left;
    margin-bottom:30px;
}

.alanBaslik{
    width:100%;
    float:left;
    font-size:18px;
    font-weight:700;
    margin-bottom:18px;
    color:#111;
}

.inputGrid{
    width:100%;
    float:left;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.inputBox{
    position:relative;
    width:100%;
    float:left;
}

.inputBox input,.inputBox select{
    width:100%;
    height:58px;
    border:1px solid #e5e5e5;
    border-radius:14px;
    padding:20px;
    font-size:15px;
    background:#fff;
    box-sizing:border-box;
    outline:none;
    transition:.2s;
}

.inputBox .text{
    width:100%;
    height:58px;
    border:1px solid #e5e5e5;
    border-radius:14px;
    padding:20px;
    font-size:15px;
    background:#fff;
    box-sizing:border-box;
    outline:none;
    transition:.2s;
}

.inputBox input:focus,.inputBox select:focus{
    border-color:#802e92;
    box-shadow:0 0 0 4px rgba(128,46,146,.08);
}

.inputBox label{
    position:absolute;
    left:16px;
    top:18px;
    font-size:15px;
    color:#888;
    pointer-events:none;
    transition:.2s;
    background:#fff;
    padding:0 4px;
}

.inputBox label.lbltext{
    top:-8px;
    font-size:12px;
    color:#802e92;
}

.inputBox input:focus + label,
.inputBox input:not(:placeholder-shown) + label,
.inputBox select:focus + label{
    top:-8px;
    font-size:12px;
    color:#802e92;
}

.inputBox select:focus + label,
.inputBox:has(select option:checked:not([value=""])) label{
    top:-8px;
    font-size:12px;
    color:#802e92;
}

.inputBox.full{ grid-column:1 / -1; }

textarea{
    width:100%;
    height:140px;
    border:1px solid #e5e5e5;
    border-radius:16px;
    padding:18px;
    font-size:15px;
    box-sizing:border-box;
    outline:none;
    resize:none;
    font-family:inherit;
}

textarea:focus{
    border-color:#802e92;
    box-shadow:0 0 0 4px rgba(128,46,146,.08);
}

.checkArea{
    width:100%;
    float:left;
    margin-bottom:25px;
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:14px;
    color:#444;
}

.randevuBtn{
    width:100%;
    height:60px;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg,#2b2460,#802e92);
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
    box-shadow:0 10px 30px rgba(43,36,96,.25);
    float:left;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.randevuBtn.pasif{
    pointer-events:none;
    background: #ddd;
    color: #2b2460;
}

.randevuBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 35px rgba(43,36,96,.35);
}

@media(max-width:768px){
    .randevuContent{ padding:22px; border-radius:16px; }
    .inputGrid{ grid-template-columns:1fr; }
    .randevuTitle h2{ font-size:26px; }
}









.sorgula_div{
    width: 400px;
    float: left;
    position: relative;
}

.sorgula_div p{
    width: 100%;
    line-height: 1.2;
    text-align: center;
    float: left;
    position: relative;
    margin-bottom: 5px;
}

.sorgula_div input{
    width: 100%;
    height: 60px;
    float: left;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    border:1px solid #ddd;
    outline: none;
    font-size: 20px;
    letter-spacing: 2px;
}


.sorgula_div button{
    width: 100%;
    height: 50px;
    line-height: 1.2;
    border-radius: 10px;
    background: linear-gradient(135deg, #2b2460, #802e92);
    color: #fff;
    text-align: center;
    margin-top: 20px;
    outline: none;
    border: none;
    cursor: pointer;
    transition:.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    position: relative;
    font-size:17px;
    letter-spacing: 1px;
}

.sorgula_div button:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 35px rgba(43,36,96,.35);
}












.calendarArea{
	width:100%;
	max-width:430px;
	background:#fff;
	border:1px solid #ececec;
	border-radius:24px;
	padding:22px;
	box-sizing:border-box;
	box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.calendarHeader{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:20px;
}

.calendarPrev,
.calendarNext{
	width:42px;
	height:42px;
	border-radius:14px;
	background:#f5f5f7;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:24px;
	font-weight:700;
	cursor:pointer;
	user-select:none;
}

.calendarMonth{
	font-size:18px;
	font-weight:800;
	color:#111;
    text-transform: capitalize;
}

.calendarDays{
	width:100%;
	display:grid;
	grid-template-columns:repeat(7,1fr);
	margin-bottom:12px;
}

.calendarDays div{
	text-align:center;
	font-size:12px;
	font-weight:700;
	color:#999;
}

.calendarGrid{
	width:100%;
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:10px;
}

.calendarEmpty{
	height:48px;
}

.calendarItem{
	height:48px;
	border-radius:14px;
	border:1px solid #ececec;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:15px;
	font-weight:700;
	background:#fff;
	cursor:pointer;
	user-select:none;
	transition:.2s;
	box-sizing:border-box;
}

.calendarItem.aktif:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.calendarItem.aktif{color:#111;}

.calendarItem.secili{
	background:linear-gradient(135deg,#2b2460,#802e92);
	color:#fff;
	border-color:#2b2460;
	box-shadow:0 10px 25px rgba(43,36,96,.22);
}

.calendarItem.dolu{
	background:#f5f5f5;
	color:#bbb;
	cursor:not-allowed;
	opacity:.55;
}

.calendarItem.kapali{
	background:#fafafa;
	color:#ccc;
	border-style:dashed;
	cursor:not-allowed;
}

.seciliTarih{
	margin-top:20px;
	font-size:15px;
	font-weight:700;
	color:#2b2460;
}
















.saatAlan{width:100%;float:left;background:#fff;border:1px solid #ececec;border-radius:24px;padding:22px;box-sizing:border-box;box-shadow:0 15px 40px rgba(0,0,0,.04);}
.saatBaslik{width:100%;float:left;font-size:18px;font-weight:800;color:#111;margin-bottom:18px;}
.saatGrid{width:100%;float:left;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.saatItem{height:48px;border-radius:14px;border:1px solid #ececec;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;background:#fff;cursor:pointer;user-select:none;transition:.2s;box-sizing:border-box;}
.saatItem.aktif:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08);}
.saatItem.secili{background:linear-gradient(135deg,#2b2460,#802e92);color:#fff;border-color:#2b2460;box-shadow:0 10px 25px rgba(43,36,96,.22);}
.saatItem.pasif{background:#f5f5f5;color:#bbb;cursor:not-allowed;opacity:.55;}
.saatItem.kapali{background:#fafafa;color:#ccc;border-style:dashed;cursor:not-allowed;}
@media(max-width:768px){
	.saatGrid{grid-template-columns:repeat(3,1fr);}
}




.datetimeLdg{
    width: 100%;
    float: left;
    position: relative;
    text-align: center;
    color: #aaa;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 1px;
}




 





.kategoriChipList{width:100%;display:flex;flex-wrap:wrap;gap:10px;}
.kategoriChipList input{display:none;}
.kategoriChipList span{height:40px;padding:0 18px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;transition:.2s; text-transform: uppercase;}
.kategoriChipList input:checked + span{background:linear-gradient(135deg,#2b2460,#802e92);color:#fff;border-color:#2b2460;box-shadow:0 8px 20px rgba(43,36,96,.18);}
.kategoriChipList span:hover{border-color:#802e92;box-shadow:0 6px 16px rgba(0,0,0,.06);}




.fotoUploadAlan{width:100%;float:left;}
#fotoUploadInput{display:none;}
.fotoUploadBox{width:100%;min-height:110px;border:2px dashed #d7d7d7;border-radius:22px;background:#fafafa;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;padding:20px;box-sizing:border-box;}
.fotoUploadBox:hover{border-color:#802e92;background:#fcf8ff;}
.fotoUploadBox.dragging{border-color:#802e92;background:#f8f1ff;}
.fotoUploadText{font-size:18px;font-weight:700;color:#444;text-align:center;}
.fotoPreviewList{width:100%;float:left;display:flex;flex-wrap:wrap;gap:12px;margin:18px 0px;}

.fotoSayac{width: 100%; float: left; position: relative; margin:5px 0px; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase;}
.fotoPreviewItem{width:120px;height:120px;border-radius:18px;overflow:hidden;position:relative;background:#eee;box-shadow:0 8px 20px rgba(0,0,0,.08); transition: all 200ms;}
.fotoPreviewItem:hover{ transform: scale(1.1); cursor: zoom-in; }
.fotoPreviewItem img{width:100%;height:100%;object-fit:cover;}
.fotoPreviewSil{width:28px;height:28px;border-radius:50%;background:#fff;position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#000;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.18);}














.randevuSonucCard{width:100%;box-sizing:border-box;}

.randevuDurum{display:inline-flex;height:34px;align-items:center;padding:0 14px;border-radius:999px;font-size:13px;font-weight:800;margin-bottom:14px;}
.randevuDurum.aktif{background:#e9f8ef;color:#168a45;}
.randevuKod {
    width: 100%;
    font-size: 15px;
    color: #333;
    margin-bottom: 22px;
    text-align: center;
    float: left;
    position: relative;
    font-weight: 600;
}

.randevuKod b {
    color: #2b2460;
    width: 100%;
    float: left;
    position: relative;
    font-size: 22px;
    margin-top: 10px;
    letter-spacing: 1px;
    font-weight: 900;
}

.randevuOzet {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.randevuOzet div{
	background:#fff;
	border:1px solid #ececec;
	border-left:5px solid #6d2c91;
	border-radius:18px;
	padding:18px;
	box-sizing:border-box;
	box-shadow:0 8px 20px rgba(0,0,0,.04);
}

.randevuOzet span{
	display:block;
	font-size:14px;
	color:#747474;
	margin-bottom:8px;
	font-weight:700;
    text-transform: capitalize;
}

.randevuOzet b{
	font-size:18px;
	color:#1d1d1d;
	font-weight:600;
    text-transform: capitalize;
}

.randevuBilgiGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.bilgiBox{border:1px solid #eee;border-radius:16px;padding:16px;background:#fafafa;}
.bilgiBox span{display:block;font-size:12px;color:#888;margin-bottom:8px;font-weight:700;}
.bilgiBox b{font-size:16px;color:#111;}
.randevuNot{margin-top:18px;border:1px solid #eee;border-radius:16px;padding:16px;background:#fafafa;}
.randevuNot span{display:block;font-size:12px;color:#888;font-weight:800;margin-bottom:8px;}
.randevuNot p{margin:0;font-size:15px;color:#333;}










.miniRandevuCard{
	width:100%;
	min-height:82px;
	background:#fff;
	border:1px solid #ededed;
	border-radius:20px;
	padding:16px 18px;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:14px;
	transition:.2s;
}

.miniRandevuCard:hover{
	box-shadow:0 10px 30px rgba(0,0,0,.05);
	transform:translateY(-2px);
}

.miniLeft{
	display:flex;
	align-items:center;
	gap:14px;
}

.miniIcon{
	width:52px;
	height:52px;
	border-radius:16px;
	background:#f4f1fb;
	color:#353068;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:22px;
	flex-shrink:0;
}

.miniMain{
	display:flex;
	flex-direction:column;
}

.miniKod{
	font-size:11px;
	color:#999;
	margin-bottom:4px;
	font-weight:700;
}

.miniTop{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:6px;
}

.miniTop b{
	font-size:18px;
	color:#1d1d1d;
}

.miniDurum{
	height:24px;
	padding:0 10px;
	border-radius:999px;
	background:#fff4dd;
	color:#d08a00;
	font-size:11px;
	font-weight:700;
	display:flex;
	align-items:center;
}

.miniAlt{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	font-size:14px;
	color:#777;
}

.miniBtn{
	height:42px;
	padding:0 18px;
	border:none;
	border-radius:14px;
	background:#f4f1fb;
	color:#5d2b91;
	font-size:14px;
	font-weight:700;
	cursor:pointer;
	transition:.2s;
}

.miniBtn:hover{
	background:#5d2b91;
	color:#fff;
}












.popup_mesaj{
    line-height: 1.4;
    letter-spacing: 0.5px;
    position:fixed;
    top:30px;
    right:30px;
    z-index:999999;
    min-width:250px;
    max-width:400px;
    padding:15px 20px;
    border-radius:10px;
    color:#fff;
    font-size:15px;
    font-weight:500;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    display:none;
    animation:popupAnim 0.25s ease;
}

.popup_basari{
    background:#1fa855;
}

.popup_hata{
    background:#d93025;
}














.lightbox{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.92);
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
}

.lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:10px;
}

.lightboxKapat{
    position:absolute;
    top:20px;
    right:25px;
    color:#fff;
    font-size:40px;
    cursor:pointer;
}

.lightboxSol,
.lightboxSag{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    font-size:70px;
    cursor:pointer;
    user-select:none;
    padding:20px;
}

.lightboxSol{
    left:20px;
}

.lightboxSag{
    right:20px;
}


















@keyframes popupAnim{
    from{
        opacity:0;
        transform:translateY(-15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}






@media(max-width:768px){

	.miniRandevuCard{
		flex-direction:column;
		align-items:flex-start;
		gap:14px;
	}

	.miniBtn{
		width:100%;
	}

}










@media(max-width:768px){
	.randevuOzet{grid-template-columns:repeat(2,1fr);}
	.randevuBilgiGrid{grid-template-columns:1fr;}
}



@media screen and (max-width: 736px), screen and (max-device-width: 736px) {

    .degerlendir_col{
        width: calc(100% - 10px);
        float: left;
        position: relative;
        box-sizing: border-box;
        margin: 5px 0px;
        padding: 10px;
        background-color: #f1f1f1;
        border-radius: 8px;
    }


}