/* --- Genel Ayarlar --- */
:root {
    --speed: 600ms; /* Geçiş hızı */
    
    /* BURAYI DEĞİŞTİRDİK: Daha az kayması için oranları kıstık */
    --hover-width: 60%;  /* Eskiden %75 idi, şimdi %60 (Daha az genişler) */
    --other-width: 40%;  /* Eskiden %25 idi, şimdi %40 (Daha az daralır) */
    
    /* Siyahlık Ayarları */
    --overlay-dark: rgba(0, 0, 0, 0.8); /* Başlangıçtaki koyuluk */
    --overlay-light: rgba(0, 0, 0, 0.3); /* Üstüne gelinceki aydınlık */
}

html, body {
    padding: 0;
    margin: 0;
    font-family: 'Arial', sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #222;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* --- MASAÜSTÜ (Yan Yana) TASARIM --- */
.split {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--speed) ease-in-out; 
}

.split.left {
    left: 0;
}

.split.right {
    right: 0;
}

/* Arka Plan Resimleri */
.background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform var(--speed) ease-in-out;
    opacity: 1; 
}

/* --- SİYAH OPAK KATMANLAR (Overlay) --- */
.split::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-dark); /* Başlangıçta koyu */
    z-index: 1;
    transition: background-color var(--speed) ease-in-out;
}

/* Masaüstü Hover Efektleri (Genişleme) */
/* Artık sadece %60 genişleyip %40 daralacaklar */
.hover-left .left { width: var(--hover-width); }
.hover-left .right { width: var(--other-width); }
.hover-right .right { width: var(--hover-width); }
.hover-right .left { width: var(--other-width); }

/* --- HOVER İLE AYDINLANMA --- */
.hover-left .left::before {
    background-color: var(--overlay-light);
}

.hover-right .right::before {
    background-color: var(--overlay-light);
}

/* Yazı ve İçerik */
.content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    white-space: nowrap;
    z-index: 2;
    transition: all var(--speed) ease-in-out;
}

.rota-title {
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.project-title {
    font-size: 2rem;
    font-weight: 300;
    margin-top: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.btn {
    display: block;
    margin-top: 1.5rem;
    padding: 1rem 2rem;
    border: 3px solid #fff;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.2s, color 0.2s;
}

.btn:hover {
    background-color: #fff;
    color: #333;
}

/* --- MOBİL UYUMLULUK (Alt Alta) --- */
@media(max-width: 800px) {
    .split {
        width: 100% !important;
        height: 50%;
    }
    .split.left { top: 0; left: 0; }
    .split.right { top: 50%; right: 0; }

    /* Mobilde de hareket oranlarını azalttık */
    .hover-left .left {
        height: var(--hover-width); /* %60 Yükseklik */
        z-index: 10;
    }
    .hover-left .right {
        height: var(--other-width); /* %40 Yükseklik */
        top: 60%; /* %60'tan başlasın */
    }
    .hover-right .right {
        height: var(--hover-width); /* %60 Yükseklik */
        top: 40%; /* %40'tan başlasın */
        z-index: 10;
    }
    .hover-right .left {
        height: var(--other-width); /* %40 Yükseklik */
    }

    .hover-left .left::before, 
    .hover-right .right::before {
        background-color: var(--overlay-light);
    }

    .rota-title { font-size: 2rem; }
    .project-title { font-size: 1.2rem; }
    .btn { padding: 0.7rem 1.2rem; width: 100px; font-size: 0.9rem; }
}