:root {
	--gray: 		#e5e5e5;
	--color:		#4e3232;
	--darkcolor:	#3e2525;
	--lightcolor:	#786565;

	--darkgray:		#363636;
	--lightgray:	#f3f3f3;
}

body {background: var(--gray);}

header {background: linear-gradient(45deg, #0b2c4d, #83006d); padding:10px 0; margin-bottom:40px;
	.flex	{display: flex;justify-content: space-between;align-items: center;}
	i {display: none;font-size: 24px; color: white; cursor: pointer; font-weight: bold}

	.logo {background-image: url('/img/falibak.svg');display: block; background-size: 80px; width: 120px; background-repeat: no-repeat; background-position: center; height: 90px;}

	.nav {gap: 20px;
		a {color: white; padding: 10px; border-radius: 10px;
			&:hover {background: var(--darkcolor);}
		}
	}
    .close {display: none; background: #2e2e2e; text-align: center; padding: 10px; border-radius: 10px; color: white; cursor: pointer;}
}


@media screen and (max-width: 1299px) {
    .panel .slider li {flex: 0 50% !important}
}


@media screen and (min-width: 1001px) {
    .slider { margin-bottom: 40px !important;}
}

@media screen and (max-width: 1000px) {
    li.close {margin-bottom: 20px}
    .panel form {flex-direction: column;}
    .panel .panelBody img.snl {width: 150px}

    .panel .slider li {flex: 0 100% !important}
    .nav { display: flex; position: fixed; right: -70%; height: 100vh; top: 0; background: white; width: 70%; z-index: 99; flex-direction: column; justify-content: flex-start !important; padding: 20px; gap: 0px !important; transition: right .5s;
        & * {font-size: 14px !important;}
        &.active {right: 0}
        li {width: 100%;
            a {display: block; color: black; padding: 10px 0;
                &:hover {background: transparent;}
            }
        }
    }
    header .logo {height: 60px;background-size: 50px;width: 70px;}
    header i {display: block !important;}
    .close {display: block !important;}

    .panel, .panel .KahveFoto .baslik {font-size: 14px !important;}
    .panel .title, .yorum .title, h2 {font-size: 16px !important;}

    header {padding: 10px 0 !important;}

    header, .slider, .panel, .sidebar {margin-bottom: 20px !important}

    .panel .KahveFoto .rowForm span {padding: 10px !important; font-size: 12px !important;}

    .col {flex-direction: column;}
}


/* slider */
.slider {height:286px !important;
	li {
		a {overflow:hidden; border-radius: 10px;display: block; position: relative;height:286px !important; width: 100%;
			img {height: 100%; position: absolute; left: 50%; transform: translateX(-50%);}
			h2, span {position: absolute; bottom: 0; width: 100%; padding: 20px 10px; left: 0; text-align: center; color: white;background: linear-gradient(360deg, black, transparent); font-weight: 500; line-height: 1.7;font-size: 15px;margin-bottom: 0;}
		}
	}
}

/*  error404 */
.error404 {isplay: block; background: #FFF; padding: 25px; overflow: hidden; color: #334D5E; border: 1px solid #E0E0E0; border-radius: 10px; margin-bottom: 40px; text-align: center;}

/* Fotoğraf Yükle */
.galeri {display: flex; flex-wrap: wrap;max-width: 100%; width: 500px;justify-content: center; gap: 10px;
    & > div {position: relative; overflow: hidden;border-radius: 10px;flex: 1;}
    label {position: relative; aspect-ratio: 9 / 16; border: 2px dashed #b1b1b1; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 10px; transition: all .5s;overflow: hidden;
        &:hover:after {opacity: 1}
        &:after {content: "+"; position: absolute; z-index: 0; font-size: 30px; opacity: .5;  transition: opacity .5s;}
        img {position: absolute; z-index: 1;height: auto; min-width: 100%; max-height: 100%;max-width: inherit !important;}
        &:hover {background-color: #f0f0f0;}
        .sil {position: absolute; top: 10px; z-index: 222; color: white; font-weight: bold; right: 10px; font-size: 12px; background: red; display: none; border-radius: 50%; text-align: center; width: 22px; line-height: 22px;}
    }
}


/* panel */
.panel {overflow: hidden; border-radius: 10px;display: flex; flex-direction: column;text-align: center; margin-bottom:40px; font-size: 16px; font-weight:400;
    h2 {line-height: 1.5;}
	.title {background: linear-gradient(45deg, #0b2c4d, #83006d); color: white; padding: 20px;font-weight: bold; font-size: 22px; width: 100%; margin-bottom: 0}
	.panelBody {background: white; padding: 20px; line-height: 1.8;
        &.Blog {text-align: left !important}
        img {max-width: 100%;height: auto;}
        a {color: black; font-weight: 600}
    }
	p:last-child {margin-bottom: 0}
    ul {display: flex; list-style: disc; padding-left: 30px; flex-direction: column; row-gap: 6px; margin-bottom: 10px;
        li {padding-left: 5px}
    }
    ol {display: flex; padding-left: 30px; flex-direction: column; row-gap: 6px; margin-bottom: 10px;
        li {padding-left: 5px;
            &::marker {font-weight: 600}
        }
    }
    form {display: flex; align-items: center; gap: 50px;justify-content: center;}
    .KahveFoto {flex-direction: column;gap: 0;
        .col {margin-left: -10px; margin-right: -10px; margin-bottom: 15px}
        button {margin-top: 15px}
        .baslik { font-size: 15px; font-weight: 500;margin-bottom: 5px; }
        .isim {margin-bottom: 15px; padding: 5px 15px; border-radius: 10px; border: solid 1px var(--lightcolor); font-size: 15px;height: 40px; cursor: pointer;display: block;}
        .gizle {display: none;}
        .flex  {display: flex; justify-content: center; border-radius: 10px; overflow: hidden;
            label {flex: 0 33.333%;}
            span {display: block !important; padding: 13px 20px}
        }
        span {background: #5a3838; display: inline-block; cursor: pointer;padding: 10px 20px; color: white;}
        input {display: none;
            &:checked+span{background: var(--darkcolor) !important}
        }
        select {border-radius: 10px; padding: 8px 15px; font-size: 14px; cursor: pointer;}
        
        
        .kahveRow {display: flex; border-radius: 10px; overflow: hidden;flex-direction: column; padding-left: 10px; padding-right: 10px; margin-bottom: 15px;
            label { line-height: 1; font-size: 14px;}
        }
    }
    .formSanal {text-align: center; display: flex;row-gap: 20px;flex-direction: column;align-items: center;justify-content: center;
        .formTitle {font-weight: 600}
        input {display: none;
            &:checked+span{background: var(--darkcolor) !important}
        }
        label {line-height: 1;}
        span {background: #5a3838; display: inline-block; cursor: pointer;padding: 10px 20px; color: white;}
        .rowForm {display: flex;border-radius: 10px; overflow: hidden; border: solid 1px var(--color);}
        }

    button, .yenifal { border-radius: 10px; border: solid 1px var(--lightcolor); transition: all .5s; padding: 5px 30px; font-size: 14px; font-weight: 600; background:white;
        &:hover {background: var(--darkcolor); color: white !important;}
    }
    .yenifal {background: white; margin-top: 5px !important; display: inline-block;}


    .slider {padding-left: 0; list-style: none;flex-direction: row;flex-wrap: wrap; margin-bottom: 0 !important; row-gap: 20px; margin-left: -10px; margin-right: -10px; height: auto !important;
        li {padding-left: 0; flex: 0 33.3333%; padding-left: 10px; padding-right: 10px;}
        img {max-width: inherit !important;}
    }
}

.pagination {display: flex; justify-content: center; width: max-content; flex-wrap: nowrap; flex-direction: row; margin: 0 auto 30px; border-radius: 10px;overflow: hidden;
    a {display: block; color: white !important;width: 45px;text-align: center; padding: 10px;background: var(--lightcolor); 
        &.active {background: var(--darkcolor); }
    }
}



.falfotosu {position: absolute; top: 50%; left: 50%; height: 100%; transform: translate(-50%, -50%); width: 100%; display: none; border-radius: 10px; overflow: hidden;background: white;
    img {max-height: 300px; top: 50%; position: relative; left: 50%; transform: translate(-50%, -50%); height: auto; min-width: 100%; max-width: inherit !important;}
    &:after {position: absolute; content: "✓"; bottom: 10px; z-index: 222; color: white; font-weight: bold; left: 10px; font-size: 12px; background: green; display: inline-block; border-radius: 50%; text-align: center; width: 22px; line-height: 22px;}
}



.self { background: var(--darkcolor); padding: 3px; border-radius: 10px; position: relative;overflow: hidden; margin-bottom: 40px;
    .progress {animation: parlama .7s infinite alternate;border-radius: 7px; padding: 5px 15px; color: white; font-weight: 600; z-index: 2; position: relative;}
    .yukleniyor {position: absolute; left: 4px;  background: #5a3838; top: 3px; height: 35px; border-radius: 7px;max-width: ~"calc(100% - 7px)";}
}
@keyframes parlama {
    0% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}


.col {display: flex;flex-wrap: wrap;
    .kahveRow {flex: 0 50%;}
}





/* galeri göster */
.galeriGoster {display: flex; flex-wrap: nowrap; max-width: 100%; width: 500px; justify-content: center; gap: 10px; margin: auto; margin-bottom: 20px;
    & > div {position: relative; aspect-ratio: 9 / 16; border: 1px dashed #b1b1b1; display: flex; align-items: center; border-radius: 10px; overflow: hidden; width: 100%}
    img {aspect-ratio: 9 / 16; position: absolute; width: auto; max-width: inherit !important; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 300px;}
}


/* yorum */
.yorum {overflow: hidden; border-radius: 10px; display: flex; flex-direction: column; margin-bottom: 40px; font-weight: 400;
    .title {background: linear-gradient(45deg, #0b2c4d, #83006d); color: white; padding: 20px; font-weight: bold; font-size: 18px; width: 100%; margin-bottom: 0;}
    .yorumBody {background: white; padding: 20px; line-height: 1.8;}
    .commentTitle,.lastComment {font-weight: 600; margin-bottom: 10px}
    #commentForm {display: flex; flex-direction: column;gap: 10px; font-size: 14px;align-items: center;}
    input, textarea {border: solid 1px #afafaf; padding: 10px; width: 100%; resize: vertical;}
    textarea {min-height: 50px}
    .soru {display: flex; gap: 10px; position:relative; width: 100%;
        p {background: linear-gradient(45deg, #0b2c4d, #83006d);  margin:0; width: 70px;display: flex; align-items: center; justify-content: center;color: white; font-weight: 600}
        input {width: ~"calc(100% - 190px)";}
        .yorumla {width: 100px}
    }
    .yorumla {background: linear-gradient(45deg, #0b2c4d, #83006d); color: white; font-weight: 600; padding: 10px; border: none; }
    .addComment {margin-bottom: 20px}

    #commentsList {display: flex; flex-direction: column; gap: 10px;}
    .yorumTek {background: #efefef; padding: 10px; border-radius:5px;border: solid 1px #bdbdbd;
        .isim {display: flex; align-items: center;justify-content: space-between;
            span {font-weight: bold}
            small {font-size: 12px; margin-left: 10px}
        }
        p {margin:0;}
    }
    .new-comment {border: solid 2px green !important;}

    .success, .error {padding: 10px 20px; color: white; border-radius: 5px; margin-bottom: 10px}
    .success {background: green;
        &:before {content:"✓"; padding-right: 10px;font-weight: bold}
    }
    .error {background: #950000;
        &:before {content:"✗"; padding-right: 10px; font-weight: bold}
    }
}
#loadMoreComments { border: solid 1px #b9b4b4; margin-top: 10px; padding: 5px 10px; font-size: 14px; border-radius: 5px; background: white; transition: background .5s;
    &:hover {background:#f3eaea}
}



/* breadcrumb */
.breadcrumb {gap: 10px; list-style: none !important;flex-direction: row !important; padding: 10px 15px !important; background: var(--lightgray);}
.breadcrumb li {padding-left: 0 !important;    min-width: fit-content;}
.breadcrumb li:after {content: ">"; padding-left: 10px}
.breadcrumb li.last:after {display: none}
.breadcrumb li.last {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100%; display: inline-block;min-width: 10px !important;}

/* blogSidebar */
.sidebar {display: block; background: #FFF; padding: 25px; overflow: hidden; color: #334D5E; border: 1px solid #E0E0E0;border-radius: 10px; margin-bottom: 40px; }
.BlogTitle {font-weight: 600;  font-size:19px; margin-bottom: 15px;padding-left: 10px;}
.blogSidebar {display: flex; flex-direction: column;border-top: solid 1px var(--lightgray);overflow:hidden;
	li {border-bottom: solid 1px var(--lightgray); border-top:none;
		&:last-child {border-bottom: none;}
		a {display: block; color: black; padding: 10px;
			&:hover {background: var(--lightgray);}
		}
        h3 { font-weight: 500; font-size: 15px; margin-bottom: 0}
	}
}


/* footer */
footer {background: var(--color); padding: 30px 0;
	.logo {font-size: 20px; font-weight: 600}
	a, a:hover, a:focus {color: white;}
	.flex {display: flex; flex-direction: column; text-align: center; gap:15px;align-items: center;}
	ul {flex-direction: column;flex-direction: row !important;justify-content: center;}
}







.home {margin-bottom: 25px !important;
    a {display: block; border-radius: 10px; overflow: hidden; position: relative;
        &:hover {
            .foto img {transform: translate(-50%,-50%) scale(1.1);}
        }
        .kategori {position: absolute; left: 20px; top: 20px; z-index: 9; color: white; background: var(--lightcolor); font-size: 12px; border-radius: 5px; padding: 5px 10px;}
        .foto {display: block; height: 250px; position: relative;
            img {width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 250px; transition: all .5s}
        }
        .alt {align-content: flex-end; align-items: flex-end;height: 100%; position: absolute; bottom: 0; left: 0; width: 100%;background: linear-gradient(0deg, var(--lightgray), transparent); padding: 140px 30px 20px; color: white; display: flex; flex-wrap: wrap;
            .baslik {font-size: 20px; margin-bottom: 5px; display: flex; width: 100%; align-items: flex-end;}
            .tarih {font-weight: 300; font-size: 14px}
        }
    }
}


/*  ul.social */
.social {justify-content: center; flex-direction: row !important;list-style:none !important; padding-left: 0 !important; margin-bottom: 0 !important;
    li {padding-left: 0 !important}
    li a {color: black; font-size: 30px;}
}








@keyframes rightEnd {
    0% {
        left: 0;
    }
    50% {
        left: -15px;
    }
    100% {
        left: 0;
    }
}
@keyframes topEnd {
    0% {
        top: 0;
    }
    50% {
        top: -15px;
    }
    100% {
        top: 0;
    }
}
@keyframes leftEnd {
    0% {
        left: 0;
    }
    50% {
        left: 15px;
    }
    100% {
        left: 0;
    }
}
@keyframes bottomEnd {
    0% {
        bottom: 0;
    }
    50% {
        bottom: -15px;
    }
    100% {
        bottom: 0;
    }
}
.lSSlideOuter {
    overflow: hidden;
    user-select: none;
    .lSPager.lSpg {
        margin: 10px 0 0;
        padding: 0;
        text-align: center;
        >li {
            cursor: pointer;
            display: inline-block;
            padding: 0 5px;
            a {
                background-color: #222;
                border-radius: 30px;
                display: inline-block;
                height: 8px;
                overflow: hidden;
                text-indent: -999em;
                width: 8px;
                position: relative;
                z-index: 99;
                transition: all .5s linear 0s;
            }
            &:hover {
                a {
                    background-color: #428bca;
                }
            }
        }
        >li.active {
            a {
                background-color: #428bca;
            }
        }
    }
    .media {
        opacity: .8;
    }
    .media.active {
        opacity: 1;
    }
    .lSPager.lSGallery {
        list-style: none outside none;
        padding-left: 0;
        margin: 0;
        overflow: hidden;
        transform: translate3d(0,0,0);
        user-select: none;
        li {
            overflow: hidden;
            transition: border-radius .12s linear 0s .35s linear 0s;
            &:hover {
                border-radius: 5px;
            }
        }
        li.active {
            border-radius: 5px;
        }
        img {
            display: block;
            height: auto;
            max-width: 100%;
        }
        &:after {
            content: " ";
            display: table;
            clear: both;
        }
        &:before {
            content: " ";
            display: table;
        }
    }
    .lSPager {
        padding-left: 0;
        list-style: none outside none;
    }
    .lightSlider {
        padding-left: 0;
        list-style: none outside none;
        >* {
            float: left;
        }
    }
    .lSGallery {
        li {
            float: left;
        }
    }
    .rightEnd {
        animation: rightEnd .3s;
        position: relative;
    }
    .leftEnd {
        animation: leftEnd .3s;
        position: relative;
    }
}
.lightSlider {
    &:after {
        content: " ";
        display: table;
    }
    &:before {
        content: " ";
        display: table;
    }
    overflow: hidden;
    margin: 0;
}
.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    >.lightSlider {
        &:after {
            clear: both;
        }
    }
    .lSSlide {
        transform: translate(0,0);
        -webkit-transition: all 1s;
        transition-property: transform,height;
        transition-duration: inherit !important;
        transition-timing-function: inherit !important;
    }
    .lSFade {
        position: relative;
        >* {
            position: absolute !important;
            top: 0;
            left: 0;
            z-index: 9;
            margin-right: 0;
            width: 100%;
        }
        >.active {
            z-index: 10;
        }
    }
}
.lSSlideWrapper.usingCss {
    .lSFade {
        >* {
            opacity: 0;
            transition-delay: 0s;
            transition-duration: inherit !important;
            transition-property: opacity;
            transition-timing-function: inherit !important;
        }
        >.active {
            opacity: 1;
        }
    }
}
.lSAction {
    >a {
        display: block;
        top: 50%;
        color: white;
        font-family:'Font Bold';
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 24px;
        margin-top: -16px;
        position: absolute;
        z-index: 99;
        opacity: .5;
        transition: opacity .35s linear 0s;
        &:hover {
            opacity: 1;
        }
    }
    >.lSPrev {
        left: 30px;
    }
    >.lSNext {
        right: 30px;
    }
    >a.disabled {
        pointer-events: none;
    }
}
.cS-hidden {
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.lSSlideOuter.vertical {
    position: relative;
    .lSGallery {
        position: absolute !important;
        right: 0;
        top: 0;
    }
    .lightSlider {
        >* {
            width: 100% !important;
            max-width: none !important;
        }
    }
    .lSAction {
        >a {
            left: 50%;
            margin-left: -14px;
            margin-top: 0;
        }
        >.lSNext {
            bottom: 10px;
            top: auto;
        }
        >.lSPrev {
            background-position: 0 -31px;
            bottom: auto;
            top: 10px;
        }
    }
    .rightEnd {
        animation: topEnd .3s;
        position: relative;
    }
    .leftEnd {
        animation: bottomEnd .3s;
        position: relative;
    }
}
.lSSlideOuter.vertical.noPager {
    padding-right: 0 !important;
}
.lSSlideOuter.lSrtl {
    direction: rtl;
    .lSPager {
        padding-right: 0;
    }
    .lightSlider {
        padding-right: 0;
        >* {
            float: right !important;
        }
    }
    .lSGallery {
        li {
            float: right !important;
        }
    }
    .rightEnd {
        animation: leftEnd .3s;
        position: relative;
    }
    .leftEnd {
        animation: rightEnd .3s;
        position: relative;
    }
}
.lightSlider.lsGrab {
    >* {
        cursor: grab;
    }
}
.lightSlider.lsGrabbing {
    >* {
        cursor: move;
        cursor: grabbing;
    }
}

@font-face {
  font-family: 'fontello';
  src: url('inc/font/fontello.eot?87224836');
  src: url('inc/font/fontello.eot?87224836#iefix') format('embedded-opentype'),
       url('inc/font/fontello.woff2?87224836') format('woff2'),
       url('inc/font/fontello.woff?87224836') format('woff'),
       url('inc/font/fontello.ttf?87224836') format('truetype'),
       url('inc/font/fontello.svg?87224836#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-coffee-cup:before { content: '\e800'; } /* '' */
.icon-coffee-beans:before { content: '\e801'; } /* '' */
.icon-blogging:before { content: '\e802'; } /* '' */
.icon-more:before { content: '\e803'; } /* '' */
.icon-twitter:before { content: '\e804'; } /* '' */
.icon-facebook:before { content: '\e805'; } /* '' */
.icon-whatsapp:before { content: '\e806'; } /* '' */
.icon-linkedin-logo:before { content: '\e807'; } /* '' */
.icon-pinterest:before { content: '\e808'; } /* '' */
.icon-attention:before { content: '\e809'; } /* '' */
.icon-coffee:before { content: '\f0f4'; } /* '' */