/* CSS Styles */
@font-face {
  font-family: 'ford-light';
  src: url('../fonts/FordF1-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

/* Medium */
@font-face {
  font-family: 'ford-medium';
  src: url('../fonts/FordF1-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

/* Regular */
@font-face {
  font-family: 'ford-regular';
  src: url('../fonts/FordF1-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* SemiBold */
@font-face {
  font-family: 'ford-semibold';
  src: url('../fonts/FordF1-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: 'ford-bold';
  src: url('../fonts/FordF1-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
html, body {
	margin:0;
	background-color:#1a1a1a;
}
.d-none {
	display:none !important;
}
.banner {
	position:absolute !important;
	left:calc(50% - 485px);
	top:calc(50% - 125px);
}
.banner {
	position:relative;
	width:970px;
	height:250px;
	overflow:hidden;
	font-family:'ford-regular', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size:14px;
	color:#000959;
	background:#ffffff;
	user-select:none;
	border:1px solid #ebf0f1;
	box-sizing:border-box;
	cursor:pointer;
}
.content {
	padding:16px;
}
.ford-online-logo {
	position:absolute;
	top:16px;
	right:16px;
	height:56px;
	aspect-ratio:82/47;
	background:url(../images/ford-online-logo.svg) center center no-repeat;
	background-size:contain;
	z-index:2;
	filter:brightness(0) invert(1);
}
.koc-logo {
	position:absolute;
	right:16px;
	bottom:16px;
	width:70px;
	height:24px;
	background:url(../images/koc-logo.svg) center center no-repeat;
	background-size:contain;
	/*filter:brightness(0) invert(1);*/
	z-index:1;
}
.text-heading {
	font-size:22px;
	font-weight:900;
}
.text-details {
	font-size:18px;
	font-weight:400;
}
.cta {
	display:inline-block;
	font-weight:700;
	color:#ffffff;
	text-align:center;
	padding:10px 24px;
	background-color:#1700f4;
	border-radius:32px;
	transition:all ease-in-out .2s;
	cursor:pointer;
}
.cta:hover {
	background-color:#000959;
}
.color-buttons {
	display:flex;
	gap:32px;
	margin:8px 0;
}
.color-btn {
	position:relative;
	width:42px;
	height:42px;
	border-radius:12px;
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	transition:all ease-in-out .2s;
	cursor:pointer;
}
.color-btn:hover,
.color-btn.active {
	transform:scale(1.2);
}
.color-btn.active::after {
	position:absolute;
	right:-6px;
	top:-6px;
	content:'';
	display:block;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#1700f4 url(../images/icon-check.svg) center top 5px no-repeat;
	background-size:8px;
}
.color-btn::before {
	position:absolute;
	left:-10%;
	top:-10%;
	content:'';
	display:none;
	width:120%;
	height:120%;
	border-radius:50%;
	z-index:-1;
}
.color-btn.active::before {
	display:block;
}
.color-btn:nth-child(1).active::before {background-color:#a61e23;} /* Fantastik Kırmızı, Özel Metalik */
.color-btn:nth-child(2).active::before {background-color:#293f7e;} /* Okyanus Mavisi, Metalik */
.color-btn:nth-child(3).active::before {background-color:#808282;} /* Kurşun Gri, Metalik */
.color-btn:nth-child(4).active::before {background-color:#0e0f11;} /* Akik Siyah, Metalik */
.color-btn:nth-child(5).active::before {background-color:#919d99;} /* Kaktüs Gri, Opak */
.color-btn:nth-child(6).active::before {background-color:#ced5de;} /* Buz Beyazı, Opak */

.color-btn img {
	display:block;
	width:60px;
	height:60px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	object-fit:contain;
}
.color-details {
	position:relative;
	margin-left:8px;
	height:60px;
}
.color-detail {
	position:absolute;
	left:0;
	top:0;
	white-space:nowrap;
	transition:all ease-in-out .2s;
	opacity:0;
	transform:scale(0);
}
.color-detail.active {
	opacity:1;
	transform:scale(1);
}
.color-name {
	font-size:24px;
	font-weight:900;
}
.color-spec {
	font-size:16px;
	font-weight:400;
}
.cars {
	position:absolute;
	right:0;
	top:0;
	width:460px;
	height:250px;
	background:url(../images/showroom.jpg) center center no-repeat;
	background-size:cover;
}
.car {
	position:absolute;
	left:970px;
	top:20px;
	height:234px;
	aspect-ratio:677/405;
	opacity:0;
	transition:all ease-in-out .35s;
}
.car.active {
	opacity:1;
	left:-40px;
}
.car img {
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}

.ford-online-logo {						animation:bring 1s 0.0s forwards;transform:scale(0);opacity:0;}
.cars {									animation:bring 1s 0.2s forwards;transform:scale(0);opacity:0;}
.car {									animation:bring 1s 0.4s forwards;transform:scale(0);opacity:0;}
.koc-logo {								animation:bring 1s 0.6s forwards;transform:scale(0);opacity:0;}
.text-heading {transform-origin:left;	animation:bring 1s 0.8s forwards;transform:scale(0);opacity:0;}
.text-details {transform-origin:left;	animation:bring 1s 1.0s forwards;transform:scale(0);opacity:0;}
.color-btn:nth-child(1) {				animation:bring 1s 1.2s forwards;transform:scale(0);opacity:0;}
.color-btn:nth-child(2) {				animation:bring 1s 1.4s forwards;transform:scale(0);opacity:0;}
.color-btn:nth-child(3) {				animation:bring 1s 1.6s forwards;transform:scale(0);opacity:0;}
.color-btn:nth-child(4) {				animation:bring 1s 1.8s forwards;transform:scale(0);opacity:0;}
.color-btn:nth-child(5) {				animation:bring 1s 2.0s forwards;transform:scale(0);opacity:0;}
.color-btn:nth-child(6) {				animation:bring 1s 2.2s forwards;transform:scale(0);opacity:0;}

@keyframes bring {
	0% {
		transform:scale(0);opacity:0;
	}
	100% {
		transform:scale(1);opacity:1;
	}
}