.trnGridContainer
{
	width: 100%; 
	height: 100%; 
	position:absolute;
	overflow-y: auto;
	overflow-x: hidden;	
}

.trnGridItem
{
	width:12.5%;
	height:20%;
	float:left;
	padding:5px;
	font-weight: bold;
	color:#000;
	cursor: pointer;
	transition: background 0.2s;	
}

.trnGridItem .trnGridItemContent
{
	width:100%;
	height:100%;
	padding:15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;	
	background-color:#D9D9D9;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

.trnGridItem .trnGridItemContent figure
{
	width:100%;
	height:60%;
	/*
	display: flex;
	align-items: center;
	justify-content: center;
	*/
	text-align:center;
	background-color: #f0f0f0;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

.trnGridItem .trnGridItemContent figure img
{
	max-width:100%;
	height:100%;
}

.trnGridItem .trnGridItemContent figure .icon
{
	font-size:38px;
	margin-bottom:10px;  
}


.trnGridItem .trnGridItemContent .text
{
	width:100%;
	height:40%;
	display: flex;
	flex-direction: column;
	justify-content: center;	
}

.trnGridItem .trnGridItemContent .text .title
{
	width:100%;
	height:60%;
	display: flex;
	align-items: center;
	justify-content: space-between; /* fiyat sola, butonlar sağa */
	font-size: var(--font-size-xs);
}

.trnGridItem .trnGridItemContent .text .bottom
{
	width: 100%;
	height:40%;
	display: flex;
	align-items: center;
	justify-content: space-between; /* fiyat sola, butonlar sağa */
}

.trnGridItem .trnGridItemContent .text .bottom .price
{
	width:auto;
	float:left;
}

.trnGridItem .trnGridItemContent .text .bottom .cartActions
{
	height:20%;
	float:right;
	list-style:none;
}

.trnGridItem .trnGridItemContent .text .cartActions li
{
	list-style:none;
	float:left;
}

.trnGridItem .trnGridItemContent .text .cartActions li .quantity
{
	width:40px;
	height:30px;
	display: flex;
	text-align:center;
	align-items: center;
	justify-content: center;
	background: transparent;
	border:none;
}

/* Hover / Focus / Active’ta da bir şey yapma */
.trnGridItem .trnGridItemContent .text .cartActions li .quantity:hover,
.trnGridItem .trnGridItemContent .text .cartActions li .quantity:focus,
.trnGridItem .trnGridItemContent .text .cartActions li .quantity:active {
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	}

/* Placeholder’ı da ebeveyn rengine uyumlu yap (opsiyonel) */
.trnGridItem .trnGridItemContent .text .cartActions li .quantity::placeholder {
	color: currentColor;
	opacity: 0.5;
}

/* Number input spinner’larını kaldır */
input[type="number"].trnGridItem .trnGridItemContent .text .cartActions li .quantity::-webkit-outer-spin-button,
input[type="number"].trnGridItem .trnGridItemContent .text .cartActions li .quantity::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"].trnGridItem .trnGridItemContent .text .cartActions li .quantity { -moz-appearance: textfield; }

/* Edge/IE clear & reveal ikonlarını gizle (şifre vs.) */
.trnGridItem .trnGridItemContent .text .cartActions li .quantity::-ms-reveal,
.trnGridItem .trnGridItemContent .text .cartActions li .quantity::-ms-clear { display: none; }

/* Chrome/Safari otomatik-doldurma sarısını bastır */
input.trnGridItem .trnGridItemContent .text .cartActions li .quantity:-webkit-autofill,
input.trnGridItem .trnGridItemContent .text .cartActions li .quantity:-webkit-autofill:hover,
input.trnGridItem .trnGridItemContent .text .cartActions li .quantity:-webkit-autofill:focus,
textarea.trnGridItem .trnGridItemContent .text .cartActions li .quantity:-webkit-autofill,
select.trnGridItem .trnGridItemContent .text .cartActions li .quantity:-webkit-autofill {
	-webkit-text-fill-color: inherit;
	transition: background-color 5000s ease-in-out 0s; /* hack: sarıyı görünmez kılar */
	box-shadow: 0 0 0px 1000px transparent inset !important;
}

.trnGridItem .trnGridItemContent .text .cartActions li .trnBtn
{
	width:30px  !important;
	height:30px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:0;
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	color:#D9D9D9;
	background-color:#006165;
}

/* Durum stilleri (renk + içerik) */
.trnGridItem.notification .trnGridItemContent
{
	color:#FFF;
	background-color: #006165;	
	border:2px solid #006165;
}


.trnGridItem.empty .trnGridItemContent
{
	color:#424242;
	background:transparent;
	border:2px solid #424242;
}
.trnGridItem.full .trnGridItemContent
{
	color:#D2A859;
	background:transparent;
	border:2px solid #D2A859;
} 

.trnGridItem.checkout .trnGridItemContent
{
	color:#FFFFFF;
	background:#B4373E;
	border:2px solid #B4373E;
} 

.trnGridItem.server .trnGridItemContent
{
	color:#2E2D2C;
	background:#AFB653;
	border:2px solid #AFB653;
} 

.trnGridItem.inProcess .trnGridItemContent
{
	color:#2E2D2C;
	background:#E9C3AC;
	border:2px solid #E9C3AC;
}

/* 4K ve üstü monitörler (3840px+) */
@media (min-width: 3840px)
{
  /* Ultra yüksek çözünürlüklü ekranlar */
}

/* QHD / 2K monitörler (2560px – 3839px) */
@media (min-width: 2560px) and (max-width: 3839px)
{
  /* Geniş profesyonel monitör tasarımı */
}

/* Full HD laptop ve monitörler (1920px – 2559px) */
@media (min-width: 1920px) and (max-width: 2559px)
{
  /* Standart masaüstü & laptop görünümü */
}

/* HD / küçük laptoplar (1366px – 1919px) */
@media (min-width: 1366px) and (max-width: 1919px)
{
  /* Dizüstü bilgisayarlar & orta boy monitörler */

}

/* Küçük ekranlı laptoplar ve büyük tabletler (1024px – 1365px) */
@media (min-width: 1024px) and (max-width: 1365px)
{
  /* Küçük dizüstüler & yatay tablet modu */
	.trnGridItem
	{
		width:25%;
		height:25%;
		float:left;
		font-weight: bold;
		color:#000;
	}  
}

/* Tablet yatay (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px)
{
  /* Orta boy tablet ve yatay mobil */
	.trnGridItem
	{
		width:25%;
		height:25%;
		float:left;
		font-weight: bold;
		color:#000;
	}  
}

/* Tablet dikey / büyük telefon (600px – 767px) */
@media (min-width: 600px) and (max-width: 767px)
{
  /* Dikey tablet veya küçük tablet modu */
	.trnGridItem
	{
		width:33.3333%;
		height:25%;
		float:left;
		font-weight: bold;
		color:#000;
	}  
}

/* Telefon geniş (480px – 599px) */
@media (min-width: 480px) and (max-width: 599px)
{
  /* Büyük telefon ekranları */
	.trnGridItem
	{
		width:33.3333%;
		height:25%;
		float:left;
		font-weight: bold;
		color:#000;
	}   
}

/* Telefon standart (320px – 479px) */
@media (max-width: 479px)
{
  /* Küçük telefonlar ve dar ekranlar */
	.trnPanel .trnPanelContent.trnCartContent .trnGridItem
	{
		width:50%;
		height:50%;
		float:left;
		font-weight: bold;
	}  
}