@import url(https://fonts.googleapis.com/css?family=Roboto:400);

$blue: #0097bf;
$white: #fff;
$black: #000;
$text: #424242;

@mixin cf {
	&:before,
	&:after {
		content: '';
		display: table;
	}

	&:after {
		clear: both;
	}
}



.ara {
	max-width: 720px;
	margin: 2em auto 10em;
}

.header-ara{
	@include cf;
	position: relative;
	padding-right: 3em;
}

.menu {
	display: inline-block;
	float: right;
	list-style-type: none;
	margin: 0;
	padding: 0;

	li {
		display: inline-block;

		a {
			color: $blue;
			display: block;
			padding: 10px;
			position: relative;
			transition: color 0.3s;
			text-decoration: none;
		}
	}
}

.search-button {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translate(0,-50%);
}

.search-toggle {
	position: relative;
	display: block;
	height: 10px;
	width: 10px;

	&::before,
	&::after {
		content: '';
		position: absolute;
		display: block;
		transition: all 0.1s;
	}

	&::before {
		border: 2px solid $blue;
		border-radius: 50%;
		width: 100%;
		height: 100%;
		left: -2px;
		top: -2px;
	}

	&::after {
		height: 2px;
		width: 7px;
		background: $blue;
		top: 10px;
		left: 8px;
		transform: rotate(45deg);
	}

	&.active {
		
		&::before{
			width: 0;
			border-width: 1px;
			border-radius: 0;
			transform: rotate(45deg);
			top: -1px;
			left: 4px;
		}

		&::after {
			width: 12px;
			left: -1px;
			top: 4px;
		}
	}
}

.search-input {

	&:focus {
		outline: none;
	}
}


#arama {
	border-bottom: 2px solid $blue;

	.search-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100%;
		max-height: 0;
		transform: translateY(100%);
		background-color: $blue;
		transition: all 0.3s;

		.search-input {
			width: 100%;
			height: 100%;
			padding: 0 1em;
			border: 0;
			background-color: transparent;
			opacity: 0;
      color: $white;

			&::-webkit-input-placeholder {
				color: rgba($white, 0.4);
			}
		}
	}

	&.show {

		.search-box {
			max-height: 40px;

			.search-input {
				opacity: 1;
			}
		}
	}
}