/*
Koyu : 2E2D2C
Koyu Yeşil : #006165
Açık Yeşil : 48B5A7
*/

@font-face {
  font-family: metropolis;
  src: url(../fonts/Metropolis-Regular.otf);
}

@font-face {
  font-family: metropolis-black;
  src: url(../fonts/Metropolis-Black.otf);
}

@font-face {
  font-family: metropolis-thin;
  src: url(../fonts/Metropolis-Thin.otf);
}

:root
{
	--font-size-lg: 32px;
	--font-size-md: 24px;
	--font-size-xs: 18px;
	--font-size: 14px;
}

* {
    /* Tüm elementler için border-box kullanmak iyi bir uygulamadır */
	/*Bu sayde padding ve border değerleri height ve width değerlerine dahil olur*/
    box-sizing: border-box;
	scrollbar-width: thin; /* Firefox için */
	scrollbar-color: #EDEDED #3E3E3E; /* Firefox için */		
}



/* Webkit tabanlı tarayıcılar (Chrome, Safari, Edge) */
* ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

* ::-webkit-scrollbar-track {
  background: #EDEDED;
}

* ::-webkit-scrollbar-thumb {
  background-color: #EDEDED;
  border-radius: 10px;
  border: 1px solid #EDEDED;
}

@media (min-width: 1445px)
{
	:root
	{
		--font-size-lg: 32px;
		--font-size-md: 24px;
		--font-size-xs: 18px;
		--font-size: 14px;
	}
}

@media (max-width: 1500px)
{
	:root
	{
		--font-size-lg: 24px;
		--font-size-md: 18px;
		--font-size-xs: 14px;
		--font-size: 14px;
	}
}

@media (max-width: 1360px)
{
	:root
	{
		--font-size-lg: 24px;
		--font-size-md: 18px;
		--font-size-xs: 14px;
		--font-size: 14px;
	}
}

@media (max-width: 1200px)
{
	:root
	{
		--font-size-lg: 20px;
		--font-size-md: 16px;
		--font-size-xs: 14px;
		--font-size: 14px;
	}
}

@media (max-width: 1024px)
{
	:root
	{
		--font-size-lg: 18px;
		--font-size-md: 16px;
		--font-size-xs: 14px;
		--font-size: 14px;
	}
}

@media (max-width: 480px)
{
	:root
	{
		--font-size-lg: 18px;
		--font-size-md: 14px;
		--font-size-xs: 14px;
		--font-size: 14px;
	}
}

body
{
	margin:0;
	padding:0;
	font-size: var(--font-size);
	background-color:#1F1F1F;
	font-family: metropolis;
}

#fullscreen
{
	width:100%;
	height:100%;
	position:fixed;
	background-image: url("../img/body-bg.png");
	background-repeat: no-repeat;
	background-position: calc(100% + 50px) center; 
	background-size: 400px auto; /* genişliği 200px, yüksekliği otomatik orantılı */
}

