<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Montserrat',Arial,sans-serif;
}


body{

background:#f5f5f5;
color:#000;

}


/* İçerik */

.content{

margin-left:260px;
padding:40px;

}



/* Hat kutuları */

.line{

background:white;
border:1px solid #ddd;
border-radius:10px;
margin-bottom:12px;
overflow:hidden;

}


.line-title{

display:flex;
align-items:center;
gap:12px;

padding:14px 18px;
font-size:20px;
cursor:pointer;
background:#fff;
color:#222;
border-left:4px solid #333;
transition:.2s;

}


.line-logo{

width:34px;
height:34px;
object-fit:contain;
flex-shrink:0;

}



/* Hat renkleri */


.line-title.m4{

border-left-color:#e91977;

}


.line-title.m5{

border-left-color:#672c65;

}


.line-title.m8{

border-left-color:#427bbf;

}


.line-title.marmaray{

border-left-color:#65656a;

}



.line-title:hover{

background:#eee;

}



.line-content{

display:none;
padding:18px;

}



.line-content.active{

display:flex;
gap:25px;

}



.info{

width:45%;

}



.info p{

margin-bottom:10px;
line-height:1.5;
color:#555;

}



.route{

width:55%;

}



.route img{

width:100%;
height:300px;
object-fit:cover;
border-radius:10px;
border:1px solid #ddd;

}



.route-placeholder{

height:300px;
background:#e8e8e8;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:#777;

}



/* Banner */


.hero {
    position: relative;
    width: 100%;
    height: 320px;
    
    /* Yönü 'to top' (yukarı doğru) yaptık: Alt taraf %65 koyu, üst taraf %10 hafif gri */
    background-image: 
        linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.1)), 
        url('../img/banner.webp'); 
        
    background-size: cover;
    background-position: center 25%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
}

/* NOT: .hero img komutunu tamamen sildik, artık arka plan olarak çalışıyor */

.hero-content {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 2;
    color: white;
    /* Yazıların arkasına hafif bir gölge atarak okunabilirliği zirveye çıkardık */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); 
}

.hero-content h1 {
    font-size: 42px; /* Mobilde patlamasın diye ideal boyuta çektim */
    font-weight: 700;
    margin-bottom: 8px;
}

.hero-content p {
    font-size: 18px;
    color: #f0f0f0;
    font-weight: 600;
}



/* Mobil */

@media(max-width:800px){

.sidebar{

    position:fixed;
    left:-280px;
    top:0;

    width:260px;
    height:100vh;

    background:white;

    transition:.3s ease;
    z-index:1000;

}


.sidebar.active{

    left:0;

}


.content{

    margin-left:0;
    padding:20px;

}

}
