*:where(:not(.no-rule *)){ margin: 0; padding: 0; box-sizing: border-box;}

@font-face {
    font-family: 'TFArrow Medium'; /* Font adı */
    src: url('../fonts/TFArrow Medium.ttf') format('truetype'); /* Font dosyasının yolu ve formatı */
    font-weight: normal; /* Font ağırlığı (normal, bold, italic, vs.) */
    font-style: normal; /* Font stili (normal, italic, oblique, vs.) */
}

html{
    width: 100%;
    overflow-x: hidden;
}

body{ 
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Open Sans', sans-serif; */
    font-family: Montserrat, sans-serif;

    --max-width: 1300px;
    --width-w-padd: calc(100% - 20px);


    --main-color: #7E5E43;
    --main-color-dark: #684e38;
    --main-color-o: 126, 94, 67;

    --main-color: #db5b28;
    --main-color-dark: #c44f21;
    --main-color-o: 219, 91, 40;

    --black-o: 0, 0, 0;

    --all-1s: all .1s ease;
    --all-2s: all .2s ease;

    --defalut-mb: 150px;

    --full-height: calc(var(--vh, 1vh) * 100);

    overflow-x: hidden;
    width: 100%;

}

button{ font-family: Montserrat, sans-serif;}
.c-txt{ color: var(--main-color);}
.default-container{ width: var(--width-w-padd); max-width: var(--max-width); margin: 0 auto;}

.mt-a{ margin-top: 100px;}
.mb-a{ margin-bottom: 100px;}
.mt-5{ margin-top: 50px;}



.main-container{}
.p-container{ padding: 30px 0;}