a{ text-decoration:none; color:#FFF; }

.trnActive{z-index:997;}

.trnShow{display:block;}

.trnHidden{display:none;}

.trnHide{display:none;}

.trnNoPadding{padding:0;}

/*
.trnLoader
{
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	text-align:center;
	z-index:1000000;
	z-index:1000000;
	display:block;
}
*/

.trnLoader .trnLoaderContent{
	width:200px;
	height:100px;
	position:absolute;

	top:50%;
	left:50%;
	margin:-25px 0 0 -50px;
	z-index:1000000;
	text-align:center;
	color:#FFF;
	padding:5px 15px 5px 15px;
	/*background-color:RGB(0,0,0,0.5);*/
}

.trnLoader .trnLoaderContent img{
	width:100px;
	height:auto;
	float:none;
	margin-right:10px;
}

.trnLoader .trnLoaderText{	
	width:auto;
	height:50px;
	line-height:50px;
	font-size: var(--font-size-xs);
	float:none;
}

.trnLoader .trnLoaderText:after {
  content: 'Yükleniyor...';
}

/* ##### Yükleniyor Bitti ##### */

.trnReturn
{
	position:fixed;
	height:40px;
	bottom:15px;
	left:15px;
	z-index:9999;
}

.alert{
	padding:5px;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border:none;
}

.alert  i{
	font-size: var(--font-size);
	margin-right:10px;
}

.alert .closebtn{
	float:right;
	margin-left:10px;
	font-size: var(--font-size);
	font-weight:bold;
	cursor:pointer;
}

.danger {
	font-size: var(--font-size);
	padding: 10px;
	background-color: #f44336;
	color: #FFF;
}

.info {
	font-size: var(--font-size);
	padding: 10px;
	background-color: #47A8F5;
	color: #FFF;
}


.warning {
	font-size: var(--font-size);
	padding: 10px;
	background-color: #FFA92B;
	color: #FFF;
}

.success {
	font-size: var(--font-size);
	padding: 10px;
	background-color: #6ABC6E;
	color: #FFF;
}

.trnFooter
{
	width:100%;
	height:60px;
	position:absolute;
	bottom:0;
    display: flex;
    align-items: center;	
	padding:0 15px 0 15px;
}

.trnHorizontalBtns
{
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}

.trnHorizontalBtns li
{
	width:auto;
	margin:0 0 0 10px;
	padding:0;
	float:left;
	list-style:none;
}

.trnBtn
{
	width:auto;
	height:50px !important;
    display: flex;
	padding:0 13px 0 13px;
    align-items: center;
	color:#FFF;
	font-size: var(--font-size);
	font-weight:bold;
	text-decoration:none;
	background-color:transparent;
	border:none;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;	
}

.trnBtn:hover
{
	text-decoration:none;
}

.trnBtn svg
{
	height:16px;
	margin-right:10px;
}

.trnLargeBtn
{
	width:100%;
	justify-content: center;
	align-items: center;
}

.trnDarkBtn
{
	color:#FFFFFF;
	background-color:#4CB9AB;
	border:1px solid #4CB9AB;
	font-weight:normal;
}

.trnLightBtn
{
	color:#2E2D2C;
	background-color:#FFF;
	border:1px solid #FFF;
}

.trnLightBtn:hover
{
	color:#4CB9AB !important;
	background-color:#EEE !important;
	border:1px solid #EEE;
}


.trnLightBtn:hover path
{
	fill:#4CB9AB !important;
}

.trnLightBorderBtn
{
	color:#2E2D2C;
	border:1px solid #FFF;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;	
}

.trnDarkBorderBtn
{
	color:#006165;
	border:1px solid #006165;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;	
}

.trnActiveBtn
{
	color:#006165;
	background-color:#FFF;
	border:1px solid #FFF;
}

.trnRedBtn
{
	color:#F2323E;
}

.trnFloatLeft{float:left !important;}
.trnFloatLeft li{float:left !important;}
.trnFloatRight{float:right !important;}
.trnFloatRight li{float:right !important;}

.trnReturnContent
{
	width:100%;
	height:100%;
	position:absolute;
	padding:60px 0 0 0;
	overflow: hidden;	
}

.trnScrollContainer
{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	padding:60px 0 0 0;
}

.trnScrollContainer .trnScroll
{
	width:100%;
	height:100%;
	overflow-y: auto;
	/*background:blue;*/
	
	scrollbar-width: thin; /* Firefox için */
	scrollbar-color: #EDEDED #3E3E3E; /* Firefox için */	
}

/* Webkit tabanlı tarayıcılar (Chrome, Safari, Edge) */
.trnScrollContainer .trnScroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.trnScrollContainer .trnScroll::-webkit-scrollbar-track {
  background: #3E3E3E;
}

.trnScrollContainer .trnScroll::-webkit-scrollbar-thumb {
  background-color: #EDEDED;
  border-radius: 10px;
  border: 1px solid #EDEDED;
}

.trnShowFooter .trnScrollContainer
{
	padding:60px 0 60px 0;
}

.exitfullscreen{display:none;}

.trnTable table
{
  width: 100%;
  border-collapse: collapse;
}

.trnTable table th,
.trnTable table td
{
	border: none;
	padding: 5px;
	text-align: left;
}

.trnTable th
{ 
	color: #FFF; 
	font-weight: bold;
	font-size: var(--font-size-xs);
	position: sticky;
	top: 0;
	background: #131313;
	border-bottom: 1px solid #EDEDED; 
}

.trnTable thead
{ 
	color: #FFF;
	border-bottom: 1px solid #EDEDED; 
}

.trnTable tbody tr
{ 
	/*background: #000; */	
	border-bottom: 1px solid #EDEDED; 
}

.trnTable a
{ 
	color: #FFF;
	text-decoration:none;
}

.trnTable a:hover
{ 
	color: #FFF;
	text-decoration:none;
}

.trnTable img
{ 
	max-width:100px;
	max-height:80px;
}

.trnTable tr td .trnBtn {
    display: inline-flex;     /* yan yana gelebilsin */
    margin-right: 10px;       /* aralarında 10px boşluk */
}
.trnTable tr td  .trnBtn:last-child {
    margin-right: 0;          /* sonuncuda boşluk olmasın */
}

.trnGridButtons
{
	height:100%;
	width:100%;
	text-align:center;
	padding:0 15px 15px 15px;
}

.trnGridButtons h1
{
	font-size:15px;
	font-weight:bold;
}

.trnGridButtons h2
{
	font-size:15px;
	font-weight:normal;
}

.trnGridButtons i
{
	font-size:15px;
}


.trnGridButtons figure i
{
	font-size:38px;
}

.trnGridButtons .trnGridButton
{
	width:9%;
	margin:0 0 1% 1%;
	float:left;
	aspect-ratio: 1 / 1; 
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;	
	background-color:#006165;
	border:2px solid #006165;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;		
}




.trnSquareBlockWrapper{                /* sol boşluk */
  padding:15px 15px 15px 15px;
  display:grid;
  grid-template-columns: repeat(8, 1fr);   /* 8 sütun sabit */
  gap:20px;
  box-sizing:border-box;
}

/* Kare buton */
.trnSquareBlock{
	position:relative;
	aspect-ratio: 1 / 1;               /* her zaman kare */
	display:flex; 
	flex-direction:column;
	align-items:center; 
	justify-content:center;
	text-align:center;
	color:#434343;
	background-color:transparent;
	cursor:pointer;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;	
	border:2px solid #434343;
	/*box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(0,0,0,.25);*/
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.trnSquareBlock:hover
{
	transform: translateY(-3px);
	/*box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.2);*/
}

.trnSquareBlock .top
{
	font-size:14px;
	font-weight:bold;
	margin-bottom:10px;  
}

.trnSquareBlock .icon
{
	font-size:38px;
	margin-bottom:10px;  
}

.trnSquareBlock figure {
	width: 100%;
	height: 100%;
	display: flex;
	margin-bottom:10px; 
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 8px; /* isteğe bağlı */
}

.trnSquareBlock figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;      /* taşıyorsa kes, ama oranı koru */
	object-position: center;/* ortala */
	background-color:#FFF;
}

.trnSquareBlock .text
{
	font-size:14px;
	font-weight:bold;
}

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


.trnSquareBlock.unavailable
{
	color:#D2A859;
	background:transparent;
	border:2px solid #D2A859;
} 

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

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

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

.blinkBounce {
  display: inline-block;
  animation: bounceBlink 1.5s ease-in-out infinite;
}

@keyframes bounceBlink {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-3px);
    opacity: 0.3;
  }
}

