html, body { font-size: 13px;   width: 100%; padding: 0; margin:0;   scroll-behavior: smooth;}
* {transition-timing-function: ease-out;}
body {color:#000; }
* {  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; }
[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%;}

.transFast {transition: all .3s;}
.transMiddle {transition: all .5s;}
.transSlow {transition: all 1s;}

a {text-decoration: none; color: #000;}
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!important;} .inline-block {display: inline-block!important;}
.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;}
li {list-style: none;}

h1, h2, h3, h4 {color: #8B758B; font-weight: normal; letter-spacing: .1em;}
h2, h3, h4 {display: inline-block; transform: scaleY(1.4); margin-bottom:1rem;}
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.3rem; line-height: 1.15em; display: block; text-align:center;}
h3 {font-size: 1.2rem; padding: 0em; display: block; text-align: center; font-weight: normal;}
h4 {font-size: 1rem;}
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;}

input.spinsiz::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input.spinsiz[type=number] {  -moz-appearance: textfield;}

.max800 {max-width: 800px!important;}
.max900 {max-width: 900px!important;}
.max90perc {max-width: 90vw!important;}
.margCenter {margin-left: auto!important; margin-right: auto!important;}
.clear {clear:both;}

.upTabletOnly {display: none;}
.upTabletOnlyInline {display: none;}
.mobileOnly {display: block;}
.mobileOnlyInline {display: inline;}
.padd2emMob1em {padding:1em;}
.marg2emMob1em {margin:1em;}
.grid2mob1column, .grid3mob1column{display: grid; grid-template-columns: 1fr;}

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


#headerBox {height: 9rem; width: 100vw; background-image: url("../dosyalar/headerMobil.jpg"); background-size: cover; background-color: #ccc; background-position: center center; position: relative;; top: 0; left: 0;}
#contentBox {padding: 0; overflow-x: scroll; width:100vw;}

#logo {position: absolute;  height: 4em; width: 10em; top: 1em; left: 1em; display: inline-block;}
#logo h1 { background-image: url('../dosyalar/ikonlar/logoBeyaz.svg'); background-repeat:no-repeat; background-size: contain; width: 100%; height: 100%;  background-position: center center;}
nav#main ul {position: absolute; top:2.5rem; right:2.5rem;  z-index: 1000003; display:flex; align-items:flex-end;}
nav#main li {display:inline-block;}
nav#main li a, nav#main li button {display: flex; height:1.5rem; width:auto; background:none; border:none; align-items:flex-end; margin-left:1.5rem; }
nav#main li .icon {display: inline-flex; height:1.3rem; width:1.3rem; background-size: contain; background-position: center center; margin-bottom: .2rem;}
nav#main li .metin {display: none; height: 1.5rem; align-items:center; color: #fff; margin-left:.5rem; font-size:1.2em; align-items:flex-end;}
#iletisimLink .icon  {background-image: url(../dosyalar/ikonlar/telefon.svg); }
nav#main.loggedin #iletisimLink .icon {background-image: url(../dosyalar/ikonlar/telefon2.svg); }
#uyelikButton .icon {background: url(../dosyalar/ikonlar/uye.svg); }
nav#main.loggedin #uyelikButton .icon {background-image: url(../dosyalar/ikonlar/uye2.svg);}
nav#main li #sepet { height:3rem; }
nav#main li #sepet .icon { background-image: url(../dosyalar/ikonlar/sepet.svg); height:3rem; width:3rem; }
#sptSayi { display:inline-block; width: 100%;  text-align: center; font-weight: bold; color: #fff; font-size: 1em; white-space: nowrap; margin-top: 1.7rem;}
nav#main li button {margin-left: 1rem;}
nav#main li a#iletisimLink {margin-left: 2.5rem;}

nav#main li a:hover .metin, nav#main li button:hover .metin, nav#main li :not(#sepet):hover .icon {opacity:1;}

#hiyBox {background: #f2f2f2; display: block; width: 100%;}
#hiyBox ul#mainUrunler * {transition: all .5s!important;}
#hiyBox ul#mainUrunler {display: grid; grid-template-columns: repeat( 1, 1fr); justify-items:center; gap: 1em 1em; margin:auto; }
#hiyBox ul#mainUrunler li {width: 100%;}
#hiyBox ul#mainUrunler a {display: grid; grid-template-columns: 4em auto; justify-items:start;  padding: 1rem; width: 100%; color: #000; position: relative;}
#hiyBox ul#mainUrunler a .urunIkon {height: 3em; width: auto; }
#hiyBox ul#mainUrunler a:hover .urunIkon {height: 3em; width: auto; }
#hiyBox ul#mainUrunler .urunIkon * {}
#hiyBox ul#mainUrunler a .ikonDetay{font-style: italic;}


