.trnLogin
{
	position: relative;
	width:60%;
	height:80%;
	left:20%;
	bottom:10%;
	top:10%;
}

.trnLogin h1
{
	font-size:40px;
	font-weight:bold;
	color:#FFF;
}

.trnLogin h2
{
	font-size:20px;
	color:#FFF;
}

.trnLogin .trnLoginLeftArea
{
	width: 50%;
	height: 100%;
	position: absolute;
	z-index: 5;

	/* Dikeyde ortala + alt alta sırala */
	display: flex;
	flex-direction: column;   /* alt alta */
	justify-content: center;  /* dikey ortalama (main axis) */
	align-items: stretch;     /* yatayda tam genişlik */
	gap: 12px;                /* elemanlar arası boşluk (opsiyonel) */

	background-image: url("../img/login-left-bg.png");
	background-color: transparent;
	background-size: cover;
	background-position: left bottom;
	background-repeat: no-repeat;
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	box-sizing: border-box;
}

.trnLogin .trnLoginLeftArea .trnLoginLeftContainer 
{
	padding: 24px;
}

.trnLogin .trnLoginLeftArea > * {
  width: 100%;
  box-sizing: border-box;
  margin: 0;                /* başlıkların varsayılan boşluklarını sıfırla */
}

.trnLogin .trnLoginLeftArea figure
{
	width:150px;
	height:150px;
	position:absolute;
	top:-40px;
	left:-40px;
}

.trnLogin .trnLoginLeftArea figure img
{
	width:auto;
	height:150px;
}

.trnLogin .trnLoginRightArea
{
	width: 60%;
	height: 100%;
	position: absolute;
	left:40%;
	z-index: 4;

	/* Dikeyde ortala + alt alta sırala */
	display: flex;
	flex-direction: column;   /* alt alta */
	justify-content: center;  /* dikey ortalama (main axis) */
	align-items: stretch;     /* yatayda tam genişlik */
	gap: 12px;                /* elemanlar arası boşluk (opsiyonel) */

	background-color:rgb(65,70,70,0.5);
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	box-sizing: border-box;

	padding-left: 10%;            /* içerik duvara yapışmasın (opsiyonel) */
}

.trnLogin .trnLoginRightArea .trnLoginRightContainer 
{
	margin-top:-30px;
	padding: 24px;
}

.trnLogin .trnLoginRightArea .logo
{
	text-align:center;
	margin-bottom:40px;
}

.trnLogin .trnLoginRightArea .logo img
{
	height: 80px;
	margin-left:10%;
}

.trnLogin .trnLoginRightArea figure
{
	width:150px;
	height:120px;
	position:absolute;
	bottom:-40px;
	right:-80px;
}

.trnLogin .trnLoginRightArea figure img
{
	width:auto;
	height:120px;
}

.trnLogin .trnLoginRightArea button
{
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
}

.trnLogin .trnLoginRightArea .trnForgetPass
{
	width:100%;
	justify-content: right;
	align-items: right;
	text-align:right;
}

.trnLogin .trnLoginRightArea .trnForgetPass a
{
	text-decoration:none;
	color:#4CB9AB;
}


@media (min-height: 768px) 
{
	
	.trnLogin
	{
		position: relative;
		width:60%;
		height:70%;
		left:20%;
		bottom:15%;
		top:15%;
	}	
	
	.trnLogin h1
	{
		font-size:60px;
		font-weight:bold;
		color:#FFF;
	}

	.trnLogin h2
	{
		font-size:30px;
		color:#FFF;
	}
	
	.trnLogin .trnLoginLeftArea figure
	{
		width:200px;
		height:150px;
		position:absolute;
		top:-100px;
		left:-100px;
	}

	.trnLogin .trnLoginLeftArea figure img
	{
		width:auto;
		height:200px;
	}	
	
	
	.trnLogin .trnLoginRightArea .logo
	{
		text-align:center;
		margin-bottom:80px;
	}

	.trnLogin .trnLoginRightArea .logo img
	{
		height: 120px;
		margin-left:10%;
	}	
	
	.trnLogin .trnLoginRightArea figure
	{
		width:200px;
		height:200px;
		position:absolute;
		bottom:-100px;
		right:-100px;
	}

	.trnLogin .trnLoginRightArea figure img
	{
		width:auto;
		height:200px;
	}
	
}