@import "form.css";
@import "tables.css";
@import "mn-icons.css";
@import "sweetalert2-custom.css";
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=normal');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
	--default-font	:"Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--serif-font	: "PT Serif", Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--font-light	:300;
	--font-regular	:400;
	--font-medium	:500;
	--font-normal	:600;
	--font-bold		:700;
	--font-bolder	:800;
	--font-black	:900;
	--letter-spacing :-.3px;
	--line-height :1.425;
	--root-size		: 15px;

	--background-color	:#f4f5f9;
	--background-color	:rgba(247, 248, 251, 1);
	--foreground-color	:#FEFEFE;

	--primay-color-rgb		:30, 136, 229;
	--primay-color			:rgb(var(--primay-color-rgb));
	--primay-color-hover	:rgb(var(--primay-color-rgb),.8);
		
	--accent-color-rgb		:29, 155, 240;
	--accent-color-rgb		:0, 34, 102;
	--accent-color			:rgb(var(--accent-color-rgb));
	--accent-color-hover	:rgb(var(--accent-color-rgb),.8);

	--secondary-color-rgb	:234, 14, 15;
	--secondary-color		:rgb(var(--secondary-color-rgb));
	--secondary-color-hover	:rgba(var(--secondary-color-rgb),.8);

	--dark-color-rgb	: 0,0,0;
	--dark-color		: rgb(var(--dark-color-rgb));
	--dark-color-hover	: rgba(var(--dark-color-rgb),.8);
		
	--light-color-rgb	: 255,255,255;
	--light-color		: rgb(var(--light-color-rgb));
	--light-color-hover	: rgba(var(--light-color-rgb),0.8);
		
	--text-rgb				:33,33,33;
	--text					:rgb(var(--text-rgb));
	--text-hover			:rgba(var(--text-rgb),0.8);

	--text-primary			:rgb(var(--primay-color-rgb));
	--text-primary-hover	:rgb(var(--primay-color-rgb),.8);

	--text-secondary		:rgb(var(--secondary-color-rgb));
	--text-secondary-hover	:rgb(var(--secondary-color-rgb),.8);
		
	--text-accent			:rgb(var(--accent-color-rgb));
	--text-accent-hover		:rgb(var(--accent-color-rgb),.8);

	--text-dark-rgb			:0,0,0;
	--text-dark				:rgb(var(--text-dark-rgb));
		
	--text-white-rgb		:255,255,255;
	--text-white			:rgb(var(--text-white-rgb));
		
	--text-gray				:#8a8a8a;
	--text-light-gray		:#d3d3d3;
	--text-dark-gray    :#7b869c;
		
	--text-blue-gray		:#a8b4cb;
	--text-blue-light-gray	:#b2bed5;
	--text-blue-dark-gray	:#7b869c;
		
	--border-color			:#f1f4fa;
	--border-color-light	:#f2f4f8;
	--border-color-dark		:#d7dbe8;

	--error-color-rgb		:245, 34, 45;
	--warning-color-rgb		:255, 193, 7 ;
	--info-color-rgb		:120, 197, 255;
	--success-color-rgb		:23, 198, 132;
		
	--error-color			:rgb(var(--error-color-rgb));
	--warning-color			:rgb(var(--warning-color-rgb));
	--info-color			:rgb(var(--info-color-rgb));
	--success-color			:rgb(var(--success-color-rgb));

	--gray	: #f0f4f9;
	--gray-0: #f6f8fc;
	--gray-1: #ffffff;
	--gray-2: #fafafa;
	--gray-3: #f5f5f5;
	--gray-4: #f0f0f0;
	--gray-5: #d9d9d9;
	--gray-6: #bfbfbf;
	--gray-7: #8c8c8c;
	--gray-8: #595959;
	--gray-9: #434343;
	--gray-10: #262626;
	--gray-11: #1f1f1f;
	--gray-12: #141414;
		
	--blue-gray-9:#1a202c;
	--blue-gray-8:#2d3748;
	--blue-gray-7:#4a5568;
	--blue-gray-6:#718096;
	--blue-gray-5:#a0aec0;
	--blue-gray-4:#cbd5e0;
	--blue-gray-3:#e2e8f0;
	--blue-gray-2:#edf2f7;
	--blue-gray-1:#f7fafc;
	

	--space-0	:0;
	--space-4xs :0.125rem;
	--space-3xs :0.25rem;
	--space-xxs	:0.375rem;
	--space-xs	:0.5rem;
	--space-s	:0.625rem;
	--space-m	:0.875rem;
	--space		:1rem;
	--space-lg	:1.25rem;
	--space-xl	:1.5rem ;
	--space-2xl	:1.75rem;
	--space-3xl	:2rem;
	--space-4xl	:2.25rem;
	--space-5xl	:2.5rem;

	--font-size-4xs	:	0.625rem;/*10px;*/
	--font-size-3xs	:	0.6875rem;/*11px;*/
	--font-size-xxs	:	0.75rem	;/*12px;*/
	--font-size-xs	:	0.8125rem;/*13px;*/
	--font-size-s	:	0.875rem	;/*14px;*/
	--font-size-m	:	0.9375rem;/*15px;*/
	--font-size		:	1rem		;/*16px;*/
	--font-size-lg	:	1.0625rem;/*17px;*/
	--font-size-xl	:	1.125rem	;/*18px;*/
	--font-size-2xl	:	1.5rem	;/*24px;*/
	--font-size-3xl	:	1.75rem	;/*28px;*/
	--font-size-4xl	:	2rem		;/*32px;*/
	--font-size-5xl	:	2.25rem	;/*36px;*/
	--font-size-6xl	:	2.5rem	;/*40px;*/
	--font-size-7xl	:	3rem	;/*48px;*/
	--font-size-extra:	3.75rem	;/*60px;*/

		
	--container		: 96%;

	--radius		:4px;

	--input-height-xs	:16px;
	--input-height-s	:24px;
	--input-height-m	:32px;
	--input-height		:40px;
	--input-height-lg	:48px;

	--swiper-pagination-bullet-width : 16px;
	--swiper-pagination-bullet-size : 16px;
	--swiper-theme-color : var(--secondary-color);
	--swiper-color : #e2e8f5;

	--shadow						:rgba(99, 99, 99, 0.08) 0px 2px 8px 0px;
	--shadow-s						:rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	--shadow-m						:rgba(0, 0, 0, 0.1) 0px 4px 12px;
	--shadow-lg						:rgba(149, 157, 165, 0.2) 0px 8px 24px;
	--shadow-xl						:rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;

}

/*************************** Typography **************************
*****************************************************************/
html									
{
	--root-size:15px!important;
	font-size:var(--root-size)
}
@media (min-width: 992px) {
}
@media (min-width: 1400px) {
	html
	{
	--root-size:16px!important;
	font-size:var(--root-size)
	}
}

/*************************** Sabitler ***************************
****************************************************************/	

html									{scroll-behavior: smooth; }
body									{background-color:var(--background-color); font-family:var(--default-font); color:var(--text); font-weight:var(--font-medium); letter-spacing:var(--letter-spacing); margin:0; padding:0}
*,img,*:after,*:before					{box-sizing:border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: auto;}
a										{color:var(--text); text-decoration:none;}
[role="button"], [role="link"]							{display:flex; align-items:center; cursor:pointer; text-decoration:none;}
[role="button"]:hover,[role="link"]:hover,a:hover				{color:var(--text-primary-hover); text-decoration:none;}

b, strong								{font-weight:var(--font-bold);}
hr, .hr									{display:block; border:0; height:1px; padding:0; margin-top:unset; margin-bottom:unset; border-top:1px solid var(--border-color); width:100%; }

.radius									{border-radius:var(--radius);}
.radius._m								{border-radius:calc(var(--radius) - 2px);}
.radius._lg								{border-radius:1.25rem}
.radius._xl								{border-radius:2rem}

.text-primary,
a.text-primary	{color:var(--text-primary)!important;}
a.text-primary:hover	{color:var(--text-primary-hover)!important;}

.text-accent,
a.text-accent	{color:var(--text-accent);}
a.text-accent:hover	{color:var(--text-accent-hover);}
	
	
.text-secondary,
a.text-secondary	{color:var(--text-secondary);}
a.text-secondary:hover	{color:var(--text-secondary-hover);}

.text-info,.date,.code,time,.number,a.text-info,a.date,a.code,a.number	{color:var(--text-blue-gray)!important; font-weight:var(--font-regular); font-size:var(--font-size-xs);}
.text-muted, a.text-muted, a.text-muted *											{color:var(--text-gray)!important; font-weight:var(--font-regular); font-size:var(--font-size-xs);}
.text-gray {color:var(--text-gray)}