/* Her öğeye farklı delay */
.blinkBounce:nth-child(1) { animation-delay: 0s; }
.blinkBounce:nth-child(2) { animation-delay: 0.3s; }
.blinkBounce:nth-child(3) { animation-delay: 0.6s; }
.blinkBounce:nth-child(4) { animation-delay: 0.9s; }

@media (max-width:1024px)
{
	.trnSquareBlockwrapper{ grid-template-columns:repeat(3,1fr);}
}

@media (max-width:640px)
{
	.trnSquareBlockwrapper{ grid-template-columns:repeat(2,1fr);}
}

/* Mobil görünüm için */
@media (max-width: 768px) {
	.trnTable  table, thead, tbody, th, td, tr
	{
		display: block;
	}

	.trnTable thead tr
	{
		display: none; /* başlık gizlenir */
	}

	.trnTable tr
	{
		margin-bottom: 15px;
		padding: 10px;
	}

	.trnTable td
	{
		border: none;
		display: flex;
		justify-content: space-between;
		padding: 8px 5px;

	}

	.trnTable td::before
	{
		content: attr(data-label); /* her hücreye başlık yazdırır */
		font-weight: bold;
		margin-right: 10px;
		color: #FFF;
		text-align:left;
	}
	
	.trnTable td .trnHorizontalBtns {width:auto; float:right;}
	.trnTable td .trnHorizontalBtns li{float:left; margin:0 0 0 10px;}
}