/**
 * CSS
 * @version 0.1
 * @author Ozhan Binici
 * last update: 2025.12.16
 * 
font-family: "archer-hairline-pro", sans-serif;
font-weight: 100;
font-style: normal;

font-family: "archer-hairline-pro", sans-serif;
font-weight: 100;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 100;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 100;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 200;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 200;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 300;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 300;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 400;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 500;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 500;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 600;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 600;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 700;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 700;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 800;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 800;
font-style: italic;

font-family: "archer-pro", sans-serif;
font-weight: 900;
font-style: normal;

font-family: "archer-pro", sans-serif;
font-weight: 900;
font-style: italic;

font-family: "archer-thin-pro", sans-serif;
font-weight: 100;
font-style: normal;

font-family: "archer-thin-pro", sans-serif;
font-weight: 100;
font-style: italic;


*/


::selection {
	background: #000000;
	color:#FFFFFF;
}

*:focus {
	outline:none;
}

:root {
	--screen-height:100vh;
	--screen-width:100vw;
}

@supports(height: 100dvh) {
	:root {
		--screen-height:100dvh;
	}
}
/*
@supports(width: 100dvw) {
	:root {
		--screen-width:100dvw;
	}
}
*/
sup {
	line-height:0.6em;
}

html {
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
	-webkit-overflow-scrolling:touch;

	font-size:1px;
}

body {
	width: 100%;
	max-width:none;
	height: auto;
	padding: 0px;
	margin: 0 auto;
	background-color:#FFFFFF;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
	font-size: 17rem;
	line-height: 24rem;
	font-family: "archer-pro", sans-serif;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-text-size-adjust: none;
	color: #000000;
}

/* COMMON ITEMS */

div {
	position:relative;
	display:block;
}

.container {
	width:100%;
	max-width:none;
	margin:0px;
	padding:0px;
}

header {
	position:relative;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	display:block;
	padding:0px;
	z-index:100;
	background:#FFFFFF;
	/*background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
	background:#FFFF00;
	background:#FFFFFF;
	border-bottom:1px solid #CCCCCC;
	background:#000000;*/
	width:100%;
	height:auto;
}


header > .container {
	display:flex;
	padding:25rem 50rem;
	width:2530rem;
	padding-right:0rem;
}

main {
	width:100%;
	height:auto;
	position:relative;
	display:block;
	padding:0rem;
	margin:0rem;
	
	min-height: calc(100vh - 165rem);
	min-height: calc(var(--screen-height) - 165rem);
}

main > .container {
	padding:0rem 30rem;
	width:2550rem;
	padding-right:0rem;
}

footer {
	position:relative;
	display:block;
	width:100%;
	height:auto;
}

footer > .container {
	padding:14rem 50rem 10rem 50rem;
}

header a#logo {
	position:relative;
	display:block;
	width:300rem;
}

header a#logo img {
	width:100%;
	height:auto;
}

header nav {
	position:relative;
	display:block;
	margin-left:auto;
	margin-right:0px;
}

#menu {
	position:relative;
	display:flex;
	margin-top:7rem;
}

#menu a {
	position:relative;
	display:block;
	margin-left:30rem;
	width:auto;
	height:50rem;
}

#menu a picture {
	position: relative;
	display: block;
	height: 100%;
	width: auto;
}
#menu a img{
	opacity:0.3;
	position:relative;
	display:block;
	width:auto;
	height:100%;


	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

#menu a:hover img,
#menu a.active img {
	opacity:1;
}


footer p {
	font-size:16rem;
	line-height:20rem;
	font-weight:400;
}



form {
	position:relative;
	display:flex;
	width:100%;
	height:auto;
	margin-bottom:16rem;
}

input[type='text'] {
	width: 100%;
	height: auto;
	border-bottom: 2rem solid #000000;
	font-size: 17rem;
	line-height: 30rem;
	color: #000000;
	padding: 0px 5rem 0px 0px;
	background: transparent;
	margin: 0px;
	margin-right: 6rem;
	letter-spacing: -0.015em;
}

input[type='submit'] {
	position: absolute;
	top: 0px;
	right: 0px;
	background: url(/images/layout/search-icon.svg);
	background-repeat: no-repeat;
	background-size: 18rem auto;
	background-position: center center;
	width: 30rem;
	height: 30rem;
	border: none;
	color: transparent;
	font-size: 0;
	padding: 0px;
	margin: 0px;
	opacity: 0.6;
	opacity: 1;
	cursor: pointer;
}


@media (max-width:2400px){
	header > .container {
		width:2170rem;
	}
	main > .container {
		width:2190rem;
	}
}

@media (max-width:2030px){
	header > .container {
		width:1810rem;
	}
	main > .container {
		width:1830rem;
	}
}
@media (max-width:1670px){
	header > .container {
		width:1450rem;
	}
	main > .container {
		width:1470rem;
	}
}

@media (max-width:1300px){
	header > .container {
		width:1090rem;
		padding:20rem 40rem;
		padding-right:0rem;
	}
	
	main > .container {
		width:1110rem;
		padding:0rem 20rem;
		padding-right:0rem;
	}
}

@media (max-width:910px){
	header > .container {
		width:730rem;
		padding:20rem 25rem;
	}
	main > .container {
		width:750rem;
		padding:0rem 10rem;
	}
	
	footer > .container {
		padding:10rem 25rem;
	}
	
	#menu {
		flex-direction:column;
		position:absolute;
		top:0rem;
		right:0rem;
		background-color:#FFFFFF;
		padding-bottom:10rem;
		width:auto;
		height:auto;
		padding-left:10rem;
	}

	#menu a {
		margin-left:0rem;
		width:50rem;
	}
	#menu a img {
		margin:0 auto;
	}

	#menu li:last-child a {
		margin-left:0px;
	}
	#menu li {
		display:none;
	}

	#menu li:has(.active){
		display:block;
	}

	#menu.open li {
		display:block;
		margin-bottom:15rem;
	}
	#menu.open li:last-child {
		margin-bottom:0px;
	}
}

@media (max-width:520px){
	header > .container {
		width:380rem;
		padding:20rem;
	}
	main > .container {
		width:380rem;
		padding:0rem 10rem;
	}
	#wrapper {
		padding:0 5rem;
	}
	footer > .container {
		padding:10rem 20rem;
	}
	
	header a#logo {
		width:220rem;
	}
	#menu {
		margin-top:0rem;
		top:-5rem;
	}
	
	header nav {
		margin-right:-10rem;
	}	
}

@media (hover:none) {
	/*
	.works a.work .card .inner {
		opacity:1;
	}
	*/
}

@media screen and (orientation:portrait) {
	/*
	body.home .swiper.horizontal {
		display:none !important;
	}
	body.home .swiper.vertical {
		display:block !important;
	}
	*/
}