/* #region BASE */
	/* #region CONFIGURATION */
		:root {
			--border-radius: 50%;
			--border-radius-corner: 1rem;
			--hover-duration: 0.25s;
			--animation-duration: 1.5s;
			--background-transparency: 0.5;
			--background-transparency-percent: 40%;
			--color-background: #ECEEF4;
			--color-background-secondary: #D0D7E6;
			--color-primary: #0B3E78;
			--color-secondary: #50a3e2;
			--color-text-headline: #0C1F60;
			--color-accent: #25AF82;
			--color-whatsapp: #0CC437;
			--gap-1: 0.75rem;
		}
	/* #endregion */

	/* #region BROWSER LIMITATION */
		html { /* Font Boosting engeller. */
			-webkit-text-size-adjust: 100%;
			-moz-text-size-adjust: 100%;
			text-size-adjust: 100%;
		}

		html, body { /* Scrollbar'ı kaldırır ve sayfanın kaymasını engeller. */
			width: 100%;
			overflow-x: hidden;
			scrollbar-width: none;
			-ms-overflow-style: none;
		}

		body { /* Tarayıcıların karanlık tema müdahalelerini sıfırlar. */
			forced-color-adjust: none;
			-webkit-forced-color-adjust: none;
		}

		:root { /* Tarayıcıların karanlık tema müdahalelerini sıfırlar. */
			color-scheme: light only;
		}

		*, *::before, *::after { /* CSS Reset: Farklı tarayıcıların varsayılan boşluklarını sıfırlar. */
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		::-webkit-scrollbar { /* Scrollbar'ı kaldırır. (IOS Safari, Chrome, Edge ve tüm WebKit tarayıcılar.) */
			width: 0;
			height: 0;
			display: none;
		}

		img, picture, video, canvas, svg { /* Medya elemanlarının taşmasını önler. */
			display: block;
			max-width: 100%;
		}

		h1, h2, h3, h4, h5, h6, span, a, input, button, textarea, select { /* Yazı elemanlarında sistem fontlarını ezer. */
			font: inherit;
			font-weight: bold;
			text-decoration: none;
		}
	/* #endregion */

	/* #region CONSTRUCTION */
		.content-horizontal-left { /* İçeriği yatay dizer ve sola hizalar. */
            display: flex;
            justify-content: flex-start;
            align-items: center;
            text-align: left;
        }

		.content-horizontal-between { /* İçeriği yatay dizer ve kenarlara hizalar. */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

		.content-horizontal-center { /* İçeriği yatay dizer ve ortaya hizalar */
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		.content-horizontal-right { /* İçeriği yatay dizer ve sağa hizalar */
			display: flex;
			justify-content: flex-end;
			align-items: center;
			text-align: right;
		}

		.content-horizontal-evenly { /* İçeriği yatay dizer ve boşluğu kenarlara ve aralara eşit dağıtır. */
			display: flex;
			justify-content: space-evenly;
			align-items: center;
		}
		
		.content-vertical-start { /* İçeriği dikey dizer ve üste hizalar. */
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}

		.content-vertical-between { /* İçeriği dikey dizer ve kenarlara hizalar. */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

		.content-vertical-middle { /* İçeriği dikey dizer ve ortaya hizalar */
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.content-vertical-end { /* İçeriği dikey dizer ve alta hizalar */
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}

		.content-vertical-evenly { /* İçeriği dikey dizer ve boşluğu kenarlara ve aralara eşit dağıtır. */
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}

		.self-auto { /* DEFAULT: Kapsayıcısının varsayılan hizalamasını uygular. */
			align-self: auto;
		}

		.self-start { /* Kendisini sola veya üste hizalar. */
			align-self: flex-start;
		}

		.self-center { /* Kendisini yatayda veya dikeyde ortaya hizalar. */
			align-self: center;
		}

		.self-right-end { /* Kendisini yatayda sağa veya dikeyde alta hizalar. */
			align-self: flex-end;
		}

		.self-stretch { /* Kendisini kapsayıcı genişliği veya yüksekliği boyunca esnetir. */
			align-self: stretch;
		}

		.self-baseline { /* Kendisini metin taban çizgisine göre hizalar. */
			align-self: baseline;
		}

		.row {
			width: 100%;
			height: auto;
			margin: 0;
			display: flex;
			flex-wrap: wrap;
		}

		[class*="col-"] {
			width: 100%;
			flex: 0 0 100%;
			max-width: 100%;
		}

		.col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
		.col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
		.col-md-3  { flex: 0 0 25%; max-width: 25%; }
		.col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
		.col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
		.col-md-6  { flex: 0 0 50%; max-width: 50%; }
		.col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
		.col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
		.col-md-9  { flex: 0 0 75%; max-width: 75%; }
		.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
		.col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
		.col-md-12 { flex: 0 0 100%; max-width: 100%; }

		.container {
			width: 80%;
			margin: 0 auto;
			padding: var(--gap-1);
			position: relative;
		}

		@media (max-width: 1178px) {
			.container {
				width: 100%;
				padding: 0;
			}
		}
	/* #endregion */

	/* #region RESPONSIVE BASIC */
		.hide {
			display: none;
		}

		.mobile-visible {
			display: none !important;
		}

		.mobile-menu-close {
			display: none !important;
		}

		#mobile-menu.hide {
			display: none;
			transform: translateX(-100%);
			opacity: 0;
			visibility: hidden;
			transition: transform var(--hover-duration) ease-out, opacity var(--hover-duration) ease-out, visibility var(--hover-duration);
		}

		#mobile-menu {
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: 1000;
			display: none;
			transform: translateX(-100%);
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			overflow-y: auto;
		}

		#mobile-menu.is-open {
			display: flex;
			animation: animation-slide-left var(--hover-duration) cubic-bezier(0.15, 0.8, 0.5, 1) both;
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		body.menu-open {
			overflow: hidden;
		}

		@media (max-width: 1178px) {
			.mobile-hide {
				display: none !important;
			}

			.mobile-visible {
				display: flex !important;
			}

			.mobile-menu-open,
			.mobile-menu-close {
				animation: animation-flip var(--hover-duration) ease-out forwards;
			}

			body.menu-open .mobile-menu-open {
				display: none !important;
			}

			body.menu-open .mobile-menu-close {
				display: flex !important;
			}
		}
	/* #endregion */
/* #endregion */

/* #region SPECIAL */
	/* #region BASE */
		@font-face {
			font-family: 'Century Gothic';
			src: url('fonts/GOTHIC.woff2') format('woff2');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Century Gothic';
			src: url('fonts/GOTHICB.woff2') format('woff2');
			font-weight: bold;
			font-style: normal;
		}
		
		@font-face {
			font-family: 'Century Gothic';
			src: url('fonts/GOTHICBI.woff2') format('woff2');
			font-weight: bold;
			font-style: italic;
		}

		@font-face {
			font-family: 'Century Gothic';
			src: url('fonts/GOTHICI.woff2') format('woff2');
			font-weight: normal;
			font-style: italic;
		}

		body {
			margin: 0;
			background-color: var(--color-background) !important;
			font-family: "Century Gothic" !important;
		}
		
		h1, h2, h3, h4, h5, h6, span, a, input, button, textarea, select {
			color: var(--color-primary);
		}

		h1, h2, h3, h4, h5, h6 {
			margin-bottom: var(--gap-1);
		}

		h1 {
			font-size: 2.5rem;
		}

		h2 {
			font-size: 2.25rem;
		}

		h3 {
			font-size: 2rem;
		}

		h4 {
			font-size: 1.75rem;
		}

		h5 {
			font-size: 1.5rem;
		}

		h6 {
			font-size: 1.25rem;
		}

		span {
			font-size: 1rem;
			line-height: 1.25rem;
		}

		.title-background {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: absolute;
			background-color: rgb(from var(--color-background) r g b / var(--background-transparency-percent));
			backdrop-filter: blur(2px) saturate(100%);
			-webkit-backdrop-filter: blur(2px) saturate(100%);
			box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
        }

		.text-container {
			width: 100%;
			margin: 0;
			padding: 0 var(--gap-1);
			text-align: center;
		}

		.text-headline {
			color: var(--color-text-headline);
		}

		.text-highlight {
			color: var(--color-accent);
			margin: 0;
		}

		.text-highlight .quote {
			all: unset;
			font-size: 2rem;
		}

		.text-gradient {
			background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.footer {
			padding: 1rem;
			background-color: var(--color-primary);
		}

		.footer a {
			color: var(--color-secondary);
			transition: all var(--hover-duration) linear;
		}

		.footer a:hover {
			color: var(--color-background);
		}
	/* #endregion */

	/* #region HEADER */
		header .mobile-menu-open,
		header .mobile-menu-close {
			top: 50%;
			position: absolute;
			transform: translateY(-50%);
			z-index: 5;
		}
	
		.header-background {
			background-color: rgb(from var(--color-background) r g b / var(--background-transparency-percent));
			backdrop-filter: blur(2px) saturate(100%);
			-webkit-backdrop-filter: blur(2px) saturate(100%);
			box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
		}
		
		.header-fixed {
			width: 100%;
			top: 0;
			left: 0;
			position: fixed;
			z-index: 999;
		}
		
		.logo-box {
			width: 75%;
			transition: all var(--hover-duration) linear;
		}

		.logo-box:hover {
			opacity: 0.6;
		}
	/* #endregion */

	/* #region MENU */
		.nav-menu {
			height: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			list-style: none;
		}
		
		#mobile-menu .nav-menu {
			width: 100%;
			flex-direction: column;
		}

		.li {
			background-color: var(--color-primary);
			color: var(--color-background);
			box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
			transition: all var(--hover-duration) linear;
		}

		.li-ozel {
			background-color: var(--color-secondary);
			color: var(--color-primary);
			box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
			transition: all var(--hover-duration) linear;
		}

		.li:hover,
		.li-ozel:hover {
			background-color: var(--color-background);
			color: var(--color-primary);
			box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 6px 1px inset;
		}

		.nav-menu li a {
			height: 100%;
			padding: 0 var(--gap-1);
			display: flex;
			align-items: center;
			color: inherit;
			font-size: 1rem;
			transition: all var(--hover-duration) linear;
		}

		.nav-menu li a:hover {
			color: var(--color-mavi-4);
		}

		.nav-menu li a i {
			margin-right: 0.5rem;
		}

		#mobile-menu .nav-menu li a {
			height: 3.5rem;
		}
	/* #endregion */

	/* #region BUTTONS */
		.button {
			padding: var(--gap-1);
			border-radius: calc(var(--border-radius-corner) / 2);
			background-color: var(--color-primary);
			color: var(--color-background);
			font-size: 1rem;
			box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
			transition: all var(--hover-duration) linear;
		}

		.button:hover {
			background-color: var(--color-background);
			color: var(--color-primary);
			box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 6px 1px inset;
		}

		.button i {
			margin-right: 0.5rem;
			font-size: 1.25rem;
		}

		.button-secondary {
			background-color: var(--color-secondary);
			color: var(--color-primary);
		}

		.button-circle {
			height: var(--height);
			aspect-ratio: 1 / 1;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: var(--border-radius);
			background-color: var(--color-primary);
			color: var(--icon-color, var(--color-background));
			font-size: var(--font-size);
			transition: all var(--hover-duration) linear;
		}

		.button-circle:hover {
			opacity: 0.6;
		}

		.button-circle-center {
			top: 50%;
			left: 50%;
			position: absolute;
			transform: translate(-50%, -50%);
			z-index: 10;
		}

		.button-circle-signal {
			height: 100%;
			aspect-ratio: 1 / 1;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
			transition: all var(--hover-duration) linear;
		}

		.button-circle-signal::before {
			content: "";
			height: 100%;
			aspect-ratio: 1 / 1;
			top: 50%;
			left: 50%;
			position: absolute;
			border-radius: var(--border-radius);
			background-color: var(--signal-bg, var(--color-background));
			z-index: -1;
			animation: animation-signal 1s cubic-bezier(1, 1, 1, 1.000) infinite backwards;
		}

		.social {
			margin-right: calc(var(--gap-1) / 2);
			gap: calc(var(--gap-1) / 4);
			display: flex;
			align-items: center;
		}

		.fixed-top-left {
			left: 1rem;
			top: 1rem;
			position: fixed;
			z-index: 999;
		}

		.fixed-bottom-right {
			right: 1rem;
			bottom: 1rem;
			position: fixed;
			z-index: 999;
		}
	/* #endregion */

	/* #region ELEMENTS */
		.banner-container {
			width: 100%;
			max-width: 1280px;
			aspect-ratio: 16 / var(--vertical-ratio, 9);
			margin: 0 auto;
			position: relative;
			overflow: hidden
		}

		.banner-container img {
			width: 100%;
			height: 100%;
			object-position: center var(--img-y, 50%);
			object-fit: cover;
		}

		.banner-img {
            background: linear-gradient(to right, var(--color-background) 0%, var(--color-background) 25%, transparent 50%), url('Banner.jpg');
            background-size: cover;
            background-position: center;
        }

		.video {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: absolute;
			backdrop-filter: blur(2px) saturate(100%);
			-webkit-backdrop-filter: blur(2px) saturate(100%);
		}

		.video-iframe {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: absolute;
			border: 0;
			z-index: 10;
		}

		.card-container {
			width: 100%;
			padding: var(--gap-1);
			gap: var(--gap-1);
			display: grid;
			grid-template-columns: minmax(0, 1fr);
		}

		.card i {
			height: var(--height);
			aspect-ratio: 1 / 1;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: var(--border-radius);
			background-color: var(--color-background-secondary);
			color: var(--icon-color, var(--color-primary));
			font-size: var(--font-size);
		}

		.logos-container {
			width: 100%;
			padding: var(--gap-1);
			gap: var(--gap-1);
			display: grid;
			grid-template-columns: minmax(0, 1fr);
		}

		@media (min-width: 27rem) {
			.logos-container {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		@media (min-width: 53rem) {
			.logos-container {
				grid-template-columns: repeat(4, minmax(0, 1fr));
			}
		}

		.logos-logo {
			height: 5rem;
			padding: 1rem;
			border-radius: var(--border-radius-corner);
			background-color: rgb(from var(--color-background-secondary) r g b / var(--background-transparency-percent));
			backdrop-filter: blur(2px) saturate(100%);
			-webkit-backdrop-filter: blur(2px) saturate(100%);
			box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
		}

		.statistics-container {
			width: 100%;
			padding: var(--gap-1);
			gap: var(--gap-1);
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-rows: auto;
			align-items: start;
		}

		.comments-score i.fa-regular {
			color: var(--color-primary);
		}

		.comments-score i:not(.fa-regular) {
			color: var(--color-secondary);
		}

		.comments-pagination {
			margin-top: var(--gap-1);
			gap: calc(var(--gap-1) / 2);
			color: var(--color-primary);
			transition: all var(--hover-duration) linear;
		}

		.comments-pagination i:hover {
			color: var(--color-background-secondary);
		}

		.contact i {
			height: 1.5rem;
			aspect-ratio: 1 / 1;
			margin-right: calc(var(--gap-1) / 2);
			display: flex;
			justify-content: center;
			color: var(--color-background);
			font-size: 1.25rem;
		}
	/* #endregion */

	/* #region ANIMATIONS */
		.animation-slide-up.is-visible {
			animation: animation-slide-up var(--animation-duration) cubic-bezier(0.15, 0.8, 0.5, 1) both;
		}

		.animation-slide-left.is-visible {
			animation: animation-slide-left var(--animation-duration) cubic-bezier(0.15, 0.8, 0.5, 1) both;
		}

		.animation-slide-right.is-visible {
			animation: animation-slide-right var(--animation-duration) cubic-bezier(0.15, 0.8, 0.5, 1) both;
		}

		.animation-scale.is-visible {
			animation: animation-scale var(--animation-duration) cubic-bezier(0.15, 0.8, 0.5, 1) both;
		}

		@keyframes animation-slide-up {
			0% {
				transform: translateY(20rem);
			}
			100% {
				transform: translateY(0);
			}
		}

		@keyframes animation-slide-left {
			0% {
				transform: translateX(-100%);
			}
			100% {
				transform: translateX(0);
			}
		}

		@keyframes animation-slide-right {
			0% {
				transform: translateX(30rem);
			}
			100% {
				transform: translateX(0);
			}
		}

		@keyframes animation-scale {
			0% {
				scale: 0.5;
			}
			100% {
				scale: 1;
			}
		}

		@keyframes animation-flip {
			0% {
				transform: translateY(-50%) perspective(400px) rotateY(90deg);
			}
			100% {
				transform: translateY(-50%) perspective(400px) rotateY(0deg);
			}
		}

		@keyframes animation-signal {
			0% {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
			100% {
				opacity: 0;
				transform: translate(-50%, -50%) scale(1.4);
			}
		}
	/* #endregion */
/* #endregion */