@charset "UTF-8";
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*, ::before, ::after { box-sizing: border-box;} html { line-height: 1.15; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4;} body { margin: 0;} hr { height: 0; color: inherit; } abbr[title] { text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } ::-moz-focus-inner { border-style: none; padding: 0; } :-moz-focusring { outline: 1px dotted ButtonText; } :-moz-ui-invalid { box-shadow: none; } legend { padding: 0; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; }
:root {
  --koyuYesil: #506743;
  --acikYesil: #dfc;
}
html, body { font-size: 16px;  -webkit-transition: all 0.6s; 	-moz-transition:all 0.6s;	transition:all 0.6s;   scroll-behavior: smooth;}
* {  font-family: 'PT Sans', sans-serif; line-height: 1.25em; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline:none;  background-repeat: no-repeat; margin: 0;  padding: 0;}

a {text-decoration: none; color: #666; }
.alignc {text-align: center;} .alignl {text-align: left;} .alignr {text-align: right;}
.block {display: block;} .inline-block {display: inline-block;}
.floatR{float:right;} .floatL{float:left;}
.bold{font-weight:bold;} .italic{font-style: italic;}

[class*="col-"] { width: 100%; display: inline-block; margin: 0; float: left;}
[class*="col-"][class*="-0"]{padding: 0;}
.col-0 {width: 0;} .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;}

.max800 {max-width: 800px!important; margin-left: auto; margin-right:auto; box-sizing: border-box;}
.margCenter {margin-left: auto!important; margin-right: auto!important;}
.gridMob1Tab2col {display:block;}
.upTabletOnly {display: none;}
.upTabletOnlyInline {display: none;}
.mobileOnly {display: block;}
.padd2emMob1em {padding:1rem;}
.marg2emMob1em {margin:1rem;}

h2, h3 {color: #000; letter-spacing: 1px; font-size: 1.3em; transform: scaleY(1.3); font-weight: 200; text-align: left;  width:100%; text-align: center; padding:1em;}
p { color: #000;  line-height: 1.8em; font-weight: 400;  text-align: justify; text-justify: auto; font-size: 1em; padding-bottom: .5em;}
.paddingless{padding:0!important;}
.shadow { background-color: rgba(0,0,0,.2); width: 90vw; height: 90vh; margin: 5vh 5vw; display: flex;}
.willContinue {overflow:hidden; overflow-wrap: normal; height:9em;}

input[type=number] {  -moz-appearance: textfield;}
ul {list-style: none;}

.btn {	border: none;	position:relative; display:inline-block;	font-size:inherit; color:inherit;	background:none;	cursor:pointer; padding:1em 55px; letter-spacing: 1px;	font-weight: 700;	outline:none; -webkit-transition: all 0.3s; 	-moz-transition:all 0.3s;	transition:all 0.3s;}
.btnG {	margin:.5em!important; text-transform:none!important; font-weight:normal; padding:.5rem 3rem .5rem .5rem!important; margin:.1em!important; background-color: #444!important; color: #fff;}

.btn-sep {	padding:.5rem 4rem .5rem .5rem;}
.btn-sep:after {	background: rgba(0,0,0,0.15);}
.btn {background: #666;	color: #fff; box-shadow: 2px 2px 4px rgba(0,0,0,.2);}
.btn.exit {filter: grayscale(90%); opacity: 0.8!important;}
.btn:hover {background: #777; color: #fff;}
.btn:active {	background: #777;	top: 2px;}
.btnG:after {position: absolute;	height: 100%;	right: 0;	top: 0;	line-height: 2; background: #333!important;
	font-size: 140%;	width: 2rem; display:flex; justify-content:center; align-items:center;}
.icon-info:after {content: " 〉";  white-space: pre; font-size:1em;}

.devam {color: #999; font-size:.9em; display:block; font-style: italic;}
.devam:hover {color: #CD6451;}
.devam:after { content: ' 〉'; padding-right: .1rem; padding-left: 0rem;}


.checkmark {   display: inline-block; transform: rotate(45deg); height: 1em; width: .5em; overflow: hidden; margin-right:.3em;}
.checkmarkYesil { border-bottom: .3em solid #96a473;  border-right: .3em solid #96a473;}
.checkmarkBeyaz { border-bottom: .3em solid #fff;  border-right: .3em solid #fff;}
.checkmarkGri { border-bottom: .3rem solid #666;  border-right: .3rem solid #666;}
.cross {display: inline-block;}
.crossKirmizi:after { content: '❌'; color: transparent;  text-shadow: 0 0 0 #f00; }
.crossBeyaz:after { content: '❌'; color: transparent;  text-shadow: 0 0 0 #fff;}
.crossGri:after { content: '❌'; color: transparent;  text-shadow: 0 0 0 #666;}




.ileri { padding: 1em 2em 1em 1em; text-align: left; }
.geri { padding: 1em 1em 1em 2em; text-align: left; opacity: 0.7;
  -webkit-filter: grayscale(100%); filter: grayscale(100%);}
.geri::before { content: '«'; position:absolute; left:1em;}
.ileri::after { content: '»'; position:absolute; right:1em;}

/* menu */
  #menuBox, #menuBox * {-webkit-transition: all 0.6s; -moz-transition:all 0.6s; transition:all 0.6s;}
  #menuBox {position: fixed; z-index: 200000; width: 100%; top:3rem; background: rgba(255, 255,255,0);
    box-shadow: 0 2px 4px 4px rgba(24,99,99,0);}
  #menuAlignerBox {  padding-left: 2rem;  height: 4em; position: relative;}

  #menuBox h1#logo { font-size: 1rem; display: block; position:absolute; top:.5em; height: 3em; width: 9em; background-image: url("../dosyalar/dareLogo.svg"); background-size: contain; text-indent: -1000px; background-color: rgba(255,255,255,0); filter: brightness(10);}
  #menuBox.scrolled {top:0rem;  background: rgba(255, 255,255,1); box-shadow: 0 2px 4px 4px rgba(24,99,99,.6);}
  #menuBox.scrolled #menuAlignerBox {height: 3em;}
  #menuBox.scrolled #logo {height: 2em; width: 6em;  background-color: rgba(255,255,255,1); filter: brightness(1);}
  #menuBox.scrolled #navUl {top:3rem; background: rgba(0,0,0,0.8);}

  #navUl {display: block; width: 100%; position: absolute;  right: -100vw; top:4em; background: rgba(0,0,0,.9); box-sizing: border-box; padding: 0 1em; font-weight: 100; }
  #navUl.cross {right:0rem;}
  #navUl li {display: block; width: 100%;  box-sizing: border-box; height: 4rem;}
  #navUl li a {color: #fff; display: flex; height: 100%; width: 100%;  align-items:center; padding: 0 1em; justify-content: center; letter-spacing: 1px;}
  #navUl li a:hover, #navUl li a.active  {color: var(--acikYesil); }
  #menuBox.scrolled #navUl li a:hover, #menuBox.scrolled #navUl li a.active  {color: #fff; background: var(--koyuYesil);}

  #mobilMenuIkon { width:4em; height:4em; display: flex; justify-content: center; align-items:center; position: absolute; cursor:pointer; right: 0;}
  #menuBox.scrolled #mobilMenuIkon { width:3em; height:3em; }
  #mobilMenuIkon i {background-color: #fff; height: 2px; width: 1.5em; display: block; position: absolute;}
  #menuBox.scrolled #mobilMenuIkon i {background-color: #8f9d73; }
  #mobilMenuIkon #iconi2 {transform: rotate(90deg);}
  #mobilMenuIkon.cross #iconi1 {transform: rotate(45deg);}
  #mobilMenuIkon.cross #iconi2 {transform: rotate(135deg);}
/* x menu */

#header {display: block; width: 100vw; height: 90vh; background-image: url("../dosyalar/header1.jpg"); position: relative; background-size: cover;}
#headerBaslik {height: 100%;  color: var(--acikYesil); font-size: 4rem; display: inline-flex; padding-left: 2rem; justify-content: center; font-weight: 300; text-shadow: 1px 1px 4px #000; font-style: italic; flex-direction: column;}

#navSplash {box-shadow: 0 0 0 1px rgba(255,255,255,.5); display: flex; background: var(--koyuYesil); padding: 2rem;  width: 94vw;  height: 12rem; justify-content: center; align-items: center; flex-direction: column; margin:0 auto;}
.yukariKayik {position: relative; top:-6rem;}

/* Galeri */
#galleryBG { max-height: 100vh; max-width: 100vw; z-index: 2000;}
#galleryBG ul { margin: 0; padding:0!important;}
#galleryBG ul { display: grid;  max-height: 100vh; overflow: auto; list-style: none; will-change: opacity; }
#galleryBG ul img { display: block; width: 100%; height: 100%; object-fit: contain; }
#galleryBG #thumbnails { --columns: 3; --gutter: 1.2em; --size: calc((100vw - (var(--columns) + 1) * var(--gutter)) / var(--columns)); grid: auto-flow var(--size) / repeat(var(--columns), 1fr); gap: var(--gutter); padding: var(--gutter); box-sizing: border-box; }
#galleryBG #scroller { grid: 100% / auto-flow 100%; scroll-snap-type: x mandatory; padding: 0; position: absolute; top:50%; transform: translateY(-50%); -ms-transform: translateY(-50%);}
#galleryBG #scroller li { scroll-snap-align: center; scroll-snap-stop: always; }
#galleryBG #scroller img { z-index:2000!important; }
.hidden { visibility: hidden; }
.fp-viewing-Galeri.fullSizeImage #navUl, .fp-viewing-Galeri.fullSizeImage #kalloniLogo, .fp-viewing-Galeri.fullSizeImage #social {opacity: 0;}
body.fp-viewing-Galeri.fullSizeImage {background:#000;}
/* x Galeri */

.listUl {  display: grid; grid-gap: 60px 15px;  grid-template-columns: 1fr;}
.referansBox {  display: grid; grid-gap: 1px;  grid-template-columns: 60px auto 60px auto; background-color: #eee; box-shadow: 1px 1px 1px #ccc; padding-bottom: 1em;}
.refImg{ width: 100%; height: 150px; background-size: cover; background-position: center center; margin-bottom: 1em;}
.refProp, .refVal{ padding: .2em .5em .2em 1em;}
.refProp{ font-weight: bold; }

#hatalar {display: grid; grid-gap: 1rem;  grid-template-columns: 1fr; margin-top: 2rem; margin-bottom: 2rem;}
#hatalar li { margin-bottom: 1rem; display: flex; align-items: center;}
#hatalar li p { margin-bottom: 0;  padding-bottom: 0;}
.hataPic { display: inline-block; height: 60px; width: auto;  margin-right: 1rem; }

/* footer */
#footer * {color: #999; font-size: .9rem;}
#footerContactGrid {display: grid; grid-template-columns: 2rem auto; gap: 0.5rem .5rem; justify-items: start; align-items: center;}
.footerBaslik {margin-bottom:6px; font-weight:bold; letter-spacing:1px; text-align:left;}

#formBox input, #formBox textarea {background:#222; color: #fff; border: 1px solid #333; height: 2rem; font-size: .9rem; padding: .5rem; margin-bottom: .5rem; width: calc(100% - .5rem);}
#formBox ::placeholder {color:#555; font-style: italic; font-size: .8rem;}
#formBox input:focus, #formBox textarea:focus {border: 1px solid #aaa;}
#formBox textarea { height: 7rem; }

/* x footer */


/* tablet: */
@media only screen and (min-width: 601px) {.col-t-0 {width: 0;} .col-t-1 {width: 8.33%;}
  .col-t-2 {width: 16.66%;} .col-t-3 {width: 25%;}  .col-t-4 {width: 33.33%;}
  .col-t-5 {width: 41.66%;} .col-t-6 {width: 50%;} .col-t-7 {width: 58.33%;}   .col-t-8 {width: 66.66%;}
  .col-t-9 {width: 75%;} .col-t-10 {width: 83.33%;} .col-t-11 {width: 91.66%;} .col-t-12 {width: 100%;}
	html, body { font-size: 16px; }

  .upTabletOnly {display: block;}
  .upTabletOnlyInline {display: inline;}
  .mobileOnly {display: none;}
  .urunPic {width:10em;}
	.urunBox {grid-template-columns: auto 12em;}
	.urunH3 {grid-column: span 1;}
	.urunFotoBox {flex-direction: column; background:none; order:2;}
	.urunAciklama {order:3; grid-column: span 1;}
	.contentWrapper {  padding:2em;}

	h2, h3 {letter-spacing: 2px;}
	.section, .slide{ padding:0 2em; box-sizing: border-box;
		-webkit-mask-image: -webkit-linear-gradient(top, transparent 0%, transparent 7em,#fff 9em,#fff 100%);
	}
  #mobilMenuIkon { display: none!important;}
  #navUl {display: inline-block; width: auto; right: 0; top:0; height: 4em; background: rgba(0,0,0,.5); }
  #menuBox.scrolled  #navUl { height: 3em; text-shadow: none;}
  #navUl li {display: inline-flex; width: auto; height: 100%; justify-content: center; align-items: center;}
  #navUl li a { font-size: 14px;}
  #menuBox.scrolled #navUl li a {color: var(--koyuYesil);}
  #menuBox.scrolled #navUl {top:0rem;}
  #menuBox.scrolled #navUl {background: none;}

  #navSplash { width: 30rem; }
  .listUl {  display: grid; grid-gap: 60px 15px;  grid-template-columns: repeat(3, 1fr);}
  #hatalar {display: grid; grid-gap: 1rem 3rem;  grid-template-columns: 1fr 1fr; }



}

/* laptop: çoğunlukla 1280 - 1400 arasında*/
@media only screen and (min-width: 880px) {  .col-l-0 {width: 0;} .col-l-1 {width: 8.33%;}
 .col-l-2 {width: 16.66%;} .col-l-3 {width: 25%;}  .col-l-4 {width: 33.33%;}
 .col-l-5 {width: 41.66%;} .col-l-6 {width: 50%;} .col-l-7 {width: 58.33%;}   .col-l-8 {width: 66.66%;}
 .col-l-9 {width: 75%;} .col-l-10 {width: 83.33%;} .col-l-11 {width: 91.66%;} .col-l-12 {width: 100%;}
 .referansBox {  grid-template-columns: 60px auto; }
}
/* For big screen: */
@media only screen and (min-width: 1400px) { .col-b-0 {width: 0;} .col-b-1 {width: 8.33%;}
.col-b-2 {width: 16.66%;} .col-b-3 {width: 25%;} .col-b-4 {width: 33.33%;} .col-b-5 {width: 41.66%;}
.col-b-6 {width: 50%;} .col-b-7 {width: 58.33%;} .col-b-8 {width: 66.66%;} .col-b-9 {width: 75%;}
.col-b-10 {width: 83.33%;} .col-b-11 {width: 91.66%;} .col-b-12 {width: 100%;}

}