@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 

	:root {
		--bg-color      : rgb(251,251,251);
		--bg-color-2    : rgb(255,255,255);
		
		--bg-color-head : rgba(0,0,0,0.15);
		--bg-color-icon : rgba(0,0,0,0.50);
		--dark-border   : rgba(255,255,255,1);
		--color-blue    : rgb(67,143,225);
 
		--text-color    : #151924;
		--border-color  : rgba(0,0,0,0.2);
		--border-color-panel: rgba(0,0,0,0.1);
		--text-color-rev: #fcfcfc;
	
		--color-Buy     : rgba(0,146,90,1);
		--color-Sell    : rgba(190,40,60,1);
		--color-Warning : rgba(255,200,0,1);
		--dark-display  : none;
		--light-display : block;
	}
	
	.dark-theme {
		--bg-color      : rgba(21,25,36); 
		--bg-color-2    : rgb(13,15,22); 
		
		--bg-color-head : rgba(0,0,0,0.3);
		--bg-color-icon : rgba(255,255,255,0.5); 
		--dark-border   : rgba(0,0,0,1);
		
		--text-color    : #fcfcfc;
		--border-color  : rgba(255,255,255,0.2);
		--border-color-panel:rgba(255,255,255,0.1);
		--text-color-rev: #151924;
		
		--dark-display  : block;
		--light-display : none; 
	}
	
	
	.OnLight {
		display:var(--light-display)
	}


	
	a {
		color:var(--text-color) !important;
	}
	
	
	
	textarea:focus, input:focus{
		outline: none;
	}
	

	::-webkit-scrollbar {
		width:10px;
		height:10px;
	}
 
	::-webkit-scrollbar-track {
	  background:var(--bg-color-2);
	}
 
	::-webkit-scrollbar-thumb {
		background-color:#438FE1; 
		border-radius:3px;
		border:2px solid var(--bg-color-2); 
	}
	
	/* Hover efekti */
	::-webkit-scrollbar-thumb:hover {
		background-color:#438FE1;
	}













	p {
	  margin: 0px;
	}

	a {
		text-decoration:none !important
	}

	* {	
		-webkit-box-sizing: border-box;  
		-moz-box-sizing: border-box; 
		box-sizing: border-box; 
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		/*-webkit-touch-callout:none; */
		/*-webkit-user-select:none; */
		/*-khtml-user-select:none; */
		/*-moz-user-select:none; */
		/*-ms-user-select:none; */
		/*user-select:none; */
	}

	html,body {
		height:100%;
	}
	
	body {
		margin: 0;
		font-family: "Roboto", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-size:15px;
		font-weight: 400; 
		text-align: left;
		background: var(--bg-color);
		color: var(--text-color);
		transition: background-color 0.3s ease, color 0.3s ease;
		font-family: 'Inter', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		
	}
	
	
	
	
	.Centerer { 	
		width:1880px;	
		margin:0 auto;  
		padding-left:12px;
		padding-right:12px; 
	} 
	.CentererPlus { 	
		padding-left:0px;
		padding-right:0px; 
	} 
	.Page {	min-height:90%;	}
	
	
	@media only screen and (max-width:1890px) {
		.Page {	min-height:90%;	}
		.Centerer {
			width:calc(100%); 
			margin:0 auto;   
			padding-left:24px;
			padding-right:24px;
		}
		.CentererPlus { 	
			padding-left:12px;
			padding-right:12px; 
		} 
	}
	
	@media only screen and (max-width:888px) {
		 
		.Centerer {
   
			padding-left:12px;
			padding-right:12px;
		}
		.CentererPlus { 	
			padding-left:12px;
			padding-right:12px;
		} 
		
	}




	.telegram-button {
		float:left;
		padding: 12px 24px;
		background-color: #0084C6; /* Telegram mavisi */
		color: white;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		border-radius:3px;
		text-decoration: none;
		transition: background-color 0.3s ease; 
	}
	
	.telegram-button:hover {
		background-color: #259FDC; /* Hover efekti */
	}
	
	
	.btc-button {
		float:right;
		padding: 12px 24px;
		background-color: #EF8E1A; /* Telegram mavisi */
		color: white;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		border-radius:3px;
		text-decoration: none;
		transition: background-color 0.3s ease;
	}
	
	.btc-button:hover {
		background-color: #F79400; /* Hover efekti */
	}
	
	
	
	.normal-button {
		float:left;
		padding: 12px 24px;
		background-color: #237D01; /* Telegram mavisi */
		color: white;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		border-radius:3px;
		text-decoration: none;
		transition: background-color 0.3s ease;
	}
	
	.normal-button:hover {
		background-color: #006700; /* Hover efekti */
	}
	
	
	
	
	.mobile-button {
		display:none
	}
	@media only screen and (max-width:999px) {
		 
		.line-button {
			float:left !important;
			width:100% !important;
			margin-bottom:12px !important
		} 
		
		.mobile-button {
			display:block
		}
		
	}
	
	
	
	
	
	
	
	
	
	
	
	
	.Standart {
		float:left;
		width:100%;
		position:relative; 
	}
	.StandartMargin {
		margin-top:24px;
	}
	
	
	.Top {
		float:left;
		width:100%;
		height:64px;
		position:fixed; 
		background-color:var(--bg-color-2);
		border-bottom:1px solid var(--border-color);
		z-index:888; 
	}
	.TopFixer {
		height:64px;
	}
	
	
	.Bottom {
		padding:32px 0px;
		background-color:rgb(13,15,22) !important; 
		color:rgba(255,255,255,1);
		margin-top:24px !important
	}
	
	.BottomArea {
		float:left;
		width:calc( 100% / 2 );
		color:rgba(255,255,255,1);
	}

	.BottomArea a , .BottomArea i  {
		color:rgba(255,255,255,1);
	}
	
	.BottomAreaRight a {
		float:right;
	}
	
	
	
	
	
	.Logo {
		float:left;
		width:48px;
		height:48px;
		background-repeat:no-repeat;
		background-size:contain;
		background-position:center center;
		background-image:url(/Assets/Content/Logo_2.png); 
		margin-top:8px;
		cursor:pointer
	}


	.LogoText {
		float:left;
		height:48px;
		margin-top:8px; 
		padding-left:12px;
		font-weight:900;
		font-size:18px;
		line-height:16px;
		padding-top:7px; 
		width:80px;
		cursor:pointer
		/* Logo Total 128px */
	}
	
	
	
	
	
	
	
	
	
	
	
	
	

	.Btn {
	  float:left;
	  width:auto;
	  font-family: 'Roboto', sans-serif;
	  padding: 8px 16px;
	  background-color: var(--primary-color, #2a75ff); /* Fallback: mavi */
	  color: #fff;
	  border: none;
	  border-radius: 3px;
	  font-size: 14px;
	  cursor: pointer;
	  transition: background-color 0.2s ease, transform 0.1s ease;
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); 
	}
	
	.Btn:hover {
	  background-color: #1e60d8; /* biraz daha koyu ton */
	}
	
	.ThemeBtn {
		position:absolute;
		height:32px;
		width:32px;
		background-color:var(--color-blue); 
		right:0px;
		cursor:pointer;
		line-height:32px;
		font-size:20px;
		border-radius: 3px;
		padding-top:6px;
		text-align:center;
		top:16px;
		
	}
	.ThemeBtn i {
		color:#ffffff;
	}
 	[data-theme="dark"] .ThemeBtn i {
		transform: scaleX(-1);
	}
	
	.TopSearch {
		position:absolute;
		top:16px;
		height:32px;
		right:40px;
		min-width:220px;
		border:1px solid var(--border-color);
		border-radius: 3px;
		overflow:hidden;
	}
	@media only screen and (max-width:1388px) {
		.TopSearch {
			min-width:100px; 
			width:140px;
		}
	}
	
	.TopSearch .SearchIcon {
		position:absolute;
		right:0px;
		top:0px;
		height:30px;
		width:30px;
		background-color:var(--bg-color);
		padding-top:6px;
		text-align:center;
		font-size:18px;
	}
	.TopSearch .SearchIcon i {
		color: var(--text-color);
		opacity:0.5
	}
	
	.TopSearch input[type="text"] {
		position:absolute;
		left:0px;
		top:0px;
		height:30px;
		width:calc( 100% - 30px);
		background-color:var(--bg-color);
		color: var(--text-color);
		font-family: 'Roboto', sans-serif;
		border:0px;
		font-size:16px;
		padding:4px 8px;
	}
	
	
	
	.TopMenu {
		float:right;
		padding-right:268px
	}
	@media only screen and (max-width:1088px) {
		.TopMenu {display:none}
	}
	
	.TopMenu .Item {
		float:left;
		margin:16px;
		margin-right:9px;
		margin-left :9px;
		padding:0px 16px;
		height:32px;
		line-height:32px;
		border-radius:3px;
		font-weight:500;
		font-size:15px;
		color: var(--text-color);
		background-color:var(--bg-color);
		cursor:pointer;	
	}
	
	.TopMenu .Item:hover {
		color:#fff;
		background-color:var(--color-blue); 
		 
	}
	.TopMenu .Item i {
		transition: transform 0.4s ease;
		opacity:0.6
	}
	.TopMenu .Item:hover i {
		opacity:1;
		transform: scaleX(-1); 
	}

 
 	.Panel {
		border:1px solid var(--border-color-panel);
		border-radius: 3px;
		background-color:var(--bg-color-2);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}
	[data-theme="dark"] .Panel {
		box-shadow: 0 1px 3px rgba(255,255,255, 0.05);
	}
	
	
 	.Panel .PanelHeader {
		float:left;
		width:100%;
		height:38px;
		line-height:38px;
		padding:0px 10px;
		position:relative;
		background-color:var(--bg-color);
		font-weight:500;
		font-size:16px;
		border-bottom:1px solid var(--border-color-panel);
	}
	
 	.Panel .PanelHeaderWarning {
		float:left;
		width:100%;
		height:30px;
		line-height:30px;
		padding:0px 10px;
		position:relative;
		background-color:var(--bg-color);
		font-weight:500;
		font-size:13px;
		border-bottom:1px solid var(--border-color-panel);
	}	
	
 
 	.Panel .PanelContent {
		float:left;
		width:100%; 
		position:relative;
		padding:10px 10px;
	}
 
 

	.SymbolList {
		float:left;
		width:calc( ( 100% / 6 ) - 24px );
		margin:12px;
		border:1px solid var(--border-color-panel);
		border-radius: 3px;
		background-color:var(--bg-color-2);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}
	
	@media only screen and (max-width:1895px) {.SymbolList { width:calc( ( 100% / 4 ) - 24px ) }}
	@media only screen and (max-width:1388px) {.SymbolList { width:calc( ( 100% / 3 ) - 24px ) }}
	@media only screen and (max-width:1188px) {.SymbolList { width:calc( ( 100% / 2 ) - 24px ) }}
	@media only screen and (max-width: 988px) {.SymbolList { width:calc( ( 100% / 1 ) - 24px ) }}
	@media only screen and (max-width: 888px) {.SymbolList { width:calc( ( 100% / 1 ) -  0px ) ; margin:12px 0px }}
	
	.SymbolList .nn_Symbol {
		font-size:20px;
		font-weight:500;
		margin:12px 0px 8px 0px;
	}	
	.SymbolList .nn_Symbol_Description {
		font-size:14px;
		font-weight:400;
	}	
	.SymbolList .Symbol_SubMarket {
		margin-top:4px;
		font-size:12px !important;
		font-weight:600;
	}	
	.SymbolList .Symbol_Last {
		margin-top:8px;
		margin-bottom:8px;
		font-family: "Ubuntu Mono", serif;
		font-size:22px; 
	}	
	.SymbolList .Symbol_Diff {
		margin-top:8px;
		margin-bottom:8px;
		font-family: "Ubuntu Mono", serif;
		font-size:14px;
		font-weight: 500; 
	}		
	
	

		
	
	.SymbolList .nn_Symbol_Column {
		text-align:center
	}
	.SymbolList .nn_Symbol_Column .nn_Symbol_Value_Name {
		float:left;
		width:50%;
		text-align:left;
		font-family: "Ubuntu Mono", serif;
		font-size:15px;
		font-weight: 500; 
	}	
	.SymbolList .nn_Symbol_Column .nn_Symbol_Value  {
		float:left;
		width:50%;
		text-align:right;
		font-family: "Ubuntu Mono", serif;
		font-size:15px;
		font-weight: 500; 
	}	
	
	.SymbolList .nn_Symbol_Column_Value {
		padding:3px 10px;
		margin-top:3px;
		border-bottom:1px solid var(--border-color-panel);
	}
	
	
	
	
	.SymbolList .nn_Symbol_Mini_Chart {
		text-align:center;
		height:90px;
		padding:10px 0px
	}