header{ position: absolute; left: 0; top: 0; width: 100%; z-index: 101;}
header::before{ opacity: 1; transition: all .2s ease; content: ''; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 300px; z-index: 2; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .6) 5%, transparent 80%);}
header.sticky{ transform: translateY(-100%); opacity: 0; position: fixed; background-color: rgba(0, 0, 0, .7); backdrop-filter: blur(2px);}
header.sticky::before{ opacity: 0;}
header.sticky.show{ transition: all .33s ease; opacity: 1; transform: translateY(0);}
header.sticky > div nav > div > span{ display: none;}
header.sticky > div .logo{ padding: 10px; height: 60px; display: flex; align-items: center; justify-content: center;}
header.sticky > div .logo img{ height: 100%;}
header.sticky > div nav > div .weather{ display: none;}
header > div{ height: 60px; position: relative; z-index: 2; display: flex; justify-content: space-between;}
header > div .logo{ position: relative; z-index: 2; padding: 30px;}
header > div .logo img{ width: 150px; filter: invert(1); object-fit: contain;}
header > div nav{ height: 60px; display: flex; width: 100%;}
header > div nav > div{ position: relative; width: 100%; height: 60px; display: flex; align-items: center;}
header > div nav > div > span{ display: inline-block; position: absolute; left: 0; top: 100%; width: 100%; height: 30px;}
header > div nav > div > span a{ transition: all .2s ease; background-color: rgba(var(--main-color-o), .4); color: white; font-size: 13px; font-weight: 300; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
header > div nav > div > span a:hover{ background-color: var(--main-color);}
header > div nav > div > a{ cursor: pointer; width: 100%; transition: all .2s ease; height: 60px; font-size: 18px; text-decoration: none; font-weight: 300; color: white; display: flex; align-items: center; justify-content: center;}
header > div nav > div > a:not(.bg):hover{}
header > div nav > div > a.bg{ background-color: var(--main-color);}
header > div nav > div > a + .menu{ opacity: 0; pointer-events: none; transition: all .2s ease; background-color: rgba(0, 0, 0, .8); z-index: -1; position: fixed; top: 0; left: 0; width: 100%; height: 100vh;}
header > div nav > div > a:has(+ .menu:hover)::before{ height: 100%;}
header > div nav > div > a:hover + .menu,
header > div nav > div > a + .menu:hover{ opacity: 1; pointer-events: all;}
header > div nav > div > a + .menu .links{ gap: 40px; position: absolute; top: 160px; width: 100%; display: flex; align-items: center; justify-content: center;}
header > div nav > div > a + .menu .links > a{ cursor: pointer; font-size: 17px; transition: all .05s ease; font-weight: 500; text-decoration: none; color: white;}
header > div nav > div > a + .menu .links > a.active{ color: var(--main-color);}
header > div nav > div > a + .menu .links > a:hover{ color: var(--main-color);}
header > div nav > div > a + .menu .images{ --left-width: 470px; --gap: 10px; height: calc(100vh - 300px);; position: absolute; bottom: 10px; width: calc(100% - 20px); left: 10px;}
header > div nav > div > a + .menu .images > div{ display: none; gap: var(--gap); height: 100%; width: 100%;}
header > div nav > div > a + .menu .images > div.active{ display: flex;}
header > div nav > div > a + .menu .images > div > div{ width: var(--left-width); min-width: var(--left-width); display: flex; flex-direction: column; gap: var(--gap);}
header > div nav > div > a + .menu .images > div > div .img{ height: 100%;}
header > div nav > div > a + .menu .images > div > .img{ width: calc(100% - (var(--left-width) - (var(--gap) * 2)));}
header > div nav > div > a + .menu .images > div .img{ border-radius: 10px; position: relative; display: flex; align-items: center; overflow: hidden; justify-content: center; background-color: #ddd; position: relative;}
header > div nav > div > a + .menu .images > div .img::before{ content: '\f03e'; font-size: 60px; background-color: #dfe6eb; color: #a0abb5; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-weight: 900; font-family: 'FONT AWESOME 5 FREE';}
header > div nav > div > a + .menu .images > div img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover;}

header > div nav > div:last-child{ min-width: 100px; width: 100px;}
header > div nav > div:last-child > a{ height: fit-content; font-weight: 500; font-size: 12px; padding: 1px 0 2px;}
header > div nav > div:last-child > a:hover{ background-color: var(--main-color);}
header > div nav > div .weather{ position: absolute; right: 20px; top: 80%; display: flex; align-items: center; justify-content: center; gap: 3px;}
header > div nav > div .weather img{ height: 35px;}
header > div nav > div .weather span{ font-size: 25px; font-weight: 600; display: inline-block; position: relative; color: #e7e7e7;}
header > div nav > div .weather span::before{ font-size: 12px; content: '°C'; position: absolute; right: -15px; top: 5px;}


header .reservation-btn{ display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99;}
header .reservation-btn > span{ display: inline-block; position: absolute; left: 0; bottom: 100%; width: 100%; height: 30px;}
header .reservation-btn > span a{ transition: all .2s ease; background-color: rgba(var(--main-color-o), .4); color: white; font-size: 13px; font-weight: 300; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
header .reservation-btn > span a:hover{ background-color: var(--main-color);}
header .reservation-btn > a{ cursor: pointer; width: 100%; transition: all .2s ease; height: 60px; font-size: 18px; text-decoration: none; font-weight: 300; color: white; display: flex; align-items: center; justify-content: center;}
header .reservation-btn > a:not(.bg):hover{}
header .reservation-btn > a.bg{ background-color: var(--main-color);}






.reservation-container > div{ transform: translateY(-100%); transition: all .33s ease; background-color: white; position: fixed; inset: 0; z-index: 101;}
.reservation-container.active > div{ transform: translateY(0);}
.reservation-container > div > img{ position: absolute; left: 5%; top: 20px; width: 170px;}
.reservation-container > div > .close-btn{ position: absolute; top: 20px; right: 5%; cursor: pointer; width: 40px; height: 40px;}
.reservation-container > div > .close-btn::before,
.reservation-container > div > .close-btn::after{ content: ""; position: absolute; background: #000; display: block; width: 40px; height: 1px; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 0.1s all ease-in;}
.reservation-container > div > .close-btn:hover::before,
.reservation-container > div > .close-btn:hover::after{ height: 3px;}
.reservation-container > div > .close-btn::before{ transform: translate(-50%, -50%) rotate(-45deg);}
.reservation-container > div > .close-btn::after{ transform: translate(-50%, -50%) rotate(45deg);}
.reservation-container > div > .filter{ position: absolute; left: 50%; width: calc(100% - 20px); max-width: 1000px; top: 50%; transform: translate(-50%, calc(-50% + 50px));}
.reservation-container > div > .filter > div{ padding: 0; display: flex; gap: 25px; align-items: flex-end; width: 100%; margin: 0 auto;}
.reservation-container > div > .filter > div > div{ width: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.reservation-container > div > .filter > div > div label{ font-size: 15px; font-weight: 400; color: black; margin-bottom: 10px;}
.reservation-container > div > .filter > div > div > div{ position: relative; width: 100%;}
.reservation-container > div > .filter > div > div > div input{ height: 35px; width: 100%; background-color: transparent; color: black; padding: 5px 10px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 4px; outline: none;}
.reservation-container > div > .filter > div > div > div input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto;}
.reservation-container > div > .filter > div > div > div input[type="date"]::-webkit-datetime-edit-text,
.reservation-container > div > .filter > div > div > div input[type="date"]::-webkit-datetime-edit-month-field,
.reservation-container > div > .filter > div > div > div input[type="date"]::-webkit-datetime-edit-year-field { color: rgba(0, 0, 0, .9);}
.reservation-container > div > .filter > div > div > div > span{ cursor: pointer; --size: 25px; transition: var(--all-2s); border-radius: 50%; width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; position: absolute; bottom: 5px; color: black; font-size: 14px;}
.reservation-container > div > .filter > div > div > div > span:hover{ background-color: rgba(0, 0, 0, .1);}
.reservation-container > div > .filter > div > div > div > span.down{ right: 37px;}
.reservation-container > div > .filter > div > div > div > span.up{ right: 15px;}
.reservation-container > div > .filter > div > button{ width: fit-content; height: 35px; padding: 0 25px; border-radius: 3px; font-size: 15px; font-weight: 500; transition: var(--all-2s); background-color: var(--main-color); border: none; color: white; cursor: pointer;}
.reservation-container > div > .filter > div > button::after{ content: ''; display: inline-block; width: calc(100% - 30px); transform: translate(-50%, calc(-50% + 25px)); background: linear-gradient(90deg, white, transparent); position: absolute; height: 2px; border-radius: 5px; top: 50%; left: 50%;}
.reservation-container > div > .filter > div > button:hover{ }





footer{}
footer > div{ gap: 20px; padding: 30px 10px; border-top: 1px solid rgba(0, 0, 0, .3); display: flex; align-items: flex-start;}
footer > div .logo{ padding: 0 20px;}
footer > div .logo img{ width:  170px;}
footer > div nav{ display: flex; width: 100%; max-width: 1000px; margin: 0 auto;}
footer > div nav > div{ display: flex; flex-direction: column; width: 100%;}
footer > div nav > div b{ margin-bottom: 15px; font-size: 18px; font-weight: 400; color: var(--main-color-dark);}
footer > div nav > div a{ width: fit-content; margin-bottom: 5px; font-size: 15px; color: rgba(0, 0, 0, .9); transition: all .2s ease; cursor: pointer; white-space: nowrap; text-decoration: none;}
footer > div nav > div a:hover{ color: var(--main-color);}
footer > div nav > div a:nth-last-of-type(1){ margin-bottom: 0;}
footer > div .qr{ padding: 0 20px; display: flex; flex-direction: column; align-items: center;}
footer > div .qr img{ width: 100px;}
footer > div .qr span{ font-size: 13px; font-weight: 500; text-align: center;}


.main-container{ min-height: calc((var(--vh, 1vh) * 100) - 245px);}

.bido-btn{ margin: 0 auto; display: block; width: fit-content; cursor: pointer; border-radius: 3px; font-size: 13px; background-color: var(--main-color); color: white; text-decoration: none; padding: 10px 25px; font-weight: 500; z-index: 10; opacity: .9; transition: all .2s ease;}
.bido-btn:hover{ opacity: 1;}
.bido-btn i{ margin-right: 10px;}


.first-section{ position: relative;}
.first-section .splide{ height: var(--full-height); width: 100%;}
.first-section .filter{ z-index: 10; position: absolute; left: 50%; width: calc(100% - 20px); max-width: 900px; background-color: rgba(0, 0, 0, .3); border-radius: 0; bottom: 80px; transform: translateX(-50%);}
.first-section .filter > div{ padding: 0; display: grid; gap: 15px; grid-template-columns: repeat(4, 1fr); align-items: flex-end; width: 100%; margin: 0 auto;}
.first-section .filter > div > div{ padding: 15px; display: flex; flex-direction: column; justify-content: space-between;}
.first-section .filter > div > div label{ font-size: 13px; font-weight: 300; color: white; margin-bottom: 10px;}
.first-section .filter > div > div > div{ position: relative; width: 100%;}
.first-section .filter > div > div > div input{ height: 35px; width: 100%; background-color: transparent; color: white; padding: 5px 10px; border: none; border-bottom: 1px solid white; outline: none;}
.first-section .filter > div > div > div input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto;}
.first-section .filter > div > div > div input[type="date"]::-webkit-datetime-edit-text,
.first-section .filter > div > div > div input[type="date"]::-webkit-datetime-edit-month-field,
.first-section .filter > div > div > div input[type="date"]::-webkit-datetime-edit-year-field { color: rgba(255, 255, 255, .9);}
.first-section .filter > div > div > div > span{ cursor: pointer; --size: 25px; transition: var(--all-2s); border-radius: 50%; width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; position: absolute; bottom: 5px; color: white; font-size: 14px;}
.first-section .filter > div > div > div > span:hover{ background-color: rgba(255, 255, 255, .1);}
.first-section .filter > div > div > div > span.down{ right: 37px;}
.first-section .filter > div > div > div > span.up{ right: 15px;}
.first-section .filter > div > button{ height: 100%; transition: var(--all-2s); background-color: var(--main-color); border: none; color: white; font-size: 20px; font-weight: 300; border-radius: 0; cursor: pointer;}
.first-section .filter > div > button::after{ content: ''; display: inline-block; width: calc(100% - 30px); transform: translate(-50%, calc(-50% + 25px)); background: linear-gradient(90deg, white, transparent); position: absolute; height: 2px; border-radius: 5px; top: 50%; left: 50%;}
.first-section .filter > div > button:hover{ }
.first-section > a{ position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); border-radius: 3px; font-size: 13px; background-color: var(--main-color); color: white; text-decoration: none; padding: 10px 25px; font-weight: 500; z-index: 10; opacity: .9; transition: all .2s ease;}
.first-section > a:hover{ opacity: 1;}
.first-section > a i{ margin-right: 10px;}
.first-section .certificates{ position: absolute; left: 20px; bottom: 20px; display: flex; gap: 10px; align-items: flex-end;}
.first-section .certificates > div{ display: flex; flex-direction: column; gap: 20px;}
.first-section .certificates img{ height: 80px; opacity: .8; transition: all .2s ease;}
.first-section .certificates img:hover{ opacity: 1;}
.first-section .certificates .circle{ border-radius: 50%;}

.small-imgs{ position: absolute; left: 15px; bottom: 15px; z-index: 5; overflow-y: auto; max-height: 400px;}
.small-imgs::-webkit-scrollbar{ width: 3px; border-radius: 5px;}
.small-imgs::-webkit-scrollbar-thumb{ opacity: 0; transition: all .2s ease; border-radius: 5px; background-color: transparent;}
.small-imgs:hover::-webkit-scrollbar-thumb{ opacity: 1; background-color: #ccc;}
.small-imgs .thumbnails{ display: flex; flex-direction: column; gap: 10px; padding-right: 5px; justify-content: center;}
.small-imgs .thumbnails .thumbnail{ width: 70px; height: 45px; min-height: 45px; opacity: .6; border: 1px solid white; border-radius: 2px; overflow: hidden; overflow: hidden; list-style: none; cursor: pointer;}
.small-imgs .thumbnails .thumbnail.is-active{ opacity: 1;}
.small-imgs .thumbnails .thumbnail img{ width: 100%; height: 100%; object-fit: cover;}
.small-imgs + #main-slider .splide__arrow--prev{ left: 100px;}


.cool{ position: relative;}
.cool span{ position: relative; z-index: 1;}
.cool::before{ transition: var(--all-2s); content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 0%; background-color: var(--main-color-dark);}
.cool:hover::before{ height: 100%;}

#main-slider{ height: fit-content;}
#main-slider .splide__arrow{ border-radius: 0; opacity: 0; transition: all .2s ease; font-size: 24px; background-color: rgba(255, 255, 255, .5);}
#main-slider:hover .splide__arrow{ opacity: 1;}
#main-slider .splide__arrow:hover{ background-color: white;}
#main-slider .splide__arrow--prev { left: 2em;}
#main-slider .splide__arrow--next { right: 2em;}

.fix-social{ z-index: 100; display: flex; flex-direction: column; position: fixed; right: 0; top: 50%; transform: translateY(-50%);}
.fix-social > a{ --size: 40px; color: white; text-decoration: none; width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center;}
.fix-social > a.face{ font-size: 23px; background-color: #4267B2;}
.fix-social > a.insta{ font-size: 25px; background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);}

.season-txt{ margin: 100px auto 140px; text-align: center;}
.season-txt img{ width: 95%; height: auto;}

.txt-1{ padding: 40px 0; border: 1px solid rgba(0, 0, 0, .2); gap: 20px; display: grid; grid-template-columns: 1fr 1fr;}
.txt-1 > div{ transform: translateX(25px);}
.txt-1 .txt{}
.txt-1 .txt h1{ font-weight: 500; font-size: 28px; margin-bottom: 15px;}
.txt-1 .txt p{ padding-right: 20px; margin-bottom: 15px; font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, .8);}
.txt-1 .txt p:nth-last-child(1){  margin-bottom: 0;}
.txt-1 .img{}
.txt-1 .img img{ width: 100%; height: auto;}

.slider-area{}
.slider-area h2{ text-align: center; font-size: 28px; font-weight: 400; color: rgba(0, 0, 0, .8); margin-bottom: 30px;}
.slider-area a{ transition: all .2s ease; display: flex; width: 100%; height: 100%; overflow: hidden; cursor: pointer;}
.slider-area a img{ transition: all .25s ease; width: 100%; height: 100%; object-fit: cover;}
.slider-area a:hover{ box-shadow: 0 0 7px 0 rgba(0, 0, 0, .6);}
.slider-area a:hover img{ transform: scale(1.1);}
.slider-area a:hover span{ color: var(--main-color);}
.slider-area a::before{ content: ''; display: inline-block; position: absolute; inset: 0;}
.slider-area a span{ font-size: 16px; transition: all .2s ease; pointer-events: none; padding-bottom: 20px; background: linear-gradient(360deg, rgba(0, 0, 0, .8), transparent); height: 120px; font-weight: 600; color: white; position: absolute; width: 100%; bottom: 0; display: flex; align-items: flex-end; justify-content: center;}
.slider-area .splide__arrow{ font-size: 13px; --size: 30px; display: flex; align-items: center; justify-content: center; border-radius: 0; opacity: 1 !important; width: var(--size); height: var(--size); transition: all .2s ease; background-color: var(--main-color);}
.slider-area .splide__arrow svg{ fill: white;}
.slider-area .splide__arrow:hover{ background-color: var(--main-color-dark);}
.slider-area .splide__arrow--prev { left: 0;}
.slider-area .splide__arrow--next { right: 0;}


.half{ display: flex; height: 290px; width: 100%;}
.half img{ width: 100%; height: 100%; object-fit: cover;}

.temp1{ cursor: pointer; text-decoration: none; color: black; display: grid; align-items: center; width: var(--width-w-padd); max-width: var(--max-width); margin: 0 auto;}
.temp1:nth-of-type(odd){ grid-template-columns: 1fr 450px;}
.temp1:nth-of-type(even){ grid-template-columns: 450px 1fr;}
.temp1:nth-of-type(even) .img{ order: 2;}
.temp1:nth-of-type(even) .txt{ order: 1;}
.temp1 .img{ overflow: hidden; height: 400px;}
.temp1 .img img{ height: 100%; width: 100%; object-fit: cover; transition: 0.3s all ease-in-out;}
.temp1:hover .img img{ transform: scale(1.05);}
.temp1 .txt{ z-index: 2; padding: 35px; display: flex; justify-content: center; flex-direction: column; background-color: white; width: 450px; height: 250px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);}
.temp1:nth-of-type(odd) .txt{ transform: translateX(-70px);}
.temp1:nth-of-type(even) .txt{ transform: translateX(70px);}
.temp1:nth-of-type(even) .txt{ align-items: flex-end;}
.temp1 .txt strong{ font-size: 35px; letter-spacing: 2px; color: #4a4a4a; font-weight: 300; font-family: 'TFArrow Medium', sans-serif;}
.temp1 .txt span{ position: relative; transition: 0.3s all ease-in-out; font-size: 16px; font-weight: 400; padding: 5px 35px; color: var(--main-color); border: 1px solid var(--main-color); width: fit-content; margin-top: 20px;}
.temp1 .txt span::before{ content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--main-color); transition: 0.3s all ease-in-out; z-index: -1;}
.temp1:hover .txt span::before{ width: 100%;}
.temp1:hover .txt span{ color: #fff;}


.product-detail-area{ padding: 20px 0 50px;}
.product-detail-area .double{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.product-detail-area .double .left{ color: #545454;}
.product-detail-area .double .left h1{ font-weight: 400; padding: 15px 0; letter-spacing: 2px; font-size: 34px;}
.product-detail-area .double .left p{ margin-top: 0; margin-bottom: 1rem; font-size: 14px; font-weight: 400; line-height: 20px;}
.product-detail-area .double .left strong{ font-size: 14px; margin: 2rem 0 1rem; display: inline-block;}
.product-detail-area .double .left a{ cursor: pointer; color: var(--main-color-dark); text-decoration: none;}
.product-detail-area .double .left a:hover{ text-decoration: underline;}
.product-detail-area .double .left ._2{ margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0 40px;}
.product-detail-area .double .left ._2 strong{ margin-top: .7rem;}
.product-detail-area .double .left :is(video, iframe){ width: 100%; margin-top: 15px; margin-bottom: 15px;}
.product-detail-area .double .right{}
.product-detail-area .double .right .img{ width: 100%; height: 100vh;}
.product-detail-area .double .right .img img{ width: 100%; height: 100%; object-fit: cover;}

.product-detail-area .features{ display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr); margin-top: 4rem;}
.product-detail-area .features > div{ height: fit-content; position: relative; padding: 25px; border: 1px solid #e6e6f0;}
.product-detail-area .features > div h3{ font-size: 27px; margin-bottom: 50px; font-weight: 300;}
.product-detail-area .features > div > div{ overflow: hidden; height: 100px; min-height: 100px;}
.product-detail-area .features > div.active > div{ overflow: unset; height: auto;}
.product-detail-area .features > div.active > button i{ transform: rotate(180deg);}
.product-detail-area .features > div > button .close{ display: none;}
.product-detail-area .features > div.active > button .close{ display: inline;}
.product-detail-area .features > div.active > button .open{ display: none;}
.product-detail-area .features > div > div > div{ position: relative; margin-bottom: 1rem;}
.product-detail-area .features > div > div > div p{ z-index: 2; display: none; font-size: 13.5px; position: absolute; left: 0; top: 100%; width: 100%; border-radius: 2px; line-height: 1.5; padding: 10px; background-color: white; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .2);}
.product-detail-area .features > div > div > div:hover p{ display: block;}
.product-detail-area .features > div > div > div p + span{ cursor: pointer; text-decoration: underline; font-weight: 700;}
.product-detail-area .features > div > div > div p + span:hover{ }
.product-detail-area .features > div > div > div span{ font-size: 14px;}
.product-detail-area .features > div > button{ cursor: pointer; background-color: white; font-size: 14px; padding: 0 10px; font-weight: 400; border: none; outline: none; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);}
.product-detail-area .features > div > button i{ color: var(--main-color); margin-right: 2px;}


.default-container h1,
h1.h{ text-align: center; color: #000; font-size: 28px; font-weight: 400; margin-bottom: 30px;}
.dp{ padding: 60px 0;}

.main-iframe{ width: 100%; height: 500px; margin: 50px 0 100px;}

.head-txt{ text-align: center; font-size: 28px; font-weight: 400; color: rgba(0, 0, 0, .8); margin-bottom: 30px;}

.sertifika{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 50px;}
.sertifika > div{ height: 140px;}
.sertifika > div img{ height: 100%;}

.gallery-area > div{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px 30px;}
.gallery-area > div > a{ border-radius: 2px; transition: all .3s ease; overflow: hidden; display: flex; flex-direction: column; text-decoration: none;}
.gallery-area > div > a:hover{ box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);}
.gallery-area > div > a:hover .img img{ transform: scale(1.05);}
.gallery-area > div > a .img{ display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1.5; overflow: hidden;}
.gallery-area > div > a .img img{ transition: all .3s ease; height: 100%; width: 100%; object-fit: cover;}
.gallery-area > div > a .txt{ display: flex; padding: 7px 0; align-items: center; justify-content: center; background-color: #f0f0f0;}
.gallery-area > div > a .txt span{ color: rgba(0, 0, 0, .8); font-size: 15px; font-weight: 400;}

.explanation-area{ font-size: 14px; color: #545454; line-height: 1.6;}
.explanation-area p{}
.explanation-area h2{ margin: 3rem 0 1rem; font-weight: 600;}
.explanation-area strong{ font-size: 15px; margin: 1rem 0 0; display: inline-block;}
.explanation-area p{}
.explanation-area ul{}
.explanation-area ul li{}

.region-area{ margin-top: 5rem;}
.region-area h2{ text-align: center; font-size: 28px; font-weight: 400; color: #000; margin-bottom: 2rem;}
.region-area > div{ display: flex; flex-direction: column; gap: 4rem;}
.region-area > div > div{ display: flex; gap: 20px;}
.region-area > div > div .img{ width: 200px; min-width: 200px;}
.region-area > div > div .img img{ width: 100%;}
.region-area > div > div .txt{}
.region-area > div > div .txt h3{ margin: 0; font-size: 15px; font-weight: 600;}
.region-area > div > div .txt p{}
.region-area > div > div .txt p ul{}
.region-area > div > div .txt p ul li{}


.contact-area{}
.contact-area .iframe-area{ position: relative; width: 100%;}
.contact-area .iframe-area iframe{ width: 100%; height: 500px;}
.contact-area .iframe-area .info-area{ max-width: 500px; box-shadow: 0 0 20px 2px rgba(0, 0, 0, .2); border-radius: 4px; position: absolute; right: 100px; top: 50%; transform: translateY(-50%); background-color: white; padding: 30px;}
.contact-area .iframe-area .info-area h2{ font-size: 23px; font-weight: 500; color: #4a4a4a; margin-bottom: 1rem;}
.contact-area .iframe-area .info-area .info{ font-size: 14px; text-decoration: none; color: #4a4a4a; display: flex; align-items: flex-start;}
.contact-area .iframe-area .info-area .info:not(:nth-of-type(1)){ margin-top: 13px;}
.contact-area .iframe-area .info-area .info span{ padding-top: 3px; margin-right: 10px; display: flex; align-items: center; justify-content: center; width: 10px;}
.contact-area .iframe-area .info-area .info strong{ font-weight: 500;}
.contact-area .iframe-area .info-area .inst span{ font-size: 15px; padding-top: 2px;}
.contact-area .iframe-area .info-area .contact-us{ cursor: pointer; height: 35px; padding: 0 25px; transition: all .2s ease; color: white; font-weight: 500; background-color: var(--main-color); margin-top: 20px; border: 1px solid var(--main-color); font-size: 14px; margin-left: auto; width: fit-content; text-decoration: none; display: flex; align-items: center; justify-content: center;}
.contact-area .iframe-area .info-area .contact-us:hover{ color: var(--main-color); background-color: white;}
.contact-area .contact-form{ color: #4a4a4a;}
.contact-area .contact-form h1{ margin-top: 3rem; font-size: 38px; color: #4a4a4a;}
.contact-area .contact-form h1 + p{ text-align: center; margin: 0 auto; max-width: 900px; font-size: 15px; line-height: 1.5;}
.contact-area .contact-form form{ --gap: 20px; display: flex; flex-direction: column; gap: var(--gap); margin-top: 2rem;}
.contact-area .contact-form form ._2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);}
.contact-area .contact-form form input{ height: 40px;}
.contact-area .contact-form form input,
.contact-area .contact-form form textarea{ width: 100%; outline: none; padding: 10px; transition: all .1s ease; font-family: inherit; border: 1px solid #c9c9c9;}
.contact-area .contact-form form input:focus,
.contact-area .contact-form form textarea:focus{ border-color: #000;}
.contact-area .contact-form form textarea{ height: 200px; resize: none;}
.contact-area .contact-form form .send{ width: 100%; max-width: 300px; cursor: pointer; height: 40px; padding: 0 25px; transition: all .2s ease; color: white; font-weight: 500; background-color: var(--main-color); margin-top: 20px; border: 1px solid var(--main-color); font-size: 14px; margin: 10px auto 0; text-decoration: none; display: flex; align-items: center; justify-content: center;}
.contact-area .contact-form form .send:hover{ color: var(--main-color); background-color: white;}

.burger-menu { position: absolute; top: 29px; right: 25px; width: 20px; height: 17px; flex-direction: column; justify-content: space-between; cursor: pointer; display: none; -webkit-transition: transform 330ms ease-out; -moz-transition: transform 330ms ease-out; -o-transition: transform 330ms ease-out; transition: transform 330ms ease-out;}
.burger-menu.active { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.line-menu { background-color: #111111; border-radius: 2px; width: 100%; height: 3px;}
.line-menu.line-half { width: 50%;}
.line-menu.first-line { transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57); transform-origin: right;}
.burger-menu.active .line-menu.first-line { -webkit-transform: rotate(-90deg) translateX(3px); -moz-transform: rotate(-90deg) translateX(3px); -o-transform: rotate(-90deg) translateX(3px); transform: rotate(-90deg) translateX(3px);}
.line-menu.last-line { align-self: flex-end; transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57); transform-origin: left;}
.burger-menu.active .line-menu.last-line { -webkit-transform: rotate(-90deg) translateX(-3px); -moz-transform: rotate(-90deg) translateX(-3px); -o-transform: rotate(-90deg) translateX(-3px); transform: rotate(-90deg) translateX(-3px);}



@media screen and (max-width: 1370px) {
    .txt-1{ padding: 40px 20px;}
    .txt-1 > div{ transform: translateX(0);}
}

@media screen and (max-width: 1200px) {
    footer > div{ display: grid; padding: 30px;}
    footer > div > div:nth-child(1){ padding: 0;}
    footer > div > nav{ grid-row: 2; grid-column: 1 / span 2; width: 100%; max-width: unset;}
    footer > div > div:nth-child(3){ margin-left: auto; grid-row: 1; grid-column: 2; padding: 0;}

}

@media screen and (max-width: 998px) {
    body{ padding-bottom: 90px;}
    .hide-mobile{ display: none;}
    .burger-menu{ display: flex;}

    header{ position: relative; background-color: white; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);}
    header.sticky{ backdrop-filter: unset; transform: unset; background-color: white; position: relative; opacity: 1;}
    header.sticky.show{ transform: unset;}
    header::before{ display: none;}
    header > div .logo,
    header.sticky > div .logo{ width: fit-content; padding: 10px 0 13px 0px; height: 80px;}
    header.sticky > div .logo img{ height: 100%;}
    
    footer > div{ display: flex; flex-direction: column;}
    footer > div > nav{ display: flex; flex-direction: column; gap: 20px;}
    footer > div > div:nth-child(1){ margin: 0 auto;}
    footer > div > div:nth-child(3){ margin-left: 0;}
    
    header > div{ height: fit-content; display: flex; flex-direction: column;}
    header > div .logo img{ height: 100%; filter: unset;}
    header > div nav{ display: none; flex-direction: column; height: fit-content;}
    header > div nav > div{ height: fit-content;}
    header > div nav > div.more > a::after{ transition: all .2s ease; content: '\f107'; right: 27px; font-size: 20px; color: var(--main-color); display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
    header > div nav > div.more.active > a::after{ transform: translateY(-50%) rotate(180deg);}
    header > div nav > div:last-child{ width: 100%; min-width: unset;}
    header > div nav > div > a{ min-height: 60px; color: black; justify-content: flex-start; padding-left: 20px;}
    header > div nav > div > a:hover{ background-color: #f5f5f5 !important; color: var(--main-color);}
    header > div nav > div:last-child > a{ height: 60px; font-size: 18px; font-weight: 300; padding: 0 0 0 20px;}
    header > div nav > div > a.cool::before{ display: none;}
    header > div nav > div .weather{ display: none;}
    header > div nav > div.more{ display: flex; flex-direction: column;}
    header > div nav > div > a + .menu{ z-index: 1; position: static; background-color: #fff; height: fit-content; width: 100%; display: block; opacity: 1; pointer-events: all;}
    header > div nav > div > a + .menu .images{ display: none;}
    header > div nav > div > a + .menu .links{ position: static; display: none;}
    header > div nav > div > a + .menu .links > a{ font-weight: 500; font-size: 14px; transition: all .2s ease; cursor: pointer !important; padding: 10px 0; color: #444 !important; padding-left: 50px; display: flex; align-items: center; width: 100%;}
    header > div nav > div > a + .menu .links > a:hover{ background-color: #f5f5f5; color: var(--main-color) !important;}
    header .reservation-btn{ display: block;}

    .first-section .filter{ display: none;}

    .slider-area a span{ font-size: 12px; padding-bottom: 15px;}

    .contact-area .iframe-area{ margin-bottom: 250px;}
    .contact-area .iframe-area .info-area{ width: calc(100% - 50px); top: 100%; right: unset; left: 50%; transform: translateY(-50%) translateX(-50%);}
    .contact-area .contact-form form ._2{ grid-template-columns: 1fr;}

    .gallery-area > div{ grid-template-columns: repeat(3, 1fr);}

    #main-slider .splide__slide{ max-height: calc(var(--full-height) - (80px + 60px));}

    .temp1{ grid-template-columns: 1fr !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);}
    .temp1:not(:last-child){ margin-bottom: 20px;}
    .temp1 .txt{ align-items: center !important; padding: 15px; background-color: #f5f5f5; transform: unset !important; width: 100%; box-shadow: none; height: fit-content;}
    .temp1 .txt strong{ font-size: 16px;}
    .temp1 .txt span{ display: none;}
    .temp1 .img{ height: 50vw;}
    .temp1 .img img{ width: 100%; height: 100%; object-fit: cover;}
    .temp1:nth-of-type(even) .txt{ grid-row: 2;}

    .product-detail-area .double{ grid-template-columns: 1fr;}
    .product-detail-area .double .right{ grid-row: 1;}
    .product-detail-area .double .right .img{ height: 70vw;}
    .product-detail-area .features{ grid-template-columns: 1fr;}
    .product-detail-area .features > div > button{ white-space: nowrap;}
}

@media screen and (max-width: 668px) {
    .reservation-container > div > .filter > div{ flex-direction: column;}
    .reservation-container > div > .filter > div > button{ padding: 0 35px; margin: 0 auto;}
    
    .txt-1{ grid-template-columns: 1fr;}

    .gallery-area > div{ grid-template-columns: repeat(2, 1fr); gap: 15px;}
    .gallery-area > div > a .txt span{ font-size: 12px;}

    .region-area > div > div{ flex-direction: column;}
    .region-area > div > div .img{ width: 100%;}
}

@media screen and (max-width: 500px) {
    .small-imgs{ max-height: 300px;}
}



.bd-wrapper-1{ display: flex; flex-direction: column; gap: 100px;}

.policies-wrapper{ display: flex; flex-direction: column; gap: 20px; padding: 30px; background-color: rgba(var(--main-color-o), .05);}
.policies-wrapper > a{ cursor: pointer; color: var(--main-color); font-size: 18px; font-weight: 500; gap: 15px; display: flex; align-items: center; flex-direction: row-reverse; justify-content: flex-end; text-decoration: none;}
.policies-wrapper > a:hover{ text-decoration: underline;}
.policies-wrapper > a span{}
.policies-wrapper > a svg{ height: 25px; width: auto; fill: var(--main-color);}
/* Müşteri Memnuniyeti Anketi */
.survey-page h1 {
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #4a4a4a;
}

.survey-page > .default-container > p {
    text-align: center;
    font-size: 14px;
    color: #555;
    margin-bottom: 25px;
}

/* Ortadaki kutu */
.survey-wrapper {
    max-width: 900px;
    margin: 0 auto 40px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    padding: 30px 25px 35px;
    box-shadow: 0 0 12px rgba(0,0,0,0.05);
}

/* Başlıklar */
.survey-page h2 {
    font-size: 18px;
    font-weight: 500;
    margin: 25px 0 10px;
    color: #4a4a4a;
}

/* Soru blokları */
.survey-question {
    margin-bottom: 18px;
}

.survey-question p {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* Seçenekler */
.options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.options label {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #f7f7f7;
    border-radius: 4px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: var(--all-2s);
    border: 1px solid transparent;
}

.options label:hover {
    background: #f0f0f0;
    border-color: rgba(0,0,0,0.08);
}

.options input[type="radio"] {
    margin-right: 6px;
}

/* Açık uçlu soru */
.survey-page textarea[name="oneriler"] {
    width: 100%;
    max-width: 100%;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 120px;
    outline: none;
    transition: var(--all-2s);
}

.survey-page textarea[name="oneriler"]:focus {
    border-color: var(--main-color);
}

/* Gönder butonu */
.survey-page .btn-submit {
    width: 100%;
    max-width: 280px;
    height: 42px;
    border-radius: 3px;
    border: 1px solid var(--main-color);
    background-color: var(--main-color);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    display: block;
    margin: 10px auto 0;
    transition: var(--all-2s);
}

.survey-page .btn-submit:hover {
    background-color: #fff;
    color: var(--main-color);
}

/* Bilgilendirme mesajı */
#surveyFormMessage {
    text-align: center;
    font-size: 14px;
}

/* Mobil düzen */
@media screen and (max-width: 600px) {
    .survey-wrapper {
        padding: 20px 15px 25px;
    }

    .options {
        flex-direction: column;
        align-items: flex-start;
    }

    .options label {
        width: 100%;
    }
}