nav#altMenuBox{display: flex; justify-content: center; width:100%; background:#f2f2f2; box-shadow: 0px -4px  11px #aaa inset; max-height:0px; overflow:hidden; -webkit-transition: all 0.5s; 	-moz-transition: all 0.5s;	transition: all 0.5s; }
nav#altMenuBox.acik {max-height:500px!important;}
#loginAltmenu {max-width:20rem; background:#fcfcfc; padding:2rem 1em; margin: 2rem; border-radius: .5rem; border: 1px solid #ddd; box-shadow: 1px 1px 2px #ddd;}
#loginAltmenu form {text-align:center;}

#loginBaslik {display:grid; grid-template-columns: 1.5rem auto auto 1.5rem;}
#loginBaslik  * { border: solid #ddd;  border-width: 0 0 1px 0; text-align: center; padding: 1rem .5rem .5rem .5rem; border-radius:0;}



.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; background: #a087a0;	color: #fff; box-shadow: 2px 2px 4px rgba(0,0,0,.2);}
.btnK {	margin:.5em!important; text-transform: none !important; font-weight: normal; 	padding:.5rem; margin:.1em!important;}
.btnB {	margin:1em!important;  font-weight: normal; 	padding:1rem; margin:1em!important;}
.btn-sep {	padding:.5rem 3rem .5rem .5rem;}
.btn-sep:after {	background: rgba(0,0,0,0.15); 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-sepBack {	padding:.5rem .5rem .5rem 2.5rem!important;}
.btn-sepBack:before {	background: rgba(0,0,0,0.15); position: absolute;	height: 100%;	left: 0;	top: 0;	line-height: 2;
	font-size: 140%;	width: 2rem; display:flex; justify-content:center; align-items:center; }
.btn {background: #a087a0;	color: #fff; box-shadow: 2px 2px 4px rgba(0,0,0,.2);}
.btn.exit {filter: grayscale(90%); opacity: 0.8!important;}
.btn:hover {background: #5F344; color: #fff;}
.btn:active {	background: #5F344;	top: 2px;}
.icon-info:after {content: "  〉";  white-space: pre; font-size:1em;}
.icon-infoBack:before {content: "〈  ";  white-space: pre; font-size:1em;}
.sptImg {width:3em; height:auto;}

#footerBox {background:#004F71; color:#fff; width:100%; display:flex; justify-content:center; align-items:flex-start; font-style:italic; z-index: 1200;  min-height: 25rem; padding:2rem 1rem; flex-direction:column;}
#footerBox h2 {padding: 0 3em 1em 3em; color:#fff; opacity:.8; font-size: 1em;}
#footerHiyBox ul#mainUrunler a {color: #fff!important; display: flex; justify-content: flex-start; opacity: .6; flex-direction: row-reverse; }
#footerHiyBox ul#mainUrunler a:hover {opacity: 1;  }
#footerHiyBox ul#mainUrunler li {display: block; height: 2.4em; text-align: center; overflow: hidden;}
#footerHiyBox ul#mainUrunler a .urunIkon { width: auto; }
#footerHiyBox ul#mainUrunler .menuBaslik {display: inline-block; width: 10em; text-align: left; }
#footerHiyBox ul#mainUrunler .urunIkon {filter: invert(100%)  saturate(0%) brightness(100%);}

.footerText { padding: 0 0 .5em; display:inline-block;}
#footerBox a {color: #999;}
#footerBox a:hover {color: #fff;}
#footerBox {background: #000; padding: 1em;}
#footerBox img {height:1.2em; width:auto; margin-right:1rem; opacity:.7;}


.altbaslik {text-align:center; padding:1rem;}


.slidingPlaceholder * {transition: all .3s;}
.slidingPlaceholder .inputBox {position:relative; width:100%; height:3rem; margin-bottom:2rem;}
.slidingPlaceholder input:not([type='checkbox']):not([type='radio']), .slidingPlaceholder select, .slidingPlaceholder textarea { padding: 1em 1em 1em 1em ; position:absolute; top: 0; left:0rem; width:100%; height:3rem; border-width:0 0 1px 0!important; border-color: #ad97ad #ad97ad #ad97ad #ad97ad!important;}
.slidingPlaceholder label:not(.oldSchool) {position:absolute; top: 1rem; left:1rem; color:#8B758B; letter-spacing:1px; font-style:italic; user-select: none;}
.slidingPlaceholder.allup label, .slidingPlaceholder input:not(:placeholder-shown ) +label, .slidingPlaceholder input.yukariLabel +label,  .slidingPlaceholder select +label {top: -1.4rem!important;  color:#ad97ad; font-weight:700;}
.slidingPlaceholder.ikiKolon{display:grid; grid-template-columns:auto; grid-gap: 2rem;}

.slidingPlaceholder .metinIciLink{color:#8B758B;}
.slidingPlaceholder .formText {  width:100%; height:3rem;  text-align:left;  align-items:center; padding-left:1rem; position:relative;}

.slidingPlaceholder .formText img {height:1.3rem; margin-left: 1rem; display:inline-block; position:relative; top:.3rem;}
.slidingPlaceholder .formText b {display:block; color:#8B758B;}


.beyaz {background:#fff;}
.golgeli {  -webkit-box-shadow: .5rem .5rem  .5rem rgba(128, 128, 128, .4);
  -moz-box-shadow: .5rem .5rem  .5rem rgba(128, 128, 128, .4);  box-shadow:  .5rem .5rem  .5rem rgba(128, 128, 128, .4);
}
.hataMesaji { background: #CD6451; color: #fff; padding: 1.5rem; display: none; text-align: center; min-width: 100%; line-height: 1.7em;}
#loggedinAltmenu {width:100%;}
#loggedinAltmenu ul { 	display:flex; width:100%; justify-content:center;}
#loggedinAltmenu li {display:inline-block;  	}
#loggedinAltmenu li a {display:inline-flex; padding:1rem 1rem; letter-spacing:1px; align-items: center; color:#695369; margin:1rem 0;}
#loggedinAltmenu li a:hover { color:#fff; background: #695369;}
#loggedinAltmenu img {height: 1rem; width:auto; margin-right:.5rem;}
#loggedinAltmenu li a:hover img { filter: invert(100%)  brightness(200%) contrast(200%); }

ul#urunBoxes {display: grid;     grid-template-columns: 1fr; justify-content: center; gap: 1em 1em; }
li.urunBox a {background: #fff; padding: 1rem; display:grid;  grid-template-columns: 6rem auto; align-items:center; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); justify-items: start;}

li.urunBox a:hover {box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); color: #666;}
li.urunBox img {width: 5rem; margin-right: 1rem;}
li.urunBox p { text-align: left;}

.TLmarj {padding-left:.3rem;}
#fiyatTablosu {display: inline-grid; grid-template-columns: repeat(2, auto); grid-auto-flow: row; justify-content: center;  background: #f0f0f0; border-radius: .3rem;  box-shadow: 1px 1px 1px #ccc;}
#fiyatTablosu > div  {padding: .5em .8em; text-align: center;}
.kunyeBox { padding: 1em; background: #f9f9f9; box-shadow: 1px 1px 1px #ccc; display:grid; grid-template-columns: 8em auto; column-gap: 1em;  border-radius: .3rem;}
.kunyeBaslik {grid-column: 1/-1; text-align: center; font-weight:bold; border-bottom: 1px solid #000; margin-bottom: 1em; padding-bottom: .5em;}
.detayBaslik { display: inline-block; font-weight: bold; margin-bottom: .5em; text-align: left;}
.detayIcerik { text-align: left;}
#urunDetayMetin {display: grid;  grid-template-columns: 100%; row-gap: 2em; }
.urunHikaye {line-height: 1.8em; text-align: justify;}
#sepetMesaji {margin:2em; display:block; text-align:center;}
.bigLink { background: #f6f0f6; color: #867; box-shadow: 1px 1px 2px #dcd; cursor: pointer;}
.bigLink.ortali { display:flex; justify-content:center; align-items:center; width:100%; height:100%; }
 input[type="radio"]:checked+label.bigLink { background: #8B758B; color:#fef;}
.bigLink:hover { box-shadow: 2px 2px 2px #cbc;}
.bigLink .ikon {color: #867;}
.bigLink:hover .ikon {color: #fff;}
.bigLink.radio { background-image: url('../dosyalar/ikonlar/checkBox.svg'); background-size: 1.5rem 1.5rem; background-repeat:no-repeat; background-position:right top;}
input[type="radio"]:checked+label.bigLink {background-image: url('../dosyalar/ikonlar/checkedBox.svg'); background-size: 1.5rem 1.5rem; background-repeat:no-repeat; background-position:right top;}

.siparisDetayBox {display: block; }
.siparisList {display: flex; }
.siparisDetayBox, .siparisList {padding:1.5rem; border: 1px solid #eee; border-radius:.3rem; margin-bottom: 1rem; box-shadow: 1px 1px 1px #fff; width: 100%; }

.siparisList:hover {box-shadow: 1px 1px 1px #ddd; }
.siparisIcerik {display: grid; width:100%;   grid-template-columns: 1fr ; text-align:left;}
.sBaslik, .sBaslikMobil { font-weight: bold; color: #8B758B; font-style: italic; display: inline-block; }
.sBaslikMobil { width: 3.5rem;}
.sBaslik , .sIsim{ display: none;}


@media only screen and (max-width: 500px) {
	* { font-size: 13px;}
}
/* 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: 13px; }

  .upTabletOnly {display: block;}
  .upTabletOnlyInline {display: inline;}
  .mobileOnly , .mobileOnlyInline {display: none;}
	.padd2emMob1em {padding:2em;}
	.marg2emMob1em {margin:2em;}
	.grid2mob1column{grid-template-columns: 1fr 1fr;}
	.grid3mob1column{grid-template-columns: 1fr 1fr;}

	#bodywrapper {min-height:100vh; width:100vw; display:flex; flex-direction:column; justify-content:space-between; align-items: center;}

	#headerBox {width:100vw; height: 9rem; background-image: url("../dosyalar/header.jpg");}
	#logo {height: 5em; width: 15em; position: absolute; top: 2em; left: 2em; display: inline-block;  margin-left: 0rem; margin-top: 0rem;}
	
  #hiyBox ul#mainUrunler {grid-template-columns: repeat( 2, 1fr); justify-items: center; }
	#hiyBox ul#mainUrunler li {	min-height: 12em; text-align: center;}
	#hiyBox ul#mainUrunler a {grid-template-columns: repeat( 1, 1fr); padding: 2rem; justify-items:center; align-items:center; transition: all .5s!important; opacity: .7;}
	#hiyBox ul#mainUrunler a:hover { opacity: 1;}
	#hiyBox ul#mainUrunler a .urunIkon {height: 5em; margin-bottom: .5em;}
	#hiyBox ul#mainUrunler a .ikonDetay{max-height: 0px; overflow: hidden;}
	#hiyBox ul#mainUrunler a:hover .ikonDetay {max-height: 60px;}
	

	nav#main ul {top:3.5rem;}
	nav#main li .metin, nav#main li :not(#sepet) .icon {opacity:.7;}
	nav#main li .metin {display: flex;}
	nav#main li button, nav#main li a#iletisimLink {margin-left: 1.5rem;}


	#footerBox { flex-direction:row; min-height:13rem;}

	.slidingPlaceholder .formText b {display:inline-block; min-width:7rem; }
	.slidingPlaceholder.ikiKolon{ grid-template-columns:auto auto;}

	ul#urunBoxes {display: grid; grid-template-columns: repeat(auto-fill, 250px); justify-content: center; gap: 1em 1em; }
	li.urunBox a {background: #fff; padding: 1rem; display:grid; transition: all 0.3s ease; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0);  grid-template-columns: 1fr; justify-items: center;}
	li.urunBox a:hover {box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); color: #666;}
	li.urunBox img {height: auto; width: 100%; margin-right: 1rem;}
	li.urunBox p { text-align: center;}
	#fiyatTablosu {grid-template-rows: repeat(2, auto); grid-auto-flow: column; justify-content: center;}

	.kunyeBox div:last-child .detayBaslik { margin-bottom: 0;}
	#urunDetayPic {height:30em; max-height: 450px; width:100%; background:#fcfcfc;  background-size: contain; background-repeat: no-repeat; background-position: center center; margin-bottom: 2em;}
	.kunyeBox { grid-template-columns: 8em auto 8em auto; }

.siparisIcerik {grid-template-columns: 1fr 1fr 1fr 1fr;}
.sBaslik , .sIsim{ display: block;}
.sBaslikMobil {display: none;}
}

/* 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: 13px;}

  #hiyBox ul#mainUrunler {grid-template-columns: repeat( 4, 1fr); justify-items: center; }

}
/* 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: 13px;}

}

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