[class*="line-clamp-"]	{overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.line-clamp-1	        {-webkit-line-clamp: 1!important;}
.line-clamp-2	        {-webkit-line-clamp: 2!important;}
.line-clamp-3	        {-webkit-line-clamp: 3!important;}
.line-clamp-4	        {-webkit-line-clamp: 4!important;}
.line-clamp-5	        {-webkit-line-clamp: 5!important;}
.line-clamp-6	        {-webkit-line-clamp: 6!important;}
.line-clamp-none	    {overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none;}

h6,.h6,h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1	{color:var(--text-dark); margin-top: 0; margin-bottom: 0; margin-left:0; margin-right:0; }
h6,.h6	{font-size:1.125rem ;}
h5,.h5	{font-size:1.5rem   ;}
h4,.h4	{font-size:1.75rem  ;}
h3,.h3	{font-size:2rem     ;}
h2,.h2	{font-size:2.250rem ;}
h1,.h1	{font-size:2.5rem   ;}


.head-title-4xl							{font-size:var(--font-size-4xl); font-family:var(--serif-font); font-weight:var(--font-bolder); margin:0;padding:0;}
.head-title-3xl							{font-size:var(--font-size-3xl); font-family:var(--serif-font); font-weight:var(--font-bolder); margin:0;padding:0;}
.head-title-2xl							{font-size:var(--font-size-2xl); font-family:var(--serif-font); font-weight:var(--font-bolder); margin:0;padding:0;}
.head-title-xl							{font-size:var(--font-size-xl); font-family:var(--serif-font); font-weight:var(--font-bolder); margin:0;padding:0;}
.head-title-lg							{font-size:var(--font-size-lg); font-family:var(--serif-font); font-weight:var(--font-bolder); margin:0;padding:0;}
.head-title-xs							{font-size:var(--font-size-xs); font-family:var(--serif-font); font-weight:var(--font-normal); margin:0;padding:0;}

[class*="display-title"]				{display:flex; align-items:center; gap:var(--space-3xs); font-family:'Red Hat Display'}
.display-title-4xl						{font-size:var(--font-size-4xl); font-weight:var(--font-bolder); margin:0;padding:0;}
.display-title-3xl						{font-size:var(--font-size-3xl); font-weight:var(--font-bolder); margin:0;padding:0;}
.display-title-2xl						{font-size:var(--font-size-2xl); font-weight:var(--font-bolder); margin:0;padding:0;}
.display-title-xl						{font-size:var(--font-size-xl); font-weight:var(--font-bold); margin:0;padding:0;}
.display-title-lg						{font-size:var(--font-size-lg); font-weight:var(--font-bold); margin:0;padding:0;}
.display-title							{font-size:var(--font-size); font-weight:var(--font-normal); margin:0;padding:0;}
.display-title-xs						{font-size:var(--font-size-xs); font-weight:var(--font-normal); margin:0;padding:0;}


[class*="head-title-"].head-lined		{display:grid; gap:var(--space-xs); align-items:center; grid-template-columns:8px 1fr}
[class*="head-title-"].head-lined:before	{display:inline-block; content:""; height:70%; width:0.5rem; width:100%; background-color:var(--secondary-color); border-radius:3px}

.lined-title				{align-items:center; display:grid; gap:var(--space); grid-template-columns:1fr auto 1fr; }
.lined-title:after			{content:""; display:block; height:1px; background-color:var(--border-color-dark); margin-right:5vw}
.lined-title:before			{content:""; display:block; height:1px; background-color:var(--border-color-dark); margin-left:5vw}

.text-size-4xs *,
.text-size-4xs	 {font-size: var(--font-size-4xs)}
.text-size-3xs *,
.text-size-3xs	 {font-size: var(--font-size-3xs)}
.text-size-xxs *,
.text-size-xxs	 {font-size: var(--font-size-xxs)}
.text-size-xs *,
.text-size-xs	 {font-size: var(--font-size-xs)}
.text-size-s *,
.text-size-s	 {font-size: var(--font-size-s)}
.text-size-m *,
.text-size-m	 {font-size: var(--font-size-m)}
.text-size *,
.text-size		 {font-size: var(--font-size)}
.text-size-lg *,
.text-size-lg	 {font-size: var(--font-size-lg)}
.text-size-xl *,
.text-size-xl	 {font-size: var(--font-size-xl)}
.text-size-2xl *,
.text-size-2xl	 {font-size: var(--font-size-2xl)}
.text-size-3xl *,
.text-size-3xl	 {font-size: var(--font-size-3xl)}
.text-size-4xl *,
.text-size-4xl	 {font-size: var(--font-size-4xl)}
.text-size-5xl *,
.text-size-5xl	 {font-size: var(--font-size-5xl)}
.text-size-6xl *,
.text-size-6xl	 {font-size: var(--font-size-6xl)}

.text-medium	{font-weight:var(--font-medium);}
.text-normal	{font-weight:var(--font-normal);}
.text-bold		{font-weight:var(--font-bold);}




/*************************** Colors ***************************
****************************************************************/

.bg-foreground {background-color:var(--foreground-color)}
.bg-background  {background-color:var(--background-color); --border-color :var(--border-color-dark)}
.bg-primary  {background-color:var(--primay-color);}
.bg-accent  {background-color:var(--accent-color);}
.bg-secondary  {background-color:var(--secondary-color);}

.bg-head		{background-color:var(--blue-gray-2);}
.bg-black		{background-color:var(--dark-color);--border-color :rgba(255,255,255,0.2);}
.bg-black *:not(.icon, .icon *)		{color:var(--light-color)}
.bg-unread {background-color:var(--gray-0)}
.bg-unread:hover {background-color:unset}

.bg-blue-gray-9 {background-color:var(--blue-gray-9)}
.bg-blue-gray-8 {background-color:var(--blue-gray-8)}
.bg-blue-gray-7 {background-color:var(--blue-gray-7)}
.bg-blue-gray-6 {background-color:var(--blue-gray-6)}
.bg-blue-gray-5 {background-color:var(--blue-gray-5)}
.bg-blue-gray-4 {background-color:var(--blue-gray-4)}
.bg-blue-gray-3 {background-color:var(--blue-gray-3)}
.bg-blue-gray-2 {background-color:var(--blue-gray-2)}
.bg-blue-gray-1 {background-color:var(--blue-gray-1)}
.shadow		{box-shadow:var(--shadow	)}
.shadow-s	  {box-shadow:var(--shadow-s)}
.shadow-m	  {box-shadow:var(--shadow-m)}
.shadow-lg	  {box-shadow:var(--shadow-lg)}
.shadow-xl	  {box-shadow:var(--shadow-xl)}
/*
[data-name="facebook"] {color:#1877f2}
[data-name="x"] {color:#14171a}
[data-name="google"] {color:#4285f4}
[data-name="linkedin"] {color:#0a66c2} 
[data-name="whatsapp"]  {color:#128c7e}

*/

/*************************** Badge ***************************
****************************************************************/
.badge			{display:inline-flex; position:relative; z-index:20}
.badge:before	{background-color:red; font-size:10px;border-radius:50%;  color:white; content:attr(data-count); display:grid; padding:2px; place-items:center; position:absolute; right:-8px; top:-8px; z-index:21; min-width:20px; min-height:20px; }

.count			{background-color:var(--blue-gray-2); border-radius:4px; display:grid; place-items:center; font-size:var(--font-size-xxs);padding:2px 6px}
.count:empty	{display:none}

.count._red		{background-color:red; color:white;}
.count._green	{background-color:#05b714; color:white;}

/*************************** Borders ***************************
****************************************************************/

.border				{border: 1px solid var(--border-color)}
.border-dot			{border: 1px dotted var(--border-color)}
.border-das			{border: 1px dashed var(--border-color)}
.border-0			{border: 0!important}

.border-r			{border-right: 1px solid var(--border-color)}
.border-l			{border-left: 1px solid var(--border-color)}
.border-t			{border-top: 1px solid var(--border-color)}
.border-b			{border-bottom: 1px solid var(--border-color)}

.border-x > *                    {border-right: 1px solid var(--border-color);} 
.border-y > *                    {border-bottom: 1px solid var(--border-color)} 
.border-x > *:last-child         {border-right: none}
.border-y > *:last-child         {border-bottom:none} 

[class*="border-"].border-lg	{border-width:2px}
[class*="border-"].border-xl	{border-width:4px}
[class*="border-"].border-2xl	{border-width:6px}
[class*="border-"].border-3xl	{border-width:8px}
[class*="border-"].border-light	{border-color:var(--border-light-color)}
[class*="border-"].border-seperator	{border-color:var(--border-color)}

.divide-x > *                    {border-left: 1px solid var(--border-color);} 
.divide-y > *                    {border-top: 1px solid var(--border-color)} 
.divide-x > *:first-child        {border-left-color: transparent}
.divide-y > *:first-child        {border-top-color:transparent}
.divide-x-0 > *                  {border-left-color:transparent}
.divide-y-0 > *                  {border-bottom-color:transparent}

/*************************** Member ***************************
****************************************************************/
@scope (.member) {
	:scope						{position:relative; z-index:19}
	:scope.block *				{color:#dadada; filter:blur(.5px) grayscale(1)}
	:scope.block:after			{background-color:rgba(255,255,255, 0.8); display:grid; place-content:center; place-items:center; position:absolute; inset:0; width:100%; height:100%; display:flex; align-content:center; justify-content:center; font-size:var(--font-size-xs); white-space:nowrap;  content:'🚫 Bu üyeyi engellediniz!';}
	:scope.block .avatar:after	{display:none}
	.avatar						{position:relative; z-index:20}
	.avatar img					{background-color:var(--foreground-color); border:1px solid var(--border-color-dark); display:inline-flex; border-radius:6px; overflow:hidden; height:48px; padding:2px;  width:48px;}
	.avatar._s img				{height:24px; width:24px;}
	.avatar._m img				{height:40px; width:40px;}
	.avatar._lg img				{height:64px; width:64px;}
	.avatar._xl img				{height:128px; width:128px;}
	.avatar._2xl img			{height:256px; width:256px;}
	.avatar img.circle			{border-radius:50%; padding:var(--space-xs)}
	.avatar:after				{display:none; border:2px solid var(--foreground-color); border-radius:50%; content:""; position:absolute; right:-6px; top:-6px; z-index:21; width:16px; height:16px; }
	.avatar.online:after		{display:inline-flex; background-color:#05b714;}
	.avatar.away:after			{display:inline-flex; background-color:darkorange; }
	.avatar.offline:after		{display:inline-flex; background-color:#bfbfbf; }
	.avatar.pulse img			{animation: pulse 2s infinite; animation-iteration-count: 5; border-radius: 50%; padding: 1px; border: solid 2px var(--border-color);}
	.avatar.pulse:after			{display:none}

	.name						{display:inline-flex; white-space:nowrap; font-size:var(--font-size-xs); font-weight:var(--font-normal); line-height:1; gap:var(--space-4xs) }
	.name .code					{display:inline-flex; align-items:center; font-size:var(--font-size-xs); font-weight:var(--font-regular);}
	.name .code:before			{display:inline-flex; content:"@";}
	.name-row					{display:flex; flex-direction:column; gap:var(--space-3xs)}	
}
.accent-0, .accent-1, .accent-3 {display:none!important}

.accent-2			{display:inline-block; color:#1fa1f2; opacity:1;}
.accent-2:after		{opacity:1}
.accent-2:before	{color:white;}
	
.accent-3			{display:inline-block; color:var(--secondary-color); opacity:1;}
.accent-3:after	{opacity:1}
.accent-3:before	{color:white;}

.accent-4			{color:var(--primay-color);}
.accent-7			{color:var(--secondary-color);}

@scope (.member-card) {
	:scope	{box-shadow:var(--shadow); background-color:var(--foreground-color); border-radius:1.25rem; padding:0.75rem;  overflow:auto;}
	:scope.horizontal {display:grid; grid-template-columns:128px 1fr; gap:var(--space); padding:var(--space)}
	:scope.horizontal .body{margin:0;}
	img		{aspect-ratio:1/1; object-fit:cover; border-radius:0.825rem; width:100%;}
	.body	{margin:1rem; display:flex; flex-direction:column;}
	.name {display:inline-flex; align-items:center; gap:var(--space-3xs); font-size:var(--font-size-2xl); }
	.desc {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size:var(--font-size-xs); color:var(--blue-gray-5); font-weight:var(--font-regular); margin-top:var(--space-s)}
	.body .label	{display:inline-flex}
	
	.body > .footer .icon	{color:var(--blue-gray-5)}
	.body > .footer,
	.body > .actions		{display:flex; gap:var(--space-s); margin-top:var(--space);}
	.body > .actions		{justify-content:flex-end}
	:scope.horizontal .body > .actions		{justify-content:flex-end; margin-top:auto; padding-top:var(--space)}
	.body > .actions button	{border-radius:1rem; padding:0.5rem 1rem}

}
@keyframes pulse					{0% {box-shadow: 0 0 0 0 rgba(11, 156, 49, 0.8);}5% {transform: scale(1.01);}15% {transform: scale(1);}70% {box-shadow: 0 0 0 10px rgba(11, 156, 49, 0);}100% {box-shadow: 0 0 0 20px rgba(11, 156, 49, 0);}}



/*************************** Pager ***************************
****************************************************************/
@scope (.pager){
:scope							   {text-align:center; margin:var(--space-xl) auto;}
.pagination,.pagination >  li {list-style-type:none;margin-block-start:0; margin-block-end:0;    padding-inline-start:0 }
.pagination                        {align-items:stretch; background-color:var(--foreground-color); border:1px solid var(--border-color ); border-radius:var(--radius); display:inline-flex; justify-content:center; margin:0 auto; overflow:hidden;}
.pagination > li                    {place-content:center; place-items:center; border-right: 1px solid var(--border-color ); display:flex; padding:var(--space-xs); min-width:2.5rem; } 
.pagination > li > *                 {display:flex; align-items:center; justify-content:center; width:100%; height:100%;} 
.pagination > li > i                {display:flex; align-items:center; height:100%;} 
.pagination > li:last-child         {border-right: none}
.pagination > li:hover               {background-color:var(--gray-4)}
.pagination > li.selected, 
.pagination > li.selected *, 
.pagination > li.selected:hover
.pagination > li.selected:hover *
{background-color:var(--primay-color); color:var(--text-white)!important;}
}
/*************************** List ***************************
****************************************************************/
.item-spacer									{gap:var(--space);}
.item-spacer > *:not(:last-child)				{padding:0 0 var(--space) 0; border-right:none; border-bottom:1px solid var(--border-color)}

@media (min-width: 992px) {
	.item-spacer > *:not(:last-child)				{padding:0  var(--space) 0 0; border-bottom:none; border-right:1px solid var(--border-color)}
}
.count-list-horizontal							{display:grid; grid-template-columns:1fr; list-style: none; margin: 0; padding:0; counter-reset: item; }
.count-list-horizontal li						{display:flex;align-items:center;counter-increment: item;position: relative;}
.count-list-horizontal li::before				{content: counter(item);font-size: var(--font-size-4xl);font-family: var(--serif-font);text-align: center;min-width:48px;}
.count-list-horizontal .title					{overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

@media (min-width: 992px) {
	.count-list-horizontal							{grid-template-columns:repeat(5, 1fr); }
	.count-list-horizontal li						{display:flex;align-items:center;counter-increment: item;position: relative;}
	.count-list-horizontal li::before				{content: counter(item);font-size: var(--font-size-4xl);font-family: var(--serif-font);text-align: center;min-width:48px;}
}


@scope (ul.list-none)  {
	:scope									{display:flex; list-style:none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0px; padding-inline-start: 0;}
	li,
	li *:is(a)					{align-items:center; display:flex; column-gap:var(--space);}
	:scope._vertical					{flex-direction:column; row-gap:var(--space-s); }
	:scope._horizontal				{flex-direction:row; column-gap:var(--space-s); flex-wrap:nowrap}
	:scope._lined						{flex-direction:column; gap:0;}
	:scope._lined	> *					{border-top: 1px solid var(--border-color); gap:0; padding:var(--space-xs) var(--space-s);}
	:scope._lined	> *:hover			{background-color:var(--border-color)}
	:scope._lined	* [class*="hgi-"]	{font-size:var(--font-size-lg)}
	:scope._lined	> * > *:is(a)		{gap:var(--space-xs); white-space:nowrap; }
	:scope._lined	> *:first-child     {border-top-color: transparent;}
}
@scope (ul.list-group) {
	:scope					{display:flex; flex-direction:column; row-gap:var(--space-s); list-style:none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0px; padding-inline-start: 0;}
	li,li > *:is(a)			{align-items:center; display:flex; column-gap:var(--space-s); width:100%;}
	li > *.w-auto			{flex:0 0 auto;width: auto;}
	li > *.group-title		{display:block; color:var(--text-gray); font-size:var(--font-size-xs)}
	li hr					{margin:var(--space-xs) 0}
}
@scope (ul.tree-menu) {
	:scope					{border-left:1px solid var(--border-color);}
	li						{font-size:var(--font-size-s)}
	li > *					{display: flex;align-items: center;}
	li > *:before			{display:inline-block; background-color:var(--border-color-dark); width:.875rem; height:1px; content:"";}
	li > *:is(a)			{column-gap:var(--space-xxs)}
}
@scope (.notify-drawer-list) {
	:scope			{row-gap:0!important;}
	li				{align-items:flex-start!important; border-bottom:1px solid var(--border-color);}
	li > *:is(a)	{align-items:flex-start!important; padding:var(--space-m)}
	li .date		{display:block; font-size:var(--font-size-xxs);  margin-top:var(--space-xxs)}
	li .title		{display:block; font-weight:var(--font-medium); font-size:var(--font-size-xs); letter-spacing:normal;}

	.hgi-circle		{font-size:8px; margin-top:6px;}
	.icon			{color:var(--text-gray); margin-top:2px;}
	.read *			{color:var(--text-gray)}
	.read .hgi-circle		{color:var(--text-light-gray)}
	.unread					{background:var(--gray-0)}
	.unread	.hgi-circle		{display:inline-block; color:#17c684;}
	.unread .icon			{color:var(--primay-color);}
}

details > summary									{display:flex; align-items:center; flex-direction:row; gap:var(--space-s);list-style: none;cursor:pointer;}
details > summary::-webkit-details-marker			{display: none;}
details > summary .hgi-square-arrow-down-01		{transform: rotate(0deg);transition:all .5s;}
details[open] > summary .hgi-square-arrow-down-01	{transform: rotate(180deg);transition:all .5s;}
details > .content									{visibility:hidden; opacity:0; max-height:0; transition:all 1s}
details[open] > .content							{visibility:visible; opacity:1; max-height:50vh;  transition:all 1s}

ol.breadcrump,
ol.breadcrump li				{align-items:center; display:flex; gap:var(--space-4xs); font-size:var(--font-size-xs); list-style-type:none; padding:0; margin:0; white-space:nowrap;}
ol.breadcrump li:last-child		{display:inline-flex;  color:var(--text-blue-gray); overflow: hidden;}
ol.breadcrump li:last-child *	{display:inline-block; max-width:10vw; color:var(--text-blue-gray); overflow: hidden;  text-overflow: ellipsis; white-space:nowrap }
ol.breadcrump li [class*="hgi-stroke"]{font-size:var(--font-size-m)!important}

.timeline						{display:flex; flex-direction:column; gap:var(--space-lg)}
.timeline > .time				{align-items:stretch; display:grid; grid-template-columns:16px 1fr; gap:var(--space-xs);}
.timeline > .time .line			{display:grid; grid-template-rows:auto 1fr; justify-items:center;  height:100%;}
.timeline > .time .line:before	{display:inline-block; content:""; width:12px!important; height:12px!important; border-radius:50%; border:2px solid var(--border-color-dark)}
.timeline > .time .line:after	{display:inline-block; content:""; width:1px; height:100%; background-color:var(--border-color-dark) }
.timeline > .time .tag			{display: inline-flex;place-items: center;border-radius: 2px;color:var(--text-white);font-size: var(--font-size-xs);background-color: var(--accent-color);font-weight: var(--font-medium);padding: var(--space-3xs) var(--space-xs);margin-bottom:var(--space-xxs);}
.timeline > .time .tag:empty	{display:none}

/*************************** Icons ***************************
****************************************************************/
.icon-group									{align-items:center; display:flex; gap:var(--space-xxs); line-height:1 }
.icon-group .icon							{}
.icon-group .icon._2x						{font-size: 1.75rem;}
.icon-group .label							{display:none; font-size:var(--font-size-xs)}

@media (min-width: 992px) {
	.icon-group > *.label							{display:inline-flex;}
}

/*************************** Icons ***************************
****************************************************************/
.icon-group									{align-items:center; display:flex; gap:var(--space-xxs); }
.icon-group .icon							{}
.icon-group .icon._2x						{font-size: 1.75rem;}
.icon-group .label							{display:none}

@media (min-width: 992px) {
	.icon-group .label							{display:inline-flex; font-size:var(--font-size-xs)}
}

[class*="hgi-"]							{font-weight:400; font-size: 1.5rem;}
[class*="hgi-"]._xxs					{font-size: 0.5rem;}
[class*="hgi-"]._xs						{font-size: 0.75rem;}
[class*="hgi-"]._s						{font-size: 1rem}
[class*="hgi-"]._m						{font-size: 1.25rem;}
[class*="hgi-"]._2x						{font-size: 1.75rem;}
[class*="hgi-"]._3x						{font-size: 2rem;}
[class*="hgi-"]._4x						{font-size: 2.25rem;}
[class*="hgi-"]._5x						{font-size: 2.5rem;}
[class*="hgi-"]._6x						{font-size: 2.75rem;}
[class*="hgi-"]._7x						{font-size: 3rem;}
[class*="hgi-"]._8x						{font-size: 3.25rem;}
[class*="hgi-"]._16x					{font-size: 7rem;}

[class*="hgi-"].primary-color			{color:var(--primay-color);}
[class*="hgi-"].accent-color			{color:var(--accent-color);}
[class*="hgi-"].secondary-color			{color:var(--secondary-color);}

/*************************** Out Side Elements ***************************
************************************************************************/
drawer								{visibility:hidden;position:relative;z-index:9070;}
drawer[data-active=true]			{visibility:visible;}

drawer[data-backdrop=true]:before	{inset:0;content:"";background-color:rgba(0,0,0,0);backdrop-filter:blur(0px);z-index:9080}
drawer[data-backdrop=true]:before	{position:fixed;min-height:100vw;background-color:rgba(0,0,0,.5);backdrop-filter:blur(4px);min-width:100vw;}

drawer[data-active=false][data-direction=left] > .content{left:-100vw;border-right:1px solid var(--border-color);transition:all .3s}
drawer[data-active=false][data-direction=right] > .content{right:-100vw;border-left:1px solid var(--border-color);transition:all .3s}
drawer[data-active=true][data-direction=left] > .content{left:0;transition:all .3s}
drawer[data-active=true][data-direction=right] > .content{right:0;transition:all .3s}

drawer > .content						{background-color:var(--foreground-color);box-shadow:var(--shadow);height:100%;position:fixed;z-index:9081;width:320px;transition:all .3s;display:grid;grid-template-rows:auto 1fr auto}
drawer > .content .wrapper			{overflow-y:auto}
drawer > .content .wrapper::-webkit-scrollbar			{width: 6px;}
drawer > .content .wrapper::-webkit-scrollbar-track	{background: var(--border-color-light);}
drawer > .content .wrapper::-webkit-scrollbar-thumb,
drawer > .content .wrapper::-webkit-scrollbar-thumb:hover {background: var(--accent-color); }

drawer > .content > .header					{align-items:center; display:flex; gap:var(--space);background-color:var(--blue-gray-2); border-bottom:1px solid var(--border-color); padding:var(--space)}
drawer > .content > .header .title 			{flex: 1 0 0%; font-size:var(--font-size-lg);}
drawer > .content > .header .close 			{flex: 0 0 auto; width: auto; opacity:.5}
drawer > .content > .footer					{align-items:center; display:flex; gap:var(--space); background-color:var(--blue-gray-2); border-top:1px solid var(--border-color); padding:var(--space); justify-content:end;}

cookie											{display:none}
cookie[data-active=true]						{display:block; position:relative;z-index:9170;transition:all .5s}
cookie[data-active=true] > .content				{background-color:var(--foreground-color); border:1px solid var(--border-color); border-top-left-radius:var(--radius);  border-top-right-radius:var(--radius);  bottom:0; height:min-content; position:fixed; z-index:9181; width:clamp(300px,60%, 720px); transition:all .3s;display:grid; grid-template-rows:auto 1fr auto;  transform: translate(-50%, 0%); left: 50%; padding:var(--space)}

dialog										{border-radius:var(--radius); border: none !important; width:clamp(300px,50%, 600px); padding:0 }
dialog::backdrop						{background-image: linear-gradient(45deg,magenta,rebeccapurple,dodgerblue,green);opacity: 0.75;}
dialog > .content							{background-color:var(--foreground-color); grid-template-rows:auto 1fr auto}
dialog > .content  .head					{background-color:var(--blue-gray-2); align-items:center; display:flex; gap:var(--space-xs);  border-bottom:1px solid var(--border-color); padding:var(--space)}
dialog > .content  .head .icon 			{flex: 0 0 auto; width: auto;}
dialog > .content  .head .title 			{flex: 1 0 0%; font-size:var(--font-size-lg); }
dialog > .content  .head .close 			{flex: 0 0 auto; width: auto; opacity:.5}
dialog > .content  .footer					{align-items:center; display:flex; gap:var(--space); border-top:1px solid var(--border-color); padding:var(--space); justify-content:end;}
dialog > .content  .body					{overflow-y:auto; padding:var(--space)}

dialog.error > .content > .head				{background-color:var(--error-color); color:white;}
dialog.warning > .content > .head			{background-color:var(--warning-color); color:white;}
dialog.info > .content > .head				{background-color:var(--info-color); color:white;}
dialog.success > .content > .head			{background-color:var(--success-color); color:white;}

[data-name=popup]									{position: relative; z-index:10}
[data-name=popup][data-active=true]					{z-index: 10079}
[data-name=popup] > .content						{display:none; position: absolute; background-color: var(--foreground-color); border:1px solid var(--border-color); border-radius:var(--radius); box-shadow: var(--shadow-m); min-width: min-content; z-index: 10081;transition:all .5s; }
[data-name=popup] > .content li *:not(.hgi-stroke)			{font-size:var(--font-size-s); font-weight:var(--font-medium)}
[data-name=popup] [data-mn-toggle=popup] 			{align-items:center; display:flex; cursor:pointer; gap:var(--space-3xs)}
[data-name=popup][data-active=true] > .content		{display:block; min-width:5rem;}
[data-name=popup] .hgi-square-arrow-down-01							{transform: rotate(0deg);transition:all .5s;}
[data-name=popup][data-active=true] .hgi-square-arrow-down-01		{transform: rotate(180deg);transition:all .5s;}
[data-name=popup][data-direction=left] > .content					{left:0}
[data-name=popup][data-direction=right] > .content					{right:0}

.panel										{background-color:var(--foreground-color); border-radius:var(--radius); padding:var(--space)}

/*************************** Message & Alerts Elements ***************************
************************************************************************/
/* Snack Bar */
.snack-bar						{position:fixed; border-radius:var(--radius);background-color: var(--foreground-color); border:1px solid var(--border-color); box-shadow:var(--shadow-xl); transition:transform .3s ease,opacity .3s ease;opacity:0; overflow:hidden; transform:translateY(100%);z-index:20080; width:280px}
.snack-bar[data-active="true"]	{opacity:1;transform:translateY(0)}
.snack-bar > .content			{display:flex; flex-direction:column;}
.snack-bar > .content > .head 	{align-items:center; border-bottom:1px solid var(--border-color); display:flex; gap:var(--space-3xs);font-size:var(--font-size-s); padding:var(--space-xs)}
.snack-bar > .content > .body 	{font-size:var(--font-size-xs); font-weight:var(--font-regular); padding:var(--space-xs)}
.snack-bar.top-left				{top:1.5rem;left:1.5rem}
.snack-bar.top-right			{top:1.5rem;right:1.5rem}
.snack-bar.bottom-left			{bottom:1.5rem;left:1.5rem}
.snack-bar.bottom-right			{bottom:1.5rem;right:1.5rem}
.snack-bar.center				{top: calc(50% - 150px);left: calc(50% - 280px);}

.snack-bar .time-bar				{width:100%;height:4px; background:var(--gray-5); margin-bottom:-1px; overflow:hidden}
.snack-bar .time-bar-progress		{height:100%;width:100%; transition:width 15ms linear}
 
.snack-bar.error .time-bar-progress						{background-color:var(--error-color)}
.snack-bar.error > .content > .head  [class*="hgi-"],
.snack-bar.error > .content > .body						{color:var(--error-color)}
 
.snack-bar.warning .time-bar-progress					{background-color:var(--warning-color)}
.snack-bar.warning > .content > .head [class*="hgi-"], 
.snack-bar.warning .content > .body						{color:var(--warning-color)}
 
.snack-bar.info .time-bar-progress						{background-color:var(--info-color)}
.snack-bar.info > .content > .head [class*="hgi-"],
.snack-bar.info .content > .body						{color:var(--info-color)}
 
.snack-bar.success .time-bar-progress					{background-color:var(--success-color)}
.snack-bar.success > .content > .head [class*="hgi-"],
.snack-bar.success .content > .body						{color:var(--success-color)}

/* Hata ve Uyarı */
.message						{font-size:var(--font-size-s); border-radius:var(--radius); padding:var(--space-s); border:1px solid transparent}
.message > .content				{display:flex; flex-direction:column; gap:var(--space-xs)}
.message > .content > .head 	{border-bottom:1px solid transparent; align-items:center; display:flex; flex-direction:row; flex-wrap:nowrap; gap:var(--space-xxs); padding-bottom:var(--space-xs) }
.message > .content > .head > b	{color:var(--text)}
.message > .content > .body		{font-weight:var(--font-medium)}
.message.error					{color:var(--error-color); background-color:rgba(var(--error-color-rgb),.08);border-color:rgba(var(--error-color-rgb),.3)}
.message.warning				{color:var(--warning-color); background-color:rgba(var(--warning-color-rgb),.08);border-color:rgba(var(--warning-color-rgb),.3)}
.message.info					{color:var(--info-color); background-color:rgba(var(--info-color-rgb),.08);border-color:rgba(var(--info-color-rgb),.3)}
.message.success				{ color:var(--success-color); background-color:rgba(var(--success-color-rgb),.08);border-color:rgba(var(--success-color-rgb),.3)}
.message.empty					{background-color:var(--blue-gray-1); text-align:center}

.message.error		> .content > .head 			{border-color:rgba(var(--error-color-rgb),.2);}
.message.warning	> .content > .head 			{border-color:rgba(var(--warning-color-rgb),.2);}
.message.info		> .content > .head 			{border-color:rgba(var(--info-color-rgb),.2);}
.message.success	> .content > .head 			{border-color:rgba(var(--success-color-rgb),.2);}
.message.empty		> .content > .head 			{background-color:var(--blue-gray-1); text-align:center}


.text-error					{color:var(--error-color);}
.text-warning				{color:var(--warning-color);}
.text-success				{color:var(--success-color);}



/*Tooltip */
[data-tooltip]							{cursor:pointer}
.tooltip								{position:absolute;padding:var(--space-xs);border-radius:var(--radius);font-size:var(--font-size-xs);visibility:hidden; opacity:0; transition:opacity .5s ease;pointer-events:none;background-color:var(--foreground-color);border:1px solid var(--border-color-dark);border-radius:var(--radius);box-shadow:var(--shadow-m);min-width:min-content;z-index:181}
.tooltip.open							{visibility:visible;opacity:1;transition:opacity .5s ease;z-index:10081}
.tooltip::after							{border-width:8px; content:'';position:absolute;border-style:solid}
.tooltip[data-direction=top]::after		{margin-left:-8px; top:100%;left:50%;border-color:var(--border-color-dark) transparent transparent transparent}
.tooltip[data-direction=bottom]::after	{margin-left:-8px; bottom:100%;left:50%;border-color:transparent transparent var(--border-color-dark) transparent}
.tooltip[data-direction=left]::after	{margin-top:-8px; top:50%;left:100%;border-color:transparent transparent transparent var(--border-color-dark)}
.tooltip[data-direction=right]::after	{margin-top:-8px; top:50%;right:100%;border-color:transparent var(--border-color-dark) transparent transparent}


/*************************** Global Header ***************************
************************************************************************/
@scope (body > header)  {
	:scope {background-color:var(--light-color); border-bottom:1px solid var(--border-color)}
	.today > ul						{align-items:center; display:flex; gap:var(--space-m); list-style-type:none; margin:0 auto ; padding:var(--space) 0; width:var(--container)}
	.brands							{border-bottom:1px solid var(--border-color)}
	.brands > ul					{align-items:center; display:flex; gap:var(--space-m); list-style-type:none; margin:0 auto ; padding:var(--space-s) 0 var(--space) 0; width:var(--container)}
	.brands > ul > li				{flex:1; align-items:center; display:inline-flex;}
	.brands > ul > li:last-child	{justify-content:end; text-align:right}
	.brands *:is(.h1,h2)			{line-height:1; margin:0; padding:0; text-align:center;}

	.brands .h1						{font-family:var(--serif-font); font-size:var(--font-size-7xl); font-weight:var(--font-bold);}
	.brands .h2						{display:none; font-size:var(--font-size-s); margin-top:var(--space-xxs); color:var(--text-gray); }

	@media (min-width: 992px) {
		.brands .h1						{font-size:var(--font-size-7xl)}
		.brands .h2						{display:block; font-weight:var(--font-regular)}
	}

	nav								{display:flex; gap:var(--space);  width:var(--container); margin:0 auto; }
	nav	> ul:first-child			{overflow-y:auto}
	nav > ul,
	nav > ul > li					{display:flex; gap:var(--space); list-style-type:none; padding:0; margin:0}
	nav > ul > li > *				{align-items:center ;border-bottom:1px solid transparent; display:flex; font-size:var(--font-size-s); gap:var(--space-4xs); min-height:var(--input-height-lg);  padding:0; white-space:nowrap}
	nav > ul > li > *:is(.selected)	{border-bottom:1px solid var(--text); }
	nav > ul:first-child > li > *:hover			{border-bottom:1px solid var(--primay-color); }
	nav > ul > li > ul				{display:flex; list-style-type:none; margin:0 auto; padding:0;}
	nav > ul > li > ul > li 		{align-items:center; display:flex; min-height:24px;}
	nav > ul > li > ul > li *		{align-items:center ;  display:flex; min-height:24px;}
}
@scope (body > footer)  {
	:scope						{background-color:var(--blue-gray-3)}
	:scope *					{line-height:1.725}
	*:not(b,i)					{font-size:var(--font-size-s); font-weight:var(--font-regular)}
	
}

/*************************** Swiper Kontrolleri ***************************
****************************************************************************/
.swiper							{width: 100%;height: 100%;}
.swiper-pagination-bullets										{display:flex; align-items:center; justify-content:center;}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {background-color:var(--swiper-color); opacity:1}
.swiper-autoheight .swiper-wrapper								{align-items:unset!important}
.default-swiper-radius											{border-radius:var(--radius);}
.default-swiper-pagination										{background-color:var(--foreground-color); align-items:center; border-top:none; display:flex; gap:0; overflow:hidden;}
.default-swiper-pagination .swiper-pagination-bullet			{all:unset;}
.default-swiper-pagination .swiper-pagination-bullet			{display:block; transition:all .3s;  min-width: 0; margin:0!important; text-align:center!important; width:100%!important; }
.default-swiper-pagination .swiper-pagination-bullet:not(:last-child) {border-right:1px solid var(--border-color )}
.default-swiper-pagination .swiper-pagination-bullet-active,
.default-swiper-pagination .swiper-pagination-bullet:hover				{transition:all .3s; background-color:var(--secondary-color); color:var(--text-white); border-right-color:var(--secondary-color)}
.default-swiper-pagination .swiper-pagination-bullet					{font-size:1rem; padding:var(--space-xs) 0;}

.default-swiper-bullet                           {align-items:center; justify-content:center; display:inline-flex; gap:var(--space-xs); margin-top:var(--space); min-height:1.25rem}
.default-swiper-bullet .swiper-pagination-bullet {all:unset;}
.default-swiper-bullet .swiper-pagination-bullet {background-color:var(--secondary-color); opacity:0.2; transition:all 1s; display:inline-block; border-radius:50%; width: .875rem!important; height:.875rem!important; margin:0!important;padding:0}
.default-swiper-bullet .swiper-pagination-bullet-active,
.default-swiper-bullet .swiper-pagination-bullet:hover {opacity:1; transition:all 1s; background-color:var(--secondary-color); color:var(--white)}

.default-swiper-bullet .swiper-pagination-bullet-active {transform:scale(1.3);}

.default-swiper-pagination-all {border-left:1px solid var(--border-color ); background-color:var(--foreground-color); display:flex; place-content:center; place-items:center;  min-width: 0; margin:0!important; text-align:center!important; width:max-content }
.default-swiper-pagination .swiper-pagination-bullet, .default-swiper-pagination-all {padding:var(--space-xs);}

.main-headline .swiper-wrapper,.media-headline .swiper-wrapper	{height:unset!important}
.top-headline .swiper-wrapper .swiper-slide						{height:auto;}
/*************************** Anasayfa Kontrolleri ***************************
****************************************************************************/
@scope (.headline-area) {
	:scope													{display:grid; gap:var(--space-xl); grid-template-columns:1fr}
	.main-headline-area										{order:1; gap:var(--space-xl); display:grid; grid-template-columns:1fr;}
	.main-headline-area	.right-headline-area				{display:grid; gap:var(--space-xl); grid-template-columns:repeat(2,1fr)}
	.main-headline-area	.right-headline-area .item:last-child 	{display:none}
	.main-headline-area	.headline-container					{display:grid; grid-template-columns:1fr; gap:var(--space-xl);}
	.main-headline-area	.headline-container					{grid-template-rows:auto minmax(50px, auto) minmax(90px, 1fr); }
	.media-headline-area									{order:2; gap:var(--space-xl); display:grid; grid-template-columns:1fr; grid-template-rows:1fr auto auto minmax(90px, auto)}
	.media-headline-area	.social-area					{background-color:var(--foreground-color);  border-radius:var(--radius); display:grid; transition:all .5s; place-content:center; place-items:center; margin:0 auto; width:100%}
	.media-headline-area	.social-area:hover				{opacity:.8; transition:all .5s}
	.headline-widget										{background-color:var(--foreground-color); display:grid; place-content:center; place-items:center}
	@media (min-width: 992px) {
		:scope																		{grid-template-columns:1fr 300px}	
		.media-headline-area														{grid-template-rows:1fr auto auto minmax(120px, auto)}
		.main-headline-area	.right-headline-area									{grid-template-columns:repeat(3,1fr)}
		.main-headline-area	.right-headline-area .item:last-child 					{display:flex}
	}
	@media (min-width: 1400px) {
		:scope											{grid-template-columns:1fr 300px}
		.main-headline-area								{grid-template-columns:1fr 200px;}
		.main-headline-area	.right-headline-area		{grid-template-columns:1fr}
		.main-headline-area	.headline-container			{grid-template-rows:auto minmax(50px, auto) minmax(90px, 1fr); }
		.headline-widget								{background-color:var(--foreground-color); display:grid; place-content:center; place-items:center}
		.media-headline-area							{order:2; gap:var(--space-xl); display:grid; grid-template-columns:1fr; grid-template-rows:1fr auto auto}
		.media-headline-area	.social-area			{display:none}
	}
}

@scope (.currency) {
	:scope								{align-items:center; border-radius:4px; background-color:var(--foreground-color); display:flex; justify-content:space-between; padding:var(--space-s); overflow:hidden}
	:scope > *							{flex:1; white-space:nowrap}
	.cur_item							{display:flex; flex-direction:column; place-content:center;}
	.cur_item:last-child				{display:none}
	.cur_item .name						{display:flex; align-items:center; font-size:var(--font-size-s);}
	.cur_item .value					{display:inline-flex; flex-direction:column; font-weight:var(--font-regular); gap:2px; font-size:var(--font-size-xxs);  border-radius:4px;}
	.cur_item .change					{padding:2px 4px; font-size:var(--font-size-xxs);  border-radius:4px; width:max-content}
	.cur_item [class*="hgi-"]			{font-size: 16px;}
	.cur_item i[class*="up"]			{color: #17c684;}
	.cur_item i[class*="down"]			{color: #ea0e0f;}
	.cur_item [class*="change up"]		{background-color: #17c684; color:white;}
	.cur_item [class*="change left"]	{background-color: #b5b5b5; color:white;}
	.cur_item [class*="change down"]	{background-color: #ea0e0f; color:white;}
	.cur_item .hgi-arrow-left-01		{color: #b5b5b5;}
	@media (min-width: 992px) {
		.cur_item:last-child				{display:flex;}
		.cur_item .value					{align-items:center; flex-direction:row}
	}
}
@scope (.home-weather) {
 	:scope								{border-radius:var(--radius); background-color:var(--foreground-color); margin:auto; width:100%}
	.content 							{display:grid; grid-template-columns:repeat(2,1fr); align-items:center;}
	.content *							{flex-grow:1; line-height:1.125; }
	.content .item						{align-items:center; display:flex; flex-direction:row; padding:0 var(--space); font-size:var(--font-size-s)}
	.content.all-item 					{grid-template-columns:repeat(6,1fr);}
	.content.all-item > .item			{display:flex; align-items:center; font-size:var(--font-size-3xs); flex-direction:column; gap:0; padding:var(--space-xxs) }
}
@scope (.bar-news) {
	:scope					{background-color:var(--foreground-color); display:flex; align-items:center; border-radius:var(--radius); overflow:hidden; padding-right:var(--space-xs)}
	:scope:before			{display:none; width:max-content; content:"SON DAKİKA"; background-color:var(--secondary-color); color:var(--text-white); padding:var(--space-s); white-space:nowrap}
	.content				{padding:var(--space-s); overflow:hidden; font-size:var(--font-size-s)}
	.swiper-slide			{transition: opacity .5s; flex-shrink:1; white-space:nowrap; width:auto; opacity:.1; filter:blur(2px)}
	.swiper-slide:hover,
	.swiper-slide-active	{transition: opacity .5s; opacity:1; filter:blur(0px)}
	.date					{display:inline-flex; background-color:var(--secondary-color); color:var(--text-white)!important; padding:4px 6px; border-radius:var(--radius); overflow:hidden;}
	.swiper-slide-next,
	.swiper-slide-prev		{opacity:.2; filter:blur(1px)}
	[class*="hgi"]			{transition:all .5s; cursor:pointer; opacity:.2;}
	[class*="hgi"]:hover	{transition:all .5s; opacity:1;}

	@media (min-width: 992px) {
		:scope:before	{display:inline-block; }
		.content		{padding:0 var(--space-s); }
	}
}
/*************************** Haber Kutusu Tasarımı ***************************
****************************************************************************/
.item-list						{position:relative;}
.item-list a					{display:block;}
.item-list .item				{display:flex; flex-direction:column; gap:var(--space-xs); position:relative; z-index:1;}
.item-list .item .thumb			{display:block; position:relative; z-index:2; overflow:hidden}
.item-list .item .thumb img		{aspect-ratio:2/1; display:block; object-fit:cover; width:100%;transform:scale(1); transition:all .3s; }
.item-list .item:hover .thumb img	{transform:scale(1.05); transition:all .3s }
.item-list .item .title			{overflow: hidden; display: -webkit-box; line-height: 1.425; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.item-list .item *:is(.category, .tag)		{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:block; font-size:var(--font-size-xs); color:var(--text-secondary)}
.item-list .item .tag						{text-align:right}
.item-list .item *:is(.category:hover, .tag:hover)		{color:var(--text-secondary-hover)}
.item-list .item .description				{display: -webkit-box;-webkit-box-orient: vertical; font-size:var(--font-size-xs); font-weight:var(--font-regular); line-height: 1.425; color:var(--text-dark-gray); margin-top: var(--space-s);-webkit-line-clamp: 2 !important;overflow: hidden;}
.item-list .item .date-with-icon	{align-items:center; background-color: rgba(var(--secondary-color-rgb), 0.1); border:1px solid rgba(var(--secondary-color-rgb), 0.4); padding:4px 12px; border-radius:16px;  display:inline-flex; gap:var(--space-xs);}
@scope (.item-list) {
	.showcase				{display:flex; align-items:center; border-top-right-radius:2px; border-bottom-right-radius:2px; position: absolute;  transform:translateY(-50%); top: 50%; left:0px; z-index:5; font-size:var(--font-size-xxs); padding:var(--space-xxs); max-width:75%}
	.showcase:empty			{display:none!important;}

	.showcase .hgi			  {font-size:var(--font-size-xs)}
	.showcase.important      {animation: primary-color 1.5s infinite linear; color: var(--text-white);}
	.showcase.breaking		{animation: secondary-color 1.5s infinite linear; color: var(--text-white);}
	.showcase.flash			{animation: third-color 1.5s infinite linear; color: var(--text-white);}
}

@keyframes primary-color {
0%		{ background: #1677ff }
50%		{ background: #003eb3 }
100%	{ background: #1677ff }
}
@keyframes secondary-color {
	0%		{ background: #f5222d }
	50%		{ background: #a8071a }
	100%	{ background: #f5222d }
}
@keyframes third-color {
	0%		{ background: #28a745 }
	50%		{ background: #2ebb4f }
	100%	{ background: #28a745 }
}
	

.item-list .item .date			{color:var(--text-gray); font-size:var(--font-size-xs)}
.item-list.item-radius .thumb				{border-radius:var(--radius); overflow:hidden;}

.item-is-media .item .thumb .media-icon							{ --webkit-backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background-color: rgba(255, 255, 255, .43); border-radius: 100%; bottom: auto; color: #fff; display: grid; height: 64px; left: 50%; line-height: 64px; place-content: center; place-items: center; position: absolute; right: auto; text-align: center; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 5;}
.item-is-media .item .thumb .media-icon *[class*="hgi-"]		{font-size:2rem!important}


.item-bg .item					{background-color:var(--light-color); padding-bottom:var(--space-s)}
.item-bg .item .title,
.item-bg .item *:is(.category, .tag, .description)		{padding:0 var(--space-s)}
.item-bg.item-radius .thumb				{border-radius:0;}
.item-bg.item-radius .item				{border-radius:var(--radius); overflow:hidden;}

.item-normal .item .title		{font-size:var(--font-size-s);}

.item-small .item .title		{font-size:var(--font-size-xs);}
.item-small .item *:is(.category, .tag)		{font-size:var(--font-size-xxs);}

.item-large .item .title		{font-size:var(--font-size-lg);}
.item-large .item *:is(.category, .tag)		{font-size:var(--font-size-s);}

.item-xl .item .title						{font-size:var(--font-size-xl); font-weight:var(--font-bold)}
.item-xl .item *:is(.category, .tag)		{font-size:var(--font-size);}

.item-2xl .item .title						{font-size:var(--font-size-2xl); line-height:1.25; font-weight:var(--font-bold)}
.item-2xl .item *:is(.category, .tag)		{font-size:var(--font-size);}


.item-covered .item				{position:relative; z-index:1}
.item-covered .item .thumb:before		{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0.8), transparent); z-index:5}
.item-covered .item .thumb img	{aspect-ratio:3/3.5; object-fit:cover;}
.item-covered .item .content .wrapper	{position: absolute; inset: auto var(--space-m) var(--space-m) var(--space-m);z-index: 6;}
.item-covered .item .content, .item-covered .item .content .wrapper		{display:flex;flex-direction:column;}
.item-covered .item .title			{color:var(--text-white)}
.item-covered .item .description	{color:var(--text-white)}
.item-covered .item *:is(.category, .tag)		{display:inline-flex; background-color:var(--secondary-color); color:var(--text-white); padding:var(--space-xxs); margin-bottom:var(--space-xs)}
.item-covered .item *:is(.category:hover, .tag:hover)	{color:var(--text-white)}
.item-covered.item-radius .thumb			{border-radius:0;}
.item-covered.item-radius .item				{border-radius:var(--radius); overflow:hidden;}

.media-headline-area .item-covered .item .thumb img		{aspect-ratio:16/10;}

/*************************** Kategori Tasarımı ***************************
****************************************************************************/

section.content-category .item-list                            {display:grid; gap:var(--space-xl); grid-template-columns:1fr;}

@media (min-width: 992px) {
    section.content-category .item-list                            {display:grid; gap:var(--space-xl); grid-template-columns:repeat(3, 1fr);}
    section.content-category .item-list .item:first-child          {grid-column:span 3}
	section.content-category .item-list .item:nth-child(n+14)		{align-items:center; display:grid; grid-template-columns:300px auto; grid-column:span 3}

}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}
.category-list-one										{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-xl)}
.category-list-one .item .description					{display:none}
.category-list-one *:first-child						{grid-column:span 2; }
.category-list-one .item:is(:first-child) .title		{font-size:var(--font-size-2xl); font-weight:var(--font-bold);}

.category-list-two										{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-xl)}
.category-list-two  .item .description					{display:none}
.category-list-two *:nth-child(-n+1)					{grid-column:span 2; }
.category-list-two *:nth-child(-n+1) .description		{display:-webkit-box}

.category-list-three									{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-xl)}	
.category-list-three *:nth-child(-n+2)					{grid-column:span 2; }
.category-list-three *:not(:nth-child(-n+2))	.description			{display:none;}


@media (min-width: 992px) {
	.category-list-one					{grid-template-columns:repeat(3, 1fr)}	
	.category-list-one .item .description					{display:-webkit-box}
	.category-list-one .item:not(:first-child) .description	{display:none}
	.category-list-one .item:is(:first-child) .title		{font-size:var(--font-size-2xl); font-weight:var(--font-bold); line-height:1.325}
	.category-list-one *:first-child						{grid-column:span 2; grid-row:span 2}

	.category-list-two										{display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--space-xl)}
	.category-list-two *:nth-child(-n+3)					{grid-column:span 4; }
	.category-list-two *:nth-child(-n+3) .description		{display:-webkit-box}

	.category-list-two *:not(:nth-child(-n+3))				{grid-column:span 3; }
	.category-list-two *:not(:nth-child(-n+3)) .description		{display:none}


	.category-list-three									{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-xl)}	
	.category-list-three *:nth-child(-n+2)					{grid-column:span 2; }
	.category-list-three *:not(:nth-child(-n+2))	.description			{display:none;}

}
@media (min-width: 1400px) {
	.category-list-one					{grid-template-columns:repeat(4, 1fr)}
	.category-list-one *:first-child	{grid-column:span 2; grid-row:span 2}
}


/*************************** İçerik Detay **********************************
****************************************************************************/
@scope (.article)  {
:scope									{background-color:var(--foreground-color); padding:var(--space-xl) 0;}
aside									{display:none}
.container 								{display:grid; column-gap:0; row-gap:0; grid-template-columns:1fr; }

article > .header						{display:flex; flex-direction:column; gap:var(--space)}
article > .header > h1					{font-size:var(--font-size-5xl); line-height:1.250; font-weight:var(--font-bolder)}
article > .header > h2					{font-size:var(--font-size-lg);  line-height:1.625; font-weight:var(--font-normal)}
article > .header > .info				{color:var(--text-blue-gray); display:flex;  align-items:center; justify-content:space-between; font-size:var(--font-size-s); gap:var(--space); flex-wrap:wrap;}
article > .header > .info > *			{display:flex; flex-direction:column; gap:var(--space-3xs)}


article > .body > .detail		{font-family:var(--sans-font); line-height:1.625; font-size:1.125rem; letter-spacing:normal; font-weight:normal; margin:var(--space-lg) 0}
article > .body > .detail *		{max-width:100%;}
article > .body > .detail *:is(h2)		{font-size:var(--font-size-2xl); font-family:var(--default-font); line-height:normal; font-weight:var(--font-bold)}
article > .body > .detail *:is(h3)		{font-size:var(--font-size-3xl); font-family:var(--default-font); line-height:normal; font-weight:var(--font-bold)}
article > .body > .detail > img	{display:block; margin:auto;}
article > .body > .detail > .tag			{color:var(--text-secondary); font-weight:var(--font-normal);}
article > .body > .detail > .tag:hover	{color:var(--text-secondary-hover);}
article > .body > figure				{margin-block-start: unset; margin-block-end: unset; margin-inline-start: unset; margin-inline-end: unset;}
article > .body > figure figcaption	{font-size:var(--font-size-s); color:var(--text-blue-gray); text-align:center;}
article > .body > .link-template      { margin:var(--space-m) 0}
article > .body > .link-template a    {background-color:var(--secondary-color); color:var(--light-color);  font-weight:500; padding:var(--space-m); border-radius:var(--radius); overflow:hidden; align-items:flex-start; display:grid; column-gap:var(--space); margin:var(--space) 0; grid-template-columns:1fr 3fr;}
article > .body > .link-template a:hover    {color:rgba(var(--light-color-rgb),.8)!important;}
article > .body > .link-template .button {color:var(--secondary-color)!important;}
article > .body > .video-template                           {margin:var(--space-2xl) 0; display:none!important}
article > .body > .video-template .template                  {background-color:var(--gray); padding:var(--space);}
article > .body > .video-template .template h3                 {display:inline-block; color: var(--heading-text); font-size: 1.125rem; font-weight: var(--font-bolder);  font-family: var(--sans-font); margin-bottom:var(--space-xs); line-height: 1.425;}
article > .body > .video-template .template span                {display:block; color:var(--text-dark-gray); font-size:0.875rem; line-height:1.425}
article > .body > .gallery-template                         {margin:var(--space-2xl) 0}
article > .body > .gallery-template figure                  {padding:0; margin:0}
article > .body > .gallery-template figure img              {display:block; width:100%;}

article > .footer						{}


article .tags							{display:inline-flex; align-items:center; gap:var(--space-s); margin-bottom:var(--space)}
article .tags > .tag					{display:inline-flex; place-items:center; border-radius:var(--radius); font-size:var(--font-size-s); background-color:var(--blue-gray-2); font-weight:var(--font-medium); padding:var(--space-xs); width:max-content}
article .tags > .tag:hover				{background-color:var(--secondary-color); color:var(--text-white);}

.reactions								{display:flex;gap:var(--space-s);justify-content:center;margin:var(--space-4xl) auto;}
.write-comment		{background-color:var(--blue-gray-1); border:1px solid var(--border-color); border-radius:var(--radius); display:flex; flex-direction:column; gap:var(--space-m); padding:var(--space);}
.similar				{background-color:var(--blue-gray-3); padding:var(--space-xl); border-radius:var(--radius); margin:var(--space-4xl) auto;}
	@media (min-width: 992px) {
		.similar				{width:70%;}
	}
}
@media (min-width: 992px) {
@scope (.article)  {
	aside					{display:unset}
	.container							{column-gap:var(--space-3xl); row-gap:0; grid-template-columns:1fr 300px}
	article > .header					{grid-column:span 2;}
	article > .header > h1				{font-size:var(--font-size-7xl);}
	article > .content > .body	> .detail			{margin:var(--space-xl) var(--space-5xl) var(--space-4xl) var(--space-5xl); line-height:1.625; font-size:1.25rem; font-weight:normal;}
	
	article > .header > .info 				{justify-content:flex-start}
	article > .header > .info > *			{align-items:center; flex-direction:row;}
	}

}

/* İçerik Tepkileri */


/*************************** Kullanıcı İçerikleri **********************************
****************************************************************************/
/* Yorumlar */
@scope (.user-contents) {
:scope									{display:flex; flex-direction:column; }
.user-content							{ display:flex; border-top:1px solid var(--border-color); font-size:var(--font-size-xs); font-weight:var(--font-regular); flex-direction:column; padding-top:var(--space); margin-top:var(--space);gap:var(--space-xs)}
.user-content >  .head					{align-items:center; display:flex; justify-content:space-between; gap:var(--space-xs);}
.user-content >  .head .member			{align-items:center; display:grid; grid-template-columns:auto 1fr; gap:var(--space-s)}
.user-content >  .head .member	.date	{flex-shrink:1}

.user-content >  .head .action			{display:flex;color:var(--text-blue-gray);   align-items:center; gap:var(--space-s); margin-left:auto}
.user-content >  .head .action	[class*="hgi-"]		{font-size:1.25rem}

@media (min-width: 992px) {
	.user-content > .head .action				{display:none;}
	.user-content:hover  .head .action			{display:flex;}
}

.user-content >  .content								{line-height:1.5;}
.user-content >  .content .icon-group					{gap:var(--space-xxs); margin-top:var(--space-s)}
*[data-name="text-truncate"]	{display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}

.user-content >  .footer						{color:var(--text-blue-gray);  grid-column:span 2; display:flex; gap:var(--space); margin:var(--space-xxs) 0}
.user-content >  .footer .icon-group 			{gap:var(--space-3xs);}
.user-content >  .footer .icon-group .label		{font-size:var(--font-size-xxs); font-weight:var(--font-regular); letter-spacing:normal}
.user-content >  .footer [class*="hgi-"]		{align-items:center; font-size:1.25rem}
.user-content >  .footer [class*="hgi-stroke"]	{align-items:center; font-size:1.25rem}

.user-content .sub-contents {display:none}
.user-content .sub-contents[data-active="true"] {display:block}

.user-content.sub-content {margin:0 0 0 var(--space-5xl); padding:var(--space) 0 var(--space) var(--space); border-bottom:none;}
.user-content.sub-content {position:relative; z-index:5}
.user-content.sub-content::before {display:block; position:absolute; content:""; left:-20px; top:20px; height:45%; width:20px; border-left:1px solid var(--border-color-dark); border-bottom:1px solid var(--border-color-dark); z-index:6; margin-right:10px; }
}

[data-mn-reaction="like-comment"]:hover *,
[data-mn-reaction="like-comment"]:hover .hgi-stroke,
[data-mn-reaction="like-comment"]:hover .hgi-stroke + * {color:var(--success-color)!important}

[data-mn-reaction="dislike-comment"]:hover *,
[data-mn-reaction="dislike-comment"]:hover .hgi-stroke,
[data-mn-reaction="dislike-comment"]:hover .hgi-stroke + * {color:var(--error-color)!important}




.finance-band 					{background:var(--foreground-color);} 
.finance-band *					{align-items:center; } 
.finance-band *:not(i)			{font-family:'Google Sans', sans-serif;  font-size:var(--font-size-xxs)} 
.home-service-band [class*="down"], 
.finance-band [class*="down"]   {color: rgb(255, 0, 0);}	

.home-service-band [class*="up"], 
.finance-band [class*="up"]     {color: rgb(0, 180, 70);}  



.home-service-band  						{background-color:var(--foreground-color);  margin-top:var(--space-lg) }
.home-service-band ul 						{display:grid; grid-template-columns:repeat(3, 1fr); list-style-type:none;  padding:0; margin:0}
.home-service-band ul li					{align-content:center; align-items:center; border-radius:var(--radius); padding:var(--space-xs); overflow:hidden;} 
.home-service-band ul li, 
.home-service-band ul li form				{display:flex; flex-direction:column; gap:var(--space-xxs);}
.home-service-band ul li:not(:last-child) 	{text-align:center;}
/*.home-service-band *:is(i)				{color:var(--accent-color)} */
.home-service-band *:is(:not(b,i))			{font-size:var(--font-size-xs); white-space:nowrap!important; text-overflow:ellipsis;} 
.home-service-band ul li:nth-child(n+4)		{display:none}


@media (min-width: 992px) {
	.home-service-band ul 						{ grid-template-columns:repeat(6, 1fr);}
	.home-service-band ul li:nth-child(n+4)			{display:flex}
}

/*Widgets*/
[class*=widget-]      {background-color:var(--blue-gray-3); display:grid;  place-items:center; margin:auto; overflow:hidden!important}
.widget-300x250       {height:250px; width:300px;}
.widget-970x250       {height:100px; width:320px;  margin-left: auto; margin-right:auto}
.widget-300x600       {height:250px; width:300px;}

@media (min-width: 992px) {
.widget-970x250       {height:270px; width:970px; margin-left: auto; margin-right:auto}
.widget-300x600       {height:600px; width:300px;}
}