@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,500i,600,700,900&subset=latin-ext&display=swap');
:root {
    --primary-color:#0050FF;
    --bg-color:#fffff;
    --bg2-color:#f3f3f3;
    --bg3-color:#e3e3e3;
    
    --black:#111;
    --white:#fff;
    --grey:#a9a9a9;
    --dark-grey:#797979;

    --text:#333;
    --text2:#444;
    --text3:#595959;

    --block-padding: 20px 0 90px;
    --title-size:56px;
    --title-line-height:72px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
* {outline: 0;}
a {text-decoration: none;color: var(--text2);}
a:hover {text-decoration:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul, nav {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';}
table {border-collapse: collapse;border-spacing: 0;}
h1 {font-family: 'Poppins', sans-serif; font-size:16px;font-weight: bold}
h1 {font-family: 'Poppins', sans-serif;font-size:15px;font-weight: bold}
small {font-family: 'Poppins', sans-serif;font-size:11px;}p {color:var(--text3);}strong, b {font-weight:bold;}
body{
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    font-size:14px;
    line-height:20px;
    color:var(--text);
    overflow-x:hidden;
}
.container{
    position:relative;
    width:1650px;
    margin:0 auto;
    display:flex;
    flex-direction: column;
    max-width:100vw;
}
.container.medium{
    width:850px;
}
header{
    display:flex;
    padding:2px 40px;
      justify-content: space-between;
        position:sticky;
    background-color: white;
    z-index:99999;
    top:0;
}
header .logo{
    display:flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding-left:24px;
}
header .logo:before{
    content:'';
    position: absolute;
    left:0;
    top:14px;
    bottom: 14px;
    width:12px;
    background-color:var(--primary-color);
}
header .logo h1{
    font-size:22px;
    font-weight:600;
    color: #111;
}
header .menu ul,
header .megamenu ul{
    display:flex;
    gap: 20px;
}
header .menu ul li a,
header .megamenu ul li a{
    display:block;
    line-height:64px;
    height: 64px;
    padding:0 14px;
    color: #858585;
    box-sizing: border-box;
}
header .menu ul li a:hover,
header .megamenu ul li a:hover{
    border-top:4px #111 solid;
    line-height: 56px;
    color: #111;
}
header .menu ul li.search{
    position:relative;
}
header .menu ul li.search form{
    display:none;
    gap:5px;
    position:absolute;
    right:0;
    top:60px;
    background-color:#fff;
    border:1px rgba(0,0,0,0.05) solid;
    z-index: 9;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
    padding:10px;
}
header .menu ul li.search:hover form{
    display:flex;
}
header .menu ul li.search form input{
    border:none;
    line-height:40px;
    height:40px;
    padding:0 6px;
    flex:1;
}
header .menu ul li.search form button{
    border:none;
    line-height:40px;
    height:40px;
    padding:0 20px;
    background-color: #444;
    color:var(--white);
}
header .megamenu{
    position:absolute;
    display:flex;
    flex-wrap: wrap;
    width:982px;
    top:90px;
    right:5vw;
    background-color:#fff;
    border:1px rgba(0,0,0,0.05) solid;
    z-index: 9;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
    opacity:0;
    pointer-events: none;
    transition: opacity .4s, top .4s;
}
header .megamenu ul{
    flex-direction: column;
    gap:0;
}
header .megamenu ul li{
    width:240px;
}
header .megamenu ul li a{
    height:unset;
    padding: 14px;
    line-height: 20px;
    border-bottom:1px rgba(0,0,0,0.05) solid;
    border-right:1px rgba(0,0,0,0.05) solid;
    background-color: rgba(0,0,0,0.03);
}
header .megamenu ul li a.active{
    background-color: rgba(0,0,0,0.08);
}
header .megamenu ul li a:hover{
    border-top:0;
    line-height: 20px;
}
header .megamenu .megacontent{
    display:none;
    flex:1;
    padding:20px;
    flex-wrap: wrap;
    gap:14px;
}
header .megamenu .megacontent.content1{
    display:flex;
}
header .megamenu .megacontent .item a{
    display:flex;
    gap:7px;
    width:328px;
    background-color: rgba(0,0,0,0.02);
    padding:8px;
}
header .megamenu .megacontent .item img{
    width:60px;
    height:60px;
}
header .megamenu .megacontent .item i{
    width:60px;
    height:60px;
    line-height: 60px;
    text-align: center;
    font-size:32px;
}
header .megamenu .megacontent .item div{
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap:4px;
}
header .mobilmenu{
    display:none;
    position:relative;
    z-index:99;
}
header .mobilmenu > i{
    font-size:22px;
    color:var(--text3);
    width: 40px;
    height:40px;
    line-height: 40px;
    text-align: center;
    border:1px rgba(0,0,0,0.1) solid;
    cursor: pointer;
    transition: background-color .3s;
}
header .mobilmenu > i:hover{
    background-color: rgba(0,0,0,0.03);
}
header .mobilmenu ul{
    position:absolute;
    display:flex;
    opacity:0;
    pointer-events: none;
    flex-wrap: wrap;
    width:300px;
    max-width:calc(100vw - 40px);
    right:0;
    top:60px;
    background-color: var(--bg2-color);
    border: 1px rgba(0,0,0,0.05) solid;
    transition: opacity .4s, top .3s;
}
header .mobilmenu ul.active{
    opacity:1;
    pointer-events: auto;
    top:50px;
}
header .mobilmenu ul li{
    width: 33.3%;
}
header .mobilmenu ul li a{
    line-height:40px;
    padding:0 8px;
}
header .mobilmenu ul li.search{
    width:100%;
    padding:6px;
    border-top:1px rgba(0,0,0,0.05) solid;
}
header .mobilmenu ul li.search form{
    display:flex;
    gap:6px;
}
header .mobilmenu ul li.search input{
    border:none;
    line-height:40px;
    height:40px;
    padding:0 6px;
    flex:1;
}
header .mobilmenu ul li.search button{
    border:none;
    line-height:40px;
    height:40px;
    padding:0 6px;
    background-color: #444;
    color:var(--white);
}
.slider{
    display: block;
    height:1000px;
    background: url('../img/slider.webp') center center no-repeat;
    background-size: 70%;
}
.slider .container{
    flex-direction: row;
    justify-content: center;
}
.slider .text{
    margin-top:30px;
    display:flex;
    flex-direction: column;
    align-items: start;
    font-size:55px;
    line-height: 72px;
    color:var(--black);
    width:800px;
}
.slider .text span{
    display:inline;
    background-color: var(--primary-color);
    color:var(--white);
}
.slider .text a{
    font-size:16px;
    line-height: 42px;
    font-weight: 500;
    background-color: var(--primary-color);
    color:var(--white);
    padding: 0 32px;
    border-radius: 33px;
}
.partners{
    padding: var(--block-padding);
}
.partners .title{
    font-size:var(--title-size);
    font-weight: 600;
    line-height: var(--title-line-height);
    color:var(--primary-color);
    text-align:center;
    padding:1.5em 0;
}
.partners ul{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0.5em 0;
}
.branches{
    background-color: var(--bg2-color);
    padding: var(--block-padding);
}
.branches .title{
    display:block;
    font-size:var(--title-size);
    line-height: var(--title-line-height);
    color:var(--text);
    text-align:center;
    padding:1.5em 0;
}
.branches ul{
    display:flex;
    gap:20px;
    flex-wrap: wrap;
    justify-content: start;
}
.branches ul li{
    display:flex;
    background-color: var(--bg3-color);
    width:calc(20% - 16px);
}
.branches ul li a{
    display:flex;
    width:100%;
    position: relative;
    flex-direction: column;
    gap:8px;
    padding:60px 40px;
}
.branches ul li a h2{
    font-size:20px;
    line-height: 24px;
    font-weight: 500;
    transition: color .3s;
}
.branches ul li a:hover h2{
    color:var(--primary-color);
}
.branches ul li a span{
    font-size:13px;
}
.branches ul li a i{
    position:absolute;
    right:10px;
    bottom:10px;
    width:40px;
    height:40px;
    border-right:10px #b6b6b6 solid;
    border-bottom:10px #b6b6b6 solid;
    transition: border-color .4s, width .4s linear 0.5s, height .4s linear 0.5s;
}
.branches ul li a i:before{
    content:'';
    display:block;
    position: absolute;
    right:85px;
    bottom:120px;
    width:80px;
    height:10px;
    transform: rotate(45deg);
    background-color: #b6b6b6;
    opacity:0;
    transition: background-color .4s, right .5s, bottom .5s, opacity .2s;
}
.branches ul li a:hover i{
    width:50px;
    height:50px;
    border-color: var(--primary-color);
}
.branches ul li a:hover i:before{
    right:-15px;
    bottom:20px;
    opacity:1;
    background-color: var(--primary-color);
}
.cities{
    background-color: var(--bg2-color);
    padding: var(--block-padding);
}
.cities .title{
    display:block;
    font-size:var(--title-size);
    line-height: var(--title-line-height);
    color:var(--text);
    text-align:center;
    padding:1.5em 0;
}
.cities ul{
    display:flex;
    gap:20px;
    flex-wrap: wrap;
    justify-content: center;
}
.cities ul li{
    display:flex;
    background-color: var(--bg3-color);
    width:calc(16% - 6px);
}
.cities ul li a{
    display:flex;
    width:100%;
    position: relative;
    flex-direction: column;
    gap:8px;
    padding:40px 20px;
}
.cities ul li a strong{
    display:block;
    text-align: center;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    transition: color .3s;
}
.cities ul li a:hover strong{
    color:var(--primary-color);
}
.cities ul li a i{
    position:absolute;
    right:10px;
    bottom:10px;
    width:20px;
    height:20px;
    border-right:10px #b6b6b6 solid;
    border-bottom:10px #b6b6b6 solid;
    transition: border-color .4s, width .4s linear 0.5s, height .4s linear 0.5s;
}
.cities ul li a i:before{
    content:'';
    display:block;
    position: absolute;
    right:10px;
    bottom:5px;
    width:0;
    height:10px;
    transform: rotate(45deg);
    background-color: #b6b6b6;
    opacity:0;
    transition: background-color .4s, right .5s, bottom .5s, opacity .2s, width .5s;
}
.cities ul li a:hover i{
    width:30px;
    height:30px;
    border-color: var(--primary-color);
}
.cities ul li a:hover i:before{
    right:-10px;
    bottom:5px;
    opacity:1;
    width:40px;
    background-color: var(--primary-color);
}
.archive{
    padding: var(--block-padding);
}
.archive h1, .archive h2{
    font-size:38px;
    line-height:48px;
    font-weight:500;
    text-align: left;
}
.archive > .container > span{
    display:block;
    position:relative;
    font-size:17px;
    line-height:27px;
    text-align: left;
    padding-top:12px;
    margin-top:12px;
    box-shadow: 0 0.15rem 0.4em rgba(0, 0, 0, 0.05), 0 0.5em 1em rgba(0, 0, 0, 0.1);
}
.archive .towns{
    margin-top:2px;
    display:flex;
    gap:6px;
    justify-content: center;
    flex-wrap: wrap;
}
.archive .towns a{
    line-height:30px;
    padding: 0 16px;
    background-color:var(--bg2-color);
    transition: background-color .3s;
}
.archive .towns a:hover{
    background-color: var(--bg3-color);
}
.archive .list{
    display:flex;
    flex-direction: row-reverse;
    gap:50px;
    padding:20px 0;
}
.archive aside{
    width:300px;
    display:flex;
    flex-direction: column;
    gap:20px;
    padding:10px;
    box-sizing: border-box;
}
.archive aside h5{
    font-size:18px;
    color:var(--black);
    font-weight:900;
}
.archive aside ul{
    display:flex;
    flex-direction: column;
    width:100%;
    gap:4px;
}
.archive aside ul li a{
    display:block;
    font-size:14px;
    line-height:32px;
    background-color: var(--bg2-color);
    padding: 6px 12px;
    transition: background-color .3s;
}
.archive aside ul li a:hover{
    background-color: var(--bg3-color);
}
.archive .empty{
    display: flex;
    width: 500px;
    box-sizing: border-box;
    padding: 10px;
    border: 1px #e9e9e9 solid;
    background-color: #f9f9f9;
    height: 100px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}
.archive ul{
    width:500px;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap:24px;
    justify-content: start;
}
.archive ul li a.imagelink{
    position:relative;
    display: block;
    margin:0 auto;
    width:500px;
} 
.archive ul li a.imagelink .tercih{
    position:absolute;
    right:6px;
    top: 16px;
    background-color: var(--primary-color);
    border-bottom-right-radius: 32px;
    border-top-left-radius: 32px;
    color:var(--white);
    padding:12px;
    font-size:18px;
    line-height: 24px;
    font-weight:500;
    text-align: right;
    padding-top:24px;
    transform: rotate(-10deg);
    opacity:0;
    animation: fadeIn .5s linear;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
.archive ul li:nth-child(2) a.imagelink .tercih{
    animation-delay: 1s;
}
.archive ul li:nth-child(3) a.imagelink .tercih{
    animation-delay: 1.5s;
}
.archive ul li:nth-child(4) a.imagelink .tercih{
    animation-delay: 2s;
}
.archive ul li:nth-child(5) a.imagelink .tercih{
    animation-delay: 2.5s;
}
.archive ul li:nth-child(6) a.imagelink .tercih{
    animation-delay: 3s;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: rotate(-20deg) scale(0.4);
    }
    100% {
        opacity: 1;
        transform: rotate(-10deg) scale(1);
    }
}
.archive ul li a.imagelink .tercih:after{
    content:'';
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:0;
    bottom:-20px;
    line-height: 0;
    border-top:10px #033fc2 solid;
    border-right:24px #033fc2 solid;
    border-bottom:10px transparent solid;
    border-left:24px transparent solid;
    border-bottom-right-radius: 5px;
}
.archive ul li a.imagelink .tercih i{
    display:block;
    position: absolute;
    top:-24px;
    left:-10px;
    font-size:60px;
    color: var(--primary-color);
    opacity:1;
    transform: rotate(-15deg);
    animation: nefes 1.5s infinite;
}
.archive ul li a.imagelink .tercih i:nth-child(2){
    top:-16px;
    left:-4px;
    font-size:48px;
    color:var(--white);
    opacity: 1;
}
@keyframes nefes {
    0% {
        transform: rotate(-15deg) scale(0.9);
    }
    50% {
        transform: rotate(-15deg) scale(1);
    }
    100% {
        transform: rotate(-15deg) scale(0.9);
    }
}
.archive ul li img{
    width:500px;
    height:500px;
}
.archive ul li .name{
    margin-bottom:10px;
}
.archive ul li .name h3 a{
    font-size:20px;
    font-weight:900;
    line-height: 32px;
    transition: color .3s;
}
.archive ul li:hover .name h3 a{
    color:var(--primary-color);
}
/*.archive ul li .name h3 a:before{
    content:'1. ';
}
.archive ul li:nth-child(2) .name h3 a:before{content:'2. ';}
.archive ul li:nth-child(3) .name h3 a:before{content:'3. ';}
.archive ul li:nth-child(4) .name h3 a:before{content:'4. ';}
.archive ul li:nth-child(5) .name h3 a:before{content:'5. ';}
.archive ul li:nth-child(6) .name h3 a:before{content:'6. ';}
.archive ul li:nth-child(7) .name h3 a:before{content:'7. ';}
.archive ul li:nth-child(8) .name h3 a:before{content:'8. ';}
.archive ul li:nth-child(9) .name h3 a:before{content:'9. ';}
.archive ul li:nth-child(10) .name h3 a:before{content:'10. ';}
.archive ul li:nth-child(11) .name h3 a:before{content:'11. ';}
.archive ul li:nth-child(12) .name h3 a:before{content:'12. ';}*/
.archive ul li .links{
    display:flex;
    justify-content: space-between;
    gap:4px;
    align-items: center;
}
.archive ul li .socials{
    display:flex;
    justify-content: end;
    gap:2px;
}
.archive ul li .socials i{
    width:36px;
    height:36px;
    line-height: 36px;
    margin:4px 0;
    font-size:18px;
    text-align: center;
    transition: color .3s, background-color .3s;
}
.archive ul li .socials a:hover i{
    background-color:var(--black);
    color:var(--white);
}
.archive ul li .socials a.instagram:hover i{
    background-color:#E4405F;
}
.archive ul li .socials a.twitter:hover i{
    background-color:#111;
}
.archive ul li .socials a.facebook:hover i{
    background-color:#1877F2;
}
.archive ul li .socials a.linkedin:hover i{
    background-color:#0A66C2;
}
.archive ul li .socials a.youtube:hover i{
    background-color:#CD201F;
}
.archive ul li .socials a.whatsapp:hover i{
    background-color:#25D366;
}
.archive ul li .socials a.phone:hover i{
    background-color:#555;
}
.archive ul li .socials a.web:hover i{
    background-color:#111;
}
.archive ul li .description{
    margin:20px 0 40px;
    font-size:16px;
    line-height: 32px;
}
.detail{
    padding: var(--block-padding);
}
.detail .info{
    display:flex;
    justify-content: space-between;
    gap:60px;
}
.detail .info .imgArea{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap:10px;
}
.detail .info img.doctor-image{
    width:350px;
    height:350px;
}
.detail .info .hizmetler,
.detail .info .uzmanliklar,
.detail .info .yorumlar{
    width:350px;
    display:none;
}
.detail .info .hizmetler.active,
.detail .info .uzmanliklar.active,
.detail .info .yorumlar.active{
    display:block;
}
.detail .info .hizmetler strong,
.detail .info .uzmanliklar strong{
    display: block;
    line-height: 28px;
    font-size: 15px;
}
.detail .info .hizmetler ul,
.detail .info .uzmanliklar ul{
    margin: 4px 0;
    display: flex;
    flex-direction: column;
    border: 1px #eaeaea solid;
    background-color: #fafafa;
}
.detail .info .hizmetler ul li,
.detail .info .uzmanliklar ul li{
    display:flex;
    padding:0 6px;
    gap:4px;
}
.detail .info .hizmetler ul li.hidden,
.detail .info .uzmanliklar ul li.hidden{
    display:none;
}
.detail .info .hizmetler ul li i,
.detail .info .uzmanliklar ul li i{
    font-size:16px;
    line-height:32px;
    color:#01BF63;
}
.detail .info .hizmetler ul li h3,
.detail .info .uzmanliklar ul li h3{
    font-size:14px;
    line-height:32px;
}
.detail .info .hizmetler ul li button,
.detail .info .uzmanliklar ul li button{
    font-family: 'Poppins', sans-serif;
    background:none;
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    margin-left:14px;
    font-weight:bold;
    border:none;
    outline: none;
    color:#555;
    cursor:pointer;
    transition: color .3s;
}
.detail .info .hizmetler ul li button:hover,
.detail .info .uzmanliklar ul li button:hover{
    color:#111;
}
.detail .info .tabs ul{
    display:flex;
    gap:2px;
}
.detail .info .tabs ul li {
    line-height: 40px;
    font-size: 15px;
    padding:0 6px;
    background-color: #fafafa;
    border: 1px #eaeaea solid;
    cursor:pointer;
    transition: color .3s, background-color .3s;
}
.detail .info .tabs ul li:hover,
.detail .info .tabs ul li:hover a,
.detail .info .tabs ul li.active{
    background-color:#111;
    color:#fff;
}
.detail .info .caption{
    width:350px;
    background-color: rgba(39,216,136,0.36);
    padding:8px 3px;
    font-size:13px;
    line-height:18px;
    text-align:center;
}
.detail .info .knowledge{
    flex:1;
}
.detail .info .knowledge h1,
.detail .info .imgArea h1{
    font-size:30px;
    line-height: 44px;
}
.detail .info .knowledge h2,
.detail .info .imgArea h2{
    font-size:20px;
    line-height: 30px;
    font-weight: 500;
}
.detail .info .knowledge ul{
    margin:10px 0;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:8px;
}
.detail .info .knowledge ul li a,
.detail .info .knowledge ul li span{
    font-size:14px;
    line-height:24px;
}
.detail .info .knowledge ul li a i,
.detail .info .knowledge ul li span i{
    font-size:20px;
    color:#01BF63;
}
.detail .info .knowledge .links li span i.deaktive{
    color: #DA1212;
}
.detail .info .knowledge .reviews li.stars i{
    color: #FF5700;
}
.detail .info .knowledge ul.doctor-branches,
.detail .info .imgArea ul.doctor-branches{
    flex-direction: column;
    gap:4px;
    margin:4px 0;
}
.detail .info .knowledge ul.doctor-branches li a,
.detail .info .imgArea ul.doctor-branches li a{
    color:var(--primary-color);
    font-size:15px;
    font-weight:500;
}
.detail .info .knowledge .caption,
.detail .info .knowledge .directs{
    display: none;
}
.detail .description{
    margin:10px 0;
    font-size:16px;
    line-height: 24px;
}
.detail .description div{
    margin:4px 0;
    display:flex;
    flex-direction: column;
    border:1px #eaeaea solid;
    background-color:#fafafa;
    text-align: center;
}
.detail .description div strong{
    display:block;
    background-color: #eaeaea;
    line-height:28px;
    font-size:15px;
}
.detail .description div span{
    display:block;
    line-height:36px;
    font-size:15px;
}
.detail .socials{
    margin:10px 0;
    display:flex;
    justify-content: end;
    gap:4px;
}
.detail .socials a{
    width:40px;
    line-height:40px;
    text-align: center;
    color: var(--black);
    background-color: var(--bg3-color);
    transition: color .3s, background-color .3s;
}
.detail .socials a:hover{
    color:var(--white);
}
.detail .socials a.instagram:hover{
    background-color:#E4405F;
}
.detail .socials a.twitter:hover{
    background-color:#111;
}
.detail .socials a.facebook:hover{
    background-color:#1877F2;
}
.detail .socials a.linkedin:hover{
    background-color:#0A66C2;
}
.detail .socials a.youtube:hover{
    background-color:#CD201F;
}
.detail .socials a.whatsapp:hover{
    background-color:#25D366;
}
.detail .socials a.phone:hover{
    background-color:#555;
}
.detail .socials a.web:hover{
    background-color:#111;
}
.detail .directs{
    margin:20px 0;
    display:flex;
    justify-content: start;
    gap:14px;
}
.detail .directs a{
    padding:0 14px;
    font-size:16px;
    line-height: 44px;
    font-weight: 600;
    background-color: var(--black);
    color:var(--white);
    transition: background-color .3s;
}
.detail .directs a:hover{
    background-color:var(--primary-color)
}
.reviewsArea{
    padding: var(--block-padding);
    background-color: var(--bg-color);
}
.reviewsArea h4{
    display:block;
    font-size:var(--title-size);
    line-height: var(--title-line-height);
    color:var(--black);
    font-weight: 600;
    text-align:center;
    padding:0.5em 0;
}
.reviewsArea ul{
    display:flex;
    flex-wrap: wrap;
    gap:10px;
}
.reviewsArea ul li{
    width:100%;
    display:flex;
    gap:4px;
}
.reviewsArea ul li.loading{
    margin:4px 0;
    line-height:24px;
    font-size:16px;
    text-align: center;
    font-weight:bold;
    width: 100%;
    border: 1px rgba(0,0,0,0.04) solid;
    background-color: rgba(0,0,0,0.015);
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
    justify-content: center;
}
.reviewsArea ul li.loading i{
    width:24px;
    height:24px;
    line-height: 24px;
    text-align: center;
    font-size:20px;
}
.reviewsArea ul li img{
    border-radius: 50%;
}
.reviewsArea ul li .review{
    width:100%;
    flex-direction: column;
    border:1px rgba(0,0,0,0.04) solid;
    background-color: rgba(0,0,0,0.015);
    border-radius: 5px;
    padding:8px;
    box-sizing: border-box;
}
.reviewsArea ul li .title{
    display:flex;
    justify-content: space-between;
}
.reviewsArea ul li .title .name,
.reviewsArea ul li .title .infobar{
    display:flex;
    flex-direction: column;
}
.reviewsArea ul li .title .infobar .stars{
    display:flex;
    justify-content: end;
}
.reviewsArea ul li .title .infobar .stars i{
    color:#01BF63;
}
.reviewsArea a.more{
    padding: 15px;
    width:60%;
    margin:5px auto;
    border: 1px solid #bce8f1;
    border-radius: 4px;
    background-color: #d9edf7;
    color: #31708f;
    text-align: center;
}
.reviewsArea .write{
    margin:10px 0;
    display:flex;
    flex-direction: column;
    gap:4px;
}
.reviewsArea .write .btnArea{
    display:flex;
    justify-content: space-between;
}
.reviewsArea .write .btnArea div{
    display:flex;
    justify-content: start;
    gap:8px;
}
.reviewsArea .write .btnArea div i{
    font-size:24px;
    line-height:48px;
    color:#3c763d;
}
.reviewsArea .write .btnArea div span{
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.reviewsArea .write .addreview{
    padding: 12px 8px;
    border: 1px solid #d6e9c6;
    border-radius: 4px;
    background-color: #dff0d8;
    color: #3c763d;
    white-space: nowrap;
    text-align: center;
    align-self: start;
}
.reviewsArea .write form{
    border:1px rgba(0,0,0,0.05) solid;
    background-color:rgba(0,0,0,0.02);
    padding:8px;
    border-radius: 5px;
    display:flex;
    flex-direction: column;
}
.reviewsArea .write form strong{
    margin-top:24px;
}
.reviewsArea .write form strong:nth-child(1){
    margin-top:0;
}
.reviewsArea .write form .starArea{
    display:flex;
    justify-content: space-between;
}
.reviewsArea .write form .star{
    display:flex;
    justify-content: start;
}
.reviewsArea .write form .star i{
    font-size:36px;
    line-height: 48px;
    cursor:pointer;
    color:#595959;
}
.reviewsArea .write form .star:hover i{
    color:#3c763d;
}
.reviewsArea .write form .startext{
    line-height:36px;
    font-size:18px;
    font-weight:bold;
}
.reviewsArea .write form input,
.reviewsArea .write form select,
.reviewsArea .write form textarea,
.reviewsArea .write form button{
    font-family: 'Poppins', sans-serif;
    line-height:36px;
    font-size:14px;
    font-weight: bold;
    padding:8px;
    border:1px rgba(0,0,0,0.15) solid;
    background-color: var(--white);
}
.reviewsArea .write form button{
    border: 1px solid #d6e9c6;
    border-radius: 4px;
    background-color: #dff0d8;
    color: #3c763d;
    text-align: center;
    width:150px;
    margin-top:4px;
    align-self:end;
    cursor:pointer;
}
.reviewsArea .point{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top:20px;
    border-top:1px #d9d9d9 solid;
}
.reviewsArea .point span{
    font-weight: bold;
    font-size:16px;
}
.reviewsArea .point div{
    display:flex;
    flex-direction: column;
}
.reviewsArea .point div strong{
    line-height:32px;
    font-size:24px;
    border:2px #333 solid;
    color:#333;
    width:100%;
    box-sizing: border-box;
    text-align: center;
}
.interests{
    padding: var(--block-padding);
    background-color: var(--bg2-color);
}
.interests h4{
    display:block;
    font-size:var(--title-size);
    line-height: var(--title-line-height);
    color:var(--black);
    font-weight: 600;
    text-align:center;
    padding:0.5em 0;
}
.interests span{
    display:block;
    font-size:16px;
    line-height: 24px;
    color:var(--text);
    font-weight: 400;
    text-align:center;
    padding:0.5em 0;
}
.interests ul{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.interests.hizmetler ul{
    gap:10px;
}
.interests ul li {
    display:flex;
    flex-direction: column;
    gap:10px;
    padding:10px;
    text-align: center;
    width:230px;
}
.interests.hizmetler ul li{
    flex-direction: row;
    text-align: left;
    width:47%;
}
.interests ul li i{
    font-size:36px;
    color:#FFBD59;
}
.interests ul li h3{
    font-size:20px;
    font-weight:600;
    line-height: 32px;
}
.interests.hizmetler ul li h3{
    font-size:18px;
    line-height: 36px;
}
.interests ul li p{
    font-size:15px;
    line-height: 30px;
}
.about{
    display:flex;
}
.about .imgarea{
    width:50%;
    padding:50px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:var(--black)
}
.about .imgarea strong{
    display:block;
    position: relative;
    font-size:56px;
    line-height: 72px;
    font-weight:600;
    color:var(--white);
    width:300px;
}
.about .imgarea strong:after{
    content:'';
    display:block;
    position: absolute;
    width:32px;
    height:2px;
    background-color: var(--white);
    bottom:0;
    left:0;
}
.about .singlearea{
    width:50%;
    padding:50px 30px;
    display:flex;
    justify-content: start;
}
.about .singlearea .single{
    width:50%;
    flex:unset;
}
.partners.detailpartners{
    background-color: var(--bg2-color);
}
.partners.detailpartners .title{
    color:var(--black);
}
.partners.yellow{
    background-color: #FFD324;
}
.partners.yellow .title{
    color:var(--white);
}
.suggestion{
    padding: var(--block-padding);
}
.suggestion h4{
    display:block;
    font-size:var(--title-size);
    line-height: var(--title-line-height);
    color:var(--black);
    font-weight: 600;
    text-align:center;
    padding:0.5em 0;
}
.suggestion span{
    display:block;
    font-size:16px;
    line-height: 24px;
    color:var(--text);
    font-weight: 400;
    text-align:center;
    padding:0.5em 0;
}
.suggestion ul{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.suggestion ul li {
    display:flex;
    flex-direction: column;
    gap:10px;
    padding:10px;
    text-align: center;
    width:230px;
}
.suggestion ul li i{
    width:84px;
    height:84px;
    line-height: 84px;
    text-align: center;
    font-size:28px;
    font-weight: 600;
    background-color: #eea302;
    border-radius: 50%;
    margin: 20px auto;
}
.suggestion ul li span{
    font-size:15px;
    line-height: 30px;
}
.archivecontent{
    background-color: var(--bg2-color);
    padding: var(--block-padding);
}
.archivecontent .title{
    display:block;
    font-size:var(--title-size);
    line-height: var(--title-line-height);
    color:var(--text);
    text-align:center;
    padding:1.5em 0;
}
.citybranches{
    padding: var(--block-padding);
}
.citybranches .title{
    display:block;
    font-size:var(--title-size);
    line-height: var(--title-line-height);
    color:var(--text);
    text-align:center;
    padding:1.5em 0 0.5em;
}
.citybranches .list{
    display:flex;
    flex-direction: column;
    gap:60px;
}
.citybranches .list .item{
    display:flex;
    gap:50px;
}
.citybranches .list .item .name{
    width:240px;
    display:flex;
    flex-direction: column;
    gap:14px;
}
.citybranches .list .item .name strong{
    font-size:16px;
}
.citybranches .list .item .desc{
    width:560px;
    font-size:16px;
    line-height: 32px;;
}
.page{
    background-color: var(--bg-color);
    background-image: url('../img/bg.webp');
    background-position: center center;
    background-size: cover;
    padding:40px 0;
}
.page .container{
    background-color: var(--white);
    width:620px;
    padding:40px;
    box-sizing: border-box;
}
.page .title{
    display:block;
    font-size:var(--title-size);
    line-height: var(--title-line-height);
    color:var(--text);
    text-align:center;
    padding:.5em 0;
}
.navigation{
    display: flex;
    justify-content: end;
}
.navigation ul{
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap:4px;
}
.navigation ul li a{
    display:block;
    line-height:36px;
    height:36px;
    min-width:36px;
    text-align: center;
    font-size:14px;
    font-weight: 600;
    color:var(--black);
    background-color: var(--bg2-color);
    border:1px var(--bg3-color) solid;
    user-select: none;
    transition: background-color .3s;
}
.navigation ul li a:hover{
    background-color: var(--bg3-color);
}
.navigation ul li.active a{
    background-color: var(--primary-color);
    border:1px var(--black) solid;
    color:var(--white);
}
.navigation ul li a i{
    font-size:12px;
}
.alert {
    padding: 15px;
    margin-bottom:20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}
.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}
.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}
footer{
    display:flex;
    background-color: var(--bg3-color);
    padding:40px 50px 80px;
    justify-content: space-between;
    flex-wrap:wrap;
    gap:20px;
}
footer .item{
    display:flex;
    width:200px;
    flex-direction: column;
    gap:14px;
}
footer .item strong{
    font-size:18px;
}
footer .item a{
    text-decoration: underline;
}
footer .item a:hover{
    color:var(--black);
}
footer .item span{
    font-size:13px;
}
footer .item li a{
    text-decoration: none;
    line-height: 26px;
    transition: color .3s;
}
@media only screen and (max-width: 1660px)  {
    .container{
        max-width: 100%;
    }
}
@media only screen and (max-width: 1300px) {
    .branches ul li,
    .cities ul li{
        width: calc(24% - 4px);
    }
}
@media only screen and (max-width: 1100px) {
    .container{
        max-width: 90vw;
    }
    header{
        padding:2px 10px;
    }
    header .logo:before{
        top:4px;
        bottom:4px;
    }
    header .menu{
        display:none;
    }
    header .mobilmenu{
        display:flex;
        align-self:center;
    }
    .branches ul li,
    .cities ul li{
        width: calc(32% - 4px);
    }
    .slider{
        height: 100vw;
        background-position: 50% 100%;
        background-size: 100%;
    }
    .about .singlearea .single{
        width:100%;
    }
}
@media only screen and (max-width: 860px) {
    .container.medium{
        max-width: 90vw;
    }
    .archive .list{
        flex-direction: column-reverse;
        align-items: center;
    }
    .archive aside{
        width:100%;
    }
    .about{
        flex-direction: column;
    }
    .about .imgarea,
    .about .singlearea{
        width:100%;
        box-sizing: border-box;
    }
    .detail .info{
        flex-direction: column;
        gap:30px;
    }
    .detail .info .imgArea{
        width:100%;
    }
    .detail .info img.doctor-image{
        margin:0 auto;
        max-width:100%;
        height:auto;
    }
    .detail .info .caption{
        width:100%;
    }
    .detail .info .imgArea .caption,
    .detail .info .imgArea .directs{
        display: none;
    }
    .detail .info .knowledge .caption,
    .detail .info .knowledge .directs{
        display: flex;
    }
    /*.reviewsArea .write .btnArea{
        flex-direction: column;
        gap:10px;
    }*/
    .detail .info .hizmetler, .detail .info .uzmanliklar, .detail .info .yorumlar{
        width:100%;
    }
    .detail .info .knowledge ul{
        justify-content: center;
        flex-wrap: wrap;
        gap:8px;
    }
    .detail .directs,
    .detail .socials{
        justify-content: center;
        flex-wrap: wrap;
    }
}
@media only screen and (max-width: 720px) {
    .cities ul,
    .branches ul{
        justify-content: space-around;
        gap: 8px;
    }
    .cities ul li,
    .branches ul li{
        width: 47%;
    }
    footer .item{
        width:100%;
    }
    .slider{
        height: 720px;
        background-position: 50% 100%;
        background-size: 100%;
    }
    .archive ul,
    .archive ul li a.imagelink{
        width:100%;
    }
    .archive ul li img{
        width:100%;
        height:auto;
    }
    .archive ul li .links{
        flex-direction: column;
    }
    .archive ul li .socials{
        justify-content: center;
    }
    .interests ul li,
    .interests.hizmetler ul li{
        width:100%;
    }
    .detail .info .imgArea{
        align-items: start;
    }
}
@media only screen and (max-width: 460px) {
    .cities ul li,
    .branches ul li{
        width: 100%;
    }
    .reviewsArea h4,
    .suggestion h4,
    .citybranches .title,
    .archivecontent .title,
    .partners .title,
    .branches .title,
    .cities .title,
    .interests h4{
        font-size:36px;
        line-height: 48px;
    }
    .archive h1, .archive h2{
        font-size:32px;
        line-height: 36px;
    }
    .slider .text{
        font-size:36px;
        line-height: 48px;
    }
    .slider .text a{
        margin-top:20px;
    }
    .slider {
        height:500px;
    }
    .citybranches .list .item{
        flex-direction: column;
        gap:10px;
    }
    .citybranches .list .item .desc{
        width:100%;
    }
    .archive ul li a.imagelink .tercih{
        top:-6px;
        right:-26px;
    }
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: rotate(-20deg) scale(0.4);
        }
        100% {
            opacity: 1;
            transform: rotate(-10deg) scale(0.6);
        }
    }
    .about .imgarea strong{
        font-size:36px;
        line-height: 48px;
    }

}