html, body { font-size: 16px; transition: all 1s; transition-timing-function: ease-out;  width: 100%; padding: 0; margin:0;}
* {transition-timing-function: ease-out;}
body { color: #000; background:#51623e;}
* {  font-family: 'Roboto', 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;}
a:hover { color: #999; }
a.metinIciLink {text-decoration: underline; font-style: italic; }

.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;} .pointer{cursor:pointer;}
p { line-height: 1.75em; text-align: justify; letter-spacing: .05em; font-size: 1em; margin-bottom: 1.5rem;}

h1, h2, h3, h4 {color: #263b0e; font-weight: normal; letter-spacing: .1em;}
.yesil > h2 { color: #fff;}
h2, h3, h4 {display: inline-block; transform: scaleY(1.4);}
h2 img {height: 1em; transform: scaleX(1.4); margin-right: .5em;}
h1 {font-size: 1em; letter-spacing: .1em; margin: 0; text-indent: -200vw;}
h2 {font-size: 1.3em; line-height: 1.15em; display: block;}
h3 {font-size: 1.2em; padding: 0em; display: block; text-align: center; font-weight: normal;}
h4 {font-size: 1em;}
#footer h3 {text-align: left;}
.yesil h2 {margin: 2em 0 2em 0;}
article h3 {font-weight: normal; margin: 1em; font-size: 1em;}

h2.altBaslik {font-weight: normal; text-align: center; font-size:1.3rem; display: block; text-align: center; margin-bottom:2em;}
h2.altBaslik img, h2.sayfaBaslik img {height: 1.4em; transform: scaleX(1.4); margin-right: .5em; width: auto;}

h2.sayfaBaslik {font-weight: normal; text-align: left; font-size:1.3rem; display: block; padding:1em 2em 0; color: #fff; }
h2.sayfaBaslik img {filter: grayscale(1) saturate(1) contrast(200%);}

[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;}
.margCenter {margin-left: auto!important; margin-right: auto!important;}

p { line-height: 1.75em; text-align: justify; letter-spacing: .05em; font-size: 1em;}
article p { font-style: italic; color: #454545; font-size: .9em; margin: 1em 0;}
article { margin-bottom:6em;}

/* responsive menu */
#headerBar { position: absolute; top:0; left:0; width: 100%; z-index: 100004; background-color:rgba(81, 98, 62, 0); height: 3rem; transition: all 0.3s ease; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0);}
#headerBar.scrolled {box-shadow: 0px 1px 2px rgba(0, 0, 0, 1); position: fixed; top:0em;  background-color:rgba(81, 98, 62, 1);}
#headerPic {width: 100%; position: absolute; top:0; z-index: 100002; height: 11rem; background-image:url('../dosyalar/header.jpg'), url('../dosyalar/headerRepeat.jpg'); background-repeat: no-repeat, repeat; background-position: bottom right; background-size:auto 16rem;}
#headerPic.scrolled { box-shadow: 1px 1px 4px rgba(0, 0, 0, 1); position: fixed; top:2em; }

a#logo { height: 3rem; width:10rem;  position: fixed; top: 1rem; left: 1rem; z-index: 101000;
	transition: all 0.3s ease;}
a#logo h1{  text-indent: -9999px; background-image: url(../dosyalar/icon/kibanaLogo.svg); height: 3rem; width:10rem; background-size:contain; transition: all 0.3s ease;}
a#logo.scrolled, a#logo.scrolled h1 { top:0em;}

#mobilMenuIkon { width:1em; height:1em; display: flex; justify-content: center; align-items:center; position: absolute; top:9rem; right:2em; cursor:pointer; transition: all 0.3s ease; z-index: 100004;}
#mobilMenuIkon.scrolled {position:fixed; top:1em; }
#mobilMenuIkon i {background-color: #fff; height: 2px; width: 1.5em; display: block;
	transition: all 0.3s ease; position: absolute;}
#mobilMenuIkon #iconi2 {transform: rotate(90deg);}
#mobilMenuIkon.cross #iconi1 {transform: rotate(45deg);}
#mobilMenuIkon.cross #iconi2 {transform: rotate(135deg);}

#sepet {display: block; position: absolute; top:8.5rem; right: 4rem; height: 2rem; width: 2rem; background: url(../dosyalar/icon/sepet.svg); background-size: contain; background-position: center center; z-index: 1000003; border-radius: .3rem; }
#sepet.scrolled { position:fixed; top:.5em;}
#sptSayi {position:relative; top:1em; width: 100%; text-align: center; text-shadow: 1px 0px 1px #fff; font-size: .8em; font-weight: bold; color: #51623e;}
.sptImg {width:3em; height:auto;}

#navUlBox{position: absolute; top:11em; display: block; width: 100%; left: 0;  z-index: 100000; transition: all .5s; transition-timing-function: ease-in-out; pointer-events: none;}
#navUlBox.cross {background:rgba(81,98,62,.9); border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
#navUlBox.scrolled {position: fixed; top:3em;}
#navUl  { display: block; width: 100%; left:110%; transition: all .5s ease;   pointer-events: auto; z-index:10012; position: relative; }
#navUl li {display: block; }
#navUl a {display: flex; align-items: center; color: #000; padding: .5em; font-size:.8em;  letter-spacing:.2em; flex-direction:row; border-radius:.3em; -webkit-transition: font-size 0.3s; 	-moz-transition: font-size 0.3s;	transition: font-size 0.3s;  position: relative; bottom:0em;  transform: scaleY(1.4); letter-spacing: .1em; opacity:.8;  filter:  invert(1);}
#navUl a img {transform: scaleY(.7); }
#navUl.scrolled a {color: #000; text-shadow:0px 0px 0px #000; font-size:.7em;}


#navUl a:not(.aktif):hover  {bottom:.1em; opacity: 1;}
#navUl a.aktif  {font-weight: bold; opacity: 1;}
#navUl span  {display:inline-block; width: 3em; text-align: center;}
#navUl.cross {left: 1em; box-shadow: rgba(0, 0, 0, 0.15) -2px 2px 2.7px;}
#navUl img {height:2em; width: auto; margin-right: .25em;}
/* x responsive menu */

/* banner slide */

#banner { position: relative; width:100vw; height:25vw; padding: 0px; margin: 0px; list-style-type: none; }
#bannerShadow {position:absolute; z-index:5; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5);}

#banner .slide{ position: absolute; left: 0px; top: 0px; width:100vw; height:25vw;  min-height:11.5em; min-width:46em; opacity: 0; z-index: 1;
  transition: opacity 1s, background-size 4s;
  -moz-transition: opacity 1s, background-size 4s;
  -web-kit-transition: opacity 1s, background-size 4s;
	 box-sizing: border-box; background: #333;color: #fff;
background-size: 120% 120%	; background-position: 50% 50%; background-repeat: no-repeat; }
#banner .active{ opacity: 1; z-index: 2; background-size: 100% 100%;}

/* x banner slide */

.flexRowList { display:flex;  flex-wrap: wrap; justify-content: center; align-content: center; width: 100%;}
.flexRowList li, .flexRowList dd { display: inline-block; padding: .2rem;     margin-inline-start: 0;}
ul.flexRowList li img {width: 90%; height: auto;}

.kategoriBox { border: 1px solid #ccdccc; display: block; padding: .5em 1em; margin: 0;}
.kategoriBox:hover { background-color:#e2e2e2; }
.kategoriBox.active:hover { background-color:#7d896e; }
a.active {color: #fff; background: #51623e;}


ul#satisArgumanlari {display: grid;  grid-template-columns: repeat( 2, 1fr); justify-content: center; gap: 1em 1em;  max-width: 900px; margin-left:auto; margin-right:auto; max-width:30em;}
ul#satisArgumanlari li {border:1px solid #000; width: auto; margin: .2rem; padding: .3rem; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: .8rem;}

ul#satisArgumanlari li img {height: 2em; width: auto; margin: 0 .5em 0 0;}
ul#satisArgumanlari li span {text-align: center; width: 8em;}

dl {margin:0;}

.gri {background-color: #eee; color: #000;}
.yesil {background-color: #51623e; color: #fff;}
.hiyerarsi {display: block; width: 100%; text-align: left;}
.hiyerarsi a {font-weight: bold;}
.pageTitle {padding:1em;}
.beyazLink:hover {color: #fff;}

.uyariMesaji {text-align:center; background-color: #f7f7f7; padding:2em; border-radius:1em;}

.padd1em { padding:1em;}
.padd2em { padding:2em;}
.padd2emMob1em {padding:1em;}
.marg2emMob1em {margin:1em;}

#contentBox { box-sizing: border-box; padding: 0; margin-top:10em;}
#videoBox {display:block; position: relative; font-size: 0px;}
.contentWithAsideBox {display: flex; flex-direction: row; flex-wrap: wrap; padding:1em; width: 100%; justify-content: space-between;}
#Anasayfa #bannerBox {  min-height:15em;}
.contentWithAsideBox .aside {order: 2; width: 100%; display:flex; flex-direction: column; justify-content: space-between;}
.contentWithAsideBox .mainContent {order: 1; width: 100%; display:block; background:#fff; box-shadow: 2px 2px 2px rgba(0,0,0,0.2);  margin-bottom:2em; text-align:left;}
.contentWithAsideBox .aside > div { display: inline-block; margin-bottom:2em; background:#fff; padding:0; box-shadow: 2px 2px 2px rgba(0,0,0,0.2);  padding:1em;   width: 100%;}
.contentWithAsideBox .aside div img { height: auto; float: left; margin: 0 1em 1em 0;  position: relative;  top: -2em; display: inline-block; width:40%;}
.contentWithAsideBox .aside div h3 {text-align:left; padding:.5em 1em; margin-left:40%; font-weight:bold; font-size:1em;}
.contentWithAsideBox .aside div p {  padding:.5em 0; color:#666;}
.contentWithAsideBox .aside a {  margin:auto!important; display: inline-block;}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none;
  margin: 0;}
input:not([type='checkbox']):not([type='radio']), select, textarea {color:#000; font-size:1rem;
	 border-color:#fff #fff #ccc #fbfbfb; border-width:0 0 1px 0;  width: 100%; padding: 1.5em 1em .5em; margin: 0 .5em .5em 0; height:3em;  background:rgba(255,255,255, .05);}
input:not([type='checkbox']):not([type='radio']):focus, select:focus, textarea:focus {border-color:#fff #fff #333 #fbfbfb; }
button {font-size: .9em;}
textarea {height:6.5em; }
select {padding:0 1em;}
select option:disabled, select:disabled {color: #999!important;  font-style:italic!important; }
::placeholder {color: #ccc!important; font-style:italic!important; }
/* Firefox */
input[type=number] {  -moz-appearance: textfield;}

.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;}

.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;}
.devam {text-align:right; color: #999; font-style: italic; font-size:.9em; display:block;  }
.devam:hover {color: #ccc;}
.devam:after { content: ' »'; padding-right: .1em; padding-left: 0em;}
.devam:hover:after { content: ' »';  padding-right: 0; padding-left: .1em;}
.devam.beyazDevam {color: #ccc;}
.devam.beyazDevam:hover {color: #fff;}

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

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

/* mainPage */
#hakkinda_devam {background: #fff;}
#urunGruplari {  display: block;}
#urunGruplari ul {display: grid;  grid-template-columns: repeat( 2, 1fr); justify-content: center; gap: 1em 1em;  max-width: 900px; 
	margin-left:auto; margin-right:auto; overflow: hidden;}
#urunGruplari li { list-style: none; box-sizing: border-box;  display: block; position:relative; box-sizing: border-box;overflow: hidden; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0); }

#urunGruplari li img {  width: 100%; height: auto; }
#urunGruplari label { position:absolute; bottom: .3em; width: 100%; text-align: center; background: rgba(0,0,0,.3); letter-spacing:.15em; color: #fff; display: block; padding: .3em 0; font-size: 1rem;}

/* x mainPage */

/* hakkimizda */
.kiminIcin {display:grid; grid-template-columns: repeat( auto-fit, minmax(20em, 1fr)); width: 100%; }
/* x hakkimizda */
/* urunler */
.urunGrubuBox {display:inline-block; width:100%; }
.urunGrubuTitle {background:#f8f8f8; text-align: center; margin: 1em 0 .5em 0; padding: .5em;  box-shadow: 1px 1px 1px rgba(0,0,0,0.1); color: #666; font-weight: normal; font-size:1rem!important; width: 100%;}
.urunBox {display:inline-block; margin:.5em; width:45%;  max-width:13em; background:#f2f2f2; cursor:pointer; box-shadow: 1px 1px 1px rgba(0,0,0,0.3); position:relative;}
.urunBox:hover {box-shadow: 2px 2px 2px rgba(0,0,0,0.3);}
.urunBaslik, .urunFiyat {padding:1em;}
.urunBaslik {letter-spacing:1px; min-height:6em; display:flex; justify-content:center; align-items:center;}
.urunBox img {margin:0;  width:100%;}
.urunBox.fiyatsiz img { position:absolute; bottom:0;}
.urunPicBox {width:100%;  background-image:url(../dosyalar/urun/_fonBack.jpg); background-size: contain; background-repeat:repeat-x; margin-bottom:2em; text-align:center; padding:0;}
.urunDetayPic {margin:0; width:100%; max-width:800px; display:inline-block; padding:0;}
.urunAdi {font-weight: bold; letter-spacing:.15em; font-size:1.1rem; padding:1em 0 2em; text-align:center;}
.urunBaslikMetin { padding:0 0 1em; }
.urunSubmit {background:#000; color:#fff; border:none; box-shadow:2px 2px 2px rgba(0,0,0,.5); cursor:pointer; }
.urunSubmit:active {box-shadow:1px 1px 1px rgba(0,0,0,.5);}
#digerUrunler {display:none;  grid-template-columns: auto auto auto; margin:0 auto; padding:1em; background-color:#f7f7f7; text-align:center; max-width:20rem; }
.gridMob1Tab2col {display:block;}
.padd2mob1em {padding:1em;}
#sepetMesaji {margin:2em; display:block; text-align:center;}
/* x urunler */

.sertifika { padding: 1em; font-size: 1em; display: block; text-align: center; position: relative;}
.sertifikaCeviz { background: #5d432C; color:#fff;}
.sertifikaBadem { background: #bba682; color:#fff;}
.sertifikaKiraz { background: #c62b27; color:#fff;}
.sertifika p { margin: 0 0 4em 0; text-align: center;}
.sertifika img { height:3em; width:auto;  position: absolute; bottom: 1em;}
.sertifika img.sag { right: 1em;}
.sertifika img.sol { left: 1em;}
.sertifika img.ceviz { height: 2em;}
.sertifika img.badem {height: 2.5em;}
.sertifika img.kiraz { height: 2.5em; }

/* iletisim */
#iletisimSent {position:absolute; margin-top:7em; text-align:center; width:100%; -webkit-transition: all .5s ease-in-out;  -moz-transition: all .5s ease-in-out;  -o-transition: all .5s ease-in-out;  transition: all .5s ease-in-out; opacity:0;  color:#fff; padding:1em; border-radius:.4em; color:#fff;}
#iletisimSent.OK {background:#748251; opacity:1}
#iletisimSent.hata {background:#FF4500; opacity:1;}
/* x iletisim */

/* blog */

#filterBox button { padding:.5em 1em; border:0; cursor:pointer; position:relative; background:none; }
#filterBox button img {height: 2em; width:auto;}
#filterBox button:hover {background:#eee;}
#filterBox button.aktif, #filterBox button.aktif:hover {background:#ddd;}
#filterBox button .label {position:absolute; color:#999; font-style:italic; left:0; top:4em; white-space:pre; display: none;}
#filterBox button:hover .label {display: inline-block;}

.articleBox {display:flex; flex-direction:row; flex-wrap: wrap; margin:0; padding-top:3em; clear: both;}
.articleBox article { transition: all .6s; max-height:600px; max-width:45%; overflow: hidden; display: block; width:45%; margin-right: 5%; margin-bottom:2em;}
.articleBox article.hiddenArticle {max-height:0px; max-width:0px; margin-right: 0px; margin-bottom:0px;}
.articleBox article > a {padding:1em; display: block;  }
.articleBox article > a:hover { background:#f7f7f7; }
.articleBox article .devam:hover { color:#999; }

.articleImg {width: 33%; height: auto;  float: left; display: inline-block; margin: 0 1em 0 0;}
.articleBox img { width: 100%;}
.articleBox h4 {margin: 0 0 1em 0; color: #339;}
.articleBox .tuketici h4::before {background-image: url('../dosyalar/icon/ari.svg');
  background-size: contain; background-repeat: no-repeat;  display: inline-block;  height: 1em; width:2em;  content:"";}
.articleBox .uretici h4::before {background-image: url('../dosyalar/icon/arici.svg');
  background-size: contain; background-repeat: no-repeat;  display: inline-block;  height: 1.3em; width:2em;  content:"";}
.blogIntro {display:grid; grid-template-columns: 1fr; column-gap: 2em; row-gap: 1em;}
#blogIntroImg {height:20vw;}

/* x blog */

/* footer */
#footer { background: #000; color:#ccc; padding: 2em; display: grid; grid-template-columns: 1fr; font-size: .8em;  row-gap: 1em; letter-spacing:.1em; justify-items:start;}
.footerBox {overflow: hidden; line-height: 1.8em;}
.footerBox div { line-height: 1.8em;}
.footerBox section {display:inline-block; }
.footerBox section h4 { letter-spacing:.1em; padding-bottom:.5em; color: #fff; font-weight: normal; font-style: italic;}
#footer h3 {display:block; color:#fff; font-size:1em; font-weight:normal; position: relative;  padding: 1em 0 1.3em;}
#footer h3 .cizgi {display:inline-block; height:.1em; background: #fff; bottom: 1em; width: 3em; position: absolute;}
#footer ul ,#footer h4 {margin-left: 1em;}
#footer li {list-style: square; list-style-position: inside; line-height:1.8em;}
#footer a {color: #ccc; transition:all .3s;}
#footer a:hover {color: #fff; margin-left: 0.3em;}
#footerIcerik {display:grid; grid-template-columns: 1fr; column-gap: 1em; }
#footerIcerik h3 {  grid-column: span 1;}
#footerSocialBox { margin:1em 0 0; padding: 1em; display: inline; background: #444;  text-align:center; border-radius: .5em;}


.tekliBox {padding: 0; box-sizing: border-box; width: 100%; height: 4em; display: block; position: relative; margin-bottom: .5em;}
.tekli {height: 3em; margin: 0; padding: 0; font-size: 1em; display: inline-block; position: absolute; top: .1em;}
.tekliBox.textareali {height: 5.5em;}

button.tekli {width: 3em; height: 3em; position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center;}
button.tekli::after {content:url(../dosyalar/ikonlar/pictUcgenBeyazDolu.svg);}
input.tekli, textarea.tekli, select.tekli {display: block; height: 3em; width: calc(100% - 3em)!important; padding: 2em 1em 1em; background: none; position: absolute; top: .1em; left: .1em; border-bottom: 1px #ccc solid; }
textarea.tekli { height: 5em;}
select.tekli { padding: .5em 1em .5em;}

input[type="radio"], input[type="checkbox"]{display: inline-block!important; height:auto;}
input[type="checkbox"] {}
input[type="checkbox"].normal {opacity: 1;}

::placeholder {}
.tekli:placeholder-shown:not(:focus) ~ label.inside {
	opacity: 1;  font-size: 1em;  top: 1em;}

label.inside { position: absolute; left: .8em;  font-size: .8em; opacity: .7; top: .1em;
  transition: all .5s; color: #bbb; }

.smediaLink {display: inline-flex; height:2em; opacity:.8;  transition: all .3s; align-items:flex-end; flex-direction: row; box-sizing: border-box;}
.smediaLink:hover {opacity:1; margin-left: 0em!important;}
/* x footer */


/* Galeri */
#galleryBG { max-height: 100vh; max-width: 100vw; z-index: 2000000;}
#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; }

#galleryBG button .BGcapt {display:block; position: absolute; bottom: 0; width: 100%;  background:rgba(0,0,0,0.7); width: 100%; color:white; font-weight:bold; text-align:center; padding: 0.5em; transition: all .3s;   transform:scaleY(0);   transform-origin: bottom left; box-sizing: border-box; }
#galleryBG button:hover .BGcapt {transform:scaleY(1);}
/* x Galeri */

.okumaMetni {line-height:1.6!important; text-align:justify; margin-bottom:.5em;}
#social img {height:3em; width:auto; margin:1em; transition: all 1s; }
#social img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1;}

@media only screen and (max-width: 500px) {
	* { font-size: 16px;}
}
/* tablet: */
@media only screen and (min-width: 701px) {.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;}
	.padd2emMob1em {padding:2em;}
	.marg2emMob1em {margin:2em;}

	/* responsive menu */
	#mobilMenuIkon { display: none;}

	#headerPic {height: 8em;}

	#urunGruplari ul {grid-template-columns: repeat( 3, 1fr); }
	ul#satisArgumanlari li img {height: 2.5em; width: auto; margin: 0 .5em;}
	ul#satisArgumanlari li {font-size: .9rem;}

	#navUlBox {position: absolute; top:6em; left:auto; display: flex; justify-content: flex-end; background:none; z-index:100010; margin-top:0; padding-right:3em; box-sizing: border-box; }
	#navUlBox.scrolled { position: fixed; top:0.5em;}
	#navUl { left:auto; right:3em; display: inline-block; width:auto;  height:auto; z-index:10005;}
	#navUl li  {display:inline-block; width:auto; }
	#navUl span  {display:none;}
	#sepet {top:5.6rem; right:2rem;}
	#sepet.scrolled {width: 2em; height: 2em; font-size: .8em;}

	/* x responsive menu */

	h2, h3 {letter-spacing: 2px; font-size: 1.1em; font-weight: 700;}
	.ikiSutun {
	  -webkit-columns: 2 ; -moz-columns: 2 ; columns: 2 ;
		-webkit-column-gap: 2em;  -moz-column-gap: 2em;  column-gap: 2em;
	}
	section h4 {  margin: 1em 0 .5em 0;}

	.urunGrubuTitle, .urunGrubuBox { width: auto;}

	.urunGrubuTitle {margin: 1em .5em .5em .5em;}


	#galleryBG #thumbnails { --columns: 6; --gutter: 1.5em; }
	#social img { -webkit-filter: grayscale(100%); filter: grayscale(100%);  opacity: .5;}
	.mainUrunler {display:grid; height: 12em; overflow: hidden; grid-template-columns: repeat( auto-fit, minmax(6em, 1fr) );}

	#footer {  grid-template-columns: 1fr 1fr; column-gap: 2em; justify-items:center;}
	#footer ul ,#footer h4 {margin-left: 0em;}
	#footerIcerik {  grid-template-columns: 1fr 1fr;  grid-column: span 2;}
	#footerIcerik h3 {  grid-column: span 2;}
	#footerSocialBox { grid-column-end: span 3;}

	.urunBaslikMetin { padding:0 2em 1em; }
	.urunBox {width:100%;}

	.acikAcikSari { padding:3em 2em;}
	.acikSari { padding:3em 2em;}

	.contentWithAsideBox .aside {order: 2; width: 100%; display:flex; flex-direction: row; justify-content: space-between;}
	.contentWithAsideBox .aside button {margin:1em auto!important;}
	.padd2mob1em{padding:2em;}

	.gridMob1Tab2col {display:grid; grid-template-columns: auto auto;}
	.sptImg {width:auto; height:3em;}
	.TLmarj {padding-left:.2em; display:inline-block;}

	.formElementBox {width: 47%; margin-right:3%;}

}

/* 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%;}
 .urunPic {width:12em;}
 html, body {font-size: 15px;}

	.mainUrunler a .capt {transition: all .3s;   transform:scaleY(0);   transform-origin: bottom left;}
	.mainUrunler a:hover .capt {transform:scaleY(1);}
	#mainUrunBox { column-gap: 2em; row-gap: 2em; }
	ul#satisArgumanlari { grid-template-columns: repeat( 4, 1fr);}
	ul#satisArgumanlari li { margin: .5rem; padding: .5rem;}

	.mainUrunler { grid-template-columns: repeat( auto-fit, minmax(8em, 1fr) );}
	#navUl li span  {display: inline-block;}

	.contentWithAsideBox .aside {order: 3; width: 20em; display:block;}
	.contentWithAsideBox .mainContent {order: 2;  width: calc(100% - 22em); display:block;}
	.contentWithAsideBox .aside div img {  width: 100%; height: auto; top: 0; }
	.contentWithAsideBox .aside div h3 {text-align:center; padding:.5em; font-weight:bold;  margin-left:0%;  font-size:1em;}
	#navUl li img  {display: inline-block;}

	.blogIntro {display:grid; grid-template-columns: 1fr 2fr; column-gap: 2em; row-gap: 1em;}
	#blogIntroImg {height:auto;}

	#sepet {top:6rem;}
	#sepet.scrolled {width: 2em; height: 2em; font-size: 1em;}
}
/* 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%;}

html, body {font-size: 16px;}
nav a {letter-spacing: .3em; }
html, body {  line-height: 1.375em;}
h2 {font-size: 1.25em; line-height: 1.25em;}
h3 {font-size: 1.1em; line-height: 1.25em;}
h4 {font-size: 1em; line-height: 1.25em;}
ul#satisArgumanlari li { margin: .5rem; padding: 1rem; font-size: 1em;}
}

@media only screen and (min-width: 1700px) {
html, body {font-size: 19px;}
}