body{
	background-color: #232323;
	padding: 0;
	margin: 0;
	height: 100vh;
	width:100vw;
	display:flex;
	align-items: center;
	justify-content: center;
}

.loader{
	-webkit-perspective:700px;
	perspective: 700px;
	text-align: center;
}

.loader>span{
	font-size: 130px;
	font-family: "franklin gothic medium",sans-serif;
	display: inline-block;
	animation:flip 2.6s infinite linear;
	transform-origin:0 70%;
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
}

@keyframes flip{
	35%{
		transform: rotateX(360deg);
	}
	100%{
		transform: rotatex(360deg);
	}
}

.loader>span:nth-child(odd){
	color:#b0b0b0;
}

.loader>span:nth-child(even){
	color:#c3071a;
}

.loader>span:nth-child(2){
	animation-delay: 0.3s;
}

.loader>span:nth-child(3){
	animation-delay: 0.6s;
}

.loader>span:nth-child(4){
	animation-delay: 0.9s;
}

.loader>span:nth-child(5){
	animation-delay: 1.2s;
}

.loader>span:nth-child(6){
	animation-delay: 1.5s
}

.loader>span:nth-child(7){
	animation-delay: 1.8s
}

.loader>span:nth-child(8){
	animation-delay: 2.1s
}

.loader>span:nth-child(9){
	animation-delay: 2.4s
}

.loader>span:nth-child(10){
	animation-delay: 2.7s
}

.loader>span:nth-child(11){
	animation-delay: 3.0s
}

.loader>span:nth-child(12){
	animation-delay: 3.3s
}

.loader>span:nth-child(13){
	animation-delay: 3.6s
}

.loader>span:nth-child(14){
	animation-delay: 3.9s
}

.loader>span:nth-child(15){
	animation-delay: 4.2s
}

.content {
            display: none;
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .split-container {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
        }

        /* Web görünümü - Yatay bölme */
        @media (min-width: 768px) {
            .split-container {
                flex-direction: row;
            }
            .split-section {
                position: absolute;
                height: 100%;
                overflow: hidden;
            }
            .left-section {
                width: 60%;
                left: 0;
                clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
            }
            .right-section {
                width: 60%;
                right: 0;
                clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
            }
        }

        /* Mobil görünümü - Dikey bölme */
        @media (max-width: 767px) {
            .split-container {
                flex-direction: column;
            }
            .split-section {
                position: absolute;
                width: 100%;
                overflow: hidden;
            }
            .top-section {
                height: 60%;
                top: 0;
                clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
            }
            .bottom-section {
                height: 60%;
                bottom: 0;
                clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
            }
        }

        .section-link {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            position: relative;
            transition: transform 0.3s ease;
        }

        .section-link:hover {
            transform: scale(1.03);
        }

        .section-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            z-index: 1;
        }

        .section-link span {
            position: relative;
            z-index: 2;
            padding: 20px;
            text-align: center;
        }

        .otomotiv-bg {
            background: url('otomotiv.png') center/cover no-repeat;
        }

        .insaat-bg {
            background: url('insaat/images/slider.jpg') center/cover no-repeat;
        }

        .divider-line {
            position: absolute;
            background-color: #f0f0f0;
            z-index: 10;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }